/* ============================================================
dcomply-system.css — v4 Service-firm design system
Single source of truth. Loaded AFTER styles.css so overrides win.
Written 2026-10-18 · Phase 0 of service-firm site redesign.
See docs/CSS-CONTRACT.md for the rules.
============================================================ */
/* ============================================================
1. DESIGN TOKENS
============================================================ */
:root {
/* --- Paper + ink --- */
--dc-paper: #F8F7F4;
--dc-paper-warm: #F4EDE0; /* letter blocks only */
--dc-paper-cream: #FBF6EC; /* voice cards only */
--dc-paper-grid: rgba(26,29,36,0.04);
--dc-line: #D4D1C8;
--dc-line-dark: #1A1D24;
--dc-ink: #1A1D24;
--dc-ink-mute: #5B6472;
/* --- Brand palette (strict, semantic) --- */
--dc-brand: #1E3A8A; /* owned brand colour */
--dc-brand-soft: #DBE4FF;
--dc-brand-deep: #0F2666;
--dc-mint: #A3C9B5; /* completed / output states */
--dc-mint-deep: #4F8B6E;
--dc-clay: #B04E27; /* handwriting + human warmth only */
--dc-red-ink: #A42B1C; /* letter block pen marks only */
--dc-amber: #D97706; /* live ticker only */
--dc-logo-red: #EB2E26; /* sampled from the logo "d" — use sparingly for live pulse / hot badges / focus accents */
--dc-logo-red-soft:#FCE2E0; /* soft tint of logo-red for subtle backgrounds */
/* --- Bootstrap primary override — cascades through old styles --- */
--primary: #1E3A8A;
--primary-dark: #0F2666;
--primary-light: #DBE4FF;
/* --- Typography --- */
--dc-font-sans: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
--dc-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
--dc-font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
--dc-font-hand: "Caveat", cursive;
/* type scale */
--dc-f-xs: 11px;
--dc-f-sm: 13px;
--dc-f-base: 15px;
--dc-f-md: 17px;
--dc-f-lg: 20px;
--dc-f-xl: 24px;
--dc-f-2xl: 32px;
--dc-f-3xl: 40px;
--dc-f-4xl: 48px;
--dc-f-5xl: 60px;
/* line heights */
--dc-lh-tight: 1.08;
--dc-lh-snug: 1.3;
--dc-lh-base: 1.6;
--dc-lh-loose: 1.75;
/* letter spacing */
--dc-ls-mono: 0.08em;
--dc-ls-mono-wide: 0.14em;
--dc-ls-head: -0.018em;
/* --- Spacing (8-pt grid) --- */
--dc-s-1: 4px;
--dc-s-2: 8px;
--dc-s-3: 12px;
--dc-s-4: 16px;
--dc-s-5: 24px;
--dc-s-6: 32px;
--dc-s-7: 48px;
--dc-s-8: 64px;
--dc-s-9: 96px;
--dc-s-10: 128px;
/* --- Borders + radii --- */
--dc-r-sm: 0; /* corporate = square. Radii reserved for pills + marker */
--dc-r-pill: 999px;
--dc-border: 1px solid var(--dc-line);
--dc-border-strong: 1px solid var(--dc-line-dark);
/* --- Transitions --- */
--dc-t-fast: 120ms ease;
--dc-t-med: 180ms ease;
--dc-t-slow: 280ms ease;
/* --- Layout --- */
--dc-container: 1240px;
--dc-gutter: 32px;
}
/* ============================================================
2. FONT LOADING
Fonts are preconnected in head.php, loaded via @import here so
this file is the single source of truth for the font stack.
============================================================ */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&family=Caveat:wght@500;600;700&display=swap");
/* ============================================================
3. BASE RESET + GLOBAL
Scoped to body + html so we don't fight Bootstrap resets.
============================================================ */
html, body {
background: var(--dc-paper);
color: var(--dc-ink);
font-family: var(--dc-font-sans);
font-size: var(--dc-f-base);
line-height: var(--dc-lh-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-image:
linear-gradient(var(--dc-paper-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--dc-paper-grid) 1px, transparent 1px);
background-size: 48px 48px;
background-attachment: fixed;
overflow-x: hidden;
}
/* Headings inherit sans by default — serif is explicit via .dc-serif */
h1, h2, h3, h4, h5, h6 {
font-family: var(--dc-font-sans);
font-weight: 500;
letter-spacing: var(--dc-ls-head);
color: var(--dc-ink);
line-height: var(--dc-lh-snug);
}
/* ============================================================
4. UTILITY CLASSES
============================================================ */
.dc-mono { font-family: var(--dc-font-mono); }
.dc-serif { font-family: var(--dc-font-serif); }
.dc-hand { font-family: var(--dc-font-hand); }
.dc-text-brand { color: var(--dc-brand); }
.dc-text-mint { color: var(--dc-mint-deep); }
.dc-text-clay { color: var(--dc-clay); }
.dc-text-amber { color: var(--dc-amber); }
.dc-text-mute { color: var(--dc-ink-mute); }
.dc-list--plain { list-style: none; padding: 0; margin: 0; }
.dc-section-note { font-size: 13px; margin-top: var(--dc-s-5); color: var(--dc-ink-mute); }
.dc-section-note--centre { text-align: center; }
/* ============================================================
5. MARKER (highlighter effect on key words)
Usage: word
word
============================================================ */
.dc-marker {
position: relative;
display: inline-block;
padding: 0 0.08em;
z-index: 0;
}
.dc-marker::before {
content: '';
position: absolute;
left: -3px; right: -3px; top: 18%; bottom: 12%;
z-index: -1;
background: var(--dc-brand-soft);
opacity: 1;
transform: skew(-4deg) rotate(-0.4deg);
mix-blend-mode: multiply;
border-radius: 2px 4px 3px 5px / 50% 50% 50% 50%;
}
.dc-marker--mint::before { background: var(--dc-mint); opacity: 0.6; }
.dc-marker--clay::before { background: var(--dc-clay); opacity: 0.25; }
.dc-marker--red::before { background: var(--dc-logo-red); opacity: 0.18; }
/* ============================================================
6. BUTTONS
============================================================ */
.dc-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
font-family: var(--dc-font-sans);
font-size: 14px;
font-weight: 500;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: background var(--dc-t-fast), color var(--dc-t-fast), border-color var(--dc-t-fast);
white-space: nowrap;
}
.dc-btn--primary {
background: var(--dc-ink);
color: var(--dc-paper);
border-color: var(--dc-ink);
position: relative;
box-shadow: inset 0 -2px 0 0 transparent;
transition: background var(--dc-t-fast), color var(--dc-t-fast), border-color var(--dc-t-fast), box-shadow var(--dc-t-fast);
}
.dc-btn--primary:hover {
background: var(--dc-brand);
border-color: var(--dc-brand);
color: var(--dc-paper);
/* Thin logo-red bottom inset on hover — echoes the brand mark */
box-shadow: inset 0 -2px 0 0 var(--dc-logo-red);
}
.dc-btn--ghost {
background: transparent;
color: var(--dc-ink);
border-bottom: 1px solid var(--dc-ink);
padding: 14px 0;
}
.dc-btn--ghost:hover { color: var(--dc-brand); border-bottom-color: var(--dc-brand); }
.dc-btn--mint {
background: var(--dc-mint);
color: var(--dc-ink);
border-color: var(--dc-mint);
}
.dc-btn--mint:hover {
background: var(--dc-paper);
color: var(--dc-ink);
}
.dc-btn--sm {
padding: 10px 16px;
font-size: 13px;
}
.dc-btn--mono {
font-family: var(--dc-font-mono);
font-size: 12px;
letter-spacing: var(--dc-ls-mono);
text-transform: uppercase;
}
/* ============================================================
7. TOPBAR (utility strip above nav)
============================================================ */
.dc-topbar {
background: var(--dc-ink);
color: rgba(248, 247, 244, 0.75);
border-bottom: 1px solid var(--dc-line-dark);
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.04em;
}
.dc-topbar-inner {
max-width: var(--dc-container);
margin: 0 auto;
padding: 10px var(--dc-gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
min-height: 36px;
}
.dc-topbar-left {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.dc-topbar-right {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.dc-topbar-live-dot {
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--dc-amber);
box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.2);
animation: dc-pulse 2s infinite;
margin-right: 6px;
vertical-align: middle;
}
@keyframes dc-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.dc-topbar-link {
color: rgba(248, 247, 244, 0.75);
text-decoration: none;
white-space: nowrap;
transition: color var(--dc-t-fast);
}
.dc-topbar-link:hover { color: var(--dc-paper); }
.dc-topbar-link--signin { color: var(--dc-mint); font-weight: 500; }
.dc-topbar-cta {
background: var(--dc-mint);
color: var(--dc-ink);
padding: 5px 12px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
transition: background var(--dc-t-fast);
}
.dc-topbar-cta:hover { background: var(--dc-paper); color: var(--dc-ink); }
.dc-topbar-sep { opacity: 0.3; }
/* ============================================================
8. NAV
Keeps Bootstrap structural classes (.navbar, .navbar-nav,
.dropdown-menu) for mobile-collapse behaviour. All visual
styling owned here.
============================================================ */
.dc-nav {
background: var(--dc-paper);
border-bottom: 1px solid var(--dc-line);
padding: 0;
}
.dc-nav .container {
max-width: var(--dc-container);
padding: 14px var(--dc-gutter);
}
.dc-nav .navbar-brand img {
height: 36px;
width: auto;
}
.dc-nav .navbar-nav {
gap: 4px;
}
.dc-nav .nav-link {
color: var(--dc-ink);
font-family: var(--dc-font-sans);
font-size: 14px;
font-weight: 400;
padding: 10px 14px;
transition: color var(--dc-t-fast);
position: relative;
}
.dc-nav .nav-link:hover,
.dc-nav .nav-link:focus { color: var(--dc-brand); }
.dc-nav .nav-link.active,
.dc-nav .nav-link.dc-nav-link--active {
color: var(--dc-brand);
font-weight: 500;
position: relative;
}
/* Tiny logo-red underline on the active nav item — echoes the red "d" in the brand mark */
.dc-nav .nav-link.dc-nav-link--active::after {
content: '';
position: absolute;
left: 12px;
right: 12px;
bottom: 2px;
height: 2px;
background: var(--dc-logo-red);
}
/* dropdown menus — kill rounded, add border, kill shadow */
.dc-nav .dropdown-menu {
background: var(--dc-paper);
border: 1px solid var(--dc-line-dark);
border-radius: 0;
box-shadow: 4px 4px 0 var(--dc-paper-cream), 4px 4px 0 1px var(--dc-line-dark);
padding: 12px;
margin-top: 4px;
font-size: 14px;
min-width: 340px; /* ensure Solutions / Free Tools / Learn don't collapse */
max-width: 460px; /* keep normal dropdowns from running too wide */
}
.dc-nav .dropdown-menu.dc-nav-megamenu {
min-width: 780px;
max-width: none;
}
.dc-nav .dropdown-item {
padding: 10px 12px;
color: var(--dc-ink);
border-radius: 0;
display: flex;
align-items: center;
gap: 10px;
transition: background var(--dc-t-fast);
white-space: normal;
min-width: 0;
}
.dc-nav .dropdown-item:hover,
.dc-nav .dropdown-item:focus {
background: var(--dc-brand-soft);
color: var(--dc-brand-deep);
}
.dc-nav .dropdown-item strong { font-weight: 500; }
/* Items with nested children (Compare dropdown name/badge rows) —
first span takes available width and clips; last span (badge/price) sits right. */
.dc-nav .dropdown-item > span:first-of-type {
display: inline-flex;
align-items: center;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dc-nav .dropdown-item > span:last-of-type {
flex-shrink: 0;
margin-left: auto;
white-space: nowrap;
}
.dc-nav .dropdown-item > span:only-of-type {
flex: 1 1 auto;
}
/* Right-aligned helper text (Solutions dropdown prices, Free-Tools subtitles) —
bootstrap's .ms-auto + .small / .text-muted inside a dropdown-item.
Keep on one line, align right. */
.dc-nav .dropdown-item .ms-auto,
.dc-nav .dropdown-item .text-muted.small {
margin-left: auto;
flex-shrink: 0;
white-space: nowrap;
}
.dc-nav .dropdown-header {
font-family: var(--dc-font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--dc-ink-mute);
padding: 10px 12px 6px;
}
.dc-nav .dropdown-divider { border-top-color: var(--dc-line); margin: 8px 0; }
.dc-nav .dropdown-item .text-muted { color: var(--dc-ink-mute) !important; }
.dc-nav .dropdown-item .small,
.dc-nav .dropdown-item small {
font-family: var(--dc-font-mono);
font-size: 10px;
letter-spacing: 0.04em;
color: var(--dc-ink-mute);
}
.dc-nav .dropdown-item i.bi { color: var(--dc-brand); font-size: 14px; width: 18px; }
/* mega-menu variants */
.dc-nav-megamenu {
min-width: 780px;
padding: 20px;
}
.dc-nav-megamenu-card {
display: block;
padding: 16px;
border: 1px solid var(--dc-line);
text-decoration: none;
color: inherit;
transition: border-color var(--dc-t-fast), background var(--dc-t-fast);
height: 100%;
}
.dc-nav-megamenu-card:hover {
border-color: var(--dc-ink);
background: var(--dc-paper-cream);
color: inherit;
}
.dc-nav-megamenu-card-head {
font-weight: 500;
margin-bottom: 6px;
color: var(--dc-ink);
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
font-size: 14px;
}
.dc-nav-megamenu-card-head i.bi { color: var(--dc-brand); font-size: 14px; flex-shrink: 0; }
.dc-nav-megamenu-card-desc {
font-size: 12px;
color: var(--dc-ink-mute);
margin-bottom: 8px;
line-height: 1.5;
}
.dc-nav-megamenu-card-count {
font-family: var(--dc-font-mono);
font-size: 11px;
letter-spacing: 0.06em;
color: var(--dc-brand);
text-transform: uppercase;
white-space: nowrap;
}
.dc-nav-megamenu-foot {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--dc-line);
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--dc-font-mono);
font-size: 11px;
color: var(--dc-ink-mute);
letter-spacing: 0.04em;
}
/* nav badges (small meta tags) */
.dc-nav .badge {
font-family: var(--dc-font-mono);
font-weight: 400;
font-size: 9px;
letter-spacing: 0.06em;
padding: 3px 7px;
border-radius: 0;
background: var(--dc-line);
color: var(--dc-ink);
text-transform: uppercase;
}
.dc-nav .badge.bg-danger { background: var(--dc-clay); color: var(--dc-paper); }
.dc-nav .badge.bg-success-subtle,
.dc-nav .badge.bg-success { background: var(--dc-mint); color: var(--dc-ink); }
.dc-nav .badge.bg-primary-subtle,
.dc-nav .badge.bg-primary { background: var(--dc-brand-soft); color: var(--dc-brand-deep); }
.dc-nav .badge.bg-warning { background: var(--dc-amber); color: var(--dc-ink); }
/* nav primary CTA button */
.dc-nav-cta-group {
display: flex;
gap: 10px;
align-items: center;
}
/* mobile toggler */
.dc-nav .navbar-toggler {
border: 1px solid var(--dc-line-dark);
border-radius: 0;
padding: 6px 10px;
}
.dc-nav .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%231A1D24' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/* ============================================================
9. FOOTER
============================================================ */
.dc-footer {
background: var(--dc-ink);
color: rgba(248, 247, 244, 0.72);
padding: 72px 0 0;
border-top: 1px solid var(--dc-line-dark);
font-family: var(--dc-font-sans);
font-size: 14px;
line-height: 1.65;
}
.dc-footer .container {
max-width: var(--dc-container);
padding: 0 var(--dc-gutter);
}
.dc-footer-brand img {
width: 92px;
height: auto;
margin-bottom: 20px;
}
.dc-footer-desc {
color: rgba(248, 247, 244, 0.62);
max-width: 320px;
font-size: 13px;
line-height: 1.65;
}
.dc-footer-social {
display: flex;
gap: 14px;
margin-top: 20px;
}
.dc-footer-social a {
color: rgba(248, 247, 244, 0.72);
font-size: 18px;
text-decoration: none;
transition: color var(--dc-t-fast);
}
.dc-footer-social a:hover { color: var(--dc-mint); }
.dc-footer-heading {
font-family: var(--dc-font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--dc-paper);
margin-bottom: 16px;
padding-top: 10px;
border-top: 1px solid rgba(248, 247, 244, 0.15);
}
.dc-footer-links {
list-style: none;
padding: 0;
margin: 0 0 24px;
}
.dc-footer-links li { margin-bottom: 8px; }
.dc-footer-links a {
color: rgba(248, 247, 244, 0.68);
text-decoration: none;
font-size: 13px;
transition: color var(--dc-t-fast);
}
.dc-footer-links a:hover { color: var(--dc-mint); }
.dc-footer-links a strong { color: var(--dc-paper); font-weight: 500; }
/* Academy certifications strip */
.dc-footer-academy {
margin-top: 40px;
padding-top: 28px;
border-top: 1px solid rgba(248, 247, 244, 0.1);
}
.dc-footer-academy-heading {
font-family: var(--dc-font-mono);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--dc-paper);
margin-bottom: 14px;
}
.dc-footer-academy-list {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
list-style: none;
padding: 0;
margin: 0;
}
.dc-footer-academy-list a {
color: rgba(248, 247, 244, 0.68);
text-decoration: none;
font-size: 13px;
transition: color var(--dc-t-fast);
}
.dc-footer-academy-list a:hover { color: var(--dc-mint); }
.dc-footer-academy-list .dc-footer-academy-flag {
color: var(--dc-mint);
font-size: 11px;
margin-left: 4px;
}
/* Footer bottom bar */
.dc-footer-bottom {
margin-top: 48px;
padding: 24px 0;
border-top: 1px solid rgba(248, 247, 244, 0.12);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-family: var(--dc-font-mono);
font-size: 11px;
letter-spacing: 0.06em;
color: rgba(248, 247, 244, 0.5);
text-transform: uppercase;
}
.dc-footer-bottom p { margin: 0; }
/* ============================================================
10. SECTION / LAYOUT PRIMITIVES
Used in Phase 1 onwards.
============================================================ */
.dc-section {
max-width: var(--dc-container);
margin: 0 auto;
padding: var(--dc-s-9) var(--dc-gutter);
border-top: 1px solid var(--dc-line-dark);
position: relative;
}
.dc-section--first {
border-top: none;
padding-top: var(--dc-s-7);
}
.dc-section-label {
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: var(--dc-ls-mono-wide);
color: var(--dc-ink-mute);
text-transform: uppercase;
padding-top: var(--dc-s-3);
border-top: 1px solid var(--dc-line-dark);
display: inline-block;
min-width: 160px;
margin-bottom: var(--dc-s-5);
}
.dc-hand-note {
font-family: var(--dc-font-hand);
font-size: 20px;
color: var(--dc-clay);
line-height: var(--dc-lh-snug);
display: inline-block;
}
.dc-hand-note--arrow {
display: inline-flex;
align-items: baseline;
gap: 10px;
}
.dc-hand-note--arrow svg {
flex-shrink: 0;
transform: translateY(3px);
}
/* ============================================================
11. COMPONENT: schematic container
============================================================ */
.dc-schematic {
background: var(--dc-paper);
border: 1px solid var(--dc-line-dark);
padding: var(--dc-s-6) var(--dc-s-6) var(--dc-s-6);
position: relative;
}
.dc-schematic-label {
position: absolute;
top: -8px;
left: 20px;
background: var(--dc-paper);
padding: 0 10px;
font-family: var(--dc-font-mono);
font-size: 10px;
color: var(--dc-ink-mute);
letter-spacing: 0.1em;
}
.dc-schematic-sig {
position: absolute;
bottom: 14px;
right: 24px;
display: flex;
align-items: center;
gap: 12px;
}
.dc-schematic-sig-label {
font-family: var(--dc-font-mono);
font-size: 9px;
color: var(--dc-ink-mute);
letter-spacing: 0.1em;
}
/* Any SVG inside a schematic renders as a block to kill the inline-whitespace gap. */
.dc-schematic svg { display: block; width: 100%; height: auto; }
/* ============================================================
12. COMPONENT: service cell (wedge card)
============================================================ */
.dc-service-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--dc-line-dark);
border: 1px solid var(--dc-line-dark);
}
.dc-service-cell {
background: var(--dc-paper);
padding: var(--dc-s-6) var(--dc-s-5);
display: flex;
flex-direction: column;
min-height: 360px;
position: relative;
}
.dc-service-cell-no {
font-family: var(--dc-font-mono);
font-size: 10px;
color: var(--dc-brand);
letter-spacing: 0.1em;
margin-bottom: var(--dc-s-5);
}
.dc-service-cell-icon {
width: 54px;
height: 54px;
margin-bottom: var(--dc-s-5);
color: var(--dc-brand);
}
.dc-service-cell h3,
.dc-service-cell .dc-service-cell-title {
font-size: 20px;
font-weight: 500;
margin-bottom: var(--dc-s-3);
letter-spacing: -0.005em;
}
.dc-service-cell p {
font-size: 13px;
color: var(--dc-ink-mute);
line-height: 1.6;
margin-bottom: auto;
}
.dc-service-cell-foot {
margin-top: var(--dc-s-5);
padding-top: var(--dc-s-4);
border-top: 1px dashed var(--dc-line);
font-family: var(--dc-font-mono);
font-size: 11px;
color: var(--dc-ink-mute);
letter-spacing: 0.04em;
}
.dc-service-cell-foot strong { color: var(--dc-ink); font-weight: 500; }
.dc-service-cell-flag {
position: absolute;
top: 22px;
right: 18px;
font-family: var(--dc-font-hand);
font-size: 16px;
color: var(--dc-clay);
line-height: 1.1;
text-align: right;
max-width: 110px;
transform: rotate(-3deg);
}
/* ============================================================
13. COMPONENT: letter card (desk letter)
============================================================ */
.dc-letter-card {
background: var(--dc-paper-warm);
background-image: radial-gradient(ellipse at top left, rgba(176,78,39,0.05) 0%, transparent 55%);
border: 1px solid var(--dc-line-dark);
padding: var(--dc-s-7) 56px var(--dc-s-7);
position: relative;
max-width: 780px;
box-shadow: 4px 4px 0 var(--dc-paper-cream), 4px 4px 0 1px var(--dc-line-dark);
}
.dc-letter-card::before {
content: '';
position: absolute;
top: -14px; left: 32px;
width: 72px; height: 28px;
background: var(--dc-paper-cream);
border: 1px solid var(--dc-line-dark);
transform: rotate(-4deg);
}
.dc-letter-card::after {
content: 'PRIVATE';
position: absolute;
top: -8px; left: 46px;
font-family: var(--dc-font-mono);
font-size: 11px;
letter-spacing: 0.15em;
color: var(--dc-ink);
transform: rotate(-4deg);
z-index: 1;
}
.dc-letter-head {
font-family: var(--dc-font-mono);
font-size: 11px;
color: var(--dc-ink-mute);
letter-spacing: 0.08em;
padding-bottom: var(--dc-s-5);
border-bottom: 1px dashed var(--dc-line);
margin-bottom: var(--dc-s-5);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.dc-letter-body {
font-family: var(--dc-font-serif);
font-size: 22px;
line-height: 1.55;
color: var(--dc-ink);
}
.dc-letter-body p { margin-bottom: var(--dc-s-4); }
.dc-letter-strike {
position: relative;
display: inline-block;
color: var(--dc-ink-mute);
}
.dc-letter-strike::after {
content: '';
position: absolute;
left: -4px; right: -4px; top: 54%;
height: 2px;
background: var(--dc-red-ink);
transform: rotate(-2deg);
}
.dc-letter-circle {
position: relative;
display: inline-block;
padding: 0 0.15em;
color: var(--dc-red-ink);
font-style: italic;
}
.dc-letter-circle::before {
content: '';
position: absolute;
left: -6px; right: -6px; top: -4px; bottom: -4px;
border: 1.5px solid var(--dc-red-ink);
border-radius: 50%;
transform: rotate(-3deg);
opacity: 0.75;
clip-path: polygon(0 15%, 100% 5%, 95% 95%, 5% 100%);
}
.dc-letter-signoff {
margin-top: var(--dc-s-6);
display: grid;
grid-template-columns: 1fr auto;
gap: var(--dc-s-6);
align-items: end;
}
.dc-letter-closing {
font-family: var(--dc-font-hand);
font-size: 26px;
color: var(--dc-brand-deep);
line-height: var(--dc-lh-snug);
}
.dc-letter-closing strong {
display: block;
font-weight: 600;
color: var(--dc-ink);
}
.dc-letter-meta {
font-family: var(--dc-font-mono);
font-size: 10px;
color: var(--dc-ink-mute);
letter-spacing: 0.08em;
text-align: right;
}
/* ============================================================
14. COMPONENT: voice card (testimonial)
============================================================ */
.dc-voice-card {
background: var(--dc-paper-cream);
border: 1px solid var(--dc-line-dark);
padding: var(--dc-s-6);
position: relative;
}
.dc-voice-card::before {
content: '';
position: absolute;
top: -8px; left: 24px;
width: 48px; height: 16px;
background: var(--dc-paper-warm);
border: 1px solid var(--dc-line-dark);
transform: rotate(-2deg);
}
.dc-voice-card-no {
font-family: var(--dc-font-mono);
font-size: 10px;
color: var(--dc-brand);
letter-spacing: 0.1em;
margin-bottom: var(--dc-s-4);
}
.dc-voice-card blockquote,
.dc-voice-card .dc-voice-card-quote {
font-family: var(--dc-font-serif);
font-size: 22px;
line-height: 1.45;
color: var(--dc-ink);
font-style: italic;
margin: 0 0 var(--dc-s-5);
}
.dc-voice-card-attr {
font-family: var(--dc-font-mono);
font-size: 11px;
color: var(--dc-ink-mute);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.dc-voice-card-attr strong {
color: var(--dc-ink);
font-weight: 500;
}
/* ============================================================
15. COMPONENT: signature block
============================================================ */
.dc-signature {
display: flex;
flex-direction: column;
gap: 6px;
}
.dc-signature-printed {
font-family: var(--dc-font-mono);
font-size: 10px;
color: var(--dc-ink-mute);
letter-spacing: 0.1em;
}
/* ============================================================
16. OVERRIDES — Bootstrap button + legacy styles.css carryover
The old styles.css loads first; these win via file order + specificity.
============================================================ */
.btn-primary {
background: var(--dc-ink) !important;
border-color: var(--dc-ink) !important;
color: var(--dc-paper) !important;
font-family: var(--dc-font-sans);
font-weight: 500;
letter-spacing: 0;
border-radius: 0 !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
background: var(--dc-brand) !important;
border-color: var(--dc-brand) !important;
color: var(--dc-paper) !important;
}
.btn-outline-primary {
background: transparent !important;
color: var(--dc-ink) !important;
border-color: var(--dc-ink) !important;
border-radius: 0 !important;
}
.btn-outline-primary:hover {
background: var(--dc-ink) !important;
color: var(--dc-paper) !important;
}
/* Sticky top from Bootstrap — kill the SaaS shadow */
.navbar.sticky-top { box-shadow: none; }
/* Links across the whole site get brand hover (unless opted out) */
a { transition: color var(--dc-t-fast); }
/* ============================================================
16b. LEGACY FEATURE-PAGE CHROME OVERRIDES
Targets classes used by all 82 /features/*.php pages (which
aren't individually rebuilt in Phase 2). Makes them render in
v4 chrome without touching page content.
============================================================ */
/* Legacy hero */
.feature-page-hero {
background: var(--dc-paper) !important;
padding: var(--dc-s-9) 0 var(--dc-s-7) !important;
border-bottom: 1px solid var(--dc-line-dark);
position: relative;
}
.feature-page-hero > .container { max-width: var(--dc-container); }
.feature-page-hero h1,
.feature-page-hero .display-1,
.feature-page-hero .display-2,
.feature-page-hero .display-3 {
font-family: var(--dc-font-sans);
font-size: 42px;
font-weight: 500;
letter-spacing: var(--dc-ls-head);
line-height: var(--dc-lh-tight);
color: var(--dc-ink);
}
.feature-page-hero .lead {
font-size: var(--dc-f-md);
line-height: var(--dc-lh-loose);
color: var(--dc-ink-mute);
}
/* Hero badge → v4 annotation pill */
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 11px;
border: 1px solid var(--dc-brand);
background: transparent;
color: var(--dc-brand);
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 0;
margin-bottom: var(--dc-s-4);
}
.hero-badge i { color: var(--dc-brand); }
/* Eyebrow → v4 mono section label */
.eyebrow {
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--dc-ink-mute);
display: inline-block;
margin-bottom: var(--dc-s-3);
}
.eyebrow.text-primary { color: var(--dc-brand); }
.eyebrow.text-success { color: var(--dc-mint-deep); }
.eyebrow.text-danger { color: var(--dc-clay); }
.eyebrow.text-warning { color: var(--dc-amber); }
/* Text-gradient → flat brand colour (gradients are SaaS DNA) */
.text-gradient {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: var(--dc-brand) !important;
color: var(--dc-brand) !important;
}
/* Section headers */
.feature-page-hero .section-header,
.section .section-header {
margin-bottom: var(--dc-s-6);
}
.section-header h2,
.section-header .display-2,
.section-header .display-3,
.section-header .display-4 {
font-family: var(--dc-font-sans);
font-size: var(--dc-f-3xl);
font-weight: 500;
letter-spacing: var(--dc-ls-head);
line-height: var(--dc-lh-snug);
color: var(--dc-ink);
}
.section-header p,
.section-header .lead {
color: var(--dc-ink-mute);
font-size: var(--dc-f-md);
line-height: var(--dc-lh-base);
}
/* Legacy sections */
.section {
padding: var(--dc-s-9) 0;
}
.section.bg-gray-50 {
background: var(--dc-paper-cream) !important;
}
/* Benefit cards → v4 card chrome (removes SaaS shadow + rounded corners) */
.benefit-card {
background: var(--dc-paper) !important;
border: 1px solid var(--dc-line-dark) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: var(--dc-s-6) var(--dc-s-5) !important;
transition: none !important;
}
.benefit-card:hover {
background: var(--dc-paper-cream) !important;
transform: none !important;
box-shadow: none !important;
}
.benefit-card h5,
.benefit-card .h5 {
font-size: var(--dc-f-md);
font-weight: 500;
letter-spacing: -0.005em;
margin-top: var(--dc-s-3);
margin-bottom: var(--dc-s-2);
color: var(--dc-ink);
}
.benefit-card p {
font-size: 13px;
color: var(--dc-ink-mute);
line-height: 1.6;
}
/* Icon boxes → v4 brand-tinted squares (not pill circles) */
.icon-box {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--dc-brand-soft) !important;
color: var(--dc-brand) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.icon-box-sm { width: 32px !important; height: 32px !important; }
.icon-box-md { width: 42px !important; height: 42px !important; }
.icon-box-lg { width: 52px !important; height: 52px !important; }
.icon-box-primary { background: var(--dc-brand-soft) !important; color: var(--dc-brand) !important; }
.icon-box-success { background: var(--dc-mint) !important; color: var(--dc-mint-deep) !important; }
.icon-box-warning { background: #FEF3C7 !important; color: var(--dc-amber) !important; }
.icon-box-danger { background: var(--dc-paper-warm) !important; color: var(--dc-clay) !important; }
.icon-box-info { background: var(--dc-brand-soft) !important; color: var(--dc-brand) !important; }
.icon-box-secondary { background: var(--dc-paper-cream) !important; color: var(--dc-ink-mute) !important; }
/* How-it-works list → v4 numbered steps */
.how-it-works-list { display: flex; flex-direction: column; gap: 0; }
.how-it-works-item {
padding: var(--dc-s-5) 0;
border-bottom: 1px dashed var(--dc-line);
position: relative;
padding-left: 48px;
counter-increment: how-step;
}
.how-it-works-list { counter-reset: how-step; }
.how-it-works-item::before {
content: counter(how-step, decimal-leading-zero);
position: absolute;
left: 0;
top: var(--dc-s-5);
font-family: var(--dc-font-mono);
font-size: 14px;
color: var(--dc-brand);
font-weight: 500;
letter-spacing: 0.08em;
}
.how-it-works-item:last-child { border-bottom: none; }
.how-it-works-item h5 {
font-size: var(--dc-f-md);
font-weight: 500;
margin-bottom: var(--dc-s-2);
color: var(--dc-ink);
}
.how-it-works-item p {
font-size: 14px;
color: var(--dc-ink-mute);
line-height: 1.6;
margin: 0;
}
/* Accordion (FAQ) → v4 bordered items, no rounded, no Bootstrap chrome */
.accordion { background: var(--dc-paper); border: 1px solid var(--dc-line-dark); }
.accordion-item {
background: transparent !important;
border: none !important;
border-bottom: 1px solid var(--dc-line) !important;
border-radius: 0 !important;
}
.accordion-item:last-child { border-bottom: none !important; }
.accordion-button {
background: var(--dc-paper) !important;
color: var(--dc-ink) !important;
font-family: var(--dc-font-sans);
font-size: var(--dc-f-md);
font-weight: 500;
padding: var(--dc-s-5);
border-radius: 0 !important;
box-shadow: none !important;
border: none !important;
}
.accordion-button:not(.collapsed) {
background: var(--dc-paper-cream) !important;
color: var(--dc-brand) !important;
box-shadow: none !important;
}
.accordion-button:focus { box-shadow: 0 0 0 3px var(--dc-brand-soft) !important; }
.accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231A1D24' stroke-width='1.5'%3e%3cpath d='M4 6 L8 10 L12 6'/%3e%3c/svg%3e") !important;
}
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231E3A8A' stroke-width='1.5'%3e%3cpath d='M4 6 L8 10 L12 6'/%3e%3c/svg%3e") !important;
}
.accordion-body {
background: var(--dc-paper-cream);
color: var(--dc-ink-mute);
padding: var(--dc-s-4) var(--dc-s-5) var(--dc-s-5) !important;
font-size: 14px;
line-height: 1.65;
}
/* CTA section → v4 dark CTA block */
.cta-section {
background: var(--dc-ink) !important;
color: var(--dc-paper);
padding: var(--dc-s-9) 0 !important;
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
}
.cta-section > * { position: relative; z-index: 1; }
.cta-section h2,
.cta-section .display-2,
.cta-section .display-3,
.cta-section .display-4 {
color: var(--dc-paper) !important;
font-family: var(--dc-font-sans);
font-size: var(--dc-f-3xl);
font-weight: 500;
letter-spacing: var(--dc-ls-head);
}
.cta-section .lead { color: rgba(248,247,244,0.75) !important; }
.cta-section .btn.btn-white,
.cta-section a.btn.btn-light {
background: var(--dc-mint) !important;
color: var(--dc-ink) !important;
border: 1px solid var(--dc-mint) !important;
border-radius: 0 !important;
font-weight: 500;
}
.cta-section .btn.btn-white:hover,
.cta-section a.btn.btn-light:hover {
background: var(--dc-paper) !important;
color: var(--dc-ink) !important;
}
.cta-section .btn.btn-outline-light {
background: transparent !important;
color: var(--dc-paper) !important;
border: 1px solid var(--dc-paper) !important;
border-radius: 0 !important;
}
.cta-section .btn.btn-outline-light:hover {
background: var(--dc-paper) !important;
color: var(--dc-ink) !important;
}
/* Page breadcrumb */
.page-breadcrumb {
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--dc-ink-mute);
margin-bottom: var(--dc-s-5);
}
.page-breadcrumb a { color: var(--dc-ink-mute); text-decoration: none; }
.page-breadcrumb a:hover { color: var(--dc-brand); }
.page-breadcrumb .current { color: var(--dc-ink); }
.page-breadcrumb span { margin: 0 var(--dc-s-2); opacity: 0.4; }
.page-breadcrumb span.current { opacity: 1; }
/* Hero visual blocks (shield-grid, etc.) — neutralise colourful fills */
.hero-visual {
background: var(--dc-paper-cream) !important;
border: 1px solid var(--dc-line-dark) !important;
border-radius: 0 !important;
padding: var(--dc-s-6) !important;
box-shadow: none !important;
}
.shield-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--dc-line-dark);
border: 1px solid var(--dc-line-dark);
}
.shield-item {
padding: var(--dc-s-5) var(--dc-s-4) !important;
background: var(--dc-paper) !important;
color: var(--dc-ink);
display: flex;
align-items: center;
gap: var(--dc-s-3);
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Bootstrap button colour normalisation on feature pages */
.feature-page-hero .btn,
.section .btn,
.cta-section .btn {
border-radius: 0 !important;
font-family: var(--dc-font-sans);
font-weight: 500;
}
/* Section-level fallback for inline-styled sections (background colours) */
.section[style*="background"] { background-color: var(--dc-paper) !important; }
.section[style*="#f8fafc"],
.section[style*="#F8FAFC"],
.section[style*="#F8FaFC"] { background-color: var(--dc-paper-cream) !important; }
/* ============================================================
16c. DPDP CLUSTER PAGE CHROME OVERRIDES
Covers the 6 remaining DPDP-cluster pages that use custom
hero classes instead of .feature-page-hero. Applies the same
v4 chrome treatment. Content/structure stays untouched.
============================================================ */
.role-hero, .deadline-hero, .pen-hero, .dp-hero, .schema-hero, .ck-hero, .proof-hero {
background: var(--dc-paper) !important;
background-image: none !important;
padding: var(--dc-s-9) 0 var(--dc-s-7) !important;
border-bottom: 1px solid var(--dc-line-dark);
position: relative;
color: var(--dc-ink) !important;
}
.role-hero::before, .deadline-hero::before, .pen-hero::before, .dp-hero::before, .schema-hero::before, .ck-hero::before, .proof-hero::before { display: none !important; }
.role-hero h1, .deadline-hero h1, .pen-hero h1, .dp-hero h1, .schema-hero h1, .ck-hero h1, .proof-hero h1,
.role-hero .display-2, .deadline-hero .display-2, .pen-hero .display-2, .dp-hero .display-2, .schema-hero .display-2, .ck-hero .display-2, .proof-hero .display-2,
.role-hero .display-3, .deadline-hero .display-3, .pen-hero .display-3, .dp-hero .display-3, .schema-hero .display-3, .ck-hero .display-3, .proof-hero .display-3 {
font-family: var(--dc-font-sans);
font-size: 42px;
font-weight: 500;
letter-spacing: var(--dc-ls-head);
line-height: var(--dc-lh-tight);
color: var(--dc-ink) !important;
}
.role-hero .lead, .deadline-hero .lead, .pen-hero .lead, .dp-hero .lead, .schema-hero .lead, .ck-hero .lead, .proof-hero .lead {
font-size: var(--dc-f-md);
line-height: var(--dc-lh-loose);
color: var(--dc-ink-mute) !important;
}
/* Inline `color:#94A3B8` + `color:#CBD5E1` slate text in cluster-page breadcrumbs/subs: force readable ink-mute.
NOTE: anchor/button elements are excluded so inline white ghost buttons can be re-styled separately below. */
.role-hero span[style*="#94A3B8"], .deadline-hero span[style*="#94A3B8"], .pen-hero span[style*="#94A3B8"], .dp-hero span[style*="#94A3B8"], .schema-hero span[style*="#94A3B8"], .ck-hero span[style*="#94A3B8"], .proof-hero span[style*="#94A3B8"],
.role-hero div[style*="#94A3B8"], .deadline-hero div[style*="#94A3B8"], .pen-hero div[style*="#94A3B8"], .dp-hero div[style*="#94A3B8"], .schema-hero div[style*="#94A3B8"], .ck-hero div[style*="#94A3B8"], .proof-hero div[style*="#94A3B8"],
.role-hero span[style*="#CBD5E1"], .deadline-hero span[style*="#CBD5E1"], .pen-hero span[style*="#CBD5E1"], .dp-hero span[style*="#CBD5E1"], .schema-hero span[style*="#CBD5E1"], .ck-hero span[style*="#CBD5E1"], .proof-hero span[style*="#CBD5E1"],
.role-hero div[style*="#CBD5E1"], .deadline-hero div[style*="#CBD5E1"], .pen-hero div[style*="#CBD5E1"], .dp-hero div[style*="#CBD5E1"], .schema-hero div[style*="#CBD5E1"], .ck-hero div[style*="#CBD5E1"], .proof-hero div[style*="#CBD5E1"],
.role-hero span[style*="color:#fff"], .deadline-hero span[style*="color:#fff"], .pen-hero span[style*="color:#fff"], .dp-hero span[style*="color:#fff"], .schema-hero span[style*="color:#fff"], .ck-hero span[style*="color:#fff"], .proof-hero span[style*="color:#fff"] {
color: var(--dc-ink-mute) !important;
}
/* Breadcrumb anchors inside cluster heros (originally light-slate on dark) */
.role-hero .page-breadcrumb a, .deadline-hero .page-breadcrumb a, .pen-hero .page-breadcrumb a, .dp-hero .page-breadcrumb a, .schema-hero .page-breadcrumb a, .ck-hero .page-breadcrumb a, .proof-hero .page-breadcrumb a {
color: var(--dc-ink-mute) !important;
}
/* Inline "white ghost button" pattern: style="background:transparent; color:#fff; border:2px solid #fff"
→ re-cast as ink-bordered ghost button on the new paper hero. */
.role-hero a.btn[style*="color:#fff"], .deadline-hero a.btn[style*="color:#fff"], .pen-hero a.btn[style*="color:#fff"], .dp-hero a.btn[style*="color:#fff"], .schema-hero a.btn[style*="color:#fff"], .ck-hero a.btn[style*="color:#fff"], .proof-hero a.btn[style*="color:#fff"] {
color: var(--dc-ink) !important;
border-color: var(--dc-ink) !important;
border-radius: 0 !important;
padding: 10px 20px !important;
font-family: var(--dc-font-sans);
font-weight: 500;
}
/* Custom hero badges on cluster pages (role-badge, deadline-badge, pen-badge, dp-badge, schema-badge, ck-badge) → v4 annotation */
.role-badge, .deadline-badge, .pen-badge, .dp-badge, .schema-badge, .ck-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 11px !important;
border: 1px solid var(--dc-brand) !important;
background: transparent !important;
color: var(--dc-brand) !important;
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 0 !important;
margin-bottom: var(--dc-s-4);
font-weight: 500 !important;
}
/* Shared hero visualisation blocks (ledger / metric / title cards used on msme + startups + schema) */
.hero-viz-ledger, .hero-viz-metric, .hero-viz-title {
background: var(--dc-paper-cream) !important;
border: 1px solid var(--dc-line-dark) !important;
border-radius: 0 !important;
box-shadow: none !important;
color: var(--dc-ink) !important;
padding: var(--dc-s-5) !important;
}
.hero-viz-title { font-family: var(--dc-font-mono); font-size: var(--dc-f-xs); letter-spacing: 0.08em; color: var(--dc-ink-mute); text-transform: uppercase; margin-bottom: var(--dc-s-3); }
.hero-viz-metric { font-size: 24px; font-weight: 500; letter-spacing: -0.015em; color: var(--dc-brand); }
/* bg-dark-section used by compliance-checklist + others → full-width dark v4 CTA */
.bg-dark-section {
background: var(--dc-ink) !important;
background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) !important;
background-size: 32px 32px !important;
color: var(--dc-paper) !important;
padding: var(--dc-s-9) 0 !important;
border-top: 1px solid var(--dc-line-dark);
}
.bg-dark-section h2,
.bg-dark-section .display-2, .bg-dark-section .display-3, .bg-dark-section .display-4,
.bg-dark-section .text-white { color: var(--dc-paper) !important; }
.bg-dark-section .text-white-50 { color: rgba(248,247,244,0.7) !important; }
.bg-dark-section .btn.btn-primary,
.bg-dark-section .btn.btn-light,
.bg-dark-section .btn.btn-white {
background: var(--dc-mint) !important;
color: var(--dc-ink) !important;
border: 1px solid var(--dc-mint) !important;
border-radius: 0 !important;
font-weight: 500;
}
.bg-dark-section .btn.btn-primary:hover,
.bg-dark-section .btn.btn-light:hover,
.bg-dark-section .btn.btn-white:hover { background: var(--dc-paper) !important; color: var(--dc-ink) !important; }
.bg-dark-section .btn.btn-outline-light,
.bg-dark-section .btn-link {
background: transparent !important;
color: var(--dc-paper) !important;
border: 1px solid var(--dc-paper) !important;
border-radius: 0 !important;
}
.bg-dark-section .btn.btn-outline-light:hover { background: var(--dc-paper) !important; color: var(--dc-ink) !important; }
/* ============================================================
16d. AUDIENCE + INDUSTRIES PAGE CHROME OVERRIDES
Covers for-cisos/dpos/hr/legal + 11 industries/*.php pages.
Attribute selector catches every `-hero` class without
enumerating them. Excludes our own dc-hero variants.
============================================================ */
/* Also catch the 2 exceptions that don't fit the `-hero` suffix pattern */
section.hero-tools,
section.hero-section {
background: var(--dc-paper) !important;
background-image: none !important;
padding: var(--dc-s-9) 0 var(--dc-s-7) !important;
border-bottom: 1px solid var(--dc-line-dark);
position: relative;
color: var(--dc-ink) !important;
}
section.hero-tools h1, section.hero-section h1,
section.hero-tools .display-1, section.hero-section .display-1,
section.hero-tools .display-2, section.hero-section .display-2,
section.hero-tools .display-3, section.hero-section .display-3 {
color: var(--dc-ink) !important;
font-family: var(--dc-font-sans);
font-weight: 500;
letter-spacing: var(--dc-ls-head);
}
section.hero-tools .lead, section.hero-section .lead {
color: var(--dc-ink-mute) !important;
}
/* Any `-hero` section (fintech-hero, healthcare-hero, role-hero, ck-hero, etc.) — paper bg, v4 typography */
section[class$="-hero"]:not([class*="dc-hero"]),
section[class*="-hero "]:not([class*="dc-hero"]) {
background: var(--dc-paper) !important;
background-image: none !important;
padding: var(--dc-s-9) 0 var(--dc-s-7) !important;
border-bottom: 1px solid var(--dc-line-dark);
position: relative;
color: var(--dc-ink) !important;
}
section[class$="-hero"]:not([class*="dc-hero"]) h1,
section[class*="-hero "]:not([class*="dc-hero"]) h1,
section[class$="-hero"]:not([class*="dc-hero"]) .display-1,
section[class$="-hero"]:not([class*="dc-hero"]) .display-2,
section[class$="-hero"]:not([class*="dc-hero"]) .display-3 {
color: var(--dc-ink) !important;
font-family: var(--dc-font-sans);
font-weight: 500;
letter-spacing: var(--dc-ls-head);
}
section[class$="-hero"]:not([class*="dc-hero"]) .lead,
section[class*="-hero "]:not([class*="dc-hero"]) .lead {
color: var(--dc-ink-mute) !important;
}
section[class$="-hero"]:not([class*="dc-hero"]) ::before,
section[class$="-hero"]:not([class*="dc-hero"]) ::after {
display: none !important;
}
/* Any `-badge` inside a hero section — v4 annotation pill */
section[class$="-hero"] [class$="-badge"],
section[class*="-hero "] [class$="-badge"] {
display: inline-flex !important;
align-items: center;
gap: 8px;
padding: 5px 11px !important;
border: 1px solid var(--dc-brand) !important;
background: transparent !important;
background-image: none !important;
color: var(--dc-brand) !important;
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs) !important;
letter-spacing: 0.08em !important;
text-transform: uppercase;
border-radius: 0 !important;
margin-bottom: var(--dc-s-4) !important;
font-weight: 500 !important;
box-shadow: none !important;
}
/* Shared reusable classes defined inline across audience + industry pages */
.pain-card, .module-grid-card, .metric-card {
background: var(--dc-paper) !important;
background-image: none !important;
border: 1px solid var(--dc-line-dark) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: var(--dc-s-6) var(--dc-s-5) !important;
transition: none !important;
}
.pain-card:hover, .module-grid-card:hover, .metric-card:hover {
background: var(--dc-paper-cream) !important;
transform: none !important;
box-shadow: none !important;
border-color: var(--dc-ink) !important;
}
.pain-card h5, .module-grid-card h5, .metric-card h5,
.pain-card h4, .module-grid-card h4 {
font-size: var(--dc-f-md);
font-weight: 500;
color: var(--dc-ink);
margin-bottom: var(--dc-s-2);
}
.pain-card p, .module-grid-card p, .metric-card p {
font-size: 13px;
color: var(--dc-ink-mute);
line-height: 1.6;
}
.pain-card .icon, .pain-icon {
width: 42px !important;
height: 42px !important;
border-radius: 0 !important;
background: var(--dc-brand-soft) !important;
color: var(--dc-brand) !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
margin-bottom: var(--dc-s-3);
}
.module-grid-card .badge-strip {
font-family: var(--dc-font-mono);
font-size: 11px !important;
letter-spacing: 0.08em !important;
color: var(--dc-brand) !important;
}
/* Industry page dark stat-strip (fintech, nbfc etc. use .stat-strip for dark band) */
.stat-strip {
background: var(--dc-ink) !important;
background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) !important;
background-size: 32px 32px !important;
color: var(--dc-paper) !important;
padding: var(--dc-s-6) var(--dc-s-5) !important;
border-radius: 0 !important;
border: 1px solid var(--dc-line-dark);
}
.stat-strip .stat-num {
color: var(--dc-mint) !important;
font-family: var(--dc-font-mono);
font-size: 24px !important;
font-weight: 500 !important;
}
.stat-strip .stat-label {
color: rgba(248,247,244,0.6) !important;
font-family: var(--dc-font-mono);
font-size: 10px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase;
}
/* Metric card big number */
.metric-num {
font-family: var(--dc-font-mono) !important;
font-size: 28px !important;
color: var(--dc-brand) !important;
background: none !important;
-webkit-background-clip: initial !important;
-webkit-text-fill-color: var(--dc-brand) !important;
}
/* Regulator table (used on industry pages) */
.reg-table {
width: 100%;
border-collapse: collapse;
background: var(--dc-paper);
border: 1px solid var(--dc-line-dark);
}
.reg-table th {
background: var(--dc-ink) !important;
color: var(--dc-paper) !important;
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs) !important;
letter-spacing: 0.08em !important;
text-transform: uppercase;
padding: var(--dc-s-3) var(--dc-s-4) !important;
font-weight: 500 !important;
}
.reg-table td {
padding: var(--dc-s-3) var(--dc-s-4) !important;
font-size: 14px;
border-bottom: 1px solid var(--dc-line);
color: var(--dc-ink);
}
.reg-table .reg-pill {
background: var(--dc-brand-soft) !important;
color: var(--dc-brand-deep) !important;
font-family: var(--dc-font-mono);
font-size: 10px !important;
font-weight: 500 !important;
border-radius: 0 !important;
padding: 2px 8px !important;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.reg-table .reg-icon { color: var(--dc-mint-deep) !important; font-weight: 500 !important; }
.reg-table .reg-icon.miss { color: var(--dc-clay) !important; }
/* Industry timeline rows */
.timeline-rows .row-item {
display: flex;
gap: var(--dc-s-4);
padding: var(--dc-s-4) 0;
border-bottom: 1px dashed var(--dc-line) !important;
}
.timeline-rows .row-item:last-child { border-bottom: none !important; }
.timeline-rows .row-item .day {
background: var(--dc-ink) !important;
color: var(--dc-paper) !important;
font-family: var(--dc-font-mono);
font-size: 11px !important;
font-weight: 500 !important;
min-width: 84px;
padding: 8px 10px !important;
border-radius: 0 !important;
text-align: center;
height: fit-content;
letter-spacing: 0.06em;
}
.timeline-rows .row-item .body strong { font-weight: 500; color: var(--dc-ink); }
.timeline-rows .row-item .body { font-size: 14px; color: var(--dc-ink); line-height: 1.6; }
/* Industry price pill */
.price-pill {
background: var(--dc-brand) !important;
color: var(--dc-paper) !important;
border-radius: 0 !important;
font-family: var(--dc-font-mono);
font-size: 11px !important;
font-weight: 500 !important;
padding: 4px 10px !important;
letter-spacing: 0.08em;
}
/* ============================================================
17. RESPONSIVE
============================================================ */
@media (max-width: 991.98px) {
.dc-topbar-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
.dc-nav-megamenu { min-width: auto; }
.dc-service-grid { grid-template-columns: repeat(2, 1fr); }
.dc-letter-card { padding: var(--dc-s-6) var(--dc-s-5); }
.dc-letter-body { font-size: 18px; }
.dc-footer { padding-top: 48px; }
}
@media (max-width: 575.98px) {
:root { --dc-gutter: 20px; }
.dc-service-grid { grid-template-columns: 1fr; }
.dc-letter-signoff { grid-template-columns: 1fr; gap: var(--dc-s-4); }
.dc-letter-meta { text-align: left; }
}
/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
.dc-topbar-live-dot,
* { animation: none !important; transition: none !important; }
}
/* ============================================================
17b. HOME PAGE COMPONENTS
Hero, timeline, metrics, operator, dark CTA.
Used by index.php and reusable on wedge/service pages.
============================================================ */
/* Hero */
.dc-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--dc-s-7);
align-items: center;
padding: var(--dc-s-8) var(--dc-gutter) var(--dc-s-9);
max-width: var(--dc-container);
margin: 0 auto;
}
/* Keep the hero blueprint SVGs sized sensibly on wide screens — otherwise
`.dc-hero-blueprint` fills the whole 50% column and dwarfs the hero copy. */
.dc-hero > div:nth-child(2) .dc-schematic { max-width: 520px; margin-left: auto; margin-right: 0; }
@media (max-width: 960px) {
.dc-hero { grid-template-columns: 1fr; gap: var(--dc-s-6); }
.dc-hero > div:nth-child(2) .dc-schematic { margin: 0; max-width: 100%; }
}
.dc-hero-text .dc-annotation {
display: inline-block;
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
padding: 5px 11px;
border: 1px solid var(--dc-brand);
color: var(--dc-brand);
letter-spacing: 0.08em;
margin-bottom: var(--dc-s-5);
text-transform: uppercase;
}
.dc-hero h1 {
font-size: 48px;
line-height: var(--dc-lh-tight);
letter-spacing: var(--dc-ls-head);
font-weight: 500;
margin-bottom: var(--dc-s-5);
}
.dc-hero-sub {
color: var(--dc-ink-mute);
margin-bottom: var(--dc-s-6);
max-width: 420px;
font-size: var(--dc-f-md);
line-height: var(--dc-lh-loose);
}
.dc-hero-cta {
display: flex;
gap: var(--dc-s-4);
align-items: center;
flex-wrap: wrap;
margin-bottom: var(--dc-s-4);
}
/* Section head (h2 + sub + hand-note) */
.dc-section-head {
display: grid;
grid-template-columns: 200px 1fr;
gap: var(--dc-s-7);
margin-bottom: var(--dc-s-7);
align-items: start;
}
.dc-section-head h2 {
font-size: var(--dc-f-3xl);
line-height: 1.14;
letter-spacing: var(--dc-ls-head);
font-weight: 500;
max-width: 820px;
}
.dc-section-head .dc-hand-note {
margin-top: var(--dc-s-3);
font-size: 21px;
}
/* Method timeline */
.dc-method {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--dc-s-10);
align-items: start;
}
.dc-method-left { position: sticky; top: var(--dc-s-6); }
.dc-method-left h2 {
font-size: var(--dc-f-4xl);
line-height: var(--dc-lh-tight);
letter-spacing: var(--dc-ls-head);
font-weight: 500;
margin-bottom: var(--dc-s-5);
}
.dc-method-left p {
color: var(--dc-ink-mute);
font-size: var(--dc-f-md);
max-width: 440px;
line-height: var(--dc-lh-loose);
}
.dc-method-left .dc-hand-note { margin-top: var(--dc-s-5); max-width: 400px; }
.dc-timeline { position: relative; padding-left: 40px; }
.dc-timeline::before {
content: '';
position: absolute;
left: 8px;
top: 14px;
bottom: 14px;
width: 1px;
background: var(--dc-line-dark);
}
.dc-timeline-step {
position: relative;
margin-bottom: var(--dc-s-6);
padding-bottom: var(--dc-s-6);
border-bottom: 1px dashed var(--dc-line);
}
.dc-timeline-step:last-child { border-bottom: none; padding-bottom: 0; }
.dc-timeline-step::before {
content: '';
position: absolute;
left: -40px;
top: 6px;
width: 17px;
height: 17px;
border: 2px solid var(--dc-ink);
background: var(--dc-paper);
z-index: 1;
}
.dc-timeline-step--active::before { background: var(--dc-mint); }
.dc-timeline-step-no {
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
color: var(--dc-brand);
letter-spacing: 0.08em;
margin-bottom: var(--dc-s-2);
}
.dc-timeline-step h4 {
font-size: var(--dc-f-md);
font-weight: 500;
margin-bottom: var(--dc-s-2);
}
.dc-timeline-step p {
font-size: 14px;
color: var(--dc-ink-mute);
line-height: 1.6;
}
.dc-timeline-step-duration {
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
color: var(--dc-amber);
margin-top: var(--dc-s-2);
letter-spacing: 0.06em;
}
.dc-timeline-step .dc-hand-note {
margin-top: var(--dc-s-2);
display: block;
font-size: 17px;
}
/* Operating record (metrics + voices) */
.dc-record { display: grid; grid-template-columns: 320px 1fr; gap: var(--dc-s-8); align-items: start; }
.dc-metrics { display: flex; flex-direction: column; border: 1px solid var(--dc-line-dark); background: var(--dc-paper); }
.dc-metric { padding: var(--dc-s-6) var(--dc-s-5); border-bottom: 1px solid var(--dc-line-dark); }
.dc-metric:last-child { border-bottom: none; }
.dc-metric-label {
font-family: var(--dc-font-mono);
font-size: 10px;
color: var(--dc-brand);
letter-spacing: 0.1em;
margin-bottom: var(--dc-s-2);
text-transform: uppercase;
}
.dc-metric-stat {
font-size: 46px;
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1;
display: inline-block;
color: var(--dc-ink);
}
.dc-metric-stat small {
font-size: 18px;
color: var(--dc-ink-mute);
font-weight: 400;
margin-left: 6px;
}
.dc-metric p {
font-size: 12px;
color: var(--dc-ink-mute);
line-height: 1.55;
margin-top: var(--dc-s-3);
}
.dc-voices { display: flex; flex-direction: column; gap: var(--dc-s-5); }
/* Operator block (portrait + body) */
.dc-operator { display: grid; grid-template-columns: 300px 1fr; gap: var(--dc-s-8); align-items: start; }
.dc-portrait-frame { position: relative; }
.dc-portrait {
aspect-ratio: 3 / 4;
border: 1px solid var(--dc-line-dark);
position: relative;
background:
radial-gradient(ellipse at 35% 30%, #DBE4FF 0%, #8CA3D1 30%, #3A4F82 65%, #1F2E5A 100%);
filter: contrast(1.08);
}
.dc-portrait::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
}
.dc-portrait::after {
content: '';
position: absolute;
inset: 8px;
border: 1px dashed rgba(248, 247, 244, 0.3);
}
.dc-portrait-caption {
font-family: var(--dc-font-mono);
font-size: 10px;
color: var(--dc-ink-mute);
letter-spacing: 0.1em;
margin-top: var(--dc-s-4);
display: flex;
justify-content: space-between;
}
.dc-operator-body h2 {
font-size: var(--dc-f-3xl);
line-height: var(--dc-lh-tight);
letter-spacing: var(--dc-ls-head);
font-weight: 500;
margin-bottom: var(--dc-s-5);
}
.dc-operator-body p {
font-size: 17px;
line-height: 1.65;
color: var(--dc-ink);
margin-bottom: var(--dc-s-4);
max-width: 580px;
}
.dc-operator-body p.dc-mute { color: var(--dc-ink-mute); font-size: var(--dc-f-md); }
.dc-operator-signoff {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--dc-s-6);
align-items: end;
margin-top: var(--dc-s-6);
padding-top: var(--dc-s-5);
border-top: 1px dashed var(--dc-line);
}
.dc-operator-contact {
font-family: var(--dc-font-mono);
font-size: 12px;
color: var(--dc-ink-mute);
letter-spacing: 0.06em;
text-align: right;
}
.dc-operator-contact strong {
display: block;
color: var(--dc-ink);
font-size: 14px;
font-weight: 500;
margin-bottom: 4px;
}
/* Dark CTA block */
.dc-cta-block {
background: var(--dc-ink);
color: var(--dc-paper);
padding: var(--dc-s-8) 56px;
display: grid;
grid-template-columns: 1fr auto;
gap: var(--dc-s-7);
align-items: center;
position: relative;
overflow: hidden;
}
.dc-cta-block::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
}
.dc-cta-block h2 {
font-size: var(--dc-f-3xl);
line-height: 1.15;
letter-spacing: var(--dc-ls-head);
font-weight: 500;
max-width: 600px;
position: relative;
color: var(--dc-paper);
}
.dc-cta-block h2 .dc-mint-accent { color: var(--dc-mint); }
.dc-cta-sub {
font-family: var(--dc-font-mono);
font-size: 12px;
color: rgba(248, 247, 244, 0.6);
letter-spacing: 0.08em;
margin-top: var(--dc-s-3);
position: relative;
}
.dc-cta-signline {
font-family: var(--dc-font-hand);
font-size: 22px;
color: var(--dc-mint);
margin-top: var(--dc-s-4);
position: relative;
}
.dc-cta-form-button {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 22px 32px;
background: var(--dc-mint);
color: var(--dc-ink);
text-decoration: none;
position: relative;
min-width: 240px;
}
.dc-cta-form-button:hover { background: var(--dc-paper); color: var(--dc-ink); }
.dc-cta-form-button .main { font-size: var(--dc-f-md); font-weight: 500; }
.dc-cta-form-button .sub {
font-family: var(--dc-font-mono);
font-size: 11px;
letter-spacing: 0.08em;
}
/* Responsive — home components */
@media (max-width: 960px) {
.dc-hero { grid-template-columns: 1fr; gap: var(--dc-s-7); padding-top: var(--dc-s-7); }
.dc-hero h1 { font-size: 36px; }
.dc-section-head { grid-template-columns: 1fr; gap: var(--dc-s-4); }
.dc-method { grid-template-columns: 1fr; gap: var(--dc-s-7); }
.dc-method-left { position: static; }
.dc-record { grid-template-columns: 1fr; gap: var(--dc-s-7); }
.dc-operator { grid-template-columns: 1fr; gap: var(--dc-s-7); }
.dc-portrait { max-width: 280px; }
.dc-cta-block { grid-template-columns: 1fr; padding: var(--dc-s-7) var(--dc-s-5); }
.dc-cta-block h2 { font-size: 28px; }
}
/* ============================================================
17c. HOME PAGE EXTENDED SECTIONS
Launch strip, persona doors, replace-5-vendors, platform-tiles,
AI-moments, multilingual, DPDP spotlight, pricing cards,
comparison table, DPDP resources strip.
============================================================ */
/* Launch strip (DPDP enforcement + 10 upgrades + May 2027 countdown) */
.dc-launch-strip {
background: var(--dc-ink);
color: var(--dc-paper);
padding: var(--dc-s-4) var(--dc-gutter);
text-align: center;
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.06em;
border-bottom: 1px solid var(--dc-line-dark);
}
.dc-launch-strip-inner {
max-width: var(--dc-container);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--dc-s-4);
}
.dc-launch-strip .dc-badge-live {
background: var(--dc-logo-red);
color: var(--dc-paper);
padding: 2px 8px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.dc-launch-strip a { color: var(--dc-mint); text-decoration: none; }
.dc-launch-strip a:hover { color: var(--dc-paper); }
/* Section header (eyebrow + h2 + lede, centred OR left) */
.dc-sec-head {
margin-bottom: var(--dc-s-7);
max-width: 820px;
}
.dc-sec-head--centre { margin-left: auto; margin-right: auto; text-align: center; }
.dc-eyebrow {
display: inline-block;
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.14em;
color: var(--dc-brand);
text-transform: uppercase;
margin-bottom: var(--dc-s-3);
}
.dc-sec-head h2 {
font-size: var(--dc-f-3xl);
line-height: 1.14;
letter-spacing: var(--dc-ls-head);
font-weight: 500;
margin-bottom: var(--dc-s-4);
}
.dc-sec-head p {
color: var(--dc-ink-mute);
font-size: var(--dc-f-md);
line-height: 1.65;
}
/* Persona doors (6-up grid) */
.dc-persona-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--dc-line-dark);
border: 1px solid var(--dc-line-dark);
}
.dc-persona {
background: var(--dc-paper);
padding: var(--dc-s-6) var(--dc-s-5);
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
min-height: 220px;
transition: background var(--dc-t-fast);
}
.dc-persona:hover { background: var(--dc-paper-cream); color: inherit; }
.dc-persona-icon {
width: 36px;
height: 36px;
color: var(--dc-brand);
margin-bottom: var(--dc-s-4);
}
.dc-persona-role {
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.1em;
color: var(--dc-ink-mute);
text-transform: uppercase;
margin-bottom: var(--dc-s-2);
}
.dc-persona h4 {
font-size: var(--dc-f-lg);
font-weight: 500;
margin-bottom: var(--dc-s-3);
}
.dc-persona p {
font-size: 13px;
color: var(--dc-ink-mute);
line-height: 1.55;
margin-bottom: auto;
}
.dc-persona-cta {
margin-top: var(--dc-s-4);
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
color: var(--dc-brand);
letter-spacing: 0.06em;
}
/* "One practice replaces" — split old-way / new-way */
.dc-replace {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--dc-s-6);
}
.dc-replace-col {
background: var(--dc-paper);
border: 1px solid var(--dc-line-dark);
padding: var(--dc-s-6);
}
.dc-replace-col--new {
background: var(--dc-ink);
color: var(--dc-paper);
}
.dc-replace-col--new .dc-replace-head { color: var(--dc-mint); }
.dc-replace-col--new .dc-replace-list li { border-color: rgba(248, 247, 244, 0.12); }
.dc-replace-head {
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.14em;
color: var(--dc-ink-mute);
text-transform: uppercase;
margin-bottom: var(--dc-s-4);
}
.dc-replace-list { list-style: none; padding: 0; margin: 0; }
.dc-replace-list li {
padding: var(--dc-s-3) 0;
font-size: 14px;
border-bottom: 1px dashed var(--dc-line);
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--dc-s-3);
}
.dc-replace-list li:last-child { border-bottom: none; }
.dc-replace-list .dc-replace-cost {
font-family: var(--dc-font-mono);
font-size: 12px;
color: var(--dc-ink-mute);
white-space: nowrap;
}
.dc-replace-col--new .dc-replace-cost { color: var(--dc-mint); }
.dc-replace-foot {
margin-top: var(--dc-s-5);
padding-top: var(--dc-s-4);
border-top: 1px solid var(--dc-line);
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--dc-ink-mute);
}
.dc-replace-col--new .dc-replace-foot { border-top-color: rgba(248, 247, 244, 0.12); }
/* Platform tiles (3-up grid for 6 capability tiles) */
.dc-tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--dc-line-dark);
border: 1px solid var(--dc-line-dark);
}
.dc-tile {
background: var(--dc-paper);
padding: var(--dc-s-6) var(--dc-s-5);
display: flex;
flex-direction: column;
}
.dc-tile-no {
font-family: var(--dc-font-mono);
font-size: 10px;
color: var(--dc-brand);
letter-spacing: 0.1em;
margin-bottom: var(--dc-s-3);
}
.dc-tile-icon {
width: 44px;
height: 44px;
color: var(--dc-brand);
margin-bottom: var(--dc-s-4);
}
.dc-tile h3 {
font-size: var(--dc-f-lg);
font-weight: 500;
margin-bottom: var(--dc-s-2);
}
.dc-tile p {
font-size: 13px;
color: var(--dc-ink-mute);
line-height: 1.6;
margin-bottom: auto;
}
.dc-tile-link {
margin-top: var(--dc-s-4);
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
color: var(--dc-brand);
letter-spacing: 0.06em;
text-decoration: none;
}
/* AI moments / split rows */
.dc-ai-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--dc-s-5);
}
.dc-ai-card {
background: var(--dc-paper);
border: 1px solid var(--dc-line-dark);
padding: var(--dc-s-6);
}
.dc-ai-tag {
font-family: var(--dc-font-mono);
font-size: 10px;
color: var(--dc-brand);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: var(--dc-s-3);
}
.dc-ai-card h3 {
font-size: var(--dc-f-lg);
font-weight: 500;
margin-bottom: var(--dc-s-3);
}
.dc-ai-card p { font-size: 14px; color: var(--dc-ink-mute); line-height: 1.6; }
/* Multilingual grid */
.dc-lang-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1px;
background: var(--dc-line-dark);
border: 1px solid var(--dc-line-dark);
}
.dc-lang-card {
background: var(--dc-paper);
padding: var(--dc-s-4) var(--dc-s-3);
text-align: center;
}
.dc-lang-card--featured { background: var(--dc-brand-soft); }
.dc-lang-native {
display: block;
font-size: var(--dc-f-md);
font-weight: 500;
color: var(--dc-ink);
}
.dc-lang-card--featured .dc-lang-native { color: var(--dc-brand-deep); }
.dc-lang-english {
display: block;
font-family: var(--dc-font-mono);
font-size: 10px;
color: var(--dc-ink-mute);
letter-spacing: 0.04em;
margin-top: 2px;
}
/* DPDP spotlight (dark banner) */
.dc-dpdp-spotlight {
background: var(--dc-ink);
color: var(--dc-paper);
padding: var(--dc-s-8) var(--dc-s-7);
border: 1px solid var(--dc-line-dark);
position: relative;
overflow: hidden;
}
.dc-dpdp-spotlight::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
}
.dc-dpdp-spotlight-inner { position: relative; }
.dc-dpdp-spotlight h2 {
font-size: var(--dc-f-3xl);
color: var(--dc-paper);
line-height: 1.14;
letter-spacing: var(--dc-ls-head);
margin-bottom: var(--dc-s-4);
}
.dc-dpdp-spotlight h2 .dc-mint-accent { color: var(--dc-mint); }
.dc-dpdp-spotlight p {
color: rgba(248, 247, 244, 0.72);
font-size: var(--dc-f-md);
line-height: 1.65;
max-width: 640px;
margin-bottom: var(--dc-s-5);
}
.dc-dpdp-spotlight-links {
display: flex;
gap: var(--dc-s-5);
flex-wrap: wrap;
}
/* Pricing cards (4-up — Readiness/Implementation/Managed/Audit Response) */
.dc-price-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--dc-line-dark);
border: 1px solid var(--dc-line-dark);
}
.dc-price-card {
background: var(--dc-paper);
padding: var(--dc-s-6) var(--dc-s-5);
display: flex;
flex-direction: column;
position: relative;
}
.dc-price-card--featured { background: var(--dc-paper-cream); }
.dc-price-badge {
position: absolute;
top: 0;
right: 0;
background: var(--dc-brand);
color: var(--dc-paper);
padding: 4px 10px;
font-family: var(--dc-font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.dc-price-card h3 {
font-size: var(--dc-f-lg);
font-weight: 500;
margin-bottom: var(--dc-s-3);
}
.dc-price-amount {
font-size: 28px;
font-weight: 500;
letter-spacing: -0.02em;
margin-bottom: 4px;
}
.dc-price-period {
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
color: var(--dc-ink-mute);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: var(--dc-s-4);
}
.dc-price-descr {
font-family: var(--dc-font-mono);
font-size: 11px;
color: var(--dc-ink-mute);
letter-spacing: 0.04em;
margin-bottom: var(--dc-s-4);
padding-bottom: var(--dc-s-4);
border-bottom: 1px dashed var(--dc-line);
}
.dc-price-features {
list-style: none;
padding: 0;
margin: 0 0 var(--dc-s-5);
flex-grow: 1;
}
.dc-price-features li {
padding: 6px 0;
font-size: 13px;
color: var(--dc-ink);
position: relative;
padding-left: 20px;
}
.dc-price-features li::before {
content: '';
position: absolute;
left: 0;
top: 11px;
width: 10px;
height: 10px;
background: url("data:image/svg+xml;utf8,") no-repeat;
}
/* Comparison table */
.dc-compare {
width: 100%;
border-collapse: collapse;
background: var(--dc-paper);
border: 1px solid var(--dc-line-dark);
}
.dc-compare th,
.dc-compare td {
padding: var(--dc-s-3) var(--dc-s-4);
text-align: left;
font-size: 14px;
border-bottom: 1px solid var(--dc-line);
}
.dc-compare thead th {
background: var(--dc-ink);
color: var(--dc-paper);
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.dc-compare thead th.dc-compare-us { background: var(--dc-brand); }
.dc-compare tbody th {
background: var(--dc-paper-cream);
font-weight: 500;
color: var(--dc-ink);
}
.dc-compare .dc-compare-yes { color: var(--dc-mint-deep); font-weight: 500; text-align: center; }
.dc-compare .dc-compare-no { color: var(--dc-clay); text-align: center; }
.dc-compare .dc-compare-partial { color: var(--dc-amber); text-align: center; }
/* DPDP resources strip (SEO cluster links) */
.dc-resources-strip {
background: var(--dc-paper-cream);
border: 1px solid var(--dc-line-dark);
padding: var(--dc-s-5) var(--dc-s-6);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--dc-s-5);
}
.dc-resources-strip-label {
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.1em;
color: var(--dc-ink-mute);
text-transform: uppercase;
}
.dc-resources-strip-links {
display: flex;
flex-wrap: wrap;
gap: var(--dc-s-4);
}
.dc-resources-strip-links a {
font-size: 13px;
color: var(--dc-ink);
text-decoration: none;
border-bottom: 1px dotted var(--dc-ink-mute);
padding-bottom: 2px;
}
.dc-resources-strip-links a:hover { color: var(--dc-brand); border-bottom-color: var(--dc-brand); }
/* Trusted-by logo strip */
.dc-trusted {
padding: var(--dc-s-6) 0;
text-align: center;
}
.dc-trusted-label {
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.14em;
color: var(--dc-ink-mute);
text-transform: uppercase;
margin-bottom: var(--dc-s-5);
}
.dc-trusted-grid {
display: flex;
flex-wrap: wrap;
gap: var(--dc-s-6);
justify-content: center;
align-items: center;
}
.dc-trusted-item {
font-family: var(--dc-font-mono);
font-size: 14px;
color: var(--dc-ink-mute);
letter-spacing: 0.04em;
}
/* Trusted By pill grid (industry types) */
.dc-pill-grid {
display: flex;
flex-wrap: wrap;
gap: var(--dc-s-2);
}
.dc-pill-grid--centre { justify-content: center; }
.dc-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 1px solid var(--dc-line-dark);
background: var(--dc-paper);
font-family: var(--dc-font-mono);
font-size: 12px;
letter-spacing: 0.04em;
color: var(--dc-ink);
text-transform: uppercase;
}
.dc-pill--brand { background: var(--dc-brand-soft); color: var(--dc-brand-deep); border-color: var(--dc-brand-deep); }
.dc-pill--mint { background: var(--dc-mint); color: var(--dc-ink); border-color: var(--dc-mint-deep); }
.dc-pill--warm { background: var(--dc-paper-warm); color: var(--dc-clay); border-color: var(--dc-clay); }
.dc-trusted-foot { text-align: center; margin-top: var(--dc-s-5); font-family: var(--dc-font-mono); font-size: var(--dc-f-xs); letter-spacing: 0.06em; color: var(--dc-ink-mute); }
.dc-trusted-foot a { color: var(--dc-ink); text-decoration: none; border-bottom: 1px dotted var(--dc-ink-mute); padding-bottom: 2px; }
.dc-trusted-foot a:hover { color: var(--dc-brand); border-bottom-color: var(--dc-brand); }
/* Split (text + mockup) — used for PII discovery, verifiable deletion */
.dc-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--dc-s-7);
align-items: center;
}
.dc-split--flip .dc-split-text { order: 2; }
.dc-split--flip .dc-split-visual { order: 1; }
.dc-split-text h2 {
font-size: var(--dc-f-3xl);
line-height: var(--dc-lh-snug);
letter-spacing: var(--dc-ls-head);
font-weight: 500;
margin-bottom: var(--dc-s-4);
}
.dc-split-text p {
color: var(--dc-ink-mute);
font-size: var(--dc-f-md);
line-height: 1.65;
margin-bottom: var(--dc-s-5);
}
/* Browser-chrome mockup frame */
.dc-mockup {
background: var(--dc-paper);
border: 1px solid var(--dc-line-dark);
overflow: hidden;
}
.dc-mockup-topbar {
display: flex;
align-items: center;
gap: var(--dc-s-2);
padding: 10px var(--dc-s-4);
background: var(--dc-paper-cream);
border-bottom: 1px solid var(--dc-line);
}
.dc-mockup-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--dc-line);
}
.dc-mockup-dot--red { background: var(--dc-clay); }
.dc-mockup-dot--amber { background: var(--dc-amber); }
.dc-mockup-dot--green { background: var(--dc-mint-deep); }
.dc-mockup-url {
font-family: var(--dc-font-mono);
font-size: 11px;
color: var(--dc-ink-mute);
margin-left: var(--dc-s-3);
letter-spacing: 0.04em;
}
.dc-mockup-body { padding: var(--dc-s-5); }
/* Mockup data table */
.dc-mockup-table {
width: 100%;
border-collapse: collapse;
font-family: var(--dc-font-mono);
font-size: 11px;
}
.dc-mockup-table th {
text-align: left;
padding: 8px 10px;
background: var(--dc-paper-cream);
color: var(--dc-ink-mute);
letter-spacing: 0.06em;
text-transform: uppercase;
border-bottom: 1px solid var(--dc-line);
}
.dc-mockup-table td {
padding: 8px 10px;
border-bottom: 1px dashed var(--dc-line);
color: var(--dc-ink);
}
.dc-mockup-table td:first-child { font-family: var(--dc-font-mono); color: var(--dc-brand); }
.dc-mockup-risk--high { color: var(--dc-clay); font-weight: 500; }
.dc-mockup-risk--medium { color: var(--dc-amber); font-weight: 500; }
.dc-mockup-risk--low { color: var(--dc-mint-deep); font-weight: 500; }
/* Mockup — verifiable-deletion certificate */
.dc-mockup-cert {
padding: var(--dc-s-6);
text-align: center;
}
.dc-mockup-cert-check {
width: 56px;
height: 56px;
border: 2px solid var(--dc-mint-deep);
background: var(--dc-mint);
color: var(--dc-ink);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: var(--dc-s-3);
}
.dc-mockup-cert-check svg { width: 28px; height: 28px; }
.dc-mockup-cert h5 {
font-size: var(--dc-f-md);
font-weight: 500;
margin-bottom: var(--dc-s-1);
}
.dc-mockup-cert p {
font-size: 12px;
color: var(--dc-ink-mute);
margin-bottom: var(--dc-s-4);
}
.dc-mockup-cert-body {
text-align: left;
background: var(--dc-paper-cream);
padding: var(--dc-s-3) var(--dc-s-4);
border: 1px solid var(--dc-line);
font-size: 12px;
margin-bottom: var(--dc-s-3);
}
.dc-mockup-cert-body div { padding: 3px 0; }
.dc-mockup-cert-body strong { color: var(--dc-ink); font-weight: 500; }
.dc-mockup-cert-hash {
font-family: var(--dc-font-mono);
font-size: 10px;
color: var(--dc-ink-mute);
background: var(--dc-paper-cream);
padding: var(--dc-s-2) var(--dc-s-3);
border: 1px solid var(--dc-line);
word-break: break-all;
text-align: left;
}
.dc-mockup-cert-hash strong { color: var(--dc-clay); font-weight: 500; }
/* Standout tools grid (6 cards with mockup previews) */
.dc-standout-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--dc-line-dark);
border: 1px solid var(--dc-line-dark);
}
.dc-standout-card {
background: var(--dc-paper);
padding: var(--dc-s-6) var(--dc-s-5);
display: flex;
flex-direction: column;
position: relative;
}
.dc-standout-card-flag {
position: absolute;
top: var(--dc-s-5);
right: var(--dc-s-5);
background: var(--dc-brand);
color: var(--dc-paper);
padding: 2px 8px;
font-family: var(--dc-font-mono);
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.dc-standout-card-flag--clay { background: var(--dc-clay); }
.dc-standout-card-icon {
width: 48px;
height: 48px;
color: var(--dc-brand);
margin-bottom: var(--dc-s-4);
}
.dc-standout-card h3 {
font-size: var(--dc-f-lg);
font-weight: 500;
margin-bottom: var(--dc-s-2);
}
.dc-standout-card p {
font-size: 13px;
color: var(--dc-ink-mute);
line-height: 1.6;
margin-bottom: var(--dc-s-4);
}
.dc-standout-card ul {
list-style: none;
padding: 0;
margin: 0 0 var(--dc-s-4);
font-size: 12px;
color: var(--dc-ink);
}
.dc-standout-card ul li {
padding: 3px 0;
padding-left: 16px;
position: relative;
}
.dc-standout-card ul li::before {
content: '';
position: absolute;
left: 0;
top: 10px;
width: 8px;
height: 1px;
background: var(--dc-brand);
}
.dc-standout-card-mockup {
margin-top: auto;
background: var(--dc-paper-cream);
border: 1px solid var(--dc-line);
padding: var(--dc-s-3);
font-family: var(--dc-font-mono);
font-size: 11px;
}
.dc-standout-card-mockup-head {
font-size: 10px;
letter-spacing: 0.08em;
color: var(--dc-ink-mute);
text-transform: uppercase;
margin-bottom: var(--dc-s-2);
}
.dc-standout-card-mockup-row {
display: flex;
justify-content: space-between;
padding: 3px 0;
border-bottom: 1px dashed var(--dc-line);
font-size: 11px;
}
.dc-standout-card-mockup-row:last-child { border-bottom: none; }
/* Module categories (all 81 modules by category, no tabs) */
.dc-module-cats {
display: flex;
flex-direction: column;
gap: var(--dc-s-6);
}
.dc-module-cat {
padding: var(--dc-s-5) 0;
border-top: 1px solid var(--dc-line);
}
.dc-module-cat:first-child { border-top: none; padding-top: 0; }
.dc-module-cat-head {
display: flex;
align-items: baseline;
gap: var(--dc-s-3);
margin-bottom: var(--dc-s-4);
}
.dc-module-cat-head h3 {
font-size: var(--dc-f-lg);
font-weight: 500;
}
.dc-module-cat-count {
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.08em;
color: var(--dc-brand);
}
.dc-module-chips {
display: flex;
flex-wrap: wrap;
gap: var(--dc-s-2);
}
.dc-module-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid var(--dc-line);
background: var(--dc-paper);
font-size: 12px;
color: var(--dc-ink);
}
.dc-module-chip:hover { border-color: var(--dc-brand); color: var(--dc-brand); }
/* 3 more-tools compact row */
.dc-more-tools {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--dc-s-4);
margin-top: var(--dc-s-5);
}
.dc-more-tool {
display: flex;
gap: var(--dc-s-3);
padding: var(--dc-s-4);
border: 1px solid var(--dc-line);
background: var(--dc-paper);
transition: border-color var(--dc-t-fast);
align-items: flex-start;
}
.dc-more-tool:hover { border-color: var(--dc-ink); }
.dc-more-tool-icon {
width: 36px;
height: 36px;
color: var(--dc-brand);
flex-shrink: 0;
}
.dc-more-tool h5 {
font-size: 14px;
font-weight: 500;
margin-bottom: 4px;
}
.dc-more-tool p {
font-size: 12px;
color: var(--dc-ink-mute);
line-height: 1.55;
margin: 0;
}
/* Secondary notice strip (BFSI RBI-DGF, etc.) — warm variant of launch strip */
.dc-launch-strip--warm { background: var(--dc-clay); color: var(--dc-paper); }
.dc-launch-strip--warm .dc-badge-live { background: var(--dc-paper); color: var(--dc-clay); }
.dc-launch-strip--warm a { color: var(--dc-paper); border-bottom: 1px solid rgba(248,247,244,0.4); padding-bottom: 1px; }
.dc-launch-strip--warm a:hover { border-bottom-color: var(--dc-paper); }
/* The Practice Promises — trust signal strip (5 inline items with checks) */
.dc-trust-strip {
background: var(--dc-paper-cream);
border-top: 1px solid var(--dc-line);
border-bottom: 1px solid var(--dc-line);
padding: var(--dc-s-4) var(--dc-gutter);
}
.dc-trust-strip-inner {
max-width: var(--dc-container);
margin: 0 auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--dc-s-3) var(--dc-s-5);
align-items: center;
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.04em;
color: var(--dc-ink-mute);
}
.dc-trust-item { display: inline-flex; align-items: center; gap: 6px; }
.dc-trust-item strong { color: var(--dc-ink); font-weight: 500; letter-spacing: 0.02em; }
.dc-trust-item svg { width: 14px; height: 14px; color: var(--dc-mint-deep); flex-shrink: 0; }
.dc-trust-sep { opacity: 0.3; }
/* Architecture flow (3-column: sources → platform → regulators) */
.dc-arch-flow {
display: grid;
grid-template-columns: 1fr auto 1.3fr auto 1fr;
gap: var(--dc-s-4);
align-items: stretch;
}
.dc-arch-col {
padding: var(--dc-s-5);
border: 1px solid var(--dc-line-dark);
display: flex;
flex-direction: column;
}
.dc-arch-col--input { background: var(--dc-brand-soft); color: var(--dc-brand-deep); }
.dc-arch-col--platform { background: var(--dc-ink); color: var(--dc-paper); }
.dc-arch-col--output { background: var(--dc-paper-cream); }
.dc-arch-col-head {
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: var(--dc-s-4);
padding-bottom: var(--dc-s-3);
border-bottom: 1px solid currentColor;
opacity: 0.9;
}
.dc-arch-col--platform .dc-arch-col-head { color: var(--dc-mint); border-bottom-color: rgba(163, 201, 181, 0.3); opacity: 1; }
.dc-arch-col-list {
list-style: none;
padding: 0;
margin: 0;
flex-grow: 1;
}
.dc-arch-col-list li {
padding: 4px 0;
font-size: 13px;
line-height: 1.5;
}
.dc-arch-col--platform .dc-arch-col-list li { color: rgba(248, 247, 244, 0.9); }
.dc-arch-col-foot {
margin-top: var(--dc-s-4);
padding-top: var(--dc-s-3);
border-top: 1px solid currentColor;
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.08em;
opacity: 0.85;
text-transform: uppercase;
}
.dc-arch-col--platform .dc-arch-col-foot { color: var(--dc-mint); border-top-color: rgba(163, 201, 181, 0.3); opacity: 1; }
.dc-arch-platform-badges {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: rgba(248, 247, 244, 0.15);
margin-bottom: var(--dc-s-4);
}
.dc-arch-badge {
padding: 8px 10px;
background: var(--dc-ink);
color: var(--dc-paper);
font-family: var(--dc-font-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
text-align: center;
line-height: 1.3;
border-left: 2px solid var(--dc-mint);
}
.dc-arch-arrow {
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: var(--dc-ink-mute);
}
/* Connector wall (grid of connector tiles) */
.dc-connectors-wall {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: var(--dc-s-2);
margin-top: var(--dc-s-5);
}
.dc-connector-item {
position: relative;
padding: var(--dc-s-4) var(--dc-s-3);
border: 1px solid var(--dc-line);
background: var(--dc-paper);
text-align: center;
font-family: var(--dc-font-mono);
font-size: 11px;
color: var(--dc-ink);
letter-spacing: 0.04em;
}
.dc-connector-item--soon { opacity: 0.55; }
.dc-connector-badge {
position: absolute;
top: 6px;
right: 6px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--dc-mint-deep);
}
.dc-connector-badge--soon {
width: auto;
height: auto;
border-radius: 0;
background: var(--dc-paper-warm);
color: var(--dc-clay);
font-size: 8px;
padding: 1px 4px;
letter-spacing: 0.08em;
border: 1px solid var(--dc-clay);
}
.dc-connector-icon {
display: flex;
justify-content: center;
margin-bottom: 6px;
color: var(--dc-brand);
}
.dc-connector-icon svg { width: 24px; height: 24px; }
.dc-connector-name { font-weight: 500; font-size: 11px; }
.dc-connectors-foot {
text-align: center;
margin-top: var(--dc-s-5);
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
color: var(--dc-ink-mute);
letter-spacing: 0.04em;
}
.dc-connectors-foot a { color: var(--dc-brand); text-decoration: none; font-weight: 500; }
/* Checklist category cards (DPDP compliance checklist page) */
.dc-check-list { display: flex; flex-direction: column; gap: var(--dc-s-4); }
.dc-check-cat { background: var(--dc-paper); border: 1px solid var(--dc-line-dark); padding: var(--dc-s-5) var(--dc-s-6); }
.dc-check-cat-head { display: flex; align-items: center; gap: var(--dc-s-3); margin-bottom: var(--dc-s-2); }
.dc-check-no { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--dc-brand); color: var(--dc-paper); font-family: var(--dc-font-mono); font-size: 13px; font-weight: 500; flex-shrink: 0; }
.dc-check-cat-head h4 { font-size: var(--dc-f-md); font-weight: 500; margin: 0; color: var(--dc-ink); }
.dc-check-cite { font-family: var(--dc-font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--dc-ink-mute); margin-bottom: var(--dc-s-4); padding-bottom: var(--dc-s-3); border-bottom: 1px dashed var(--dc-line); }
.dc-check-item { display: flex; gap: var(--dc-s-3); padding: 6px 0; font-size: 14px; color: var(--dc-ink); line-height: 1.55; align-items: flex-start; }
.dc-check-item-box { flex-shrink: 0; width: 16px; height: 16px; border: 1.5px solid var(--dc-brand); margin-top: 2px; display: inline-block; }
/* Related-links grid (compact 3-up) */
.dc-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--dc-line-dark); border: 1px solid var(--dc-line-dark); }
.dc-related-link { background: var(--dc-paper); padding: var(--dc-s-4) var(--dc-s-5); text-decoration: none; color: var(--dc-ink); display: flex; align-items: center; justify-content: space-between; gap: var(--dc-s-3); transition: background var(--dc-t-fast); font-weight: 500; font-size: 14px; }
.dc-related-link:hover { background: var(--dc-paper-cream); color: var(--dc-brand); }
.dc-related-link::after { content: '→'; color: var(--dc-ink-mute); flex-shrink: 0; font-family: var(--dc-font-mono); }
.dc-related-link:hover::after { color: var(--dc-brand); }
/* Hero trust bullets (3-up small check-marked list under hero sub) */
.dc-hero-trust { display: flex; gap: var(--dc-s-5); flex-wrap: wrap; margin-top: var(--dc-s-4); font-size: 13px; color: var(--dc-ink-mute); }
.dc-hero-trust span { display: inline-flex; align-items: center; gap: 6px; }
.dc-hero-trust svg { color: var(--dc-brand); flex-shrink: 0; }
/* Thank-you confirmation page */
.dc-thanks { padding: var(--dc-s-9) var(--dc-gutter); max-width: 720px; margin: 0 auto; }
.dc-thanks-head { text-align: center; margin-bottom: var(--dc-s-7); }
.dc-thanks-check { display: inline-flex; width: 60px; height: 60px; background: var(--dc-mint); color: var(--dc-ink); border: 2px solid var(--dc-mint-deep); align-items: center; justify-content: center; margin-bottom: var(--dc-s-4); }
.dc-thanks-check svg { width: 32px; height: 32px; }
.dc-thanks h1 { font-size: var(--dc-f-4xl); line-height: var(--dc-lh-tight); letter-spacing: var(--dc-ls-head); font-weight: 500; margin-bottom: var(--dc-s-4); }
.dc-thanks-sub { font-size: var(--dc-f-md); color: var(--dc-ink-mute); max-width: 560px; margin: 0 auto; line-height: 1.65; }
.dc-thanks-steps { background: var(--dc-paper); border: 1px solid var(--dc-line-dark); padding: var(--dc-s-6); }
.dc-thanks-steps-head { font-family: var(--dc-font-mono); font-size: var(--dc-f-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dc-brand); margin-bottom: var(--dc-s-4); padding-bottom: var(--dc-s-3); border-bottom: 1px solid var(--dc-line); }
.dc-thanks-step { display: grid; grid-template-columns: 40px 1fr; gap: var(--dc-s-4); padding: var(--dc-s-4) 0; border-bottom: 1px dashed var(--dc-line); }
.dc-thanks-step:last-child { border-bottom: none; padding-bottom: 0; }
.dc-thanks-step:first-child { padding-top: 0; }
.dc-thanks-step-no { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--dc-brand); color: var(--dc-paper); font-family: var(--dc-font-mono); font-size: 12px; font-weight: 500; }
.dc-thanks-step-title { font-weight: 500; color: var(--dc-ink); font-size: 14px; margin-bottom: 4px; }
.dc-thanks-step-body { font-size: 13px; color: var(--dc-ink-mute); line-height: 1.6; }
.dc-thanks-aside { background: var(--dc-paper-cream); border: 1px solid var(--dc-line-dark); padding: var(--dc-s-5); text-align: center; margin-top: var(--dc-s-5); }
.dc-thanks-aside-head { font-weight: 500; color: var(--dc-ink); margin-bottom: 6px; }
.dc-thanks-aside-sub { font-size: 13px; color: var(--dc-ink-mute); margin-bottom: var(--dc-s-4); line-height: 1.55; }
.dc-thanks-foot { text-align: center; margin-top: var(--dc-s-6); font-size: 12px; color: var(--dc-ink-mute); line-height: 1.65; }
/* Form page patterns — reusable for request-a-scope, support, contact, etc. */
.dc-form-panel { background: var(--dc-paper); border: 1px solid var(--dc-line-dark); padding: var(--dc-s-6); max-width: 760px; margin: 0 auto; }
.dc-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--dc-s-4) var(--dc-s-4); }
.dc-form-field { display: flex; flex-direction: column; gap: 6px; }
.dc-form-field--full { grid-column: 1 / -1; }
.dc-form-label { font-family: var(--dc-font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--dc-ink-mute); text-transform: uppercase; }
.dc-form-label .req { color: var(--dc-clay); }
.dc-form-control, .dc-form-select, .dc-form-textarea {
padding: 11px 14px;
border: 1px solid var(--dc-line-dark);
background: var(--dc-paper);
font-family: var(--dc-font-sans);
font-size: 14px;
color: var(--dc-ink);
border-radius: 0;
width: 100%;
}
.dc-form-textarea { resize: vertical; min-height: 90px; font-family: var(--dc-font-sans); }
.dc-form-control:focus, .dc-form-select:focus, .dc-form-textarea:focus {
outline: none;
border-color: var(--dc-brand);
box-shadow: 0 0 0 3px var(--dc-brand-soft);
}
/* Service picker (checkable pills) */
.dc-service-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.dc-service-pill {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border: 1px solid var(--dc-line-dark);
background: var(--dc-paper);
cursor: pointer;
font-size: 14px;
color: var(--dc-ink);
transition: background var(--dc-t-fast), border-color var(--dc-t-fast);
}
.dc-service-pill:hover { background: var(--dc-paper-cream); }
.dc-service-pill input[type="checkbox"] { margin: 0; accent-color: var(--dc-brand); width: 16px; height: 16px; }
.dc-service-pill:has(input:checked) {
background: var(--dc-brand-soft);
border-color: var(--dc-brand);
color: var(--dc-brand-deep);
}
.dc-service-pill--question { background: var(--dc-paper-warm); border-color: var(--dc-clay); }
.dc-service-pill--question:hover { background: #FEF3C7; }
.dc-service-pill--question:has(input:checked) { background: #FEF3C7; border-color: var(--dc-amber); color: var(--dc-ink); }
.dc-service-pill--question input[type="checkbox"] { accent-color: var(--dc-clay); }
/* Consent checkbox */
.dc-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--dc-ink-mute); line-height: 1.5; cursor: pointer; }
.dc-consent input[type="checkbox"] { margin: 0; margin-top: 3px; flex-shrink: 0; accent-color: var(--dc-brand); width: 16px; height: 16px; }
/* Submit button */
.dc-form-submit {
background: var(--dc-ink);
color: var(--dc-paper);
padding: 14px 28px;
border: 0;
font-family: var(--dc-font-sans);
font-weight: 500;
font-size: 15px;
cursor: pointer;
width: 100%;
transition: background var(--dc-t-fast);
}
.dc-form-submit:hover { background: var(--dc-brand); }
.dc-form-submit:disabled { opacity: 0.6; cursor: not-allowed; background: var(--dc-ink); }
.dc-form-feedback { margin-top: var(--dc-s-3); font-size: 13px; min-height: 20px; color: var(--dc-ink-mute); }
.dc-form-feedback--err { color: var(--dc-clay); }
.dc-form-note { margin-top: 8px; font-size: 12px; color: var(--dc-ink-mute); line-height: 1.55; }
/* Honeypot (invisible field for bot detection) */
.dc-honeypot { position: absolute; left: -9999px; pointer-events: none; }
/* SLA strip (3-up) */
.dc-sla-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--dc-line-dark); border: 1px solid var(--dc-line-dark); margin-top: var(--dc-s-6); max-width: 760px; margin-left: auto; margin-right: auto; }
.dc-sla-card { background: var(--dc-paper-cream); padding: var(--dc-s-4); }
.dc-sla-card-tag { font-family: var(--dc-font-mono); font-size: 10px; font-weight: 500; color: var(--dc-mint-deep); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; }
.dc-sla-card-text { font-size: 13px; color: var(--dc-ink); line-height: 1.5; }
/* Brand callout variant (for "want to see the platform first?") */
.dc-callout--brand { background: var(--dc-brand-soft); border-color: var(--dc-brand); max-width: 760px; margin-left: auto; margin-right: auto; }
.dc-callout--brand .dc-callout-head { color: var(--dc-brand-deep); }
/* Hero centred-text variant (for form pages, legal pages) */
.dc-hero--centre { grid-template-columns: 1fr; }
.dc-hero--centre .dc-hero-text { max-width: 760px; margin: 0 auto; text-align: center; }
.dc-hero--centre .dc-breadcrumb { text-align: center; }
.dc-hero--centre .dc-annotation { display: inline-block; }
.dc-hero--centre .dc-hero-sub { max-width: 620px; margin-left: auto; margin-right: auto; }
.dc-hero--centre .dc-hero-cta { justify-content: center; }
.dc-hero--centre .dc-hand-note { margin-left: auto; margin-right: auto; }
/* Trust page — Control card grid (verifiable controls) */
.dc-control-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--dc-line-dark); border: 1px solid var(--dc-line-dark); }
.dc-control-card { background: var(--dc-paper); padding: var(--dc-s-5); display: flex; flex-direction: column; }
.dc-control-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; background: var(--dc-brand-soft); color: var(--dc-brand); margin-bottom: var(--dc-s-3); }
.dc-control-icon svg { width: 22px; height: 22px; }
.dc-control-card h5 { font-size: var(--dc-f-md); font-weight: 500; margin: var(--dc-s-2) 0 var(--dc-s-2); }
.dc-control-card p { font-size: 13px; color: var(--dc-ink-mute); line-height: 1.6; margin: 0; }
.dc-control-card p a { color: var(--dc-brand); }
/* Status pill (Live / In Progress / Planned / Clean / Resolved) */
.dc-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-family: var(--dc-font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid currentColor; align-self: flex-start; width: fit-content; }
.dc-status-pill svg { width: 10px; height: 10px; }
.dc-status-pill--live { color: var(--dc-mint-deep); background: var(--dc-mint); border-color: var(--dc-mint-deep); }
.dc-status-pill--progress { color: var(--dc-amber); background: #FEF3C7; border-color: var(--dc-amber); }
.dc-status-pill--planned { color: var(--dc-brand); background: var(--dc-brand-soft); }
.dc-status-pill--resolved { color: var(--dc-amber); background: #FEF3C7; border-color: var(--dc-amber); }
.dc-status-pill--clean { color: var(--dc-mint-deep); background: var(--dc-mint); border-color: var(--dc-mint-deep); }
/* Trust page — Certification roadmap */
.dc-roadmap { display: flex; flex-direction: column; gap: 1px; background: var(--dc-line-dark); border: 1px solid var(--dc-line-dark); }
.dc-roadmap-row { background: var(--dc-paper); padding: var(--dc-s-5); display: grid; grid-template-columns: 140px 1fr 140px; gap: var(--dc-s-5); align-items: center; }
.dc-roadmap-date { font-family: var(--dc-font-mono); font-size: 13px; font-weight: 500; color: var(--dc-ink); }
.dc-roadmap-date small { display: block; font-size: 9px; color: var(--dc-ink-mute); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 400; margin-bottom: 2px; }
.dc-roadmap-body strong { display: block; font-size: 15px; font-weight: 500; margin-bottom: 2px; color: var(--dc-ink); }
.dc-roadmap-body span { font-size: 13px; color: var(--dc-ink-mute); line-height: 1.5; }
.dc-roadmap-body a { color: var(--dc-brand); }
.dc-roadmap-row > div:last-child { justify-self: start; }
/* Trust page — Incident log entry */
.dc-incident { background: var(--dc-paper); border: 1px solid var(--dc-line-dark); border-left: 4px solid var(--dc-mint-deep); padding: var(--dc-s-5); margin-bottom: var(--dc-s-3); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--dc-s-4); }
.dc-incident--warn { border-left-color: var(--dc-amber); background: #FFFBEB; }
.dc-incident-body strong { display: block; font-size: 15px; font-weight: 500; margin-bottom: 4px; }
.dc-incident-body p { font-size: 13px; color: var(--dc-ink-mute); line-height: 1.55; margin: 0; }
/* Trust page — Hero dark stat tiles */
.dc-stat-tiles-dark { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dc-s-3); }
.dc-stat-tile-dark { padding: var(--dc-s-4) var(--dc-s-3); background: rgba(248, 247, 244, 0.05); border: 1px solid rgba(248, 247, 244, 0.12); text-align: center; }
.dc-stat-tile-dark-num { font-family: var(--dc-font-mono); font-size: 20px; font-weight: 500; color: var(--dc-mint); line-height: 1; letter-spacing: -0.01em; }
.dc-stat-tile-dark-label { font-family: var(--dc-font-mono); font-size: 10px; color: rgba(248, 247, 244, 0.55); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 6px; }
/* Dark hero variant (Trust page) — full-bleed background with inner container */
.dc-hero--dark {
background: var(--dc-ink);
color: var(--dc-paper);
display: block;
grid-template-columns: none;
gap: 0;
padding: 0;
max-width: none;
margin: 0;
position: relative;
overflow: hidden;
border-top: 1px solid var(--dc-line-dark);
border-bottom: 1px solid var(--dc-line-dark);
}
.dc-hero--dark::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 25% 40%, rgba(163,201,181,0.12), transparent 45%),
radial-gradient(circle at 75% 60%, rgba(30,58,138,0.14), transparent 45%),
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
background-size: auto, auto, 48px 48px, 48px 48px;
pointer-events: none;
}
.dc-hero--dark .dc-hero-inner {
display: grid;
grid-template-columns: 440px 1fr;
gap: 72px;
align-items: center;
padding: var(--dc-s-9) var(--dc-gutter);
max-width: var(--dc-container);
margin: 0 auto;
position: relative;
z-index: 1;
}
.dc-hero--dark .dc-breadcrumb { color: rgba(248, 247, 244, 0.6); }
.dc-hero--dark .dc-breadcrumb a { color: rgba(248, 247, 244, 0.75); }
.dc-hero--dark .dc-breadcrumb a:hover { color: var(--dc-mint); border-bottom-color: var(--dc-mint); }
.dc-hero--dark .dc-breadcrumb .current { color: var(--dc-paper); }
.dc-hero--dark .dc-hero-text h1 { color: var(--dc-paper); }
.dc-hero--dark .dc-hero-sub { color: rgba(248, 247, 244, 0.75); }
.dc-hero--dark .dc-annotation {
background: rgba(163, 201, 181, 0.15);
color: var(--dc-mint);
border-color: var(--dc-mint-deep);
}
.dc-hero--dark .dc-marker::before {
background: var(--dc-mint);
opacity: 0.35;
mix-blend-mode: screen;
}
.dc-hero--dark .dc-marker--mint::before {
background: var(--dc-mint);
opacity: 0.4;
mix-blend-mode: screen;
}
.dc-hero--dark .dc-btn--ghost {
color: var(--dc-paper);
border-bottom-color: var(--dc-paper);
}
.dc-hero--dark .dc-btn--ghost:hover {
color: var(--dc-mint);
border-bottom-color: var(--dc-mint);
}
.dc-hero--dark .dc-stat-tile-dark-num {
font-family: var(--dc-font-mono);
font-size: 22px;
color: var(--dc-mint);
}
.dc-hero--dark .dc-stat-tiles-dark { gap: 1px; background: rgba(248,247,244,0.08); border: 1px solid rgba(248,247,244,0.12); }
.dc-hero--dark .dc-stat-tile-dark { background: var(--dc-ink); border: none; padding: var(--dc-s-5) var(--dc-s-4); }
.dc-hero--dark .dc-stat-tile-dark-label { font-size: 10px; color: rgba(248,247,244,0.5); margin-top: 8px; }
@media (max-width: 960px) {
.dc-hero--dark .dc-hero-inner { grid-template-columns: 1fr; gap: var(--dc-s-6); padding: var(--dc-s-7) var(--dc-gutter); }
}
/* Trust page — Callout box (what we don't claim) */
.dc-callout { background: var(--dc-paper-warm); border: 1px solid var(--dc-clay); padding: var(--dc-s-5); margin-top: var(--dc-s-5); }
.dc-callout-head { color: var(--dc-clay); font-weight: 500; margin-bottom: var(--dc-s-2); display: flex; align-items: center; gap: 8px; }
.dc-callout p { font-size: 14px; color: var(--dc-ink); line-height: 1.6; margin: 0; }
/* Trust page — Practices cards (4-up with bullet list, 2-up on tablet) */
.dc-practices-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--dc-line-dark); border: 1px solid var(--dc-line-dark); }
.dc-practice-card { background: var(--dc-paper); padding: var(--dc-s-5); }
.dc-practice-card h4 { font-size: var(--dc-f-md); font-weight: 500; margin-bottom: var(--dc-s-3); padding-bottom: var(--dc-s-2); border-bottom: 1px solid var(--dc-line); color: var(--dc-brand); }
.dc-practice-card ul { padding-left: 18px; margin: 0; font-size: 13px; line-height: 1.75; color: var(--dc-ink); }
.dc-practice-card ul li { margin-bottom: 2px; }
/* Stat strip (8-up compact grid for platform-page metrics) */
.dc-stat-strip { background: var(--dc-paper-cream); border: 1px solid var(--dc-line-dark); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--dc-line-dark); }
.dc-stat-strip-item { background: var(--dc-paper-cream); padding: var(--dc-s-5) var(--dc-s-3); text-align: center; }
.dc-stat-strip-num { font-size: 32px; font-weight: 500; letter-spacing: -0.025em; color: var(--dc-brand); line-height: 1; }
.dc-stat-strip-label { font-family: var(--dc-font-mono); font-size: 10px; color: var(--dc-ink-mute); letter-spacing: 0.08em; text-transform: uppercase; margin-top: var(--dc-s-2); line-height: 1.3; }
/* Connector wall subsection heading (Live now / Coming soon) */
.dc-connectors-subhead { font-family: var(--dc-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dc-ink-mute); margin: var(--dc-s-5) 0 var(--dc-s-3); padding-bottom: var(--dc-s-2); border-bottom: 1px solid var(--dc-line); display: flex; align-items: center; gap: 8px; }
.dc-connectors-subhead-dot { width: 8px; height: 8px; border-radius: 50%; }
.dc-connectors-subhead-dot--live { background: var(--dc-mint-deep); }
.dc-connectors-subhead-dot--soon { background: var(--dc-clay); }
/* DPDP page — Why us trust cards (3-up) */
.dc-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--dc-line-dark); border: 1px solid var(--dc-line-dark); }
.dc-why-card { background: var(--dc-paper); padding: var(--dc-s-6) var(--dc-s-5); text-align: center; }
.dc-why-card svg { width: 42px; height: 42px; color: var(--dc-brand); margin-bottom: var(--dc-s-3); }
.dc-why-card h3 { font-size: var(--dc-f-md); font-weight: 500; margin-bottom: var(--dc-s-2); }
.dc-why-card p { font-size: 13px; color: var(--dc-ink-mute); line-height: 1.55; margin: 0; }
/* DPDP page — Upgrade groups (10 DPDP-native upgrades) */
.dc-upgrade-group { margin-bottom: var(--dc-s-7); }
.dc-upgrade-group-head { display: flex; align-items: center; gap: var(--dc-s-3); margin-bottom: var(--dc-s-4); padding-bottom: var(--dc-s-3); border-bottom: 1px solid var(--dc-line-dark); }
.dc-upgrade-group-icon { width: 32px; height: 32px; color: var(--dc-brand); flex-shrink: 0; }
.dc-upgrade-group-head h3 { font-size: var(--dc-f-lg); font-weight: 500; margin: 0; }
.dc-upgrade-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--dc-line-dark); border: 1px solid var(--dc-line-dark); }
.dc-upgrade-grid--2 { grid-template-columns: repeat(2, 1fr); }
.dc-upgrade-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dc-upgrade-card { background: var(--dc-paper); padding: var(--dc-s-5); }
.dc-upgrade-card-title { font-weight: 500; margin-bottom: var(--dc-s-2); display: flex; align-items: center; gap: 8px; color: var(--dc-ink); }
.dc-upgrade-card-title svg { width: 18px; height: 18px; color: var(--dc-brand); flex-shrink: 0; }
.dc-upgrade-card p { font-size: 12px; color: var(--dc-ink-mute); line-height: 1.55; margin: 0; }
/* DPDP page — Week timeline (3-up with coloured left bar) */
.dc-week-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dc-s-4); }
.dc-week-card { background: var(--dc-paper); border: 1px solid var(--dc-line-dark); border-left: 4px solid var(--dc-brand); padding: var(--dc-s-5); }
.dc-week-card--w2 { border-left-color: var(--dc-amber); }
.dc-week-card--w3 { border-left-color: var(--dc-mint-deep); }
.dc-week-card-head { display: flex; align-items: center; gap: var(--dc-s-3); margin-bottom: var(--dc-s-4); }
.dc-week-no { width: 36px; height: 36px; background: var(--dc-brand); color: var(--dc-paper); display: inline-flex; align-items: center; justify-content: center; font-family: var(--dc-font-mono); font-weight: 500; font-size: 14px; flex-shrink: 0; }
.dc-week-card--w2 .dc-week-no { background: var(--dc-amber); }
.dc-week-card--w3 .dc-week-no { background: var(--dc-mint-deep); }
.dc-week-card-title { font-size: var(--dc-f-md); font-weight: 500; }
.dc-week-card-sub { font-family: var(--dc-font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--dc-ink-mute); text-transform: uppercase; }
.dc-week-card ul { list-style: none; padding: 0; margin: 0; }
.dc-week-card ul li { padding: 4px 0; padding-left: 20px; position: relative; font-size: 13px; color: var(--dc-ink); line-height: 1.5; }
.dc-week-card ul li::before { content: ''; position: absolute; left: 0; top: 10px; width: 10px; height: 10px; background: url("data:image/svg+xml;utf8,") no-repeat; }
/* DPDP page — Guidebook promo (dark banner, split layout) */
.dc-guidebook { background: var(--dc-ink); color: var(--dc-paper); padding: var(--dc-s-8) var(--dc-s-7); border: 1px solid var(--dc-line-dark); position: relative; overflow: hidden; }
.dc-guidebook::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
.dc-guidebook-grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--dc-s-7); align-items: center; position: relative; }
.dc-guidebook-flag { display: inline-block; background: var(--dc-mint); color: var(--dc-ink); font-family: var(--dc-font-mono); font-size: 10px; letter-spacing: 0.1em; padding: 4px 10px; margin-bottom: var(--dc-s-4); text-transform: uppercase; }
.dc-guidebook h2 { color: var(--dc-paper); font-size: var(--dc-f-3xl); line-height: 1.14; letter-spacing: var(--dc-ls-head); font-weight: 500; margin-bottom: var(--dc-s-4); }
.dc-guidebook p { color: rgba(248,247,244,0.72); font-size: var(--dc-f-md); line-height: 1.65; margin-bottom: var(--dc-s-5); }
.dc-guidebook ul { list-style: none; padding: 0; margin: 0 0 var(--dc-s-5); }
.dc-guidebook ul li { padding: 4px 0; padding-left: 22px; position: relative; font-size: 14px; color: rgba(248,247,244,0.85); line-height: 1.55; }
.dc-guidebook ul li::before { content: ''; position: absolute; left: 0; top: 9px; width: 12px; height: 12px; background: url("data:image/svg+xml;utf8,") no-repeat; }
.dc-guidebook-cta { display: flex; gap: var(--dc-s-3); flex-wrap: wrap; }
.dc-guidebook-note { font-family: var(--dc-font-mono); font-size: var(--dc-f-xs); color: rgba(248,247,244,0.55); letter-spacing: 0.04em; margin-top: var(--dc-s-3); }
.dc-guidebook-book { background: var(--dc-paper-cream); color: var(--dc-ink); padding: var(--dc-s-6) var(--dc-s-5); border: 1px solid var(--dc-line); transform: rotate(-1.5deg); box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.dc-guidebook-book-flag { font-family: var(--dc-font-mono); font-size: 10px; letter-spacing: 0.14em; font-weight: 500; color: var(--dc-clay); margin-bottom: var(--dc-s-2); }
.dc-guidebook-book-title { font-size: var(--dc-f-lg); font-weight: 500; margin-bottom: var(--dc-s-3); line-height: 1.2; }
.dc-guidebook-book-desc { font-size: 12px; color: var(--dc-ink-mute); line-height: 1.55; margin-bottom: var(--dc-s-4); }
.dc-guidebook-book-ver { font-family: var(--dc-font-mono); font-size: 10px; color: var(--dc-ink-mute); letter-spacing: 0.08em; padding-top: var(--dc-s-3); border-top: 1px solid var(--dc-line); }
/* DPDP page — Guidebook email-gate modal (overrides Bootstrap modal) */
.dc-modal .modal-content { border: 1px solid var(--dc-line-dark); border-radius: 0; background: var(--dc-paper); }
.dc-modal .modal-header { border-bottom: 1px solid var(--dc-line); padding: var(--dc-s-5) var(--dc-s-5); }
.dc-modal .modal-title { font-family: var(--dc-font-sans); font-weight: 500; font-size: var(--dc-f-md); display: flex; align-items: center; gap: 8px; }
.dc-modal .modal-title svg { color: var(--dc-brand); }
.dc-modal .modal-body { padding: var(--dc-s-5); }
.dc-modal .form-label { font-family: var(--dc-font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--dc-ink-mute); text-transform: uppercase; margin-bottom: 6px; display: block; }
.dc-modal .form-label .req { color: var(--dc-clay); }
.dc-modal .form-control { border: 1px solid var(--dc-line-dark); border-radius: 0; padding: 10px 14px; font-size: 14px; font-family: var(--dc-font-sans); background: var(--dc-paper); width: 100%; }
.dc-modal .form-control:focus { outline: none; border-color: var(--dc-brand); box-shadow: 0 0 0 3px var(--dc-brand-soft); }
.dc-modal .form-field { margin-bottom: var(--dc-s-4); }
.dc-modal .form-hint { font-family: var(--dc-font-mono); font-size: 11px; color: var(--dc-ink-mute); margin-bottom: var(--dc-s-4); display: flex; align-items: center; gap: 6px; }
/* DPDP page — Build vs Buy split */
.dc-vsbuy { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dc-s-5); }
.dc-vsbuy-col { padding: var(--dc-s-6); border: 1px solid var(--dc-line-dark); background: var(--dc-paper); }
.dc-vsbuy-col--build { background: var(--dc-paper-warm); border-color: var(--dc-clay); }
.dc-vsbuy-col--buy { background: var(--dc-paper-cream); border-color: var(--dc-mint-deep); }
.dc-vsbuy-col h4 { font-size: var(--dc-f-lg); font-weight: 500; margin-bottom: var(--dc-s-4); display: flex; align-items: center; gap: 8px; }
.dc-vsbuy-col--build h4 { color: var(--dc-clay); }
.dc-vsbuy-col--buy h4 { color: var(--dc-mint-deep); }
.dc-vsbuy-list { list-style: none; padding: 0; margin: 0 0 var(--dc-s-5); }
.dc-vsbuy-list li { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; border-bottom: 1px dashed var(--dc-line); }
.dc-vsbuy-list li:last-child { border-bottom: none; }
.dc-vsbuy-list li .cost { font-family: var(--dc-font-mono); font-weight: 500; color: var(--dc-ink); white-space: nowrap; margin-left: var(--dc-s-3); }
.dc-vsbuy-total { background: var(--dc-paper); border: 1px solid var(--dc-line); padding: var(--dc-s-4); }
.dc-vsbuy-total-label { font-family: var(--dc-font-mono); font-size: 11px; color: var(--dc-ink-mute); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 4px; }
.dc-vsbuy-total-value { font-size: 28px; font-weight: 500; letter-spacing: -0.02em; }
.dc-vsbuy-col--build .dc-vsbuy-total-value { color: var(--dc-clay); }
.dc-vsbuy-col--buy .dc-vsbuy-total-value { color: var(--dc-mint-deep); }
.dc-vsbuy-total-sub { font-size: 12px; color: var(--dc-ink-mute); margin-top: 4px; }
.dc-vsbuy-note { background: var(--dc-paper-warm); border: 1px solid var(--dc-line-dark); padding: var(--dc-s-5); margin-top: var(--dc-s-5); display: grid; grid-template-columns: 1fr auto; gap: var(--dc-s-5); align-items: center; }
.dc-vsbuy-note-head { font-weight: 500; margin-bottom: 4px; color: var(--dc-clay); }
.dc-vsbuy-note p { font-size: 13px; color: var(--dc-ink); line-height: 1.55; margin: 0; }
/* DPDP page — vDPO tier grid (4-up compact) */
.dc-vdpo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--dc-line-dark); border: 1px solid var(--dc-line-dark); }
.dc-vdpo-card { background: var(--dc-paper); padding: var(--dc-s-5); text-align: center; position: relative; }
.dc-vdpo-card--popular { background: var(--dc-paper-cream); }
.dc-vdpo-card-badge { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: var(--dc-brand); color: var(--dc-paper); font-family: var(--dc-font-mono); font-size: 10px; letter-spacing: 0.08em; padding: 3px 10px; text-transform: uppercase; }
.dc-vdpo-card h4 { font-size: var(--dc-f-md); font-weight: 500; margin: var(--dc-s-3) 0 var(--dc-s-2); }
.dc-vdpo-card p { font-size: 12px; color: var(--dc-ink-mute); min-height: 36px; margin-bottom: var(--dc-s-3); line-height: 1.5; }
.dc-vdpo-price { font-size: 20px; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 2px; }
.dc-vdpo-price small { font-family: var(--dc-font-mono); font-size: 11px; color: var(--dc-ink-mute); font-weight: 400; margin-left: 2px; }
.dc-vdpo-gst { font-family: var(--dc-font-mono); font-size: 10px; color: var(--dc-ink-mute); letter-spacing: 0.04em; }
/* Breadcrumb (solutions / depth-page nav) */
.dc-breadcrumb {
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--dc-ink-mute);
margin-bottom: var(--dc-s-5);
}
.dc-breadcrumb a { color: var(--dc-ink-mute); text-decoration: none; border-bottom: 1px dotted transparent; padding-bottom: 2px; }
.dc-breadcrumb a:hover { color: var(--dc-brand); border-bottom-color: var(--dc-brand); }
.dc-breadcrumb span.sep { opacity: 0.4; margin: 0 var(--dc-s-2); }
.dc-breadcrumb .current { color: var(--dc-ink); }
/* Pain-point cards (4-up) */
.dc-pain-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--dc-line-dark);
border: 1px solid var(--dc-line-dark);
}
.dc-pain-card {
background: var(--dc-paper);
padding: var(--dc-s-6) var(--dc-s-5);
display: flex;
gap: var(--dc-s-4);
align-items: flex-start;
}
.dc-pain-no {
font-family: var(--dc-font-mono);
font-size: 22px;
font-weight: 500;
color: var(--dc-clay);
min-width: 36px;
line-height: 1;
}
.dc-pain-card p {
font-size: var(--dc-f-md);
line-height: 1.55;
color: var(--dc-ink);
margin: 0;
}
/* Modules grid (Core + Extended) */
.dc-modules-group {
margin-bottom: var(--dc-s-6);
}
.dc-modules-group-head {
display: flex;
align-items: baseline;
justify-content: space-between;
padding-bottom: var(--dc-s-3);
margin-bottom: var(--dc-s-4);
border-bottom: 1px solid var(--dc-line-dark);
}
.dc-modules-group-head h3 {
font-size: var(--dc-f-lg);
font-weight: 500;
}
.dc-modules-group-head .dc-modules-count {
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.1em;
color: var(--dc-brand);
text-transform: uppercase;
}
.dc-modules-group--pro .dc-modules-group-head { border-bottom-color: var(--dc-brand); }
.dc-modules-group--pro .dc-modules-count { color: var(--dc-mint-deep); }
/* 2-up pricing variant (Core / Extended tier cards) */
.dc-price-grid--2 { grid-template-columns: repeat(2, 1fr); }
/* FAQ list (open by default, no accordion JS needed) */
.dc-faq-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--dc-line-dark); }
.dc-faq-item {
padding: var(--dc-s-5) 0;
border-bottom: 1px solid var(--dc-line-dark);
display: grid;
grid-template-columns: 60px 1fr;
gap: var(--dc-s-5);
}
.dc-faq-item-no {
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.1em;
color: var(--dc-brand);
padding-top: 4px;
}
.dc-faq-q {
font-size: var(--dc-f-md);
font-weight: 500;
margin-bottom: var(--dc-s-3);
color: var(--dc-ink);
}
.dc-faq-a {
font-size: 15px;
line-height: 1.65;
color: var(--dc-ink-mute);
}
.dc-faq-a p { margin: 0 0 var(--dc-s-3); }
.dc-faq-a p:last-child { margin-bottom: 0; }
/* Solution hero visual (replaces the gradient hero-visual block) */
.dc-sol-hero-stats {
background: var(--dc-paper);
border: 1px solid var(--dc-line-dark);
padding: var(--dc-s-6);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--dc-line-dark);
}
.dc-sol-hero-stat {
background: var(--dc-paper);
padding: var(--dc-s-5) var(--dc-s-4);
text-align: center;
}
.dc-sol-hero-stat-value {
font-size: 44px;
font-weight: 500;
letter-spacing: -0.025em;
color: var(--dc-brand);
line-height: 1;
}
.dc-sol-hero-stat-label {
font-family: var(--dc-font-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--dc-ink-mute);
text-transform: uppercase;
margin-top: var(--dc-s-2);
}
/* Responsive — home extended */
@media (max-width: 960px) {
.dc-arch-flow { grid-template-columns: 1fr; }
.dc-arch-arrow { transform: rotate(90deg); padding: var(--dc-s-2) 0; }
.dc-trust-strip-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
.dc-trust-sep { display: none; }
.dc-persona-grid { grid-template-columns: repeat(2, 1fr); }
.dc-replace { grid-template-columns: 1fr; }
.dc-tiles { grid-template-columns: repeat(2, 1fr); }
.dc-ai-grid { grid-template-columns: 1fr; }
.dc-lang-grid { grid-template-columns: repeat(4, 1fr); }
.dc-price-grid { grid-template-columns: repeat(2, 1fr); }
.dc-launch-strip-inner { font-size: 10px; }
.dc-compare { font-size: 13px; }
.dc-compare th, .dc-compare td { padding: var(--dc-s-2) var(--dc-s-3); }
.dc-split { grid-template-columns: 1fr; gap: var(--dc-s-5); }
.dc-split--flip .dc-split-text,
.dc-split--flip .dc-split-visual { order: 0; }
.dc-standout-grid { grid-template-columns: repeat(2, 1fr); }
.dc-more-tools { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
.dc-related-grid { grid-template-columns: repeat(2, 1fr); }
.dc-control-grid { grid-template-columns: repeat(2, 1fr); }
.dc-stat-tiles-dark { grid-template-columns: repeat(2, 1fr); }
.dc-practices-grid { grid-template-columns: 1fr; }
.dc-roadmap-row { grid-template-columns: 1fr; gap: var(--dc-s-2); }
.dc-incident { flex-direction: column; }
.dc-stat-strip { grid-template-columns: repeat(2, 1fr); }
.dc-why-grid { grid-template-columns: 1fr; }
.dc-upgrade-grid, .dc-upgrade-grid--3 { grid-template-columns: repeat(2, 1fr); }
.dc-week-grid { grid-template-columns: 1fr; }
.dc-guidebook-grid { grid-template-columns: 1fr; }
.dc-vsbuy { grid-template-columns: 1fr; }
.dc-vsbuy-note { grid-template-columns: 1fr; }
.dc-vdpo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
.dc-related-grid { grid-template-columns: 1fr; }
.dc-check-cat { padding: var(--dc-s-4) var(--dc-s-4); }
.dc-persona-grid { grid-template-columns: 1fr; }
.dc-tiles { grid-template-columns: 1fr; }
.dc-lang-grid { grid-template-columns: repeat(3, 1fr); }
.dc-price-grid { grid-template-columns: 1fr; }
.dc-pain-grid { grid-template-columns: 1fr; }
.dc-price-grid--2 { grid-template-columns: 1fr; }
.dc-sol-hero-stats { grid-template-columns: 1fr; }
.dc-faq-item { grid-template-columns: 1fr; gap: var(--dc-s-2); }
.dc-upgrade-grid, .dc-upgrade-grid--2, .dc-upgrade-grid--3 { grid-template-columns: 1fr; }
.dc-vdpo-grid { grid-template-columns: 1fr; }
.dc-control-grid { grid-template-columns: 1fr; }
.dc-stat-tiles-dark { grid-template-columns: 1fr; }
.dc-form-grid { grid-template-columns: 1fr; }
.dc-sla-strip { grid-template-columns: 1fr; }
}
/* ============================================================
18. STYLE GUIDE ONLY (/style-guide.php — dev route)
Only consumed by style-guide.php. Deleting this block won't
affect any public page.
============================================================ */
.dc-sg-h1 {
font-size: var(--dc-f-4xl);
letter-spacing: var(--dc-ls-head);
margin-bottom: var(--dc-s-4);
}
.dc-sg-h3 {
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: var(--dc-ls-mono-wide);
text-transform: uppercase;
color: var(--dc-ink-mute);
margin: var(--dc-s-6) 0 var(--dc-s-4);
padding-top: var(--dc-s-3);
border-top: 1px solid var(--dc-line);
}
.dc-sg-lede {
font-size: var(--dc-f-md);
color: var(--dc-ink-mute);
max-width: 720px;
margin-bottom: var(--dc-s-5);
}
.dc-sg-lede code,
.dc-sg-check code {
background: var(--dc-paper-cream);
padding: 1px 6px;
font-family: var(--dc-font-mono);
font-size: 12px;
border: 1px solid var(--dc-line);
color: var(--dc-ink);
}
.dc-sg-swatches {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 2px;
background: var(--dc-line-dark);
border: 1px solid var(--dc-line-dark);
}
.dc-sg-swatch {
padding: var(--dc-s-5) var(--dc-s-4);
display: flex;
flex-direction: column;
gap: 4px;
font-family: var(--dc-font-mono);
font-size: var(--dc-f-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
min-height: 100px;
justify-content: flex-end;
}
.dc-sg-swatch code { font-size: 10px; opacity: 0.72; text-transform: none; }
.dc-sg-swatch--brand { background: var(--dc-brand); color: var(--dc-paper); }
.dc-sg-swatch--mint { background: var(--dc-mint); color: var(--dc-ink); }
.dc-sg-swatch--clay { background: var(--dc-clay); color: var(--dc-paper); }
.dc-sg-swatch--red { background: var(--dc-red-ink); color: var(--dc-paper); }
.dc-sg-swatch--amber { background: var(--dc-amber); color: var(--dc-ink); }
.dc-sg-swatch--ink { background: var(--dc-ink); color: var(--dc-paper); }
.dc-sg-swatch--paper { background: var(--dc-paper); color: var(--dc-ink); }
.dc-sg-type { display: flex; flex-direction: column; gap: var(--dc-s-4); margin-top: var(--dc-s-4); }
.dc-sg-type > div { padding: var(--dc-s-3) 0; border-bottom: 1px dashed var(--dc-line); }
.dc-sg-type-serif { font-size: 22px; font-family: var(--dc-font-serif); }
.dc-sg-type-hand { font-size: 24px; font-family: var(--dc-font-hand); }
.dc-sg-row { display: flex; gap: var(--dc-s-3); flex-wrap: wrap; align-items: center; margin-top: var(--dc-s-4); }
.dc-sg-p { font-size: var(--dc-f-lg); line-height: var(--dc-lh-snug); max-width: 720px; }
.dc-sg-stack { display: flex; flex-direction: column; gap: var(--dc-s-4); align-items: flex-start; margin-top: var(--dc-s-4); }
.dc-sg-voices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dc-s-5); margin-top: var(--dc-s-4); }
@media (max-width: 767.98px) { .dc-sg-voices { grid-template-columns: 1fr; } }
.dc-sg-check { list-style: none; padding: 0; margin: var(--dc-s-4) 0 0; }
.dc-sg-check li {
font-family: var(--dc-font-mono);
font-size: var(--dc-f-sm);
color: var(--dc-ink-mute);
padding: var(--dc-s-3) 0;
border-top: 1px dashed var(--dc-line);
line-height: 1.75;
}
/* ============================================================
16d. HERO-VIZ WIDGET OVERRIDE (added 2026-10-19)
Legacy `.hero-viz` was a dark glassmorphic card designed to sit
on top of a dark hero. 14 pages still use it (For You, DPDP
cluster, tools, compare). Phase 2-6 override turned the hero
into paper but left `.hero-viz` dark, resulting in a stray dark
block floating on a light hero.
Fix: cast `.hero-viz` as an intentional dark "schematic board"
— ink surface + faint grid lines — with the already-cream inner
cards (title/metric/ledger) reading as "paper notes pinned on
the board". Ledger rows re-styled as cream notes.
============================================================ */
.hero-viz {
background: var(--dc-ink) !important;
background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) !important;
background-size: 24px 24px !important;
border: 1px solid var(--dc-ink) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: var(--dc-s-6) !important;
color: var(--dc-paper) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
position: relative;
overflow: hidden;
}
.hero-viz::before { display: none !important; }
/* Ledger wrapper becomes a transparent stack so rows show on the dark board */
.hero-viz-ledger {
background: transparent !important;
border: none !important;
padding: 0 !important;
gap: var(--dc-s-2);
}
/* Each row = cream paper note on the dark board */
.hero-viz-ledger-row {
background: var(--dc-paper-cream) !important;
color: var(--dc-ink) !important;
border: 1px solid var(--dc-line-dark) !important;
border-left: 3px solid var(--dc-ink-mute) !important;
border-radius: 0 !important;
padding: var(--dc-s-3) var(--dc-s-4) !important;
font-size: var(--dc-f-sm);
opacity: 1 !important;
animation: none !important;
}
.hero-viz-ledger-row.ok { border-left-color: var(--dc-mint) !important; }
.hero-viz-ledger-row.warn { border-left-color: var(--dc-clay) !important; }
.hero-viz-ledger-row.fail { border-left-color: #991B1B !important; }
.hero-viz-ledger-row strong,
.hero-viz-ledger-row > div { color: var(--dc-ink) !important; }
.hero-viz-ledger-row > i { color: var(--dc-ink-mute) !important; }
/* Deep inline `color:#fff` / `color: white` inside ANY cream card child (ledger rows carry a
date pill + title + subtitle structure on For-You/legal pages, each with inline white). */
.hero-viz-ledger-row [style*="color:#fff"],
.hero-viz-ledger-row [style*="color: #fff"],
.hero-viz-ledger-row [style*="color:white"],
.hero-viz-ledger-row [style*="color: white"],
.hero-viz-metric[style*="color:#fff"],
.hero-viz-metric [style*="color:#fff"] { color: var(--dc-ink) !important; -webkit-text-fill-color: var(--dc-ink) !important; }
/* Lavender (`color:#C4B5FD`) and other light-tint accents used for month labels + eyebrows
inside cream rows → darker ink-mute so they read. */
.hero-viz-ledger-row [style*="#C4B5FD"],
.hero-viz-ledger-row [style*="#93C5FD"],
.hero-viz-ledger-row [style*="#6EE7B7"],
.hero-viz-ledger-row [style*="#FCD34D"],
.hero-viz-ledger-row [style*="#FCA5A5"],
.hero-viz-ledger-row [style*="#CBD5E1"],
.hero-viz-ledger-row [style*="#E2E8F0"],
.hero-viz-ledger-row [style*="#94A3B8"] { color: var(--dc-ink-mute) !important; }
/* Gradient-text trick (`background: linear-gradient(...); -webkit-text-fill-color: transparent`)
is used on several hero-viz metric numbers to colour-fill. On cream it clips to CREAM = invisible.
Kill the gradient fill and force a solid readable colour. */
.hero-viz-metric[style*="-webkit-text-fill-color"],
.hero-viz-metric[style*="background-clip"],
.hero-viz-metric[style*="text-fill-color"] {
background: var(--dc-paper-cream) !important;
-webkit-text-fill-color: var(--dc-brand) !important;
background-clip: initial !important;
-webkit-background-clip: initial !important;
color: var(--dc-brand) !important;
}
/* Row status badge: mono pill, ink text on tinted bg */
.hero-viz-ledger-row .row-badge {
background: var(--dc-ink) !important;
color: var(--dc-paper) !important;
border: none !important;
border-radius: 0 !important;
padding: 2px 8px !important;
font-family: var(--dc-font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 500;
}
.hero-viz-ledger-row.ok .row-badge { background: var(--dc-mint) !important; color: var(--dc-ink) !important; }
.hero-viz-ledger-row.warn .row-badge { background: var(--dc-clay) !important; color: var(--dc-paper) !important; }
.hero-viz-ledger-row.fail .row-badge { background: #991B1B !important; color: var(--dc-paper) !important; }
/* Metric number stays large on the cream card. Legacy base rule
`.hero-viz-metric` ALWAYS applies `-webkit-text-fill-color: transparent` +
gradient-clip to the base class (not just inline styles), so unless we unwind
both here, the number stays invisible even with `color: ... !important`.
`-webkit-text-fill-color: currentColor` lets whatever colour the author set
(inline amber for warn state, our brand-blue default, etc.) actually render. */
.hero-viz-metric {
font-family: var(--dc-font-mono);
color: var(--dc-brand);
letter-spacing: 0.02em;
background: var(--dc-paper-cream) !important;
background-image: none !important;
background-clip: initial !important;
-webkit-background-clip: initial !important;
-webkit-text-fill-color: currentColor !important;
}
/* The inline slate `#94A3B8` labels (Deadline Sec 8(6), days/hrs/min/sec) are
now floating directly on the dark ink board — brighten them to cream. */
.hero-viz [style*="#94A3B8"],
.hero-viz [style*="color:#94A3B8"],
.hero-viz [style*="color: #94A3B8"] { color: var(--dc-paper-cream) !important; opacity: 0.75; }
/* Live-dot pulse stays mint — reads on both cream title card and dark board */
.hero-viz-title .live-dot {
background: var(--dc-mint) !important;
box-shadow: 0 0 0 0 rgba(163, 201, 181, 0.7) !important;
}
/* Hero blueprint SVG — hand-drawn diagram pinned inside dc_schematic frame.
Used on role pages (For-You cluster). Each page gets a unique SVG; this
class just sizes the SVG to the schematic frame and lets internal strokes
use currentColor where helpful. Added 2026-10-19. */
.dc-hero-blueprint {
display: block;
width: 100%;
height: auto;
color: var(--dc-ink);
margin: 0 auto;
}
/* ============================================================
17. COMPONENT: dc-module-list (added 2026-10-19)
Two-line module cards used on role pages (For-You cluster)
and other "modules relevant to this persona" sections.
Each card: bold name + muted single-line description.
============================================================ */
.dc-module-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--dc-line-dark);
border: 1px solid var(--dc-line-dark);
}
.dc-module-list .dc-module-item {
background: var(--dc-paper);
padding: var(--dc-s-5);
text-decoration: none;
color: var(--dc-ink);
display: flex;
flex-direction: column;
gap: var(--dc-s-2);
transition: background var(--dc-t-fast);
position: relative;
}
.dc-module-list .dc-module-item:hover {
background: var(--dc-paper-cream);
}
.dc-module-list .dc-module-item-name {
font-weight: 500;
font-size: var(--dc-f-md);
color: var(--dc-ink);
}
.dc-module-list .dc-module-item-desc {
font-size: 13px;
color: var(--dc-ink-mute);
line-height: 1.55;
}
.dc-module-list .dc-module-item::after {
content: '→';
position: absolute;
top: var(--dc-s-5);
right: var(--dc-s-5);
font-family: var(--dc-font-mono);
color: var(--dc-ink-mute);
font-size: 14px;
}
.dc-module-list .dc-module-item:hover::after { color: var(--dc-brand); }
/* Optional tag row inside a module card (used on /industries hub) */
.dc-module-list .dc-module-item-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: var(--dc-s-2);
}
.dc-tag {
display: inline-block;
font-family: var(--dc-font-mono);
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 2px 8px;
border: 1px solid var(--dc-line-dark);
color: var(--dc-ink-mute);
background: var(--dc-paper);
line-height: 1.5;
}
@media (max-width: 960px) {
.dc-module-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.dc-module-list { grid-template-columns: 1fr; }
}
/* ============================================================
18. COMPONENT: compare pages (added 2026-10-19)
Used by compare/_vs-template.php which renders all 17
dcomply-vs-{slug} pages. Hero fact chips, side-by-side table,
verdict list, weakness callout, mint pain-no variant.
============================================================ */
/* Hero fact chips below the hand-note on compare pages */
.dc-cmp-facts {
display: flex;
flex-wrap: wrap;
gap: var(--dc-s-2);
margin-top: var(--dc-s-4);
}
.dc-cmp-fact {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 4px 10px;
border: 1px solid var(--dc-line-dark);
background: var(--dc-paper);
}
.dc-cmp-fact-k {
font-family: var(--dc-font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--dc-ink-mute);
}
.dc-cmp-fact-v {
font-size: 13px;
color: var(--dc-ink);
font-weight: 500;
}
/* Side-by-side comparison table */
.dc-cmp-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--dc-paper);
border: 1px solid var(--dc-line-dark);
font-size: 14px;
}
.dc-cmp-table thead th {
padding: var(--dc-s-3) var(--dc-s-4);
font-family: var(--dc-font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
text-align: left;
border-bottom: 1px solid var(--dc-line-dark);
background: var(--dc-paper-cream);
color: var(--dc-ink-mute);
}
.dc-cmp-table thead th:nth-child(2) {
background: var(--dc-ink);
color: var(--dc-paper);
}
.dc-cmp-table thead th:nth-child(3) {
background: var(--dc-paper-cream);
color: var(--dc-ink);
}
.dc-cmp-table td {
padding: var(--dc-s-3) var(--dc-s-4);
border-bottom: 1px solid var(--dc-line);
vertical-align: top;
line-height: 1.55;
}
.dc-cmp-table tr:last-child td { border-bottom: none; }
.dc-cmp-cap {
font-weight: 500;
color: var(--dc-ink);
background: var(--dc-paper-cream);
width: 28%;
}
.dc-cmp-cell { color: var(--dc-ink); }
.dc-cmp-cell--win { color: var(--dc-mint-deep); font-weight: 500; }
.dc-cmp-cell--mid { color: var(--dc-ink-mute); }
.dc-cmp-cell--lose { color: var(--dc-clay); }
/* Verdict list inside the dc-pain-card used on compare pages */
.dc-cmp-verdict-list {
padding-left: var(--dc-s-4);
margin: var(--dc-s-3) 0 0;
}
.dc-cmp-verdict-list li {
font-size: 14px;
line-height: 1.6;
color: var(--dc-ink);
margin-bottom: 6px;
}
.dc-cmp-verdict-note {
margin-top: var(--dc-s-3);
font-size: 13px;
color: var(--dc-ink-mute);
font-style: italic;
}
/* Pain-no mint variant (used for "US" vs "THEM" labels on compare verdict cards) */
.dc-pain-no--mint { color: var(--dc-mint-deep) !important; }
/* "What we deliberately do not do" callout */
.dc-cmp-weakness {
background: var(--dc-paper-cream);
border: 1px solid var(--dc-line-dark);
border-left: 3px solid var(--dc-clay);
padding: var(--dc-s-4) var(--dc-s-5);
margin-top: var(--dc-s-5);
}
.dc-cmp-weakness-label {
display: block;
font-family: var(--dc-font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--dc-clay);
margin-bottom: var(--dc-s-2);
}
.dc-cmp-weakness p {
font-size: 14px;
line-height: 1.65;
color: var(--dc-ink);
margin: 0;
}
@media (max-width: 720px) {
.dc-cmp-table { font-size: 12.5px; }
.dc-cmp-table thead th, .dc-cmp-table td { padding: var(--dc-s-3); }
.dc-cmp-cap { width: 32%; }
}
/* ============================================================
END — single source of truth. No inline styles anywhere.
============================================================ */