/* ══════════════════════════════════════════════
BRAND TOKENS (canonical: brand-tokens.json)
φ = 1.618 · Breakpoints: sm 480 / md 768 / lg 1080
══════════════════════════════════════════════ */
/* DM Sans (UI) + DM Mono (code/data) — loaded here so any page
linking this stylesheet gets the fonts without extra tags */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=DM+Mono:wght@400;500&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
p {
margin-bottom: var(--phi-3);
}
p:last-child {
margin-bottom: 0;
}
:root {
/* Base — warm parchment */
--bg: #FAF3E8;
--bg-w: #ffffff; /* highlight surface — white card on parchment; use sparingly */
--surface: #F2E8D8;
--surface-r: #EDE0CB;
--border: #D8CBBA;
--border-s: #E6DACE;
/* Text — warm brown-black */
--text: #1C1410;
--text-2: #5A4E42;
--text-m: #9A8878;
--text-inv: #FAF3E8;
/* Accent: Magenta */
--mg: #B8004E;
--mg-h: #D4005A;
--mg-s: #F5E0EB;
--mg-dk: #E8336E;
/* Accent: Yellow */
--yw: #F0C040;
--yw-w: #FBF0C4;
--yw-d: #D4A020;
/* Ink — dark surfaces */
--ink: #1C1410;
--ink-s: #272018;
--ink-b: rgba(255, 255, 255, 0.09);
/* Status — warm-tinted */
--ok: #3A5E2A;
--ok-bg: #EEF3E0;
--ok-br: #B8CC90;
--wn: #7A4A10;
--wn-bg: #FBF0D4;
--wn-br: #E8C06A;
/* Danger — warm red, distinct from brand magenta */
--dg: #9A1A0A; /* text/icon — deep warm red, clearly not brand colour */
--dg-bg: #FAE8E4; /* panel/badge background */
--dg-br: #E8A898; /* border */
/* Info — slate-blue, warm undertone */
--in: #2A4A6E;
--in-bg: #E8EEF5;
--in-br: #9AB0C8;
/* Typography */
--font: 'DM Sans', sans-serif;
--mono: 'DM Mono', monospace;
/* Spacing — golden ratio (φ⁰–φ⁸, base 4px) */
--phi-1: 4px;
--phi-2: 6px;
--phi-3: 10px;
--phi-4: 16px;
--phi-5: 26px;
--phi-6: 42px;
--phi-7: 68px;
--phi-8: 110px;
/* Border radius */
--r-sm: 4px;
--r-base: 8px;
--r-md: 12px;
--r-lg: 18px;
--r-xl: 28px;
--r-full: 9999px;
/* Shadow — warm brown undertone */
--sh-sm: 0 1px 3px rgba(28, 20, 16, 0.07);
--sh-base: 0 2px 8px rgba(28, 20, 16, 0.09);
--sh-md: 0 4px 16px rgba(28, 20, 16, 0.11);
/* Motion */
--ease: cubic-bezier(0.65, 0, 0.35, 1);
--ease-o: cubic-bezier(0.0, 0.0, 0.35, 1);
/* Layout */
--max-w: 1080px;
}
/* Responsive spacing — steps down one φ level per breakpoint */
@media (max-width: 768px) {
:root { --phi-8: 68px; --phi-7: 42px; --phi-6: 26px; --phi-5: 16px; }
}
@media (max-width: 480px) {
:root { --phi-8: 42px; --phi-7: 26px; --phi-6: 16px; --phi-5: 10px; }
}
/* ══════════════════════════════════════════════
BASE
══════════════════════════════════════════════ */
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
font-size: 1rem;
line-height: 1.5;
}
/* ── Container ── */
.container {
width: 100%;
max-width: var(--max-w);
margin: 0 auto;
padding-left: var(--phi-6);
padding-right: var(--phi-6);
}
@media (max-width: 480px) {
.container { padding-left: var(--phi-5); padding-right: var(--phi-5); }
}
/* ── Section shells ── */
.section { padding: var(--phi-8) 0; }
.section-dark { background: var(--ink); color: var(--text-inv); }
.section-surface { background: var(--surface); }
.section-sm { padding: var(--phi-6) 0; }
/* ── Geometric decoration (SVG behind content) ── */
.geo { position: relative; overflow: hidden; }
.geo svg.deco {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none; z-index: 0;
}
.geo .gc { position: relative; z-index: 1; }
/* ══════════════════════════════════════════════
STICKY NAV — shown when user scrolls past hero
(legacy: used on standalone pages before shared
site-header was introduced — keep for compat)
══════════════════════════════════════════════ */
.sticky-nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: rgba(242, 232, 216, 0.95);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
height: 52px;
display: flex; align-items: center;
transform: translateY(-100%);
transition: transform 300ms var(--ease);
}
.sticky-nav.visible { transform: translateY(0); }
.sticky-inner { display: flex; justify-content: space-between; align-items: center; }
.nav-logo img { height: 26px; display: block; }
/* ══════════════════════════════════════════════
SITE HEADER — shared across all pages
Always visible; sticky at top of viewport.
Desktop: logo | nav links | cta button
Mobile: logo | burger → full-screen overlay
══════════════════════════════════════════════ */
.site-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 200;
background: var(--surface);
border-bottom: 1px solid var(--border);
height: 56px;
display: flex; align-items: center;
}
/* Three-column flex row inside the container */
.site-nav {
display: flex; align-items: center;
justify-content: space-between; gap: var(--phi-5);
}
.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img { height: 24px; display: block; }
/* Desktop nav links (hidden on mobile) */
.site-nav-links {
display: flex; align-items: center; gap: var(--phi-5);
}
.site-nav-link {
font-size: 0.9375rem; font-weight: 500;
color: var(--text-2); text-decoration: none;
padding-bottom: 2px;
border-bottom: 2px solid transparent;
transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.site-nav-link:hover { color: var(--text); }
/* Active page indicator — set aria-current="page" on the matching link */
.site-nav-link[aria-current="page"] {
color: var(--text);
border-bottom-color: var(--mg);
}
/* Right-side actions: CTA button + burger toggle */
.site-nav-actions {
display: flex; align-items: center; gap: var(--phi-4); flex-shrink: 0;
}
/* Burger button — three lines, shown only on mobile */
.burger {
display: none; /* hidden on desktop */
flex-direction: column; justify-content: center; align-items: center;
gap: 5px; width: 40px; height: 40px;
background: none; border: none; cursor: pointer; padding: 0;
border-radius: var(--r-base);
transition: background 150ms var(--ease);
}
.burger:hover { background: var(--border); }
.burger span {
display: block; width: 22px; height: 2px;
background: var(--text); border-radius: 2px;
transition: opacity 200ms var(--ease), transform 200ms var(--ease);
transform-origin: center;
}
/* Morph to × when overlay is open */
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 768px) {
/* Hide desktop nav links and CTA button; show burger */
.site-nav-links { display: none; }
.site-nav-actions .btn { display: none; }
.burger { display: flex; }
}
/* ── MOBILE FULL-SCREEN OVERLAY ── */
.mobile-menu {
position: fixed; inset: 0; z-index: 199;
background: var(--ink);
display: flex; flex-direction: column;
justify-content: center; align-items: flex-start;
padding: var(--phi-7) var(--phi-6);
/* Hidden by default — toggled by JS */
visibility: hidden; opacity: 0;
transition: opacity 250ms var(--ease), visibility 250ms var(--ease);
}
.mobile-menu.open {
visibility: visible; opacity: 1;
}
/* Close (×) button — top-right corner */
.mobile-menu-close {
position: absolute; top: var(--phi-5); right: var(--phi-5);
width: 44px; height: 44px;
background: rgba(255, 255, 255, 0.07); border: none;
border-radius: var(--r-base); cursor: pointer;
color: var(--text-inv); font-size: 1.125rem; line-height: 1;
display: flex; align-items: center; justify-content: center;
transition: background 150ms var(--ease);
}
.mobile-menu-close:hover { background: rgba(255, 255, 255, 0.14); }
/* Nav links inside the overlay */
.mobile-menu-nav {
display: flex; flex-direction: column;
width: 100%; margin-bottom: var(--phi-7);
}
.mobile-nav-link {
display: flex; align-items: center;
min-height: 56px; /* large tap target */
font-size: 1.5rem; font-weight: 600;
color: rgba(250, 243, 232, 0.70); text-decoration: none;
padding: var(--phi-4) 0;
transition: color 150ms var(--ease);
}
.mobile-nav-link:hover,
.mobile-nav-link[aria-current="page"] { color: var(--text-inv); }
/* Pages using the site-header need padding so content isn't hidden behind it */
body.has-site-header { padding-top: 56px; }
/* ══════════════════════════════════════════════
SITE FOOTER — shared across all pages
Dark ink background, 4-column grid.
══════════════════════════════════════════════ */
.site-footer {
background: var(--ink);
border-top: 1px solid var(--ink-b);
padding: var(--phi-8) 0 var(--phi-6);
}
/* 4-col → 2-col (md) → 1-col (sm) */
.site-footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--phi-6);
margin-bottom: var(--phi-7);
}
@media (max-width: 768px) {
.site-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.site-footer-grid { grid-template-columns: 1fr; }
}
/* Column header label — mono, muted */
.site-footer-col-label {
font-family: var(--mono); font-size: 0.6875rem;
font-weight: 500; letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(250, 243, 232, 0.35);
margin-bottom: var(--phi-4); display: block;
}
/* Individual footer links */
.site-footer-link {
display: block; font-size: 0.9375rem;
color: rgba(250, 243, 232, 0.55); text-decoration: none;
margin-bottom: var(--phi-3);
transition: color 150ms var(--ease);
}
.site-footer-link:hover { color: var(--text-inv); }
/* Muted / placeholder links not yet live */
.site-footer-link.muted { color: rgba(250, 243, 232, 0.25); cursor: default; }
.site-footer-link.muted:hover { color: rgba(250, 243, 232, 0.25); }
/* Bottom bar: copyright left, tagline right */
.site-footer-bottom {
display: flex; justify-content: space-between; align-items: center;
padding-top: var(--phi-5);
border-top: 1px solid var(--ink-b);
font-family: var(--mono); font-size: 0.75rem;
color: rgba(250, 243, 232, 0.25);
}
@media (max-width: 480px) {
.site-footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--phi-2); }
}
/* Footer logo column: tagline below logo */
.site-footer-tagline {
font-size: 0.875rem; color: rgba(250, 243, 232, 0.45);
line-height: 1.5; margin-top: var(--phi-4); max-width: 240px;
}
.site-footer-logo {
filter: brightness(0) invert(1);
opacity: 0.80;
margin-bottom: var(--phi-4);
}
/* ══════════════════════════════════════════════
BUTTONS
══════════════════════════════════════════════ */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--phi-2); font-family: var(--font); font-weight: 600;
font-size: 0.9375rem; border-radius: var(--r-base);
border: 1.5px solid transparent; cursor: pointer;
text-decoration: none; line-height: 1; white-space: nowrap;
transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.btn-primary { background: var(--mg); color: var(--text-inv); border-color: var(--mg); padding: 13px 26px; }
.btn-primary:hover { background: var(--mg-h); border-color: var(--mg-h); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border); padding: 13px 26px; }
.btn-secondary:hover { background: var(--surface-r); }
.btn-lg { padding: 15px 32px; font-size: 1rem; }
.btn-block { display: block; width: 100%; text-align: center; justify-content: center; }
@media (max-width: 480px) {
.btn-row { flex-direction: column; }
.btn-row .btn { width: 100%; justify-content: center; }
}
/* ══════════════════════════════════════════════
TAGS & BADGES
══════════════════════════════════════════════ */
.tag {
display: inline-block; background: var(--mg-s); color: var(--mg);
font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-sm);
}
/* Base — structural only; colour applied via variant modifier */
.status-badge {
display: inline-flex; align-items: center; gap: var(--phi-2);
font-size: 13px; font-weight: 600; padding: 5px 12px;
border-radius: var(--r-full); border: 1px solid;
}
.status-badge .dot {
width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
/* success — green: engagement live, confirmed, available */
.status-badge.success {
background: var(--ok-bg); color: var(--ok); border-color: var(--ok-br);
}
.status-badge.success .dot { background: var(--ok); }
/* warning — amber: limited, expiring, attention needed */
.status-badge.warning {
background: var(--wn-bg); color: var(--wn); border-color: var(--wn-br);
}
.status-badge.warning .dot { background: var(--wn); }
/* error — danger: unavailable, blocked, issue */
.status-badge.error {
background: var(--dg-bg); color: var(--dg); border-color: var(--dg-br);
}
.status-badge.error .dot { background: var(--dg); }
/* info — neutral: passive state, no urgency */
.status-badge.info {
background: var(--surface); color: var(--text-2); border-color: var(--border);
}
.status-badge.info .dot { background: var(--text-m); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.edot {
width: 6px; height: 6px; background: var(--mg); border-radius: 50%;
animation: pulse 2s infinite; flex-shrink: 0;
}
/* ══════════════════════════════════════════════
SECTION LABELS
══════════════════════════════════════════════ */
.sec-label {
font-size: 11px; font-weight: 600; letter-spacing: 0.10em;
text-transform: uppercase; color: var(--text-m); margin-bottom: var(--phi-4);
}
.section-dark .sec-label { color: rgba(250, 243, 232, 0.40); }
/* ══════════════════════════════════════════════
TYPOGRAPHY
══════════════════════════════════════════════ */
h1 { font-size: clamp(26px, 4vw, 52px); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; }
h2 {
font-size: clamp(22px, 3vw, 38px);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.02em;
margin-top: var(--phi-6);
margin-bottom: var(--phi-5);
}
h3 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; }
.section-dark h2 { color: var(--text-inv); }
.section-dark h3 { color: var(--text-inv); }
/* Keep section labels visually attached to immediate headings */
.sec-label + h2,
.sec-label + h3 {
margin-top: 0;
}
/* Plain legal content pages */
.legal-meta {
color: var(--text-2);
margin-top: var(--phi-4);
}
.legal-content {
margin-top: var(--phi-6);
}
.legal-content p {
color: var(--text-2);
}
.legal-link {
color: var(--text);
text-decoration: underline;
}
/* Yellow marker — one per headline max */
.mark { background: var(--yw); color: var(--text); padding: 0 5px 2px; border-radius: 3px; }
/* Native element — same visual treatment as .mark class */
mark { background: var(--yw); color: var(--text); padding: 0 5px 2px; border-radius: 3px; }
/* ══════════════════════════════════════════════
CARD
══════════════════════════════════════════════ */
.card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-md); padding: var(--phi-6);
}
.card-raised {
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--r-md); padding: var(--phi-6);
box-shadow: var(--sh-md);
}
/* White card — elevates one option visually above the parchment base.
Use for: preferred pricing tier, active/selected card state. At most one per context. */
.card-white {
background: var(--bg-w);
box-shadow: var(--sh-md);
}
.section-dark .card { background: var(--ink-s); border-color: var(--ink-b); }
/* Callout — yellow wash, no border */
.callout {
background: var(--yw-w);
border-radius: var(--r-md);
padding: var(--phi-5) var(--phi-6);
font-size: 1rem; color: var(--text); font-weight: 500; line-height: 1.6;
}
/* ══════════════════════════════════════════════
HERO
══════════════════════════════════════════════ */
.hero {
background: var(--surface);
position: relative; overflow: hidden;
}
.hero-nav {
border-bottom: 1px solid var(--border-s);
position: relative; z-index: 1;
}
.hero-nav-inner {
display: flex; justify-content: space-between; align-items: center;
height: 52px;
}
.hero-nav-logo img { height: 26px; display: block; }
.hero svg.deco {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none; z-index: 0;
}
/* φ-split: 61.8% text / 38.2% illustration */
.hero-split {
display: grid;
grid-template-columns: 61.8% 38.2%;
gap: var(--phi-7);
align-items: center;
padding: var(--phi-7) 0 var(--phi-8);
position: relative; z-index: 1;
}
@media (max-width: 768px) {
.hero-split { grid-template-columns: 1fr; padding: var(--phi-6) 0 var(--phi-7); }
.hero-illustration { display: none; }
}
.hero-product-label {
font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--mg);
margin-bottom: var(--phi-3); display: block;
}
.hero-eyebrow {
display: inline-flex; align-items: center; gap: var(--phi-3);
font-size: 13px; font-weight: 500; color: var(--text-m);
margin-bottom: var(--phi-5);
}
.hero-h {
font-size: clamp(28px, 4.5vw, 58px); font-weight: 700;
line-height: 1.06; letter-spacing: -0.03em;
margin-bottom: var(--phi-5);
}
.hero-sub {
font-size: clamp(15px, 1.5vw, 18px); line-height: 1.7;
color: var(--text-2); max-width: 480px;
margin-bottom: var(--phi-5);
}
/* Hero bullet list — short scope signals */
.hero-bullets {
list-style: none;
display: flex; flex-direction: column; gap: var(--phi-2);
margin-bottom: var(--phi-6);
}
.hero-bullets li {
font-size: 0.9375rem; font-weight: 500; color: var(--text-2);
display: flex; align-items: center; gap: var(--phi-3);
}
.hero-bullets li::before {
content: ''; width: 5px; height: 5px; border-radius: 50%;
background: var(--mg); flex-shrink: 0;
}
.hero-cta {
display: flex; gap: var(--phi-4); flex-wrap: wrap;
margin-bottom: var(--phi-4);
}
.hero-meta { font-size: 12px; color: var(--text-m); }
/* Hero entry animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.hero-product-label { animation: fadeUp 0.40s var(--ease-o) 0.00s both; }
.hero-eyebrow { animation: fadeUp 0.40s var(--ease-o) 0.06s both; }
.hero-h { animation: fadeUp 0.45s var(--ease-o) 0.12s both; }
.hero-sub { animation: fadeUp 0.45s var(--ease-o) 0.20s both; }
.hero-bullets { animation: fadeUp 0.45s var(--ease-o) 0.24s both; }
.hero-cta { animation: fadeUp 0.45s var(--ease-o) 0.30s both; }
.hero-meta { animation: fadeUp 0.45s var(--ease-o) 0.38s both; }
/* ── Dashboard comparison illustration ── */
.dash-comparison {
display: flex; gap: var(--phi-3); align-items: flex-start;
}
.dash-arrow {
display: flex; align-items: center; justify-content: center;
color: var(--mg); font-weight: 700; font-size: 16px;
padding-top: 42px;
flex-shrink: 0;
}
.dash-mock {
flex: 1; min-width: 0;
border-radius: var(--r-md); overflow: hidden;
border: 1px solid var(--border);
background: var(--bg);
font-family: var(--font);
}
/* macOS-style window chrome */
.dm-chrome {
background: var(--surface-r); border-bottom: 1px solid var(--border);
padding: 6px 8px; display: flex; align-items: center; gap: 4px;
}
.dm-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dm-r { background: #FF5F57; }
.dm-y { background: #FFBD2E; }
.dm-g { background: #28C840; }
.dm-win-title { font-size: 9px; font-weight: 600; color: var(--text-2); margin-left: 4px; }
/* Tab bar */
.dm-tabs {
display: flex; background: var(--surface);
border-bottom: 1px solid var(--border); overflow: hidden;
}
.dm-tab { font-size: 9px; font-weight: 600; padding: 5px 8px; color: var(--text-m); white-space: nowrap; border-right: 1px solid var(--border); }
.dm-tab.dm-on { color: var(--mg); border-bottom: 2px solid var(--mg); margin-bottom: -1px; background: var(--bg); }
.dm-more { color: var(--border); }
/* Body */
.dm-body { padding: 8px; display: flex; flex-direction: column; gap: 5px; }
/* Sidebar + content split */
.dm-layout { display: flex; gap: 5px; align-items: start; }
.dm-sidebar { width: 38px; flex-shrink: 0; display: flex; flex-direction: column; gap: 3px; padding-left: 0; }
.dm-sidebar-item { font-size: 8px; color: var(--text-m); padding: 3px 4px; border-radius: 3px; white-space: nowrap; }
.dm-sidebar-item.dm-active { background: var(--mg-s); color: var(--mg); font-weight: 600; }
.dm-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-left: 4px; }
.dm-row { display: flex; gap: 4px; }
.dm-select { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 3px; padding: 3px 5px; font-size: 8px; color: var(--text-2); display: flex; justify-content: space-between; align-items: center; }
.dm-caret { color: var(--text-m); font-size: 7px; }
.dm-toggles { display: flex; flex-direction: column; gap: 3px; }
/* Label first so it aligns with sidebar; toggle on the right */
.dm-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 8px; color: var(--text-2); }
.dm-toggle-row .dm-toggle { flex-shrink: 0; }
.dm-toggle { width: 20px; height: 10px; border-radius: 5px; background: var(--border); flex-shrink: 0; position: relative; }
.dm-toggle::after { content: ''; width: 6px; height: 6px; background: var(--bg); border-radius: 50%; position: absolute; top: 2px; left: 2px; }
.dm-toggle.dm-on { background: var(--mg-s); }
.dm-toggle.dm-on::after { left: calc(100% - 8px); }
.dm-warn { font-size: 8px; color: var(--wn); background: var(--wn-bg); border: 1px solid var(--wn-br); border-radius: 3px; padding: 2px 5px; margin-top: 2px; }
.dm-metrics { display: flex; gap: 4px; }
.dm-metric { flex: 1; background: var(--surface); border: 1px solid var(--border-s); border-radius: 3px; padding: 4px 5px; }
.dm-metric-val { font-size: 11px; font-weight: 700; color: var(--text); line-height: 1; }
.dm-metric-lbl { font-size: 7px; color: var(--text-m); margin-top: 2px; }
/* "After" mock */
.dm-section-lbl { font-size: 8px; font-weight: 600; color: var(--text-2); margin-bottom: 3px; }
.dm-kpis { display: flex; gap: 4px; margin-bottom: 4px; }
.dm-kpi { flex: 1; background: var(--surface); border: 1px solid var(--border-s); border-radius: 3px; padding: 5px 6px; }
.dm-kpi-val { font-size: 13px; font-weight: 700; color: var(--mg); line-height: 1; }
.dm-kpi-lbl { font-size: 7px; color: var(--text-m); margin-top: 2px; }
.dm-radio-group { display: flex; flex-direction: column; gap: 3px; }
.dm-radio { display: flex; align-items: center; gap: 5px; font-size: 8px; color: var(--text-2); padding: 3px 5px; border-radius: 3px; }
.dm-radio.dm-sel { background: var(--mg-s); color: var(--mg); font-weight: 600; }
.dm-radio-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--border); flex-shrink: 0; }
.dm-radio-dot.dm-filled { background: var(--mg); border-color: var(--mg); }
/* Role icons in "After" mock — shield, pencil, users */
.dm-role-icon { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; min-height: 12px; flex-shrink: 0; color: inherit; overflow: visible; }
.dm-role-icon svg { width: 100%; height: 100%; overflow: visible; }
/* Progressive disclosure: Advanced settings (replaces Save changes) */
.dm-advanced { margin-top: 4px; border-top: 1px solid var(--border-s); padding-top: 4px; }
.dm-advanced-trigger { font-size: 8px; font-weight: 600; color: var(--text-m); background: none; border: none; padding: 2px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.dm-advanced-trigger::after { content: '▾'; font-size: 7px; transition: transform 0.15s ease; }
.dm-advanced.dm-open .dm-advanced-trigger::after { transform: rotate(-180deg); }
.dm-advanced-panel { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.dm-advanced-panel[hidden] { display: none; }
.dm-caption { font-size: 11px; color: var(--text-m); text-align: center; font-family: var(--mono); margin-top: var(--phi-4); }
/* ══════════════════════════════════════════════
EXPERIMENT SECTION — before / after use-case pairs
Three side-by-side dashboard mockups showing the
before (raw data overload) vs after (bento hierarchy)
══════════════════════════════════════════════ */
/* Case wrapper — divider + spacing between cases */
.exp-case { margin-top: var(--phi-7); padding-top: var(--phi-6); border-top: 1px solid var(--border-s); }
.exp-case:first-child { padding-top: 0; border-top: none; margin-top: var(--phi-6); }
/* Case header row: mono number + title/description */
.exp-case-header { display: flex; align-items: baseline; gap: var(--phi-4); margin-bottom: var(--phi-5); }
.exp-case-num { font-family: var(--mono); font-size: 0.6875rem; color: var(--text-m); flex-shrink: 0; min-width: 22px; }
.exp-case-desc { font-size: 0.875rem; color: var(--text-2); margin-top: var(--phi-1); }
/* Before / arrow / after grid */
.exp-pair { display: grid; grid-template-columns: 1fr 40px 1fr; gap: var(--phi-4); align-items: start; }
.exp-pair-arrow { display: flex; align-items: flex-start; justify-content: center; padding-top: 42px; color: var(--text-m); font-size: 1.125rem; line-height: 1; }
/* Transformation note under each pair */
.exp-transform { margin-top: var(--phi-4); font-size: 0.75rem; color: var(--text-m); font-family: var(--mono); }
@media (max-width: 768px) {
.exp-pair { grid-template-columns: 1fr; gap: var(--phi-3); }
.exp-pair-arrow { padding-top: 0; justify-content: flex-start; }
}
/* ── Equal-height before/after mocks ──
exp-pair stretches both columns to the same height.
exp-mock-wrap is a flex column so dash-mock fills remaining space. */
.exp-pair { align-items: stretch; }
.exp-mock-wrap { display: flex; flex-direction: column; }
.exp-mock-wrap .dash-mock { flex: 1; }
/* Arrow is vertically centered between the two mocks */
.exp-pair-arrow { padding-top: 0; align-items: center; }
/* Version label strip (v1 / v2 inside an experiment case) */
.exp-version-row { margin-top: var(--phi-5); }
.exp-version-row + .exp-version-row { margin-top: var(--phi-6); padding-top: var(--phi-5); border-top: 1px dotted var(--border-s); }
.exp-version-label { display: inline-flex; align-items: center; gap: var(--phi-3); font-size: 0.6875rem; font-weight: 700; font-family: var(--mono); color: var(--text-m); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--phi-4); }
.exp-version-label::after { content: ''; display: block; height: 1px; width: 48px; background: var(--border-s); }
/* ── Before mock: raw data grid ──
4-column grid of identically-sized metric tiles.
Visual effect: no hierarchy, everything equally loud. */
.dm-raw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 8px; }
.dm-raw-tile { background: var(--surface); border: 1px solid var(--border-s); border-radius: 3px; padding: 4px 5px; }
.dm-raw-val { font-size: 10px; font-weight: 700; color: var(--text); line-height: 1; }
.dm-raw-lbl { font-size: 7px; color: var(--text-m); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Featured tile: spans 2 columns, much larger number so the "priority" attempt is legible */
.dm-raw-tile.dm-raw-featured { padding: 6px 7px; }
.dm-raw-tile.dm-raw-featured .dm-raw-val { font-size: 17px; }
/* ── After mock: bento hierarchy ──
grid-template-columns: 2fr 1fr
Row 1: [main — big KPI + sparkline] [small — secondary metric]
Row 2: [medium — detail / list] [small — secondary metric] */
.dm-bento { display: grid; grid-template-columns: 2fr 1fr; gap: 4px; padding: 8px; }
.dm-bento-main,
.dm-bento-mid,
.dm-bento-sm { background: var(--surface); border: 1px solid var(--border-s); border-radius: 4px; padding: 6px 8px; }
/* Attention state — amber tint; used when a panel needs action */
.dm-bento-sm.dm-attn-bg { background: var(--wn-bg); border-color: var(--wn-br); }
.dm-bento-sm.dm-ok-bg { background: var(--ok-bg); border-color: var(--ok-br); }
/* Panel internals — label, headline number, trend line, sub-text */
.dm-panel-lbl { font-size: 7px; font-weight: 600; color: var(--text-m); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px; }
.dm-panel-big { font-size: 15px; font-weight: 700; color: var(--text); line-height: 1; }
.dm-panel-big.dm-attn-val { color: var(--wn); }
.dm-panel-big.dm-ok-val { color: var(--ok); }
.dm-panel-trend { font-size: 7px; margin-top: 3px; }
.dm-trend-up { color: var(--ok); }
.dm-trend-dn { color: var(--wn); }
.dm-panel-sub { font-size: 7px; color: var(--text-m); margin-top: 2px; }
.dm-cta-link { font-size: 7px; font-weight: 600; color: var(--mg); margin-top: 5px; display: block; }
/* Sparkline — bar heights driven by inline style; last bar is highlighted */
.dm-spark { display: flex; align-items: flex-end; gap: 2px; height: 22px; margin-top: 5px; }
.dm-spark-bar { flex: 1; background: var(--border); border-radius: 1px; min-height: 2px; }
.dm-spark-bar.dm-spark-hi { background: var(--mg); } /* current period */
.dm-spark-bar.dm-spark-attn { background: var(--wn-br); } /* declining / warning */
/* Labeled sparkline: month initials below bars */
.dm-spark-chart { margin-top: 5px; }
.dm-spark-chart .dm-spark { margin-top: 0; }
.dm-spark-month-labels { display: flex; gap: 2px; margin-top: 2px; }
.dm-spark-month-labels span { flex: 1; font-size: 5px; color: var(--text-m); text-align: center; font-family: var(--mono); }
/* Panel header row: primary label + secondary KPI on the right */
.dm-panel-header { display: flex; justify-content: space-between; align-items: flex-start; }
.dm-panel-secondary { text-align: right; flex-shrink: 0; margin-left: var(--phi-3); }
.dm-panel-secondary-lbl { font-size: 5px; color: var(--text-m); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }
/* No mono font — matches main panel typography */
.dm-panel-secondary-val { font-size: 9px; font-weight: 700; color: var(--text-2); line-height: 1.2; }
/* Inline status pills — attention and ok variants */
.dm-attn-pill { display: inline-flex; align-items: center; font-size: 6px; font-weight: 700; background: var(--wn-bg); color: var(--wn); border: 1px solid var(--wn-br); border-radius: 2px; padding: 1px 4px; margin-left: 4px; }
.dm-ok-pill { display: inline-flex; align-items: center; font-size: 6px; font-weight: 700; background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-br); border-radius: 2px; padding: 1px 4px; margin-left: 4px; }
/* Pipeline stage rows: label row + progress track */
.dm-stage-rows { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; }
.dm-stage-hd { display: flex; justify-content: space-between; align-items: center; font-size: 7px; color: var(--text-2); margin-bottom: 2px; }
.dm-stage-track { height: 3px; background: var(--border-s); border-radius: 2px; overflow: hidden; }
.dm-stage-fill { height: 3px; border-radius: 2px; background: var(--ok); }
/* Stalled stage — amber fill */
.dm-stage-row.dm-stalled .dm-stage-fill { background: var(--wn-br); }
/* Ticket rows for the support use case */
.dm-ticket-rows { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
.dm-ticket-row { display: flex; align-items: center; gap: 4px; padding: 3px 5px; background: var(--bg); border-radius: 3px; border: 1px solid var(--border-s); }
.dm-ticket-id { font-family: var(--mono); font-size: 6px; color: var(--text-m); flex-shrink: 0; }
.dm-ticket-desc { flex: 1; font-size: 7px; color: var(--text-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.dm-ticket-urgency { font-size: 6px; font-weight: 700; flex-shrink: 0; }
.dm-ticket-urgency.dm-urg-hi { color: var(--mg); } /* overdue */
.dm-ticket-urgency.dm-urg-md { color: var(--wn); } /* due soon */
/* Activation funnel steps for the product analytics use case */
.dm-funnel { display: flex; flex-direction: column; gap: 4px; margin-top: 5px; }
.dm-funnel-hd { display: flex; justify-content: space-between; font-size: 7px; color: var(--text-2); margin-bottom: 2px; }
.dm-funnel-track { height: 4px; background: var(--border-s); border-radius: 2px; overflow: hidden; }
.dm-funnel-fill { height: 4px; border-radius: 2px; background: var(--ok); }
/* Drop step — amber fill; marks where users disengage */
.dm-funnel-step.dm-drop .dm-funnel-fill { background: var(--wn-br); }
/* ── Before mock that fills the mock window ──
Makes the dash-mock a flex column so the raw grid expands to fill remaining height.
grid-auto-rows: 1fr divides the space equally among all tile rows. */
.dm-raw-mock { display: flex; flex-direction: column; }
.dm-raw-mock .dm-raw-grid { flex: 1; min-height: 0; grid-auto-rows: 1fr; }
.dm-raw-mock .dm-raw-tile { height: 100%; }
/* Non-grid sections (charts, ticket lists) within the mock — pinned to natural height */
.dm-raw-extra { flex-shrink: 0; }
/* ── Single-column bento (v2 variant): panels stack vertically ──
Use when after-mock content needs more vertical room. */
.dm-bento-col { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.dm-bento-col .dm-bento-main,
.dm-bento-col .dm-bento-mid { background: var(--surface); border: 1px solid var(--border-s); border-radius: 4px; padding: 6px 8px; }
/* ── Bento split: left content stack + right noteworthy column ──
grid-template-columns: 2fr 1fr keeps main content dominant;
noteworthy panels stack vertically in the narrow right column. */
.dm-bento-split { display: grid; grid-template-columns: 2fr 1fr; gap: 4px; padding: 8px; }
.dm-bento-split-left { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.dm-bento-split-left .dm-bento-main,
.dm-bento-split-left .dm-bento-mid { background: var(--surface); border: 1px solid var(--border-s); border-radius: 4px; padding: 6px 8px; }
/* Right column: noteworthy fills full column height */
.dm-bento-split-right .dm-noteworthy { height: 100%; }
/* Noteworthy panels always single column — override not needed */
/* ── SLA threshold chart ──
Built on dm-spark + dm-spark-month-labels for guaranteed alignment.
dm-sla-wrap adds position:relative so the ::before threshold line works.
Threshold at top:50% = 90% on compressed 80–100% scale. */
.dm-sla-wrap .dm-spark { position: relative; }
.dm-sla-wrap .dm-spark::before {
content: '';
position: absolute;
left: 0; right: 0; top: 50%;
border-top: 1px dashed var(--text-m);
opacity: 0.4;
pointer-events: none;
}
/* SLA bar colors override default dm-spark-bar grey */
.dm-spark-bar.dm-sla-ok { background: var(--ok); opacity: 0.7; }
.dm-spark-bar.dm-sla-warn { background: var(--wn-br); opacity: 0.8; }
/* Current period (last bar) always at full opacity */
.dm-spark-bar.dm-sla-ok:last-child,
.dm-spark-bar.dm-sla-warn:last-child { opacity: 1; }
/* ── Noteworthy group: dynamic panels that change based on data ──
Borderless column with a labelled header; panels stack in a single column. */
.dm-noteworthy { padding: 0; }
.dm-noteworthy-hd { font-size: 6px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-m); display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.dm-noteworthy-hd::after { content: ''; flex: 1; height: 1px; background: var(--border-s); }
/* Single column — panels always stack vertically */
.dm-noteworthy-inner { display: grid; grid-template-columns: 1fr; gap: 4px; }
.dm-noteworthy-inner .dm-bento-sm { background: var(--surface); border: 1px solid var(--border-s); border-radius: 4px; padding: 6px 8px; }
.dm-noteworthy-inner .dm-bento-sm.dm-attn-bg { background: var(--wn-bg); border-color: var(--wn-br); }
.dm-noteworthy-inner .dm-bento-sm.dm-ok-bg { background: var(--ok-bg); border-color: var(--ok-br); }
/* Subtle CTA below the noteworthy panels */
.dm-noteworthy-cta { font-size: 5.5px; font-weight: 600; color: var(--text-m); margin-top: 5px; display: block; text-align: center; opacity: 0.55; cursor: pointer; }
/* ── V3 Noteworthy variants ──
Before: outer card + inner bordered panels = nested cards (anti-pattern).
After: outer card + inner panels are flat (tinted but no border).
Both suppress the ::after divider line — the card border provides containment. */
.dm-noteworthy-nested { border: 1px solid var(--border-s); border-radius: 4px; padding: 6px 8px; background: var(--surface); }
.dm-noteworthy-v3 { border: 1px solid var(--border-s); border-radius: 4px; padding: 6px 8px; background: var(--surface); }
.dm-noteworthy-nested .dm-noteworthy-hd::after,
.dm-noteworthy-v3 .dm-noteworthy-hd::after { display: none; }
/* Flat inner panels: tint only, no border — a single level of containment */
.dm-noteworthy-v3 .dm-noteworthy-inner .dm-bento-sm { border: none; border-radius: 3px; padding: 5px 6px; }
.dm-noteworthy-v3 .dm-noteworthy-inner .dm-bento-sm.dm-ok-bg { background: var(--ok-bg); }
.dm-noteworthy-v3 .dm-noteworthy-inner .dm-bento-sm.dm-attn-bg { background: var(--wn-bg); }
/* Neutral panel (no state): light tint so it doesn't disappear against card bg */
.dm-noteworthy-v3 .dm-noteworthy-inner .dm-bento-sm:not(.dm-ok-bg):not(.dm-attn-bg) { background: var(--bg); }
/* ── V3 right column: two cards stack vertically, no height-fill ── */
.dm-bento-split-right-v3 { display: flex; flex-direction: column; gap: 4px; }
/* ── All Metrics secondary card ──
Shows the remaining metrics from the "before" in compact form.
3-column grid; first 3 shown by default; rest hidden via is-collapsed class. */
.dm-metrics-card { border: 1px solid var(--border-s); border-radius: 4px; padding: 6px 8px; background: var(--surface); }
/* No ::after line — the card border is sufficient containment */
.dm-metrics-hd { font-size: 6px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-m); margin-bottom: 5px; }
/* column-gap provides separation between metrics; no horizontal padding so the
leftmost column aligns flush with the card edge and the headline above it */
.dm-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 3px; column-gap: 8px; }
.dm-metric-item { padding: 2px 0; }
.dm-metric-val { font-size: 8px; font-weight: 700; color: var(--text); line-height: 1; }
.dm-metric-lbl { font-size: 5.5px; color: var(--text-m); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Collapsed: only the first 3 items visible */
.dm-metrics-grid.is-collapsed .dm-metric-item:nth-child(n+4) { display: none; }
.dm-metrics-more { font-size: 6px; font-weight: 600; color: var(--mg); margin-top: 4px; display: block; cursor: pointer; }
/* ── Sparkline value labels: per-bar annotation row above the bars ──
Same flex structure as dm-spark-month-labels so widths align exactly. */
.dm-spark-val-labels { display: flex; gap: 2px; margin-bottom: 1px; }
.dm-spark-val-labels span { flex: 1; font-size: 4.5px; color: var(--text-2); text-align: center; font-family: var(--mono); line-height: 1; }
/* ── Single-row pipeline flow: stages linked with chevrons ──
Shows that deals move through stages in order.
position: relative on stage lets the warning pill float absolutely. */
.dm-pipeline-flow { display: flex; align-items: flex-start; gap: 3px; margin-top: 4px; }
.dm-pipeline-stage { flex: 1; min-width: 0; position: relative; }
.dm-pipeline-stage-name { font-size: 6px; color: var(--text-2); margin-bottom: 2px; overflow: hidden; white-space: nowrap; }
/* Pill floats top-right of the stage; position:absolute removes it from flow so it can't push the track down */
.dm-pipeline-stage .dm-attn-pill { position: absolute; top: 0; right: 0; margin-left: 0; }
.dm-pipeline-stage-track { height: 3px; background: var(--border-s); border-radius: 2px; overflow: hidden; margin-bottom: 1px; }
.dm-pipeline-stage-fill { height: 3px; border-radius: 2px; background: var(--ok); }
.dm-pipeline-stage.dm-stalled .dm-pipeline-stage-fill { background: var(--wn-br); }
/* Percentage sits immediately below the track — tight gap via margin-top:0 */
.dm-pipeline-stage-pct { font-size: 6px; color: var(--text-m); font-family: var(--mono); display: block; margin-top: 0; }
.dm-pipeline-chevron { font-size: 9px; color: var(--border); flex-shrink: 0; margin-top: 5px; line-height: 1; }
/* ── Stalled deal rows: flat list with divider lines, no card per row ── */
.dm-deal-rows { display: flex; flex-direction: column; gap: 0; margin-top: 5px; }
/* Divider only between items — first row has no top border */
.dm-deal-row { padding: 3px 0; background: none; border-top: 1px solid var(--border-s); }
.dm-deal-rows .dm-deal-row:first-child { border-top: none; }
.dm-deal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px; margin-bottom: 1px; }
.dm-deal-name { font-size: 7px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dm-deal-action { font-size: 6px; font-weight: 700; color: var(--mg); white-space: nowrap; flex-shrink: 0; }
.dm-deal-reason { font-size: 6px; color: var(--text-m); }
/* ── SLA compliance chart with 90% threshold line ──
Bars use a compressed 80–100% scale so differences are visible.
Heights in HTML: (actual% – 80) / 20 × 100 = % height of bar.
Threshold at top: 50% from top = 90% compliance mark. */
.dm-sla-chart { margin-top: 5px; }
.dm-sla-bars { position: relative; height: 32px; display: flex; align-items: flex-end; gap: 2px; }
.dm-sla-bar { flex: 1; min-height: 2px; border-radius: 1px 1px 0 0; opacity: 0.75; }
.dm-sla-bar:last-child { opacity: 1; } /* current period always full opacity */
.dm-sla-bar.dm-sla-ok { background: var(--ok); }
.dm-sla-bar.dm-sla-warn { background: var(--wn-br); }
/* Dashed horizontal line at 50% from top = 90% mark on compressed scale */
.dm-sla-threshold { position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 1px dashed var(--text-m); opacity: 0.35; pointer-events: none; }
/* ── Trending topics panel: rising vs resolving ticket categories ── */
.dm-topics { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 5px; }
.dm-topics-head { font-size: 6px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 3px; }
.dm-topics-head.dm-topics-up { color: var(--wn); } /* rising = needs attention */
.dm-topics-head.dm-topics-dn { color: var(--ok); } /* resolving = good signal */
.dm-topic-row { display: flex; justify-content: space-between; align-items: center; font-size: 7px; padding: 2px 0; border-bottom: 1px solid var(--border-s); }
.dm-topic-row:last-child { border-bottom: none; }
.dm-topic-name { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dm-topic-delta { font-family: var(--mono); font-size: 6px; font-weight: 700; flex-shrink: 0; margin-left: 4px; }
/* ══════════════════════════════════════════════
QUALIFIER STRIP — "Who this is for"
Thin dark bar immediately after hero
══════════════════════════════════════════════ */
.qualify-strip {
background: var(--ink);
padding: var(--phi-4) 0;
}
.qualify-inner {
display: flex; align-items: center; gap: var(--phi-5); flex-wrap: wrap;
}
.qualify-label {
font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase; color: rgba(250, 243, 232, 0.35);
white-space: nowrap; flex-shrink: 0;
}
.qualify-divider {
width: 1px; height: 18px; background: rgba(250, 243, 232, 0.12); flex-shrink: 0;
}
.qualify-chips { display: flex; gap: var(--phi-3); flex-wrap: wrap; }
.qualify-chip {
font-size: 13px; font-weight: 500; color: rgba(250, 243, 232, 0.80);
background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--r-full); padding: 5px 14px;
}
/* ══════════════════════════════════════════════
RECOGNITION — 6 symptom cards (2×3)
══════════════════════════════════════════════ */
.symptom-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--phi-4); margin-top: var(--phi-6);
}
@media (max-width: 480px) { .symptom-grid { grid-template-columns: 1fr; } }
/* Visually hidden checkbox — stays focusable and checked state drives styling */
.symptom-input {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.symptom-card {
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--r-md); padding: var(--phi-5) var(--phi-6);
display: flex; align-items: flex-start; gap: var(--phi-4);
transition: border-color 200ms var(--ease), transform 150ms var(--ease);
cursor: pointer; position: relative;
}
.symptom-card:hover { border-color: var(--mg); transform: translateY(-2px); }
/* Checked state: persistent checkmark and accent border */
.symptom-card:has(.symptom-input:checked) { border-color: var(--mg); background: var(--mg-s); }
.symptom-card:has(.symptom-input:checked) .symptom-check {
border-color: var(--mg); background: var(--mg);
}
.symptom-card:has(.symptom-input:checked) .symptom-check::after {
content: '✓'; color: #fff; font-size: 11px; font-weight: 700;
}
.symptom-check {
width: 20px; height: 20px; border: 2px solid var(--border);
border-radius: var(--r-sm); flex-shrink: 0; margin-top: 2px;
display: flex; align-items: center; justify-content: center;
transition: background 150ms, border-color 150ms;
}
.symptom-card:hover .symptom-check { border-color: var(--mg); background: var(--mg); }
.symptom-card:hover .symptom-check::after { content: '✓'; color: #fff; font-size: 11px; font-weight: 700; }
.symptom-text { font-size: 0.9375rem; line-height: 1.55; color: var(--text-2); }
/* Notice — inline status message, full width of parent, one line; escalating levels (0–3) */
.notice {
margin-top: var(--phi-5); display: block; width: 100%;
border-radius: var(--r-md);
border: 2px solid; /* border-color set per level below */
padding: var(--phi-5) var(--phi-6);
transition: background 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
}
.notice-line {
font-size: 1rem; font-weight: 500; line-height: 1.5; margin: 0;
display: flex; align-items: center; gap: var(--phi-3);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Level 0: default — "What's stopping you?" */
.notice-message--0 { color: var(--text); }
.notice:has(.notice-message--0) { background: var(--yw-w); border-color: var(--yw); }
/* Level 1: time to act */
.notice-message--1 { color: var(--text); }
.notice:has(.notice-message--1) { background: var(--wn-bg); border-color: var(--wn); }
/* Level 2: act now — with icon */
.notice-message--2 { color: var(--text); }
.notice:has(.notice-message--2) { background: var(--dg-bg); border-color: var(--dg-br); }
/* Level 3: strongest — with icon; stronger border for extra urgency */
.notice-message--3 { color: var(--text); font-weight: 600; }
.notice:has(.notice-message--3) { background: var(--dg-bg); border-color: var(--dg); box-shadow: var(--sh-sm); }
.notice-icon { flex-shrink: 0; width: 1.25em; height: 1.25em; stroke: currentColor; }
/* ══════════════════════════════════════════════
CASE SNAPSHOT — before/after with comparison
Shows work. Makes it real.
══════════════════════════════════════════════ */
.snap-grid {
display: grid; grid-template-columns: 55% 45%;
gap: var(--phi-7); align-items: center;
margin-top: var(--phi-6);
}
@media (max-width: 768px) { .snap-grid { grid-template-columns: 1fr; } }
/* Annotation label above each mock — "Before" / "After" */
.snap-mock-group { display: flex; flex-direction: column; gap: var(--phi-2); }
.snap-mock-label {
font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
text-transform: uppercase;
}
.snap-mock-label.before { color: var(--text-m); }
.snap-mock-label.after { color: var(--ok); }
/* Comparison table: before column / after column */
.snap-diff {
border: 1px solid var(--border); border-radius: var(--r-md);
overflow: hidden; margin-bottom: var(--phi-5);
}
.snap-diff-head {
display: grid; grid-template-columns: 1fr 1fr;
background: var(--surface-r); border-bottom: 1px solid var(--border);
}
.snap-diff-col {
font-size: 10px; font-weight: 700; letter-spacing: 0.10em;
text-transform: uppercase; padding: var(--phi-3) var(--phi-4);
}
.snap-diff-col.b { color: var(--text-m); }
.snap-diff-col.a { color: var(--ok); border-left: 1px solid var(--border); }
.snap-diff-row {
display: grid; grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(--border-s);
}
.snap-diff-row:last-child { border-bottom: none; }
.snap-cell {
padding: var(--phi-3) var(--phi-4);
font-family: var(--mono); font-size: 12px; line-height: 1.5;
}
.snap-cell.b { color: var(--text-m); text-decoration: line-through; }
.snap-cell.a { color: var(--text); font-weight: 600; border-left: 1px solid var(--border-s); }
/* Result lines — shipped outcomes */
.snap-results { display: flex; flex-direction: column; gap: var(--phi-3); }
.snap-result {
display: flex; align-items: flex-start; gap: var(--phi-3);
font-size: 0.9375rem; font-weight: 500; color: var(--text);
}
.snap-result-icon { color: var(--ok); font-size: 14px; flex-shrink: 0; margin-top: 1px; }
/* ══════════════════════════════════════════════
PROCESS — 3 steps, compressed
Dark section, 3-col step cards
══════════════════════════════════════════════ */
.process-flow {
display: flex; align-items: center; gap: 0;
margin-bottom: var(--phi-6);
flex-wrap: wrap;
}
.pf-step { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pf-num {
width: 34px; height: 34px; border-radius: 50%;
background: var(--mg-dk); color: var(--text-inv);
font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
display: flex; align-items: center; justify-content: center;
}
.pf-label {
font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
color: rgba(250, 243, 232, 0.50); text-transform: uppercase;
white-space: nowrap;
}
.pf-connector {
flex: 1; min-width: 40px; height: 1px;
background: rgba(250, 243, 232, 0.12);
margin: 0 var(--phi-3); margin-bottom: 22px;
}
@media (max-width: 480px) { .process-flow { display: none; } }
.steps-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: var(--phi-4); margin-top: 0;
}
@media (max-width: 768px) { .steps-grid { grid-template-columns: 1fr; } }
.step-card {
background: var(--ink-s); border: 1px solid var(--ink-b);
border-radius: var(--r-lg); padding: var(--phi-6);
transition: background 200ms var(--ease);
}
.step-card:hover { background: rgba(39, 32, 24, 0.85); }
.step-num { font-size: 3rem; font-weight: 700; color: var(--mg-dk); line-height: 1; margin-bottom: 6px; letter-spacing: -0.03em; }
.step-week { font-size: 11px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(250, 243, 232, 0.35); margin-bottom: var(--phi-4); }
.step-card h3 { font-size: 1.25rem; margin-bottom: var(--phi-3); }
.step-card p { font-size: 0.875rem; line-height: 1.65; color: rgba(250, 243, 232, 0.55); }
.step-card ul {
margin: 0;
padding-left: 1.1em;
display: flex;
flex-direction: column;
gap: var(--phi-2);
}
.step-card li {
font-size: 0.875rem;
line-height: 1.65;
color: rgba(250, 243, 232, 0.55);
}
/* ══════════════════════════════════════════════
DELIVERABLES — 3 outputs only
══════════════════════════════════════════════ */
.deliverables-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: var(--phi-4); margin-top: var(--phi-6);
}
@media (max-width: 768px) { .deliverables-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .deliverables-grid { grid-template-columns: 1fr; } }
.deliv-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-md); padding: var(--phi-5) var(--phi-6);
}
.deliv-num { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mg); margin-bottom: var(--phi-4); }
.deliv-card h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.deliv-card p { font-size: 0.875rem; line-height: 1.65; color: var(--text-2); }
.not-included {
margin-top: var(--phi-5);
font-size: 0.8125rem; color: var(--text-m);
}
/* ══════════════════════════════════════════════
PROOF — testimonial + quantified metrics
══════════════════════════════════════════════ */
.proof-grid {
display: grid; grid-template-columns: 1fr 2fr;
gap: var(--phi-7); align-items: start;
margin-top: var(--phi-6);
}
@media (max-width: 768px) { .proof-grid { grid-template-columns: 1fr; } }
.proof-metrics { display: flex; flex-direction: column; gap: var(--phi-4); }
.proof-metric {
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--r-md); padding: var(--phi-5) var(--phi-6);
box-shadow: var(--sh-sm);
}
.proof-num { font-size: clamp(28px, 3vw, 38px); font-weight: 700; color: var(--mg); line-height: 1; letter-spacing: -0.03em; }
.proof-desc { font-size: 0.8125rem; color: var(--text-2); margin-top: 6px; line-height: 1.4; }
.bq-geo-mark { display: block; margin-bottom: var(--phi-4); flex-shrink: 0; }
.bq-compact {
padding: var(--phi-5) var(--phi-6);
background: var(--surface);
border-radius: var(--r-md);
}
.bq-text {
font-size: 1.0625rem; line-height: 1.7; font-weight: 500;
color: var(--text); margin-bottom: var(--phi-4);
}
.bq-author { display: flex; align-items: center; gap: var(--phi-4); }
.bq-name { font-size: 0.875rem; font-weight: 600; color: var(--text-2); }
.bq-role { font-size: 0.75rem; color: var(--text-m); margin-top: 2px; }
.outcome-badge {
display: inline-flex; align-items: center; gap: var(--phi-3);
background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-br);
border-radius: var(--r-base); padding: 6px 14px;
font-size: 13px; font-weight: 600; margin-top: var(--phi-5);
}
/* ══════════════════════════════════════════════
FIT — qualifier cards, compressed
══════════════════════════════════════════════ */
.qualifier-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--phi-5); margin-top: var(--phi-6);
}
@media (max-width: 480px) { .qualifier-grid { grid-template-columns: 1fr; } }
.qualifier-card { border-radius: var(--r-lg); padding: var(--phi-6); }
.qualifier-card.yes { background: var(--bg); border: 1px solid var(--border); box-shadow: var(--sh-base); }
.qualifier-card.no { background: var(--surface-r); border: 1px solid var(--border); }
.qualifier-card h3 {
font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
margin-bottom: var(--phi-5); padding-bottom: var(--phi-4);
border-bottom: 1px solid var(--border);
}
.qualifier-card.yes h3 { color: var(--ok); }
.qualifier-card.no h3 { color: var(--text-m); }
.qlist { list-style: none; }
.qlist li {
font-size: 0.875rem; line-height: 1.6; padding: var(--phi-3) 0;
border-bottom: 1px solid var(--border-s);
display: flex; gap: 10px; align-items: flex-start;
}
.qlist li:last-child { border-bottom: none; }
.qualifier-card.no .qlist li { color: var(--text-m); }
.qlist li::before { content: '→'; color: var(--ok); flex-shrink: 0; font-weight: 700; }
.qualifier-card.no .qlist li::before { content: '—'; color: var(--border); }
/* ══════════════════════════════════════════════
PRICING — range display + reduced trust text
══════════════════════════════════════════════ */
.pricing-grid {
display: grid; grid-template-columns: 61.8% 38.2%;
gap: var(--phi-7); align-items: start;
margin-top: var(--phi-6);
}
@media (max-width: 768px) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-card {
background: var(--bg); border: 1px solid var(--border);
border-radius: var(--r-lg); padding: var(--phi-6);
box-shadow: var(--sh-md); position: relative;
}
.pricing-tag {
position: absolute; top: var(--phi-4); right: var(--phi-4);
background: var(--mg-s); color: var(--mg);
font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
padding: 3px 8px; border-radius: var(--r-sm);
}
.price-range {
color: var(--text);
font-size: clamp(28px, 3.5vw, 44px); font-weight: 700;
line-height: 1; margin-bottom: 8px;
}
.price-dash { color: var(--border); }
.price-label { font-size: 0.9375rem; font-weight: 400; color: var(--text-m); margin-left: 6px; }
.price-meta { font-size: 0.875rem; color: var(--text-m); margin-bottom: var(--phi-5); }
.pricing-rows { margin-bottom: var(--phi-5); }
.pricing-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-s); font-size: 0.875rem; }
.pricing-row:last-child { border-bottom: none; }
.pr-label { color: var(--text-m); font-weight: 500; }
.pr-value { color: var(--text); font-weight: 600; }
.pricing-note { margin-top: var(--phi-4); font-size: 0.8125rem; color: var(--text-m); text-align: center; }
.pricing-right h3 { font-size: 1.375rem; margin-bottom: var(--phi-4); }
.pricing-right > p { font-size: 1rem; color: var(--text-2); line-height: 1.7; margin-bottom: var(--phi-5); }
.trust-list { display: flex; flex-direction: column; gap: var(--phi-3); }
.trust-item { display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; color: var(--text-2); }
.trust-icon { color: var(--ok); font-size: 14px; flex-shrink: 0; margin-top: 1px; }
/* ══════════════════════════════════════════════
FAQ — compact accordion, 4 questions
══════════════════════════════════════════════ */
.faq-list { max-width: 720px; margin-top: var(--phi-6); }
.faq-item { border-bottom: 1px solid var(--border); padding: var(--phi-5) 0; }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-q {
font-size: 1rem; font-weight: 600; cursor: pointer;
display: flex; justify-content: space-between; align-items: flex-start;
gap: var(--phi-4); user-select: none;
}
.faq-toggle {
width: 24px; height: 24px; border-radius: var(--r-base);
background: var(--surface); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; font-size: 16px; color: var(--text-m);
transition: background 150ms, border-color 150ms, transform 150ms; margin-top: 2px;
}
.faq-item.open .faq-toggle { background: var(--mg); border-color: var(--mg); color: #fff; transform: rotate(45deg); }
.faq-a { font-size: 0.9375rem; line-height: 1.75; color: var(--text-2); display: none; padding-top: var(--phi-4); padding-right: var(--phi-7); }
.faq-item.open .faq-a { display: block; }
/* ══════════════════════════════════════════════
FINAL CTA — dark, decisive
══════════════════════════════════════════════ */
.final-inner { display: flex; flex-direction: column; align-items: flex-start; max-width: 640px; }
.final-meta { margin-top: var(--phi-4); font-size: 0.8125rem; color: rgba(250, 243, 232, 0.30); }
/* ── FOOTER ── */
.footer {
background: var(--ink); border-top: 1px solid var(--ink-b);
padding: var(--phi-6) 0; font-size: 0.8125rem;
color: rgba(250, 243, 232, 0.25); text-align: center;
font-family: var(--mono);
}
/* ══════════════════════════════════════════════
TYPOGRAPHY UTILITIES
Semantic class aliases for fluid type scale.
Use on any element instead of bare h1/h2/h3.
══════════════════════════════════════════════ */
.text-display {
font-size: clamp(30px, 5vw, 70px);
font-weight: 700; line-height: 1.1; letter-spacing: -0.03em;
}
.text-h1 {
font-size: clamp(26px, 4vw, 52px);
font-weight: 700; line-height: 1.1; letter-spacing: -0.025em;
}
.text-h2 {
font-size: clamp(22px, 3vw, 38px);
font-weight: 600; line-height: 1.25; letter-spacing: -0.02em;
}
.text-h3 {
font-size: 1.375rem;
font-weight: 600; line-height: 1.3;
}
.text-body-lg {
font-size: clamp(15px, 1.6vw, 19px);
line-height: 1.65; color: var(--text-2);
}
.text-body { font-size: 1rem; line-height: 1.5; }
.text-label {
font-size: 0.6875rem; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
}
/* Large statement — full-bleed moments between sections */
.text-statement {
font-size: clamp(32px, 5.5vw, 76px);
font-weight: 700; line-height: 1.05; letter-spacing: -0.035em;
}
/* ══════════════════════════════════════════════
SPACING UTILITIES
Tailwind-style naming mapped to phi scale.
Scale: 0, 1..8 => 0, --phi-1..--phi-8
Margin also supports auto helpers.
══════════════════════════════════════════════ */
/* Margin: all sides */
.m-0 { margin: 0 !important; }
.m-1 { margin: var(--phi-1) !important; }
.m-2 { margin: var(--phi-2) !important; }
.m-3 { margin: var(--phi-3) !important; }
.m-4 { margin: var(--phi-4) !important; }
.m-5 { margin: var(--phi-5) !important; }
.m-6 { margin: var(--phi-6) !important; }
.m-7 { margin: var(--phi-7) !important; }
.m-8 { margin: var(--phi-8) !important; }
.m-auto { margin: auto !important; }
/* Margin: axis */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: var(--phi-1) !important; margin-right: var(--phi-1) !important; }
.mx-2 { margin-left: var(--phi-2) !important; margin-right: var(--phi-2) !important; }
.mx-3 { margin-left: var(--phi-3) !important; margin-right: var(--phi-3) !important; }
.mx-4 { margin-left: var(--phi-4) !important; margin-right: var(--phi-4) !important; }
.mx-5 { margin-left: var(--phi-5) !important; margin-right: var(--phi-5) !important; }
.mx-6 { margin-left: var(--phi-6) !important; margin-right: var(--phi-6) !important; }
.mx-7 { margin-left: var(--phi-7) !important; margin-right: var(--phi-7) !important; }
.mx-8 { margin-left: var(--phi-8) !important; margin-right: var(--phi-8) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: var(--phi-1) !important; margin-bottom: var(--phi-1) !important; }
.my-2 { margin-top: var(--phi-2) !important; margin-bottom: var(--phi-2) !important; }
.my-3 { margin-top: var(--phi-3) !important; margin-bottom: var(--phi-3) !important; }
.my-4 { margin-top: var(--phi-4) !important; margin-bottom: var(--phi-4) !important; }
.my-5 { margin-top: var(--phi-5) !important; margin-bottom: var(--phi-5) !important; }
.my-6 { margin-top: var(--phi-6) !important; margin-bottom: var(--phi-6) !important; }
.my-7 { margin-top: var(--phi-7) !important; margin-bottom: var(--phi-7) !important; }
.my-8 { margin-top: var(--phi-8) !important; margin-bottom: var(--phi-8) !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
/* Margin: side */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--phi-1) !important; }
.mt-2 { margin-top: var(--phi-2) !important; }
.mt-3 { margin-top: var(--phi-3) !important; }
.mt-4 { margin-top: var(--phi-4) !important; }
.mt-5 { margin-top: var(--phi-5) !important; }
.mt-6 { margin-top: var(--phi-6) !important; }
.mt-7 { margin-top: var(--phi-7) !important; }
.mt-8 { margin-top: var(--phi-8) !important; }
.mt-auto { margin-top: auto !important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: var(--phi-1) !important; }
.mr-2 { margin-right: var(--phi-2) !important; }
.mr-3 { margin-right: var(--phi-3) !important; }
.mr-4 { margin-right: var(--phi-4) !important; }
.mr-5 { margin-right: var(--phi-5) !important; }
.mr-6 { margin-right: var(--phi-6) !important; }
.mr-7 { margin-right: var(--phi-7) !important; }
.mr-8 { margin-right: var(--phi-8) !important; }
.mr-auto { margin-right: auto !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--phi-1) !important; }
.mb-2 { margin-bottom: var(--phi-2) !important; }
.mb-3 { margin-bottom: var(--phi-3) !important; }
.mb-4 { margin-bottom: var(--phi-4) !important; }
.mb-5 { margin-bottom: var(--phi-5) !important; }
.mb-6 { margin-bottom: var(--phi-6) !important; }
.mb-7 { margin-bottom: var(--phi-7) !important; }
.mb-8 { margin-bottom: var(--phi-8) !important; }
.mb-auto { margin-bottom: auto !important; }
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: var(--phi-1) !important; }
.ml-2 { margin-left: var(--phi-2) !important; }
.ml-3 { margin-left: var(--phi-3) !important; }
.ml-4 { margin-left: var(--phi-4) !important; }
.ml-5 { margin-left: var(--phi-5) !important; }
.ml-6 { margin-left: var(--phi-6) !important; }
.ml-7 { margin-left: var(--phi-7) !important; }
.ml-8 { margin-left: var(--phi-8) !important; }
.ml-auto { margin-left: auto !important; }
/* Padding: all sides */
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--phi-1) !important; }
.p-2 { padding: var(--phi-2) !important; }
.p-3 { padding: var(--phi-3) !important; }
.p-4 { padding: var(--phi-4) !important; }
.p-5 { padding: var(--phi-5) !important; }
.p-6 { padding: var(--phi-6) !important; }
.p-7 { padding: var(--phi-7) !important; }
.p-8 { padding: var(--phi-8) !important; }
/* Padding: axis */
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: var(--phi-1) !important; padding-right: var(--phi-1) !important; }
.px-2 { padding-left: var(--phi-2) !important; padding-right: var(--phi-2) !important; }
.px-3 { padding-left: var(--phi-3) !important; padding-right: var(--phi-3) !important; }
.px-4 { padding-left: var(--phi-4) !important; padding-right: var(--phi-4) !important; }
.px-5 { padding-left: var(--phi-5) !important; padding-right: var(--phi-5) !important; }
.px-6 { padding-left: var(--phi-6) !important; padding-right: var(--phi-6) !important; }
.px-7 { padding-left: var(--phi-7) !important; padding-right: var(--phi-7) !important; }
.px-8 { padding-left: var(--phi-8) !important; padding-right: var(--phi-8) !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: var(--phi-1) !important; padding-bottom: var(--phi-1) !important; }
.py-2 { padding-top: var(--phi-2) !important; padding-bottom: var(--phi-2) !important; }
.py-3 { padding-top: var(--phi-3) !important; padding-bottom: var(--phi-3) !important; }
.py-4 { padding-top: var(--phi-4) !important; padding-bottom: var(--phi-4) !important; }
.py-5 { padding-top: var(--phi-5) !important; padding-bottom: var(--phi-5) !important; }
.py-6 { padding-top: var(--phi-6) !important; padding-bottom: var(--phi-6) !important; }
.py-7 { padding-top: var(--phi-7) !important; padding-bottom: var(--phi-7) !important; }
.py-8 { padding-top: var(--phi-8) !important; padding-bottom: var(--phi-8) !important; }
/* Padding: side */
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--phi-1) !important; }
.pt-2 { padding-top: var(--phi-2) !important; }
.pt-3 { padding-top: var(--phi-3) !important; }
.pt-4 { padding-top: var(--phi-4) !important; }
.pt-5 { padding-top: var(--phi-5) !important; }
.pt-6 { padding-top: var(--phi-6) !important; }
.pt-7 { padding-top: var(--phi-7) !important; }
.pt-8 { padding-top: var(--phi-8) !important; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: var(--phi-1) !important; }
.pr-2 { padding-right: var(--phi-2) !important; }
.pr-3 { padding-right: var(--phi-3) !important; }
.pr-4 { padding-right: var(--phi-4) !important; }
.pr-5 { padding-right: var(--phi-5) !important; }
.pr-6 { padding-right: var(--phi-6) !important; }
.pr-7 { padding-right: var(--phi-7) !important; }
.pr-8 { padding-right: var(--phi-8) !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--phi-1) !important; }
.pb-2 { padding-bottom: var(--phi-2) !important; }
.pb-3 { padding-bottom: var(--phi-3) !important; }
.pb-4 { padding-bottom: var(--phi-4) !important; }
.pb-5 { padding-bottom: var(--phi-5) !important; }
.pb-6 { padding-bottom: var(--phi-6) !important; }
.pb-7 { padding-bottom: var(--phi-7) !important; }
.pb-8 { padding-bottom: var(--phi-8) !important; }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: var(--phi-1) !important; }
.pl-2 { padding-left: var(--phi-2) !important; }
.pl-3 { padding-left: var(--phi-3) !important; }
.pl-4 { padding-left: var(--phi-4) !important; }
.pl-5 { padding-left: var(--phi-5) !important; }
.pl-6 { padding-left: var(--phi-6) !important; }
.pl-7 { padding-left: var(--phi-7) !important; }
.pl-8 { padding-left: var(--phi-8) !important; }
/* ══════════════════════════════════════════════
MARK VARIANT — lighter yellow wash
══════════════════════════════════════════════ */
.mark-light {
background: var(--yw-w); color: var(--text);
padding: 0 5px 2px; border-radius: 3px;
}
/* ══════════════════════════════════════════════
BUTTON GHOST — text-only with hover tint
══════════════════════════════════════════════ */
.btn-ghost {
background: transparent; color: var(--mg);
border-color: transparent; padding: 11px 16px;
}
.btn-ghost:hover { background: var(--mg-s); }
/* ══════════════════════════════════════════════
TAG YELLOW — emphasis / non-interactive labels
══════════════════════════════════════════════ */
.tag-yellow {
display: inline-block; background: var(--yw-w); color: var(--yw-d);
font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-sm);
}
/* ══════════════════════════════════════════════
ALERT BANNERS — success / warning / danger / info
Structural rule + colour modifiers.
══════════════════════════════════════════════ */
.alert {
display: flex; align-items: flex-start;
gap: var(--phi-4); padding: var(--phi-4) var(--phi-5);
border-radius: var(--r-md); border: 1px solid;
font-size: 14px; line-height: 1.6;
}
.alert-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; font-style: normal; }
.alert-title { font-weight: 600; margin-bottom: 3px; font-size: 14px; }
.alert-body { font-size: 13px; opacity: 0.85; }
.alert-success { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-br); }
.alert-warning { background: var(--wn-bg); color: var(--wn); border-color: var(--wn-br); }
/* Danger — dedicated tokens, visually distinct from brand magenta */
.alert-danger { background: var(--dg-bg); color: var(--dg); border-color: var(--dg-br); }
/* Info — desaturated slate, warm undertone */
.alert-info { background: var(--in-bg); color: var(--in); border-color: var(--in-br); }
/* ══════════════════════════════════════════════
PHI-GRID — two-column golden ratio layout
Primary column 61.8%, secondary 38.2%.
══════════════════════════════════════════════ */
.phi-grid {
display: grid;
grid-template-columns: 61.8% 38.2%;
gap: var(--phi-6);
}
@media (max-width: 768px) {
.phi-grid { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════
BENTO GRIDS — 3-col, φ-split, 2-col
══════════════════════════════════════════════ */
.bento { display: grid; gap: var(--phi-4); }
.bento-3col { grid-template-columns: 1fr 1fr 1fr; }
.bento-phi { grid-template-columns: 61.8% 38.2%; }
.bento-2col { grid-template-columns: 1fr 1fr; }
@media (max-width: 768px) {
.bento-3col,
.bento-phi,
.bento-2col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.bento-3col,
.bento-phi,
.bento-2col { grid-template-columns: 1fr; }
}
/* ══════════════════════════════════════════════
GEO DECORATION ALIASES
Verbose-name counterparts to existing .geo / .gc.
Both sets work — use whichever is clearer.
══════════════════════════════════════════════ */
.geo-container { position: relative; overflow: hidden; }
.geo-svg {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none; z-index: 0;
}
.geo-content { position: relative; z-index: 1; }
/* ══════════════════════════════════════════════
BLOCKQUOTE VARIANTS
All use .bq-geo-mark SVG and .bq-author structure.
══════════════════════════════════════════════ */
/* Large — statement-size quote on light background */
.bq-large { padding: var(--phi-7); }
.bq-large .bq-text {
font-size: clamp(20px, 2.6vw, 32px); font-weight: 600;
line-height: 1.3; letter-spacing: -0.02em;
color: var(--text); margin-bottom: var(--phi-5);
}
.bq-large .bq-text em { font-style: normal; color: var(--mg); }
/* Yellow — pull quote, no author, warm wash */
.bq-yellow {
padding: var(--phi-6);
background: var(--yw-w);
border-radius: var(--r-lg);
}
.bq-yellow .bq-text {
font-size: 1.1875rem; line-height: 1.55; font-weight: 500;
color: var(--text); margin-bottom: var(--phi-4);
}
/* Bare — no background, no border, no padding.
SVG geo-mark stroke should use currentColor so it inherits the parent colour.
Use inside sections where the surrounding layout provides context. */
.bq-bare { padding: 0; }
.bq-bare .bq-text {
font-size: 1.1875rem; line-height: 1.6; font-weight: 500;
color: var(--text); margin-bottom: var(--phi-4);
}
/* Dark — on ink background */
.bq-dark {
padding: var(--phi-6) var(--phi-7);
background: var(--ink-s); border-radius: var(--r-lg);
border: 1px solid var(--ink-b);
}
.bq-dark .bq-text {
color: var(--text-inv);
font-size: clamp(18px, 2.2vw, 28px); font-weight: 600;
line-height: 1.3; letter-spacing: -0.01em; margin-bottom: var(--phi-4);
}
.bq-dark .bq-text em { color: var(--mg-dk); font-style: normal; }
/* Author avatar — initials circle */
.bq-av {
width: 44px; height: 44px; border-radius: 50%;
background: var(--surface-r); border: 2px solid var(--border);
overflow: hidden; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 600; color: var(--text-2);
}
.bq-av.inv { background: rgba(255,255,255,.08); border-color: var(--ink-b); color: rgba(250,243,232,.6); }
/* Photo inside avatar — fills the circle, overrides initials layout */
.bq-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Author name/role — .bq-an/.bq-ar are short aliases */
.bq-an, .bq-name { font-size: 0.875rem; font-weight: 600; color: var(--text-2); }
.bq-ar, .bq-role { font-size: 0.75rem; color: var(--text-m); margin-top: 2px; }
.bq-an.inv, .bq-name.inv { color: var(--text-inv); }
.bq-ar.inv, .bq-role.inv { color: rgba(250, 243, 232, 0.45); }
/* ══════════════════════════════════════════════
STATEMENT SECTION — full-width text moments
between page sections. Use .geo-container on
the wrapper for optional SVG decoration.
══════════════════════════════════════════════ */
.stmt {
min-height: 55vh; display: flex;
align-items: center; justify-content: center;
padding: var(--phi-8) var(--phi-7);
text-align: center; position: relative; overflow: hidden;
}
.stmt.left { justify-content: flex-start; text-align: left; }
.stmt.dark-bg { background: var(--ink); }
@media (max-width: 768px) {
.stmt { min-height: 40vh; padding: var(--phi-7) var(--phi-5); }
}
.stmt-text {
font-size: clamp(32px, 5.5vw, 76px); font-weight: 700;
line-height: 1.05; letter-spacing: -0.035em; max-width: 900px;
position: relative; z-index: 1;
}
.stmt-sub {
font-size: clamp(15px, 1.6vw, 19px); line-height: 1.65;
color: var(--text-2); margin-top: var(--phi-5); max-width: 520px;
position: relative; z-index: 1;
}
.stmt-sub.inv { color: rgba(250, 243, 232, 0.50); }
/* ══════════════════════════════════════════════
EYEBROW PILL — context label above headlines
══════════════════════════════════════════════ */
.eyebrow {
display: inline-flex; align-items: center; gap: var(--phi-3);
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-full); padding: 6px var(--phi-4);
font-size: 12px; font-weight: 600; color: var(--text-2);
margin-bottom: var(--phi-5);
}
/* ══════════════════════════════════════════════
BUTTON SMALL — compact size for nav / inline CTAs
══════════════════════════════════════════════ */
.btn-sm {
font-size: 0.8125rem; padding: 8px 18px;
border-radius: 6px;
}
/* ══════════════════════════════════════════════
RESPONSIVE SHOW / HIDE UTILITIES
══════════════════════════════════════════════ */
.hide-sm { }
.show-sm { display: none; }
@media (max-width: 480px) {
.hide-sm { display: none; }
.show-sm { display: block; }
}
.hide-md { }
.show-md { display: none; }
@media (max-width: 768px) {
.hide-md { display: none; }
.show-md { display: block; }
}
/* ══════════════════════════════════════════════
HOMEPAGE — section-specific styles
Scoped to .hp-* so they don't bleed onto
product pages or the brand sheet.
══════════════════════════════════════════════ */
/* ── Hero ── */
.hp-hero {
padding: var(--phi-8) 0;
min-height: 70vh; display: flex; align-items: center;
}
.hp-hero-inner { max-width: 760px; }
.hp-hero-h {
font-size: clamp(32px, 5vw, 64px);
font-weight: 700; line-height: 1.1; letter-spacing: -0.03em;
color: var(--text-inv); margin-bottom: var(--phi-5);
}
/* Reuse .mark but force contrast on dark background */
.hp-hero-h .mark { background: var(--yw); color: var(--text); }
.hp-hero-sub {
font-size: clamp(15px, 1.8vw, 20px); line-height: 1.65;
color: rgba(250, 243, 232, 0.60); max-width: 560px;
}
@media (max-width: 768px) {
.hp-hero { min-height: 60vh; }
}
@media (max-width: 480px) {
.hp-hero { min-height: 50vh; }
}
/* ── Services ── */
.hp-services-sub {
font-size: 1.0625rem; color: var(--text-2);
margin-top: calc(var(--phi-5) * -1); margin-bottom: var(--phi-6);
max-width: 560px;
}
/* Legacy single-card layout — kept for reference, no longer used on homepage */
.hp-service-card {
max-width: 600px;
margin-bottom: var(--phi-5);
}
.hp-service-card-inner {
display: flex; flex-direction: column; gap: var(--phi-5);
}
.hp-service-card-body h3 { margin-bottom: var(--phi-3); }
.hp-service-desc {
font-size: 1.0625rem; color: var(--text-2);
line-height: 1.6; margin-bottom: var(--phi-4);
}
.hp-service-bullets {
list-style: none; display: flex; flex-direction: column; gap: var(--phi-2);
}
.hp-service-bullets li {
font-size: 0.9375rem; color: var(--text-2);
padding-left: var(--phi-5); position: relative;
}
.hp-service-bullets li::before {
content: '→'; position: absolute; left: 0;
color: var(--mg); font-weight: 600;
}
.hp-service-card-cta { padding-top: var(--phi-4); }
/* 3-column product cards on homepage (bento grid items) */
.hp-product-card {
display: flex;
flex-direction: column;
/* Pushes CTA to the card bottom regardless of description length */
justify-content: space-between;
}
/* Body grows to fill available height; CTA stays anchored at bottom */
.hp-product-body { flex: 1; }
/* ── Recognition ── */
.hp-symptom-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--phi-4) var(--phi-6);
margin-top: var(--phi-6); margin-bottom: var(--phi-6);
}
@media (max-width: 768px) {
.hp-symptom-grid { grid-template-columns: 1fr; }
}
.hp-symptom {
display: flex; align-items: flex-start; gap: var(--phi-3);
font-size: 1rem; color: var(--text-2); line-height: 1.5;
}
.hp-symptom-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--mg); flex-shrink: 0;
margin-top: 8px; /* vertical-align with first line of text */
}
.hp-recognition-close {
font-size: 1.0625rem; font-weight: 500;
color: var(--text); max-width: 640px;
padding: var(--phi-5) var(--phi-6);
background: var(--yw-w);
border-radius: var(--r-base);
}
/* ── Trust strip ── */
.hp-trust {
padding: var(--phi-7) 0; /* shorter than a full section */
text-align: center;
}
.hp-trust-label {
font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--text-m);
margin-bottom: var(--phi-5);
}
.hp-trust-logos {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
align-items: center;
column-gap: var(--phi-5);
row-gap: var(--phi-5);
margin-bottom: var(--phi-4);
}
.hp-trust-logo {
height: 26px;
width: auto;
display: block;
max-width: 100%;
margin: 0 auto;
opacity: 0.82;
}
@media (max-width: 768px) {
.hp-trust-logos { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
}
@media (max-width: 480px) {
.hp-trust-logos { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
}
.hp-trust-name {
font-size: 0.9375rem; font-weight: 600;
color: var(--text-2); letter-spacing: 0.01em;
}
.hp-trust-sep {
color: var(--border); font-size: 1rem;
}
.hp-trust-context {
font-size: 0.8125rem; color: var(--text-m);
}
/* ── Founder ── */
.hp-founder-grid {
/* Stack photo below content on mobile */
align-items: start;
}
.hp-founder-body {
}
.hp-founder-desc {
font-size: 1.0625rem; color: var(--text-2); line-height: 1.65;
max-width: 520px;
}
.hp-founder-photo {
border-radius: var(--r-lg);
overflow: hidden; /* clip image to rounded corners */
min-height: 420px;
}
.hp-founder-photo img {
width: 100%; height: 100%;
object-fit: cover; object-position: top center;
display: block;
}
@media (max-width: 768px) {
/* Photo moves below text on small screens */
.hp-founder-grid { grid-template-columns: 1fr; }
.hp-founder-body { padding-right: 0; }
.hp-founder-photo { min-height: 320px; }
}
/* ── Testimonials ── */
.hp-testimonials-grid {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: var(--phi-6); margin-top: var(--phi-6); /* --phi-6 = 42px — consistent across all testimonial grids */
}
@media (max-width: 1024px) {
.hp-testimonials-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.hp-testimonials-grid { grid-template-columns: 1fr; }
}