/* studio-mate-main.css — generated; edit the source modules in assets/css/, not this file. */
/* ===== base.css ===== */
/* =========================================================================
Studio Máté — base.css
Standardized design system. These tokens are the single source of truth for
component CSS (mirrors theme.json). Body 18px · two fonts · WCAG-AA contrast.
========================================================================= */
:root {
/* Color — sourced from theme.json (single source of truth); the literal
fallback equals the same value, so rendering is identical if a var is absent. */
--navy: var(--wp--preset--color--navy, #0A1628);
--navy-2: var(--wp--preset--color--navy-2, #15233A);
--navy-3: var(--wp--preset--color--navy-3, #1E293B);
--text: var(--wp--preset--color--text, #F8F7F4);
--text-secondary: var(--wp--preset--color--text-secondary, rgba(248, 247, 244, 0.85));
--text-muted: var(--wp--preset--color--text-muted, rgba(248, 247, 244, 0.70));
--gold: var(--wp--preset--color--gold, #C8A96B);
--line: var(--wp--preset--color--line, rgba(248, 247, 244, 0.14));
--line-gold: var(--wp--preset--color--line-gold, rgba(200, 169, 107, 0.30));
/* Type — families sourced from theme.json. Font SIZES stay literal on purpose:
theme.json fluid typography recomputes its own clamp(), so aliasing them would
change the responsive scale. base.css remains the source for the size scale. */
--font-body: var(--wp--preset--font-family--body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
--font-display: var(--wp--preset--font-family--display, 'Cormorant Garamond', Georgia, 'Times New Roman', serif);
--font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
--fs-fine: 14px;
--fs-small: 16px;
--fs-body: 18px;
--fs-lead: clamp(18px, 1.4vw, 21px);
--fs-title-md: 28px;
--fs-title-lg: clamp(28px, 3.2vw, 40px);
--fs-title-xl: clamp(40px, 5vw, 72px);
--fs-display: clamp(48px, 6vw, 88px);
/* Spacing (4/8 scale) — theme.json spacingSizes (single source). */
--s-4: var(--wp--preset--spacing--20, 4px);
--s-8: var(--wp--preset--spacing--30, 8px);
--s-12: var(--wp--preset--spacing--40, 12px);
--s-16: var(--wp--preset--spacing--50, 16px);
--s-24: var(--wp--preset--spacing--60, 24px);
--s-32: var(--wp--preset--spacing--70, 32px);
--s-48: var(--wp--preset--spacing--80, 48px);
--s-64: var(--wp--preset--spacing--90, 64px);
--s-80: var(--wp--preset--spacing--100, 80px);
--s-120: var(--wp--preset--spacing--110, 120px);
--s-160: var(--wp--preset--spacing--120, 160px);
/* Layout — theme.json custom (single source). */
--content-wide: var(--wp--custom--content-wide, 1320px);
--content-narrow: var(--wp--custom--content-narrow, 920px);
--measure: var(--wp--custom--measure, 65ch);
--section-padding: var(--wp--custom--section-padding, clamp(80px, 10vw, 120px));
--gutter: var(--wp--custom--gutter, clamp(24px, 5vw, 40px));
/* Shadows — theme.json custom.shadow (single source). */
--shadow-sm: var(--wp--custom--shadow--sm, 0 2px 4px rgba(0, 0, 0, 0.10));
--shadow-md: var(--wp--custom--shadow--md, 0 8px 24px rgba(0, 0, 0, 0.30));
--shadow-lg: var(--wp--custom--shadow--lg, 0 20px 60px rgba(0, 0, 0, 0.40));
--shadow-xl: var(--wp--custom--shadow--xl, 0 40px 80px rgba(0, 0, 0, 0.50));
--glow: var(--wp--custom--shadow--glow, 0 0 8px rgba(200, 169, 107, 0.60));
/* Chrome (no theme.json equivalent) */
--nav-height: 72px;
}
/* ----- Reset ----- */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
scroll-behavior: smooth;
background: var(--navy);
-webkit-text-size-adjust: 100%;
/* Reserve an equal scrollbar gutter on BOTH edges so centered containers
(.container margin:auto) stay truly centered in the window — otherwise the
right-side scrollbar nudges centered content ~15px to the left. */
scrollbar-gutter: stable both-edges;
}
body {
background: var(--navy);
color: var(--text);
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: 300;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'ss01';
overflow-x: hidden;
min-height: 100vh;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--gold); text-decoration: none; transition: color 0.25s; }
a:hover { color: var(--gold); text-decoration: underline; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select, button { font-family: inherit; }
::selection { background: var(--gold); color: var(--navy); }
/* Accessible focus — visible gold ring, never removed */
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 0;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 1000;
background: var(--gold);
color: var(--navy);
padding: var(--s-12) var(--s-24);
font-weight: 600;
}
.skip-link:focus { left: var(--s-16); top: var(--s-16); }
/* ----- Layout ----- */
.container {
width: 100%;
max-width: var(--content-wide);
margin: 0 auto;
padding-inline: var(--gutter);
}
.container.is-narrow { max-width: var(--content-narrow); }
.section { padding-block: var(--section-padding); position: relative; background: var(--navy); }
.section.alt { background: var(--navy-2); }
.measure { max-width: var(--measure); }
/* ----- Typography scale (decoupled from heading tags) ----- */
.display,
.title-xl,
.title-lg,
.title-md,
.title-sm {
font-family: var(--font-display);
font-weight: 300;
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--text);
}
.display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.025em; }
.title-xl { font-size: var(--fs-title-xl); line-height: 1.05; }
.title-lg { font-size: var(--fs-title-lg); }
.title-md { font-size: var(--fs-title-md); }
.title-sm { font-size: 22px; line-height: 1.2; }
/* gold italic emphasis inside display/titles */
.display em, .title-xl em, .title-lg em, .title-md em, .title-sm em,
h1 em, h2 em, h3 em, h4 em { font-style: italic; color: var(--gold); font-weight: 400; }
/* Default heading tags map onto the scale (used only for real hierarchy) */
h1 { font: 300 var(--fs-display)/1.02 var(--font-display); letter-spacing: -0.025em; color: var(--text); }
h2 { font: 300 var(--fs-title-xl)/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--text); }
h3 { font: 300 var(--fs-title-lg)/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--text); }
h4 { font: 300 var(--fs-title-md)/1.15 var(--font-display); letter-spacing: -0.015em; color: var(--text); }
.eyebrow {
font-family: var(--font-body); /* Inter — standardized eyebrow look across the site */
font-size: var(--fs-fine);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--gold);
display: inline-flex;
align-items: center;
gap: var(--s-12);
margin-bottom: 16px; /* standardized eyebrow→title gap — literal 16px (NOT --s-16, which is fluid ≈24px) */
}
.eyebrow::before { content: ''; width: 20px; height: 1px; background: currentColor; }
.eyebrow.is-plain::before { display: none; }
.eyebrow.subtle { color: var(--text-muted); }
.lead {
font-size: var(--fs-lead);
font-weight: 300;
line-height: 1.6;
color: var(--text-secondary);
max-width: 60ch;
}
.lead strong { color: var(--text); font-weight: 500; }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-small { font-size: var(--fs-small); }
.text-fine { font-size: var(--fs-fine); }
/* ----- Buttons (UI labels: 14px floor, uppercase, tracked) ----- */
.btn-row { display: flex; gap: var(--s-16); align-items: center; flex-wrap: wrap; }
.btn-primary,
.btn-ghost,
.btn-text-link {
font-family: var(--font-body);
font-size: var(--fs-fine);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: var(--s-12);
cursor: pointer;
border-radius: 0;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-primary {
background: var(--gold);
color: var(--navy);
padding: var(--s-16) var(--s-32);
border: 1px solid var(--gold);
}
.btn-primary:hover { background: transparent; color: var(--gold); }
.btn-ghost {
background: transparent;
color: var(--text);
padding: var(--s-16) var(--s-32);
border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-text-link {
color: var(--gold);
padding: var(--s-16) var(--s-12);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: none;
font-size: var(--fs-small);
}
.btn-text-link:hover { gap: var(--s-16); }
.btn-primary .arrow,
.btn-text-link .arrow { transition: transform 0.3s; }
.btn-primary:hover .arrow,
.btn-text-link:hover .arrow { transform: translateX(6px); }
/* ----- Utilities ----- */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
/* =========================================================================
Compat layer — maps the prototype's class names (used by injected long-form
page content) onto the standardized tokens, so injected pages render with the
same design system as component-built pages. Loaded everywhere.
========================================================================= */
.hero-title { font: 300 var(--fs-display)/1.02 var(--font-display); letter-spacing: -0.025em; color: var(--text); }
.hero-title em { font-style: italic; color: var(--gold); font-weight: 400; }
.lede { font-family: var(--font-body); font-size: var(--fs-lead); font-weight: 300; line-height: 1.6; color: var(--text-secondary); max-width: 60ch; }
.lede strong { color: var(--text); font-weight: 500; }
/* Shared CTA band (home, what-we-build, insights, pricing) */
.cta-section { padding: var(--section-padding) 0; text-align: center; background: var(--navy); }
.cta-inner { max-width: 760px; margin: 0 auto; padding-inline: var(--gutter); }
.cta-inner .eyebrow { justify-content: center; }
.cta-inner .title-xl,
.cta-inner h2 { margin-bottom: var(--s-32); }
.cta-inner .lead,
.cta-inner .lede { margin-left: auto; margin-right: auto; margin-bottom: var(--s-48); }
.cta-inner .btn-row { justify-content: center; }
[data-nav]:not(a) { cursor: pointer; }
/* Page entrance (replaces SPA fade-in) */
@keyframes sm-fade-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.site-main { animation: sm-fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* ===== components/header.css ===== */
/* =========================================================================
Header / primary nav / mega-dropdown / mobile menu
Ported from the prototype, normalized to the design tokens:
- labels in Inter (no mono), uppercase + tracked
- no text below 14px; nav links 16px
- low-contrast --white-faint/-soft -> --text-muted / --text-secondary
========================================================================= */
/* Clear the fixed nav */
body { padding-top: var(--nav-height); }
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(10, 22, 40, 0.92);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--line);
}
.nav-inner {
max-width: var(--content-wide);
margin: 0 auto;
padding: 18px var(--gutter);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--s-24);
}
/* Brand */
.brand {
display: inline-flex;
align-items: center;
gap: var(--s-12);
color: var(--text);
}
.brand:hover { color: var(--text); }
.brand-mark {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-name {
font-family: var(--font-display);
font-size: 22px;
font-weight: 400;
font-style: italic;
letter-spacing: 0.005em;
}
/* Links */
.nav-links {
display: flex;
gap: var(--s-4);
align-items: center;
}
.nav-link,
.nav-dropdown-trigger {
font-family: var(--font-body);
font-size: var(--fs-small);
font-weight: 400;
letter-spacing: 0.01em;
color: var(--text-secondary);
padding: 10px 16px;
transition: color 0.25s;
white-space: nowrap;
}
.nav-link:hover,
.nav-dropdown-trigger:hover { color: var(--text); }
.nav-link.active,
.nav-link[aria-current="page"] { color: var(--gold); }
.nav-link.cta {
color: var(--gold);
border: 1px solid var(--gold);
padding: 10px 22px;
margin-left: var(--s-12);
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: var(--fs-fine);
}
.nav-link.cta:hover { background: var(--gold); color: var(--navy); }
/* Mobile toggle */
.menu-toggle {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
color: var(--text);
}
.menu-toggle-bars,
.menu-toggle-bars::before,
.menu-toggle-bars::after {
content: '';
display: block;
width: 22px;
height: 2px;
background: currentColor;
transition: transform 0.25s ease, opacity 0.2s ease;
}
.menu-toggle-bars { position: relative; }
.menu-toggle-bars::before { position: absolute; top: -7px; left: 0; }
.menu-toggle-bars::after { position: absolute; top: 7px; left: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars::after { top: 0; transform: rotate(-45deg); }
/* ----- Mega dropdown ----- */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.nav-dropdown[data-open="true"] .nav-dropdown-trigger { color: var(--gold); }
.nav-dropdown-trigger .caret {
font-size: 10px;
transition: transform 0.25s ease;
margin-top: 2px;
}
.nav-dropdown[data-open="true"] .nav-dropdown-trigger .caret { transform: rotate(180deg); }
.nav-dropdown-panel {
position: absolute;
top: calc(100% + 18px);
left: 0;
transform: translateY(-4px);
min-width: 360px;
max-width: calc(100vw - var(--gutter) * 2);
background: var(--navy);
border: 1px solid var(--line);
padding: 28px 32px 24px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
z-index: 100;
box-shadow: var(--shadow-lg);
}
.nav-dropdown-panel::before {
content: '';
position: absolute;
top: -1px;
left: 32px;
right: 32px;
height: 1px;
background: var(--gold);
opacity: 0.6;
}
.nav-dropdown[data-open="true"] .nav-dropdown-panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-dropdown-featured {
display: block;
padding: 4px 0 18px;
margin-bottom: 18px;
border-bottom: 1px solid var(--line);
transition: opacity 0.2s ease;
}
.nav-dropdown-featured:hover { opacity: 0.8; }
.nav-dropdown-featured .feat-eyebrow {
display: block;
font-family: var(--font-body);
font-size: var(--fs-fine);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 10px;
}
.nav-dropdown-featured .feat-title {
display: block;
font-family: var(--font-display);
font-weight: 300;
font-size: 28px;
line-height: 1;
letter-spacing: -0.02em;
color: var(--text);
}
.nav-dropdown-featured .feat-title em { font-style: italic; color: var(--gold); }
.nav-dropdown-featured .feat-sub {
display: block;
margin-top: 6px;
font-size: var(--fs-small);
color: var(--text-muted);
}
.nav-dropdown-section-label {
font-family: var(--font-body);
font-size: var(--fs-fine);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 14px;
}
.nav-dropdown-item {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 18px;
padding: 10px 0;
font-family: var(--font-body);
font-size: var(--fs-small);
font-weight: 400;
color: var(--text);
transition: color 0.2s ease;
white-space: nowrap;
}
.nav-dropdown-item:hover { color: var(--gold); }
.nav-dropdown-item .item-sub {
font-size: var(--fs-fine);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
margin-left: auto;
white-space: nowrap;
flex-shrink: 0;
}
/* Sofia LIVE badge */
.dropdown-live-badge,
.footer-live-badge {
display: inline-block;
background: rgba(16, 185, 129, 0.15);
color: #34d399;
font-family: var(--font-body);
font-size: var(--fs-fine);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 2px 7px;
border: 1px solid rgba(16, 185, 129, 0.45);
margin-left: 8px;
vertical-align: middle;
line-height: 1.4;
}
.nav-dropdown-sofia:hover .dropdown-live-badge {
background: rgba(16, 185, 129, 0.25);
border-color: rgba(16, 185, 129, 0.6);
}
/* =========================================================================
v175 simplified dropdowns — name-only items with icons. Item subs stay in
the markup (data/SEO, as in the prototype) but are hidden; the Industries
panel is a 21-item, 3-per-row flex grid pinned to the viewport on desktop.
========================================================================= */
.nav-dropdown-item {
justify-content: flex-start;
align-items: center;
gap: 10px;
}
.nav-dropdown-item .item-sub { display: none; }
.nav-dd-ico {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-width: 0;
color: var(--gold);
opacity: 0.9;
}
.nav-dd-ico svg { width: 17px; height: 17px; display: block; }
/* Industries panel: wide, names wrap, section labels on their own row */
.nav-dropdown-panel.nav-dropdown-panel-industries {
min-width: 620px;
max-width: 720px;
}
.nav-dropdown-panel-industries .industries-columns {
display: flex;
flex-wrap: wrap;
gap: 2px 24px;
}
.nav-dropdown-panel-industries .nav-dropdown-item {
display: flex;
padding: 5px 0;
font-size: var(--fs-fine); /* house floor — prototype's 13px bumped to 14px */
flex: 0 0 calc(33.333% - 16px);
box-sizing: border-box;
white-space: normal;
align-items: flex-start;
}
.nav-dropdown-panel-industries .nav-dd-ico { margin-top: 2px; }
.nav-dropdown-panel-industries .nav-dd-ico svg { width: 15px; height: 15px; }
.nav-dropdown-panel-industries .nav-dropdown-section-label {
flex: 0 0 100%;
width: 100%;
margin-top: 12px;
margin-bottom: 2px;
}
.nav-dropdown-panel-industries .nav-dropdown-section-label:first-of-type { margin-top: 4px; }
.nav-dropdown-panel-industries .nav-dropdown-featured {
margin-bottom: 8px;
padding-bottom: 10px;
}
/* Desktop overflow guard (prototype v125 fix): the 21-item panel is pinned to
the viewport, centered and height-capped with internal scroll; standard
panels are width-clamped so the name-only list stays narrow. */
@media (min-width: 961px) {
.nav-dropdown-panel {
max-width: min(360px, calc(100vw - 48px));
max-height: min(72vh, 520px);
overflow-x: hidden;
overflow-y: auto;
}
.nav-dropdown-panel.nav-dropdown-panel-industries {
position: fixed;
top: var(--nav-height);
left: 50%;
right: auto;
transform: translateX(-50%) translateY(-4px);
min-width: 0;
width: min(720px, calc(100vw - 48px));
max-width: calc(100vw - 48px);
max-height: min(78vh, 540px);
overflow-x: hidden;
overflow-y: auto;
padding: 16px 24px 14px;
}
.nav-dropdown[data-open="true"] .nav-dropdown-panel.nav-dropdown-panel-industries {
transform: translateX(-50%) translateY(0);
}
}
@media (max-width: 1180px) and (min-width: 961px) {
.nav-dropdown-panel.nav-dropdown-panel-industries { width: min(560px, calc(100vw - 48px)); }
.nav-dropdown-panel-industries .nav-dropdown-item { flex-basis: calc(50% - 12px); }
}
/* ----- Mobile ----- */
@media (max-width: 960px) {
.nav-dropdown-panel.nav-dropdown-panel-industries { min-width: 0; max-width: none; }
.nav-dropdown-panel-industries .nav-dropdown-item { flex-basis: 100%; }
.nav-dropdown[data-open="true"] .nav-dropdown-panel.nav-dropdown-panel-industries { max-height: 1400px; }
}
@media (max-width: 960px) {
.menu-toggle { display: inline-flex; }
.nav-inner { padding: 14px var(--gutter); }
.nav-links {
position: fixed;
top: var(--nav-height);
left: 0;
right: 0;
background: var(--navy-2);
flex-direction: column;
align-items: stretch;
padding: var(--s-16);
gap: var(--s-4);
border-bottom: 1px solid var(--line);
transform: translateY(-120%);
transition: transform 0.3s ease;
max-height: calc(100vh - var(--nav-height));
overflow-y: auto;
}
.nav-links.open { transform: translateY(0); }
.nav-link,
.nav-dropdown-trigger { width: 100%; padding: 16px 0; }
.nav-link.cta { margin-left: 0; text-align: center; }
.nav-dropdown { display: block; width: 100%; }
.nav-dropdown-panel {
position: static;
transform: none;
min-width: 0;
width: 100%;
box-shadow: none;
border: none;
padding: 0;
max-height: 0;
overflow: hidden;
opacity: 1;
visibility: visible;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.nav-dropdown-panel::before { display: none; }
.nav-dropdown[data-open="true"] .nav-dropdown-panel {
transform: none;
max-height: 800px;
padding: 16px 0 8px;
margin-top: 6px;
}
}
/* ===== components/footer.css ===== */
/* =========================================================================
Site footer — ported from prototype, normalized to tokens.
========================================================================= */
.site-footer {
background: var(--navy);
border-top: 1px solid var(--line);
padding-block: var(--s-80) var(--s-48);
}
.footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: var(--s-48);
margin-bottom: var(--s-80);
}
.footer-brand-lockup img { max-width: 180px; height: auto; }
.footer-brand-lockup .title-sm {
font-style: italic;
display: inline-block;
}
.footer-tag {
font-size: var(--fs-small);
line-height: 1.7;
max-width: 38ch;
margin-top: var(--s-24);
}
.footer-col { display: flex; flex-direction: column; }
.footer-col-title {
font-family: var(--font-body);
font-size: var(--fs-fine);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--gold);
margin-bottom: var(--s-24);
}
.footer-col a,
.footer-col > span {
display: block;
font-family: var(--font-body);
font-size: var(--fs-small);
font-weight: 400;
line-height: 1.5;
color: var(--text-secondary);
padding: var(--s-8) 0;
}
.footer-col a:hover { color: var(--gold); }
.footer-link-sofia {
display: inline-flex !important;
align-items: center;
gap: var(--s-8);
}
.footer-bottom {
border-top: 1px solid var(--line);
padding-top: var(--s-32);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--s-16);
font-family: var(--font-body);
font-size: var(--fs-fine);
color: var(--text-muted);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.footer-legal-links {
display: inline-flex;
align-items: center;
gap: var(--s-12);
}
.footer-legal-links a { color: var(--text-muted); }
.footer-legal-links a:hover { color: var(--gold); }
.footer-legal-links .footer-sep { color: var(--line); }
@media (max-width: 960px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-48); }
.footer-brand-block { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.footer-grid { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* ===== components/blocks.css ===== */
/* =========================================================================
Native Gutenberg core-block styling (gutenberg-approach branch).
theme.json drives colours/typography/spacing; this adds brand styling for
buttons + a few section helpers so core blocks render on-brand on the front
end AND in the editor.
========================================================================= */
/* Buttons — match the brand .btn-primary / .btn-ghost */
.wp-block-button__link {
border-radius: 0;
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 16px 32px;
background: var(--wp--preset--color--gold, #C8A96B);
color: var(--wp--preset--color--navy, #0A1628);
border: 1px solid var(--wp--preset--color--gold, #C8A96B);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.wp-block-button__link:hover { background: transparent; color: var(--wp--preset--color--gold, #C8A96B); }
.wp-block-button.is-style-outline .wp-block-button__link {
background: transparent;
color: var(--wp--preset--color--text, #F8F7F4);
border-color: var(--wp--preset--color--line, rgba(248,247,244,0.14));
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--gold, #C8A96B); color: var(--wp--preset--color--gold, #C8A96B); }
/* Gold italic emphasis inside headings (brand pattern) */
.wp-block-heading em { font-style: italic; color: var(--wp--preset--color--gold, #C8A96B); }
/* Eyebrow: a paragraph given the "eyebrow" style/class */
.is-style-eyebrow, p.eyebrow {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 14px !important;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--wp--preset--color--gold, #C8A96B) !important;
}
/* Section group helper — vertical rhythm + alt background */
.wp-block-group.is-style-section { padding-block: clamp(64px, 9vw, 110px); }
.wp-block-group.has-navy-2-background-color { background: var(--wp--preset--color--navy-2, #15233A); }
/* Stat number style (a heading given the "stat" style) */
.is-style-stat { font-family: var(--font-display, 'Cormorant Garamond', serif); color: var(--wp--preset--color--gold, #C8A96B) !important; font-size: 64px !important; line-height: 1 !important; }
/* Keep editor canvas readable on the dark theme */
.editor-styles-wrapper { background: var(--wp--preset--color--navy, #0A1628); }
/* Editor only: keep empty add/remove list items clickable + show the remove control. */
.sm-list-item { min-width: 40px; }
.sm-list-item:empty::after { content: ""; display: inline-block; min-width: 80px; }
/* Engine integration-row: separators between items. */
.integration-list .int-item:not(:last-child)::after { content: "·"; padding: 0 .6em; color: var(--wp--preset--color--gold, #C8A96B); opacity: .6; }
/* Pricing: auto 4-column when a 4th tier exists (AI Agents role tiers). */
.pricing-grid:has(.tier:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* ===== components/home.css ===== */
/* =========================================================================
Home (front page) sections — ported from prototype, normalized to tokens.
Standardization applied: labels in Inter (no mono), no sub-14px text,
--white-soft/-faint -> --text-secondary/-muted, one section-padding scale.
========================================================================= */
/* Shared small helpers used by home sections */
.section-head { text-align: center; max-width: var(--content-narrow); margin: 0 auto var(--s-64); }
.section-head .eyebrow { justify-content: center; }
.section-head .title-xl { margin-top: 24px; }
.section-head .lead { margin-left: auto; margin-right: auto; }
.eyebrow-line {
font-family: var(--font-body);
font-size: var(--fs-fine);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--gold);
display: inline-flex;
align-items: center;
gap: var(--s-12);
}
.eyebrow-line::before,
.eyebrow-line::after { content: ''; width: 32px; height: 1px; background: currentColor; }
/* ----- HERO ----- */
.hero { padding: 64px 0 clamp(56px, 8vw, 100px); display: flex; align-items: center; }
.hero-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: clamp(48px, 7vw, 100px);
align-items: center;
width: 100%;
}
.hero-brand-lockup { margin-bottom: var(--s-32); }
.hero-brand-lockup img { max-width: 220px; }
.hero-text .eyebrow { margin-bottom: 16px; }
.hero-text .display { margin-bottom: var(--s-32); }
.hero-text .lead { margin-bottom: var(--s-48); }
/* ----- SOFIA STAGE ----- */
.sofia-stage { position: relative; width: 100%; aspect-ratio: 4/5; max-width: 540px; margin-left: auto; }
.sofia-frame {
position: relative; width: 100%; height: 100%;
overflow: hidden; background: var(--navy-2);
border: 1px solid var(--line);
box-shadow: var(--shadow-xl);
}
.sofia-frame > img {
width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
filter: brightness(0.95) contrast(1.04);
transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.sofia-stage:hover .sofia-frame > img { transform: scale(1.02); }
.sofia-frame.is-placeholder {
display: flex; align-items: center; justify-content: center;
background: linear-gradient(160deg, var(--navy-3), var(--navy-2));
}
.sofia-frame.is-placeholder .placeholder-mark {
font-family: var(--font-display); font-style: italic; font-size: 64px; color: var(--line-gold);
}
.sofia-frame::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(10, 22, 40, 0.7) 100%);
pointer-events: none;
}
.corner { position: absolute; width: 20px; height: 20px; border-color: var(--gold); z-index: 4; }
.corner.tl { top: 16px; left: 16px; border-top: 1px solid; border-left: 1px solid; }
.corner.tr { top: 16px; right: 16px; border-top: 1px solid; border-right: 1px solid; }
.corner.bl { bottom: 16px; left: 16px; border-bottom: 1px solid; border-left: 1px solid; }
.corner.br { bottom: 16px; right: 16px; border-bottom: 1px solid; border-right: 1px solid; }
.sofia-hud {
position: absolute; left: 28px; right: 28px; bottom: 28px; z-index: 3;
display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-16);
}
.sofia-id .label {
font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500;
text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold); margin-bottom: var(--s-8);
}
.sofia-id .name { font-family: var(--font-display); font-size: 28px; font-style: italic; color: var(--text); line-height: 1; }
.sofia-id .role { font-size: var(--fs-fine); color: var(--text-secondary); margin-top: 6px; }
.sofia-status {
display: inline-flex; align-items: center; gap: var(--s-8); padding: 6px 12px;
background: rgba(10, 22, 40, 0.85); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
border: 1px solid var(--line-gold);
font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500;
text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold);
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: var(--glow); animation: sm-pulse 2.5s ease-in-out infinite; }
@keyframes sm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.sofia-caption {
margin-top: var(--s-24); display: flex; justify-content: space-between; align-items: baseline;
font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500;
text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-muted);
}
.sofia-caption .right { color: var(--gold); }
.sofia-share-row { margin-top: var(--s-16); display: flex; align-items: center; gap: var(--s-12); }
.share-trigger {
display: inline-flex; align-items: center; gap: var(--s-8);
font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500;
text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-secondary);
padding: 8px 14px; border: 1px solid var(--line); transition: all 0.25s;
}
.share-trigger:hover { color: var(--gold); border-color: var(--line-gold); }
.share-trigger svg { width: 16px; height: 16px; }
/* ----- LANGUAGE STRIP ----- */
.lang-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s-80) 0; text-align: center; }
.lang-strip-inner { max-width: var(--content-narrow); margin: 0 auto; padding-inline: var(--gutter); display: flex; flex-direction: column; align-items: center; gap: var(--s-16); }
.lang-strip .display, .lang-strip h2 { margin: 4px 0 12px; }
.lang-examples { display: inline-flex; align-items: center; gap: var(--s-12); flex-wrap: wrap; justify-content: center; }
.lang-examples .ex-label { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.lang-examples .langs { font-style: italic; color: var(--text); font-family: var(--font-display); font-size: 20px; }
.lang-examples .langs em { font-style: italic; }
.lang-examples .sep { color: var(--gold); }
.always-on { margin-top: var(--s-12); font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
/* ----- WHY ----- */
.why-section { padding: var(--section-padding) 0; background: var(--navy-2); }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 100px); align-items: start; }
.why-left .eyebrow { margin-bottom: 16px; }
.why-left .title-xl { margin-bottom: var(--s-32); }
.why-left .lead strong { color: var(--gold); }
.why-emphasis { margin-top: var(--s-24); color: var(--gold); font-style: italic; font-family: var(--font-display); font-size: 28px; }
.why-list li {
font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.5; color: var(--text-secondary);
padding: 20px 0 20px 36px; border-bottom: 1px solid var(--line); position: relative;
}
.why-list li:last-child { border-bottom: none; }
.why-list li::before { content: ''; position: absolute; left: 0; top: 30px; width: 18px; height: 1px; background: var(--gold); }
.why-list li strong { color: var(--text); font-weight: 500; }
/* ----- STATS BAND ----- */
.stats-band { padding: var(--section-padding) 0; background: var(--navy-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.stat-cell { padding: var(--s-48) var(--s-32); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-cell .n { font-family: var(--font-display); font-size: 64px; font-weight: 300; letter-spacing: -0.035em; line-height: 1; margin-bottom: var(--s-16); color: var(--gold); }
.stat-cell .n .pct { font-size: 38px; vertical-align: super; line-height: 1; }
.stat-cell .label { font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.6; color: var(--text-secondary); margin-bottom: var(--s-12); }
.stat-cell .label strong { color: var(--text); font-weight: 500; }
.stat-cell .source { font-family: var(--font-body); font-size: var(--fs-fine); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); }
/* ----- INDUSTRIES ----- */
.industries-section { padding: var(--section-padding) 0; }
.industries-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.industry { padding: var(--s-32); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s-12); transition: background 0.4s; }
.industry:hover { background: var(--navy-2); }
.industry .num { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; color: var(--gold); letter-spacing: 0.16em; text-transform: uppercase; }
.industry .name { font-family: var(--font-display); font-size: 26px; font-weight: 400; letter-spacing: -0.01em; color: var(--text); line-height: 1.15; }
.industry .name em { font-style: italic; color: var(--gold); }
/* ----- BEYOND ----- */
.beyond-section { padding: var(--section-padding) 0; }
.beyond-inner { max-width: var(--content-narrow); margin: 0 auto; padding-inline: var(--gutter); text-align: center; }
.beyond-inner .eyebrow { justify-content: center; }
/* No bottom margin on the title — the divider's own symmetric margins set the
spacing, so the gold line sits with equal space above and below it. */
.beyond-inner .title-xl { margin-bottom: 0; }
/* Body copy only — :not(.eyebrow) so the descendant rule does not override the
standardized .eyebrow (Inter 500), which is also a
. */
.beyond-inner p:not(.eyebrow) { font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 2vw, 30px); line-height: 1.5; color: var(--text); margin-bottom: var(--s-24); }
.beyond-inner p:not(.eyebrow) em { font-style: italic; color: var(--gold); }
.beyond-inner p:not(.eyebrow) strong { font-weight: 500; color: var(--text); }
.beyond-divider { width: 60px; height: 1px; background: var(--gold); margin: var(--s-24) auto; }
/* ----- CAPABILITIES ----- */
/* v175: left title / right lede head, then a flush hairline card grid — three
service cards (01–03) over a full-width Sprint card. The .cap-grid draws only
its top+left borders; each .cap draws its own right+bottom, so the cards share
single 1px dividers (no gaps, no rounded corners, no shadow). */
.capabilities { padding: var(--section-padding) 0; background: var(--navy-2); }
.cap-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(40px, 6vw, 80px); margin-bottom: var(--s-80); align-items: end; }
.cap-head .title-xl { margin-top: var(--s-32); }
.cap-head .lead { max-width: none; }
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cap { padding: var(--s-48) var(--s-32); display: flex; flex-direction: column; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background 0.4s; min-height: 280px; color: inherit; }
.cap:hover { background: rgba(248, 247, 244, 0.02); }
.cap-num { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; color: var(--gold); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 16px; }
.cap .title-md, .cap h3 { font-size: 24px; margin-bottom: var(--s-12); }
.cap p { font-size: var(--fs-small); line-height: 1.7; color: var(--text-secondary); margin-bottom: var(--s-24); }
.cap-link { margin-top: auto; font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); display: inline-flex; align-items: center; gap: var(--s-8); transition: gap 0.25s; }
.cap:hover .cap-link { gap: var(--s-16); }
/* Full-width Sprint card — gold-tinted, spans the whole bottom row. */
.cap-sprint {
grid-column: 1 / -1;
min-height: auto;
padding: var(--s-32) var(--s-32);
border-top: 1px solid var(--line-gold);
background: linear-gradient(135deg, rgba(200, 169, 107, 0.05) 0%, rgba(200, 169, 107, 0.01) 100%);
}
.cap-sprint .cap-num { color: var(--gold); margin-bottom: var(--s-12); }
.cap-sprint .title-md, .cap-sprint h3 { font-size: 26px; }
/* ----- SELLS ----- */
.sells-section { padding: var(--section-padding) 0; background: var(--navy-2); }
.sells-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 100px); align-items: center; }
.sells-left .title-xl { margin-bottom: var(--s-32); }
.sells-left p:not(.eyebrow) { font-size: var(--fs-body); line-height: 1.7; color: var(--text-secondary); margin-bottom: var(--s-24); }
.sells-list { margin: var(--s-32) 0; }
.sells-list li { font-family: var(--font-display); font-size: 28px; font-weight: 300; font-style: italic; color: var(--text); padding: var(--s-16) 0; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 20px; }
.sells-list li::before { content: '×'; color: var(--gold); font-style: normal; font-weight: 300; font-size: 32px; }
.sells-list li:last-child { border-bottom: none; }
.sells-list li:last-child::before { content: '✓'; }
.sells-list li.confirm { color: var(--gold); }
/* ----- PROOF ----- */
.proof-section { padding: var(--section-padding) 0; }
.proof-frame { background: var(--navy-2); border: 1px solid var(--line-gold); padding: clamp(40px, 6vw, 96px) clamp(28px, 5vw, 80px); position: relative; overflow: hidden; }
.proof-frame::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.proof-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); margin-bottom: var(--s-80); align-items: end; }
.proof-head .title-xl { margin-top: var(--s-32); }
.proof-quote { font-family: var(--font-display); font-weight: 300; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.4; letter-spacing: -0.015em; color: var(--text); margin-bottom: var(--s-32); position: relative; padding-left: var(--s-32); }
.proof-quote::before { content: '“'; position: absolute; left: -8px; top: -20px; font-family: var(--font-display); font-size: 80px; color: var(--gold); line-height: 1; }
.proof-attr { display: flex; align-items: center; gap: 18px; padding-left: var(--s-32); }
.proof-avatar { width: 48px; height: 48px; border: 1px solid var(--line-gold); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--gold); }
.proof-attr-text .name { font-size: var(--fs-small); font-weight: 500; color: var(--text); }
.proof-attr-text .role { font-size: var(--fs-fine); color: var(--text-muted); margin-top: 2px; }
.proof-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.proof-stat { padding: var(--s-32); border-right: 1px solid var(--line); }
.proof-stat:last-child { border-right: none; }
.proof-stat .n { font-family: var(--font-display); font-size: 52px; font-weight: 300; letter-spacing: -0.03em; line-height: 1; margin-bottom: var(--s-12); color: var(--gold); }
.proof-stat .n .n-suffix { font-size: 18px; font-style: italic; letter-spacing: 0; }
.proof-stat .l { font-family: var(--font-body); font-size: var(--fs-fine); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); }
/* CTA band styles now live in base.css (shared across pages). */
/* ----- Why Studio Máté band ----- */
/* v175: centered, max-width 880px. The lead-in is its own block (bigger, gold
italic); the body sits under it. */
.why-mate-band { padding: 96px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.why-mate-inner { max-width: 880px; margin: 0 auto; padding: 0 var(--s-32); text-align: center; }
.why-mate-inner .eyebrow { justify-content: center; margin-bottom: 16px; }
.why-mate-inner p {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(25px, 2.7vw, 36px);
line-height: 1.34;
letter-spacing: -0.01em;
color: var(--text-secondary);
margin: 0;
}
.why-mate-inner p strong { color: var(--text); font-weight: 500; }
.why-mate-inner p em { font-style: italic; color: var(--gold); font-weight: 400; }
.why-mate-lead-in {
display: block;
font-family: var(--font-display);
font-style: italic;
color: var(--gold);
font-size: clamp(27px, 3vw, 40px);
line-height: 1.2;
margin-bottom: 22px;
letter-spacing: -0.01em;
}
/* ----- Tsunami quote band ----- */
.tsunami-band {
padding: 104px 0;
background: var(--navy-2);
position: relative;
overflow: hidden;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.tsunami-band::before {
content: '';
position: absolute;
bottom: -50%;
right: -12%;
width: 55%;
height: 150%;
background: radial-gradient(circle, rgba(200, 169, 107, 0.055) 0%, transparent 60%);
pointer-events: none;
}
.tsunami-inner { position: relative; max-width: 940px; margin: 0 auto; padding: 0 var(--s-32); }
.tsunami-quote {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(40px, 5vw, 72px);
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--text);
margin: 0 0 14px;
}
.tsunami-quote em { font-style: italic; color: var(--gold); font-weight: 400; }
.tsunami-quote .tsunami-mark { color: rgba(200, 169, 107, 0.55); font-weight: 300; }
.tsunami-attrib {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 44px;
}
.tsunami-arg { max-width: 760px; border-top: 1px solid var(--line-gold); padding-top: 40px; }
.tsunami-arg p {
font-family: var(--font-body);
font-weight: 300;
font-size: clamp(16px, 1.3vw, 19px);
line-height: 1.7;
color: var(--text-secondary);
margin: 0 0 18px;
}
.tsunami-arg p:last-child { margin-bottom: 0; }
.tsunami-arg p strong { color: var(--text); font-weight: 500; }
.tsunami-arg .tsunami-kicker {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(22px, 2.2vw, 30px);
color: var(--gold);
line-height: 1.25;
margin-top: 6px;
}
@media (max-width: 768px) {
.tsunami-band { padding: 72px 0; }
.why-mate-band { padding: 64px 0; }
}
/* ----- Growth-projection band (links to the revenue-leak calculator) ----- */
.growth-band {
padding: 88px 0;
background: linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 100%);
border-top: 1px solid var(--line-gold);
border-bottom: 1px solid var(--line-gold);
}
.growth-band-inner {
max-width: 980px;
margin: 0 auto;
padding: 0 var(--gutter);
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 48px;
align-items: center;
}
.growth-band-left h2 {
font-family: var(--font-display);
font-size: clamp(34px, 3.6vw, 44px);
line-height: 1.08;
color: var(--text);
font-weight: 300;
letter-spacing: -0.015em;
}
.growth-band-left h2 em { font-style: italic; color: var(--gold); font-weight: 400; }
/* :not(.eyebrow) so the descendant
rule doesn't override the standard .eyebrow. */
.growth-band-left p:not(.eyebrow) {
font-size: var(--fs-small);
line-height: 1.7;
color: var(--text-secondary);
margin-top: 18px;
}
.growth-band-right {
text-align: center;
padding: 36px 28px;
background: var(--navy);
border: 1px solid var(--line-gold);
}
.growth-band-stat {
font-family: var(--font-display);
font-style: italic;
font-size: 30px;
color: var(--gold);
line-height: 1.2;
}
.growth-band-stat-sub {
font-family: var(--font-body);
font-size: var(--fs-fine);
color: var(--text-muted);
margin-top: 10px;
margin-bottom: var(--s-24);
}
.growth-band-btn {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--navy);
background: var(--gold);
border: 1px solid var(--gold);
padding: 16px 28px;
display: block;
width: 100%;
text-align: center;
white-space: nowrap;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.growth-band-btn span { display: inline; }
.growth-band-btn:hover { background: transparent; color: var(--gold); }
.growth-band-note {
font-family: var(--font-body);
font-size: var(--fs-fine);
color: var(--text-muted);
margin-top: 14px;
}
@media (max-width: 768px) {
.growth-band { padding: 64px 0; }
.growth-band-inner { grid-template-columns: 1fr; gap: var(--s-32); }
}
/* ----- Sofia demo (two-column frame + flush capability grid) ----- */
.sofia-demo-section {
padding: var(--section-padding) 0;
background: var(--navy-2);
border-top: 1px solid var(--line-gold);
border-bottom: 1px solid var(--line-gold);
}
.sofia-demo-frame {
background: linear-gradient(135deg, rgba(200, 169, 107, 0.04) 0%, transparent 100%);
border: 1px solid var(--line-gold);
padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px);
position: relative;
}
.sofia-demo-frame::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border-top: 1px solid var(--gold);
border-left: 1px solid var(--gold);
}
.sofia-demo-head {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(40px, 5vw, 64px);
align-items: start;
}
.sofia-demo-left .eyebrow { margin-bottom: 16px; }
.sofia-demo-left .title-xl { font-size: clamp(32px, 3.6vw, 48px); margin-bottom: var(--s-24); }
.sofia-demo-body {
font-size: var(--fs-small);
color: var(--text-secondary);
line-height: 1.65;
margin: 0 0 18px;
}
.sofia-demo-body-emphasis {
font-family: var(--font-display);
font-style: italic;
font-size: var(--fs-body);
color: var(--text);
border-left: 2px solid var(--gold);
padding-left: 18px;
margin-top: var(--s-24);
margin-bottom: var(--s-32);
}
.sofia-demo-actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: var(--s-32); }
.sofia-demo-capability-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
.sd-cap {
background: var(--navy);
padding: var(--s-24) var(--s-24);
min-height: 130px;
display: flex;
flex-direction: column;
}
.sd-cap.is-featured {
background: linear-gradient(135deg, rgba(200, 169, 107, 0.07) 0%, rgba(200, 169, 107, 0.02) 100%);
}
.sd-cap-num {
font-family: var(--font-body);
font-size: var(--fs-fine);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: var(--s-12);
}
.sd-cap-name {
font-family: var(--font-display);
font-size: 22px;
font-weight: 400;
color: var(--text);
line-height: 1.2;
margin-bottom: var(--s-8);
}
.sd-cap-desc { font-size: var(--fs-fine); color: var(--text-secondary); line-height: 1.5; margin-top: auto; }
@media (max-width: 960px) {
.sofia-demo-head { grid-template-columns: 1fr; gap: var(--s-48); }
}
@media (max-width: 560px) {
.sofia-demo-capability-grid { grid-template-columns: 1fr; }
}
/* ----- Responsive ----- */
@media (max-width: 960px) {
.hero-grid, .why-grid, .sells-grid, .cap-head, .proof-head { grid-template-columns: 1fr; gap: var(--s-48); }
.industries-grid, .cap-grid { grid-template-columns: 1fr 1fr; }
.stats-grid, .proof-stats { grid-template-columns: 1fr 1fr; }
.sofia-stage { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 600px) {
.industries-grid, .cap-grid, .stats-grid, .proof-stats { grid-template-columns: 1fr; }
}
/* ===== components/services.css ===== */
/* =========================================================================
Service / inner pages — page-hero, fullstack-block, product cards.
(callout, feature-rows, compare-table, pricing-tiers added with their pages)
Ported + normalized to tokens.
========================================================================= */
/* ----- Generic inner-page hero ----- */
.page-hero { padding: 56px 0 100px; border-bottom: 1px solid var(--line); }
.page-hero .eyebrow { margin-bottom: 32px; }
.page-hero h1 { margin-bottom: 36px; max-width: 18ch; }
.page-hero h1 em { font-style: italic; color: var(--gold); }
.page-hero .lede { margin-bottom: 44px; }
.page-hero .display { margin-bottom: var(--s-24); }
.page-hero .lead { max-width: 68ch; margin-bottom: var(--s-32); }
/* ----- Full-stack feature block (what-we-build hub) ----- */
.fullstack-block { padding: var(--section-padding) 0; background: var(--navy-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fullstack-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.fullstack-text .eyebrow { margin-bottom: 16px; }
.fullstack-text .title-xl { margin-bottom: var(--s-24); }
.fullstack-text p { font-size: var(--fs-small); line-height: 1.75; color: var(--text-secondary); margin-bottom: var(--s-16); }
.fullstack-text p strong { color: var(--text); font-weight: 500; }
.fullstack-text .pillars { margin-top: var(--s-24); display: flex; flex-direction: column; gap: var(--s-12); }
.pillar { display: flex; align-items: center; gap: var(--s-16); padding: 14px 18px; border: 1px solid var(--line); background: var(--navy); }
.pillar .num { font-family: var(--font-display); font-style: italic; font-size: 24px; color: var(--gold); line-height: 1; min-width: 28px; }
.pillar .label { font-size: var(--fs-small); color: var(--text); font-weight: 500; }
.fullstack-text .ctas { margin-top: var(--s-32); display: flex; gap: var(--s-16); flex-wrap: wrap; }
.fullstack-card { background: var(--navy); border: 1px solid var(--line-gold); padding: var(--s-48) var(--s-32); position: relative; text-align: center; }
.fullstack-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.fullstack-card .corner { border-color: var(--gold); }
.fs-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--navy); padding: 5px 16px; font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.fullstack-card .title-md { margin: var(--s-12) 0; font-size: 32px; }
.fs-tag { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s-24); }
.fs-stat-row { display: flex; justify-content: space-between; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--s-24) 0; margin-bottom: var(--s-24); }
.fs-stat { flex: 1; }
.fs-stat + .fs-stat { border-left: 1px solid var(--line); }
.fs-stat .fs-n { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: 36px; line-height: 1; color: var(--gold); }
.fs-stat .fs-l { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-top: var(--s-8); }
.fs-from-price { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.fs-price { font-family: var(--font-display); font-weight: 300; font-size: 56px; letter-spacing: -0.025em; line-height: 1; color: var(--text); margin-bottom: var(--s-8); }
.fs-price-period { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s-24); }
.btn-tier { display: inline-block; background: transparent; color: var(--gold); border: 1px solid var(--gold); padding: 14px 24px; text-align: center; font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; transition: all 0.3s; white-space: nowrap; }
.btn-tier:hover { background: var(--gold); color: var(--navy); }
.btn-tier.is-featured { background: var(--gold); color: var(--navy); }
.btn-tier.is-featured:hover { background: transparent; color: var(--gold); }
/* ----- Three product cards ----- */
.products-grid { padding: var(--section-padding) 0; }
.products-head { text-align: center; max-width: 760px; margin: 0 auto var(--s-64); }
.products-head .eyebrow { justify-content: center; }
.products-head .title-xl { margin-bottom: var(--s-24); }
.products-head p { font-size: var(--fs-small); line-height: 1.7; color: var(--text-secondary); }
.products-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.product-card { background: var(--navy); padding: var(--s-48) var(--s-32); display: flex; flex-direction: column; transition: background 0.3s; }
.product-card:hover { background: var(--navy-2); }
.product-card .p-num { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-24); }
.product-card .title-md, .product-card h3 { font-size: 32px; margin-bottom: var(--s-16); }
.product-card p { font-size: var(--fs-small); line-height: 1.7; color: var(--text-secondary); margin-bottom: var(--s-24); flex: 1; }
.product-card .p-meta { padding-top: var(--s-16); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.product-card .p-from { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.product-card .p-from strong { color: var(--text); font-weight: 500; }
.product-card .p-cta { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s; }
.product-card:hover .p-cta { gap: var(--s-12); }
/* ----- Callout box ----- */
.features-list { padding: var(--section-padding) 0; }
.features-list.tight-top { padding-top: var(--s-48); }
.features-list.no-bottom { padding-bottom: 0; }
.callout-box { background: var(--navy-2); border: 1px solid var(--line-gold); padding: var(--s-48); margin: var(--s-48) 0; position: relative; }
.callout-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.callout-box .eyebrow { margin-bottom: 16px; } /* already 16 */
.callout-box h3, .callout-box .title-lg { font-size: clamp(28px, 3vw, 40px); margin-bottom: var(--s-16); }
.callout-box p { font-size: var(--fs-small); line-height: 1.7; color: var(--text-secondary); margin-bottom: var(--s-16); }
.callout-box p:last-child { margin-bottom: 0; }
.callout-box p strong { color: var(--text); font-weight: 500; }
/* ----- Feature rows ----- */
.feature-row-detail { display: grid; grid-template-columns: 200px 1fr 1fr; gap: clamp(32px, 5vw, 80px); padding: var(--s-48) 0; border-bottom: 1px solid var(--line); align-items: start; }
.feature-row-detail:last-child { border-bottom: none; }
.feature-row-detail .num { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.feature-row-detail h3, .feature-row-detail .title-md { font-family: var(--font-display); font-size: 30px; font-weight: 400; letter-spacing: -0.015em; line-height: 1.15; color: var(--text); }
.feature-row-detail h3 em { font-style: italic; color: var(--gold); }
.feature-row-detail p { font-size: var(--fs-small); line-height: 1.75; color: var(--text-secondary); }
/* ----- Integration row ----- */
.integration-row { padding: var(--s-48) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--navy); }
.integration-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-32); flex-wrap: wrap; }
.integration-inner .label { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--gold); }
.integration-list { display: flex; gap: var(--s-48); flex-wrap: wrap; font-family: var(--font-display); font-size: 22px; font-weight: 300; font-style: italic; color: var(--text); }
.integration-list .sep { color: var(--gold); font-style: normal; font-size: var(--fs-small); }
/* ----- Pricing tiers ----- */
.pricing-section { padding: var(--section-padding) 0; background: var(--navy-2); }
.pricing-head { text-align: center; margin-bottom: var(--s-80); }
.pricing-head .eyebrow { justify-content: center; }
.pricing-head .title-xl { margin-bottom: var(--s-24); }
.pricing-head .lead { margin: 0 auto; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.pricing-grid.pricing-grid-4 { grid-template-columns: repeat(4, 1fr); }
.tier-replaces { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.04em; color: var(--gold); margin-bottom: var(--s-24); padding-bottom: var(--s-16); border-bottom: 1px solid var(--line-gold); }
.tier { padding: var(--s-48) var(--s-32); background: var(--navy); display: flex; flex-direction: column; position: relative; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tier.featured { background: var(--navy-3); border-color: var(--line-gold); padding-top: var(--s-64); }
.tier.featured::before { content: attr(data-badge); position: absolute; top: -1px; left: -1px; right: -1px; background: var(--gold); color: var(--navy); font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; padding: 6px 12px; text-align: center; }
.tier .tier-name, .tier h4 { font-family: var(--font-display); font-size: 28px; font-weight: 400; font-style: italic; color: var(--text); margin-bottom: var(--s-12); }
.tier .tier-desc { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--s-32); line-height: 1.6; }
.tier .price { font-family: var(--font-display); font-size: 64px; font-weight: 300; letter-spacing: -0.04em; line-height: 1; color: var(--text); }
.tier .price-period { font-family: var(--font-body); font-size: var(--fs-fine); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin: var(--s-12) 0 var(--s-32); }
.tier ul { margin-bottom: var(--s-32); flex: 1; }
.tier ul li { font-size: var(--fs-small); color: var(--text-secondary); padding: var(--s-12) 0; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 14px; }
.tier ul li::before { content: '·'; color: var(--gold); font-weight: 600; font-size: 20px; line-height: 1; flex-shrink: 0; }
.tier.featured .btn-tier { background: var(--gold); color: var(--navy); }
.tier.featured .btn-tier:hover { background: transparent; color: var(--gold); }
.tier .btn-tier { display: block; width: 100%; }
/* ----- Compare table ----- */
.compare-section { padding: var(--section-padding) 0; background: var(--navy-2); }
.compare-head { text-align: center; max-width: 800px; margin: 0 auto var(--s-64); }
.compare-head .eyebrow { justify-content: center; }
.compare-head .title-xl { margin-bottom: var(--s-24); }
.compare-head .lead { margin: var(--s-24) auto 0; }
.compare-table { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.compare-footer { max-width: 820px; margin: var(--s-32) auto 0; text-align: center; font-size: var(--fs-small); line-height: 1.7; color: var(--text-secondary); }
.compare-footer strong { color: var(--text); font-weight: 500; }
.compare-col { padding: var(--s-48) var(--s-32); background: var(--navy); }
.compare-col.geo { background: rgba(200, 169, 107, 0.04); border-left: 1px solid var(--line-gold); }
.compare-col .col-label { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-muted); margin-bottom: var(--s-16); }
.compare-col.geo .col-label { color: var(--gold); }
.compare-col .col-title { font-family: var(--font-display); font-weight: 400; font-size: 32px; letter-spacing: -0.02em; margin-bottom: var(--s-32); color: var(--text); }
.compare-col .col-title em { font-style: italic; color: var(--gold); }
.compare-col ul li { font-size: var(--fs-small); line-height: 1.6; color: var(--text-secondary); padding: 14px 0 14px 24px; border-bottom: 1px solid var(--line); position: relative; }
.compare-col ul li:last-child { border-bottom: none; }
.compare-col ul li::before { content: ''; position: absolute; left: 0; top: 22px; width: 14px; height: 1px; background: var(--text-muted); }
.compare-col.geo ul li::before { background: var(--gold); }
.compare-col ul li strong { color: var(--text); font-weight: 500; }
/* ----- Volume visual (compass) ----- */
.volume-section { padding: var(--section-padding) 0; }
.volume-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 100px); align-items: center; }
.volume-text .title-xl { margin-bottom: var(--s-32); }
.volume-text p { font-size: var(--fs-small); line-height: 1.7; color: var(--text-secondary); margin-bottom: var(--s-16); }
.volume-text p strong { color: var(--text); font-weight: 500; }
.volume-visual { background: var(--navy-2); border: 1px solid var(--line); padding: var(--s-48); position: relative; }
.volume-visual .corner { z-index: 5; }
.volume-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-32); }
.vol-stat { padding: var(--s-24) 0; }
.vol-stat .n { font-family: var(--font-display); font-size: 72px; font-weight: 300; letter-spacing: -0.03em; line-height: 1; color: var(--gold); margin-bottom: var(--s-12); }
.vol-stat .label { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin-bottom: var(--s-8); }
.vol-stat p { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.5; }
/* ----- About ----- */
.about-content { padding: var(--section-padding) 0; }
.about-grid { display: grid; grid-template-columns: 200px 1fr; gap: clamp(40px, 6vw, 80px); }
.about-text p { font-family: var(--font-display); font-weight: 300; font-size: 24px; line-height: 1.55; letter-spacing: -0.005em; color: var(--text); margin-bottom: var(--s-32); }
.about-text p:last-child { margin-bottom: 0; }
.about-text p em { font-style: italic; color: var(--gold); }
.about-text p strong { font-weight: 500; color: var(--gold); font-style: italic; }
@media (max-width: 1100px) {
.pricing-grid.pricing-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.about-grid { grid-template-columns: 1fr; gap: var(--s-24); }
}
@media (max-width: 960px) {
/* Single-column AND minmax(0,1fr) so a column can never exceed the
container width (default grid track min-width:auto stretches it). */
.fullstack-inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-48); }
.products-three { grid-template-columns: minmax(0, 1fr); }
.feature-row-detail { grid-template-columns: minmax(0, 1fr); gap: var(--s-16); }
.pricing-grid,
.pricing-grid.pricing-grid-4 { grid-template-columns: minmax(0, 1fr); }
.compare-table { grid-template-columns: minmax(0, 1fr); }
.volume-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-48); }
.integration-inner { flex-direction: column; align-items: flex-start; gap: var(--s-16); }
/* Children must allow shrinking below their content size */
.tier, .volume-visual, .volume-text, .fullstack-card, .fullstack-text { min-width: 0; }
}
@media (max-width: 600px) {
.pricing-grid.pricing-grid-4 { grid-template-columns: minmax(0, 1fr); }
/* Fluid --s-* padding tokens compute huge (~54px / ~81px); cap them so
the inner content fits a phone viewport. */
.tier { padding: 36px 24px; }
.tier.featured { padding-top: 44px; }
.tier .price { font-size: 52px; }
.volume-visual { padding: 28px 22px; }
.fullstack-card { padding: 36px 24px; }
.vol-stat .n { font-size: 56px; }
}
/* ===== components/blog.css ===== */
/* Blog — extracted from v63 + normalized, plus single-post prose. */
.blog-featured-card,
.blog-featured-card:visited,
.blog-card,
.blog-card:visited {
text-decoration: none;
color: inherit;
}
.blog-featured-card *,
.blog-card * {
text-decoration: none;
}
.blog-hero {
padding: 64px 0 56px;
border-bottom: 1px solid var(--line);
}
.blog-hero-inner {
max-width: 1120px; margin: 0 auto; padding: 0 32px;
text-align: center;
}
.blog-hero-eyebrow {
font-family: var(--font-mono);
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: var(--s-16);
}
.blog-hero h1 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(44px, 6vw, 80px);
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--text);
margin-bottom: 28px;
}
.blog-hero h1 em { font-style: italic; color: var(--gold); font-weight: 400; }
.blog-hero .lede {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: clamp(20px, 2vw, 24px);
color: var(--text-secondary);
line-height: 1.5;
max-width: 740px;
margin: 0 auto;
}
.blog-hero-meta {
font-family: var(--font-mono);
font-size: 14px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-muted);
margin-top: 36px;
}
.blog-hero-meta strong { color: var(--gold); }
/* FILTER BAR */
.blog-filter-bar {
position: sticky;
top: 64px;
z-index: 30;
background: rgba(11, 22, 41, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
padding: 18px 0;
}
.blog-filter-inner {
max-width: 1120px; margin: 0 auto; padding: 0 32px;
display: flex; gap: 8px;
justify-content: center;
flex-wrap: wrap;
}
.blog-filter-btn {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-secondary);
background: transparent;
border: 1px solid var(--line);
padding: 10px 18px;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.blog-filter-btn:hover {
color: var(--text);
border-color: var(--text-muted);
}
.blog-filter-btn.active {
color: var(--navy);
background: var(--gold);
border-color: var(--gold);
}
/* FEATURED ARTICLE */
.blog-featured {
padding: 64px 0 40px;
}
.blog-featured-inner {
max-width: 1120px; margin: 0 auto; padding: 0 32px;
}
.blog-featured-label {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 28px;
text-align: center;
}
.blog-featured-card {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 64px;
align-items: center;
background: var(--navy-2);
border: 1px solid var(--line);
padding: 56px;
cursor: pointer;
transition: border-color 0.3s;
}
.blog-featured-card:hover { border-color: var(--gold); }
.blog-featured-image {
width: 100%;
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, #1a2842, #0f1a2d);
border: 1px solid var(--line);
position: relative;
overflow: hidden;
}
.blog-featured-image::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 40%, rgba(200, 169, 107, 0.12), transparent 60%),
radial-gradient(circle at 70% 70%, rgba(200, 169, 107, 0.06), transparent 50%);
}
.blog-featured-image-watermark {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: clamp(56px, 6vw, 96px);
font-weight: 300;
color: rgba(200, 169, 107, 0.18);
letter-spacing: -0.03em;
user-select: none;
}
.blog-featured-content {
display: flex; flex-direction: column;
gap: 20px;
}
.blog-featured-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
}
.blog-featured-card h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: clamp(32px, 3.4vw, 44px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--text);
margin: 0;
}
.blog-featured-card h2 em { font-style: italic; color: var(--gold); }
.blog-featured-card .excerpt {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 1.7;
color: var(--text-secondary);
margin: 0;
}
.blog-featured-byline {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
padding-top: 16px;
border-top: 1px solid var(--line);
}
.blog-featured-byline strong { color: var(--text); font-weight: 400; }
.blog-featured-cta {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
margin-top: 8px;
}
.blog-featured-cta .arrow { display: inline-block; margin-left: 6px; transition: transform 0.2s; }
.blog-featured-card:hover .blog-featured-cta .arrow { transform: translateX(4px); }
/* ARTICLE GRID */
.blog-grid-section {
padding: 24px 0 96px;
}
.blog-grid-inner {
max-width: 1120px; margin: 0 auto; padding: 0 32px;
}
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.blog-card {
background: transparent;
border: 1px solid var(--line);
display: flex; flex-direction: column;
cursor: pointer;
transition: border-color 0.3s, transform 0.3s;
}
.blog-card:hover {
border-color: var(--gold);
transform: translateY(-2px);
}
.blog-card-image {
width: 100%;
aspect-ratio: 16 / 10;
background: linear-gradient(135deg, #15233a, #0d182a);
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--line);
}
.blog-card-image::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(200, 169, 107, 0.10), transparent 60%);
}
.blog-card-image-watermark {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: clamp(48px, 5vw, 64px);
font-weight: 300;
color: rgba(200, 169, 107, 0.20);
letter-spacing: -0.03em;
user-select: none;
}
.blog-card-body {
padding: 28px 28px 32px;
display: flex; flex-direction: column;
flex: 1;
gap: 14px;
}
.blog-card-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
}
.blog-card h3 {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 24px;
line-height: 1.18;
letter-spacing: -0.015em;
color: var(--text);
margin: 0;
}
.blog-card h3 em { font-style: italic; color: var(--gold); }
.blog-card .excerpt {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 14px;
line-height: 1.65;
color: var(--text-secondary);
margin: 0;
/* Limit to ~2 lines */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.blog-card-byline {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--line);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.blog-card-byline strong { color: var(--text); font-weight: 400; }
/* EMPTY STATE (when a filter shows no posts) */
.blog-empty-state {
text-align: center;
padding: 96px 32px;
color: var(--text-muted);
}
.blog-empty-state h3 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 36px;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 16px;
}
.blog-empty-state p {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 16px;
color: var(--text-secondary);
}
/* AUTHORS SECTION */
.blog-authors-section {
padding: 96px 0;
border-top: 1px solid var(--line);
background: linear-gradient(180deg, transparent, rgba(200, 169, 107, 0.02));
}
.blog-authors-inner {
max-width: 1120px; margin: 0 auto; padding: 0 32px;
}
.blog-authors-head {
text-align: center;
margin-bottom: 64px;
}
.blog-authors-head .eyebrow {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: var(--s-16);
}
.blog-authors-head h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(36px, 4vw, 52px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--text);
margin: 0 0 20px 0;
}
.blog-authors-head h2 em { font-style: italic; color: var(--gold); }
.blog-authors-head p {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: 20px;
color: var(--text-secondary);
max-width: 640px;
margin: 0 auto;
}
.blog-authors-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.blog-author-card {
background: var(--navy-2);
border: 1px solid var(--line);
padding: 36px 32px;
text-align: center;
transition: border-color 0.3s;
}
.blog-author-card:hover { border-color: var(--gold); }
.blog-author-avatar {
width: 96px; height: 96px;
border-radius: 50%;
background: linear-gradient(135deg, var(--navy), #1a2842);
border: 1px solid var(--gold);
margin: 0 auto 24px;
display: flex; align-items: center; justify-content: center;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 36px;
font-weight: 300;
color: var(--gold);
}
.blog-author-name {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 24px;
letter-spacing: -0.015em;
color: var(--text);
margin-bottom: 6px;
}
.blog-author-role {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 20px;
}
.blog-author-bio {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 14px;
line-height: 1.65;
color: var(--text-secondary);
margin-bottom: 20px;
}
.blog-author-stats {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
padding-top: 16px;
border-top: 1px solid var(--line);
}
.blog-author-stats strong { color: var(--text); font-weight: 400; }
/* NEWSLETTER CTA */
.blog-newsletter {
padding: 96px 0;
border-top: 1px solid var(--line);
}
.blog-newsletter-inner {
max-width: 720px; margin: 0 auto; padding: 0 32px;
text-align: center;
}
.blog-newsletter .eyebrow {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: var(--s-16);
}
.blog-newsletter h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(32px, 3.6vw, 44px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--text);
margin: 0 0 16px 0;
}
.blog-newsletter h2 em { font-style: italic; color: var(--gold); }
.blog-newsletter p {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: 18px;
color: var(--text-secondary);
margin-bottom: 36px;
}
.blog-newsletter-form {
display: flex;
gap: 0;
max-width: 480px;
margin: 0 auto;
border: 1px solid var(--line);
transition: border-color 0.2s;
}
.blog-newsletter-form:focus-within { border-color: var(--gold); }
.blog-newsletter-form input {
flex: 1;
background: transparent;
border: none;
padding: 16px 20px;
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--text);
outline: none;
}
.blog-newsletter-form input::placeholder { color: var(--text-muted); }
.blog-newsletter-form button {
background: var(--gold);
color: var(--navy);
border: none;
padding: 0 28px;
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
font-weight: 600;
transition: background 0.2s;
}
.blog-newsletter-form button:hover { background: #d4b478; }
/* Single post — branded article */
.single-article{padding:var(--section-padding) 0;}
.single-article .container{max-width:760px;}
.single-eyebrow{font-family:var(--font-body);font-size:var(--fs-fine);font-weight:600;text-transform:uppercase;letter-spacing:0.18em;color:var(--gold);margin-bottom:16px;}
.single-title{font-family:var(--font-display);font-weight:300;font-size:clamp(36px,5vw,64px);line-height:1.05;letter-spacing:-0.02em;color:var(--text);margin-bottom:var(--s-24);}
.single-title em{font-style:italic;color:var(--gold);}
.single-byline{font-family:var(--font-body);font-size:var(--fs-small);color:var(--text-muted);margin-bottom:var(--s-48);padding-bottom:var(--s-24);border-bottom:1px solid var(--line);}
.single-byline strong{color:var(--text);font-weight:500;}
.single-content{font-size:var(--fs-body);line-height:1.8;color:var(--text-secondary);}
.single-content > * + *{margin-top:var(--s-24);}
.single-content h2{font-family:var(--font-display);font-size:var(--fs-title-lg);color:var(--text);margin-top:var(--s-48);}
.single-content h3{font-family:var(--font-display);font-size:var(--fs-title-md);color:var(--text);margin-top:var(--s-32);}
.single-content a{color:var(--gold);}
.single-content strong{color:var(--text);}
.single-content blockquote{border-left:2px solid var(--gold);padding-left:var(--s-24);font-family:var(--font-display);font-style:italic;font-size:24px;color:var(--text);}
.single-content img{margin:var(--s-32) 0;}
.single-back{display:inline-block;margin-top:var(--s-48);font-size:var(--fs-fine);text-transform:uppercase;letter-spacing:0.14em;color:var(--gold);}
/* ---- Responsive: stack the card grids on tablet / mobile ---- */
@media (max-width: 960px) {
/* Featured article: image on top, content below */
.blog-featured-card {
grid-template-columns: 1fr;
gap: 32px;
padding: 40px;
}
/* Article grid: 2-up on tablet */
.blog-grid {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
/* Authors: 2-up on tablet */
.blog-authors-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
@media (max-width: 600px) {
/* Single column on phones */
.blog-grid,
.blog-authors-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.blog-featured-card {
padding: 28px;
gap: 24px;
}
.blog-hero { padding: 40px 0 36px; }
.blog-featured { padding: 40px 0 32px; }
/* Newsletter: stack the button UNDER the input instead of beside it */
.blog-newsletter-form {
flex-direction: column;
border: none;
gap: 12px;
}
.blog-newsletter-form input {
border: 1px solid var(--line);
text-align: center;
}
.blog-newsletter-form:focus-within { border-color: transparent; }
.blog-newsletter-form input:focus { border-color: var(--gold); outline: none; }
.blog-newsletter-form button {
width: 100%;
padding: 16px 28px;
}
}
/* ===== components/comparison.css ===== */
/* =========================================================================
The Comparison page — 3-column grid + 3-year TCO. Ported + normalized.
========================================================================= */
.cmp-hero { padding: 64px 0 var(--s-48); text-align: center; border-bottom: 1px solid var(--line); }
.cmp-hero-inner { max-width: 880px; margin: 0 auto; padding-inline: var(--gutter); }
.cmp-hero-eyebrow { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.cmp-hero h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(44px, 6vw, 76px); line-height: 1.02; letter-spacing: -0.025em; color: var(--text); margin-bottom: var(--s-24); }
.cmp-hero h1 em { font-style: italic; color: var(--gold); font-weight: 400; }
.cmp-hero .lede { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(20px, 2vw, 24px); color: var(--text-secondary); line-height: 1.55; max-width: 720px; margin: 0 auto var(--s-32); }
.cmp-hero-meta { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.cmp-hero-meta strong { color: var(--gold); font-weight: 600; }
.cmp-grid-section { padding: var(--s-64) 0 var(--s-80); }
.cmp-grid-inner { max-width: 1280px; margin: 0 auto; padding-inline: var(--gutter); }
.cmp-grid-header { display: grid; grid-template-columns: 200px 1fr 1fr 1fr; gap: var(--s-16); padding: var(--s-24) 0; margin-bottom: var(--s-32); position: sticky; top: var(--nav-height); background: rgba(10, 22, 40, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); z-index: 20; border-bottom: 1px solid var(--line); }
.cmp-col-header { padding: var(--s-16); text-align: center; }
.cmp-col-header.featured { background: rgba(200, 169, 107, 0.06); border: 1px solid var(--gold); position: relative; }
.cmp-col-header.featured::before { content: attr(data-badge); position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--navy); padding: 0 12px; font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 600; letter-spacing: 0.16em; color: var(--gold); white-space: nowrap; }
.cmp-col-header-eyebrow { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-8); }
.cmp-col-header h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 2vw, 24px); color: var(--text); margin: 0 0 6px; letter-spacing: -0.015em; }
.cmp-col-header .price { font-family: var(--font-display); font-weight: 300; font-size: clamp(26px, 3vw, 34px); color: var(--text); letter-spacing: -0.02em; }
.cmp-col-header .price .unit { font-size: 0.5em; color: var(--text-muted); }
.cmp-col-header .price-period { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-top: var(--s-4); }
.cmp-row { display: grid; grid-template-columns: 200px 1fr 1fr 1fr; gap: var(--s-16); padding: var(--s-24) 0; border-bottom: 1px solid var(--line); }
.cmp-row:last-child { border-bottom: none; }
.cmp-row-label { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); padding: var(--s-16) var(--s-16) var(--s-16) 0; align-self: start; }
.cmp-cell { padding: var(--s-16); font-family: var(--font-body); font-weight: 300; font-size: var(--fs-small); line-height: 1.55; color: var(--text-secondary); }
.cmp-cell.featured { background: rgba(200, 169, 107, 0.04); border-left: 1px solid var(--gold); border-right: 1px solid var(--gold); color: var(--text); }
.cmp-cell strong { color: var(--text); font-weight: 500; display: block; margin-bottom: var(--s-4); font-size: var(--fs-small); letter-spacing: -0.005em; }
.cmp-cell.featured strong { color: var(--gold); }
.cmp-inline-link { display: inline-block; margin-top: var(--s-8); font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold); padding-top: 6px; border-top: 1px solid var(--line-gold); }
.cmp-cell em { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--text-muted); font-size: var(--fs-fine); display: block; margin-top: var(--s-4); }
.cmp-tco-section { padding: var(--section-padding) 0; background: var(--navy-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cmp-tco-inner { max-width: 1120px; margin: 0 auto; padding-inline: var(--gutter); }
.cmp-tco-head { text-align: center; max-width: 720px; margin: 0 auto var(--s-48); }
.cmp-tco-eyebrow { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.cmp-tco-head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.02em; color: var(--text); margin: 0 0 var(--s-16); }
.cmp-tco-head h2 em { font-style: italic; color: var(--gold); }
.cmp-tco-head p:not(.cmp-tco-eyebrow) { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 20px; color: var(--text-secondary); margin: 0; }
.cmp-tco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-24); }
.cmp-tco-card { background: var(--navy); border: 1px solid var(--line); padding: var(--s-32); text-align: center; }
.cmp-tco-card.featured { border-color: var(--gold); background: rgba(200, 169, 107, 0.04); position: relative; }
.cmp-tco-card.featured::before { content: attr(data-badge); position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--navy-2); padding: 0 12px; font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 600; letter-spacing: 0.16em; color: var(--gold); }
.cmp-tco-card-label { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s-16); }
.cmp-tco-card.featured .cmp-tco-card-label { color: var(--gold); }
.tco-big-number { font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 4.5vw, 56px); letter-spacing: -0.025em; line-height: 1; color: var(--text); margin-bottom: var(--s-8); }
.cmp-tco-card.featured .tco-big-number { color: var(--gold); }
.tco-period { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s-24); }
.tco-breakdown { padding: var(--s-24) 0 0; border-top: 1px solid var(--line); font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.7; color: var(--text-secondary); }
.tco-breakdown li { padding: 6px 0; }
.tco-breakdown li strong { color: var(--text); font-weight: 500; }
/* WHERE EACH OPTION WINS — intellectual honesty section (v175) */
.cmp-honesty-section { padding: 64px 0; }
.cmp-honesty-inner { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.cmp-honesty-head { text-align: center; max-width: 720px; margin: 0 auto 64px; }
.cmp-honesty-head .eyebrow { color: var(--gold); margin-bottom: 18px; }
.cmp-honesty-head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.02em; color: var(--text); margin: 0 0 16px; }
.cmp-honesty-head h2 em { font-style: italic; color: var(--gold); }
.cmp-honesty-head p { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 18px; color: var(--text-secondary); line-height: 1.5; margin: 0; }
.cmp-honesty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-32); }
.cmp-honesty-card { background: transparent; border: 1px solid var(--line); padding: 36px 32px; }
.cmp-honesty-card.featured { border-color: var(--gold); background: rgba(200, 169, 107, 0.03); }
.cmp-honesty-card-eyebrow { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.cmp-honesty-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 24px; letter-spacing: -0.015em; color: var(--text); margin: 0 0 20px; line-height: 1.2; }
.cmp-honesty-card h3 em { font-style: italic; color: var(--gold); }
.cmp-honesty-card p { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-fine); line-height: 1.7; color: var(--text-secondary); margin: 0 0 16px; }
.cmp-honesty-card p:last-child { margin-bottom: 0; }
.cmp-honesty-card p strong { color: var(--text); font-weight: 500; }
/* FINAL CTA (v175) */
.cmp-final-cta { padding: 64px 0; border-top: 1px solid var(--line); text-align: center; }
.cmp-final-cta-inner { max-width: 720px; margin: 0 auto; padding: 0 var(--gutter); }
.cmp-final-cta .eyebrow { color: var(--gold); margin-bottom: 20px; }
.cmp-final-cta h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(36px, 4.5vw, 56px); line-height: 1.05; letter-spacing: -0.025em; color: var(--text); margin: 0 0 24px; }
.cmp-final-cta h2 em { font-style: italic; color: var(--gold); }
.cmp-final-cta p { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 20px; color: var(--text-secondary); margin: 0 0 40px; line-height: 1.55; }
.cmp-final-cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 860px) {
.cmp-honesty-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.cmp-grid-header, .cmp-row { grid-template-columns: 1fr; gap: var(--s-8); }
.cmp-grid-header { position: static; }
.cmp-grid-header > div:first-child { display: none; }
.cmp-row-label { color: var(--gold); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line-gold); }
.cmp-cell, .cmp-cell.featured { border: none; }
.cmp-cell::before { content: attr(data-col); display: block; font-size: var(--fs-fine); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: var(--s-4); }
.cmp-tco-grid { grid-template-columns: 1fr; }
}
/* ===== components/viz.css ===== */
/* Editorial data visualizations (infographics) — extracted from v63 + normalized (mono->Inter, color vars->tokens, sub-14px->14px). */
/* ============================ EDITORIAL DATA VISUALIZATIONS — v62 ============================
Three hand-crafted SVG visualizations, one per service page.
Same palette as the rest of the site. No decoration. Information design only.
============================================================================= */
.editorial-viz {
margin: 60px 0 -20px;
padding: 56px 48px 48px;
background: var(--navy);
border: 1px solid var(--line);
border-bottom: none;
position: relative;
}
.editorial-viz::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--line-gold), transparent);
}
.editorial-viz .viz-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold);
margin-bottom: 16px;
display: inline-flex; align-items: center; gap: 10px;
}
.editorial-viz .viz-eyebrow::before {
content: ''; width: 24px; height: 1px; background: var(--gold);
}
.editorial-viz .viz-title {
font-family: 'Cormorant Garamond', serif; font-weight: 300;
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.2; letter-spacing: -0.01em;
color: var(--text);
margin-bottom: 36px;
max-width: 56ch;
}
.editorial-viz .viz-title em { font-style: italic; color: var(--gold); }
.editorial-viz .viz-canvas { width: 100%; height: auto; display: block; }
.editorial-viz .viz-footnote {
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid var(--line);
font-family: 'Inter', sans-serif;
font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--text-muted);
line-height: 1.7;
}
.editorial-viz .viz-footnote strong {
color: var(--text-secondary);
font-weight: 500;
}
/* ============================================================
NEW VIZ PATTERNS (v63)
============================================================ */
/* ---- VIZ 1: Authority Ladder (AI Agents page) ---- */
.viz-ladder-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: 28px;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.viz-ladder-step {
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 28px 22px 28px;
background: var(--navy-2);
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
}
.viz-ladder-step.featured {
background: var(--navy-3);
}
.viz-ladder-step .ladder-num {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
}
.viz-ladder-step .ladder-role {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 22px;
color: var(--text);
line-height: 1.1;
}
.viz-ladder-step .ladder-authority {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
}
.viz-ladder-step .ladder-authority strong {
color: var(--gold);
font-weight: 500;
}
.viz-ladder-step .ladder-bar {
height: 4px;
background: var(--gold);
margin-top: auto;
}
.viz-ladder-step:nth-child(1) .ladder-bar { width: 25%; }
.viz-ladder-step:nth-child(2) .ladder-bar { width: 50%; }
.viz-ladder-step:nth-child(3) .ladder-bar { width: 75%; }
.viz-ladder-step:nth-child(4) .ladder-bar { width: 100%; }
@media (max-width: 900px) {
.viz-ladder-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.viz-ladder-grid { grid-template-columns: 1fr; }
}
/* ---- VIZ 2: "Replaces a human" cost stack (AI Agents page) ---- */
.viz-cost-stack {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 28px;
}
.viz-cost-col {
display: flex;
flex-direction: column;
gap: 12px;
}
.viz-cost-col .cost-role {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
text-align: center;
}
.viz-cost-col .cost-bar-area {
height: auto;
display: flex;
flex-direction: column;
align-items: stretch;
position: relative;
padding: 0;
margin-top: 8px;
}
.viz-cost-col .cost-bar-human {
background: linear-gradient(to top, rgba(180, 90, 90, 0.4), rgba(180, 90, 90, 0.15));
border-top: 2px solid rgba(220, 130, 130, 0.7);
border-bottom: 1px solid rgba(220, 130, 130, 0.25);
width: 100%;
height: 150px; /* fixed across all columns — each column tells its own ratio story */
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 8px;
}
.viz-cost-col .cost-bar-ai {
background: linear-gradient(to top, rgba(200, 169, 107, 0.35), rgba(200, 169, 107, 0.12));
border-top: 2px solid var(--gold);
width: 100%;
/* height set inline per tier — proportional to (ai / human) */
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 8px;
margin-top: 0; /* flush against human bar */
}
.viz-cost-col .cost-label-human {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: rgba(220, 130, 130, 0.95);
letter-spacing: 0.14em;
text-transform: uppercase;
text-align: center;
margin-bottom: 2px;
}
.viz-cost-col .cost-value-human {
font-family: 'Cormorant Garamond', serif;
font-size: 26px;
color: var(--text);
text-align: center;
font-weight: 300;
line-height: 1;
margin: 4px 0;
}
.viz-cost-col .cost-sub-human {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.18em;
color: rgba(220, 130, 130, 0.7);
text-transform: uppercase;
text-align: center;
margin-top: 2px;
}
.viz-cost-col .cost-label-ai {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--gold);
letter-spacing: 0.14em;
text-transform: uppercase;
text-align: center;
margin-bottom: 2px;
}
.viz-cost-col .cost-value-ai {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
color: var(--text);
text-align: center;
font-weight: 300;
line-height: 1;
margin: 2px 0;
}
.viz-cost-col .cost-sub-ai {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.18em;
color: var(--gold);
text-transform: uppercase;
text-align: center;
margin-top: 2px;
}
.viz-cost-col .cost-tier-name {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 16px;
color: var(--text);
text-align: center;
margin-top: 6px;
}
.viz-cost-col .cost-savings {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--gold);
text-align: center;
letter-spacing: 0.1em;
text-transform: uppercase;
border-top: 1px solid var(--line-gold);
padding-top: 8px;
margin-top: 4px;
}
@media (max-width: 900px) {
.viz-cost-stack { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 540px) {
.viz-cost-stack { grid-template-columns: 1fr; gap: 32px; }
}
/* ---- VIZ 3: Pricing decision tree (Pricing page) ---- */
.viz-decision-tree {
margin: 40px auto;
max-width: 1100px;
}
.viz-tree-question {
text-align: center;
margin-bottom: 32px;
}
.viz-tree-question .tree-q-label {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 14px;
}
.viz-tree-question .tree-q-title {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 28px;
font-weight: 400;
color: var(--text);
line-height: 1.2;
}
.viz-tree-branches {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
position: relative;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.viz-tree-branches::before {
content: '';
position: absolute;
top: -32px;
left: 50%;
width: 1px;
height: 32px;
background: var(--line-gold);
}
.viz-tree-branch {
padding: 28px 20px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--navy-2);
display: flex;
flex-direction: column;
gap: 12px;
cursor: pointer;
transition: background 0.3s;
}
.viz-tree-branch:hover {
background: var(--navy-3);
}
.viz-tree-branch .branch-bottleneck {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--text-secondary);
line-height: 1.5;
font-style: italic;
}
.viz-tree-branch .branch-arrow {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--gold);
text-align: center;
}
.viz-tree-branch .branch-tier {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 22px;
color: var(--text);
line-height: 1.1;
}
.viz-tree-branch .branch-price {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--gold);
letter-spacing: 0.12em;
}
.viz-tree-branch .branch-desc {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--text-muted);
line-height: 1.6;
}
@media (max-width: 900px) {
.viz-tree-branches { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.viz-tree-branches { grid-template-columns: 1fr; }
}
/* ---- VIZ 4: Compounding flow (Homepage) ---- */
.viz-compound-flow {
margin: 40px 0 0;
padding: 48px 36px;
background: var(--navy);
border: 1px solid var(--line);
position: relative;
}
.viz-compound-flow::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--line-gold), transparent);
}
.viz-flow-head {
text-align: center;
margin-bottom: 36px;
}
.viz-flow-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold);
margin-bottom: 16px;
}
.viz-flow-title {
font-family: 'Cormorant Garamond', serif; font-weight: 300;
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.2; color: var(--text);
max-width: 60ch; margin: 0 auto;
}
.viz-flow-title em { font-style: italic; color: var(--gold); }
.viz-flow-svg {
width: 100%;
height: auto;
display: block;
max-width: 880px;
margin: 0 auto;
}
.viz-flow-legend {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding-top: 24px;
border-top: 1px solid var(--line);
}
.viz-flow-legend-item {
display: flex; align-items: flex-start; gap: 12px;
}
.viz-flow-legend-num {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
flex-shrink: 0;
padding-top: 2px;
}
.viz-flow-legend-text {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
}
.viz-flow-legend-text strong { color: var(--text); font-weight: 500; }
@media (max-width: 700px) {
.viz-flow-legend { grid-template-columns: 1fr; gap: 16px; }
.viz-compound-flow { padding: 32px 20px; }
}
/* ---- VIZ 5: 60-second call timeline (AI Agents page) ---- */
.viz-timeline-track {
position: relative;
margin-top: 36px;
padding: 0 0 60px;
}
.viz-timeline-axis {
position: absolute;
top: 28px;
left: 0; right: 0;
height: 2px;
background: var(--line);
}
.viz-timeline-axis-fill {
position: absolute;
top: 0; left: 0;
height: 100%;
width: 100%;
background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 100%);
opacity: 0.5;
}
.viz-timeline-steps {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
position: relative;
}
.viz-timeline-step {
position: relative;
text-align: center;
padding: 0 8px;
}
.viz-timeline-dot {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--gold);
border: 4px solid var(--navy);
margin: 0 auto 14px;
position: relative;
z-index: 2;
box-shadow: 0 0 0 1px var(--gold);
}
.viz-timeline-time {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 8px;
}
.viz-timeline-event {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 15px;
color: var(--text);
line-height: 1.25;
margin-bottom: 6px;
}
.viz-timeline-detail {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--text-muted);
line-height: 1.5;
}
@media (max-width: 900px) {
.viz-timeline-steps { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
.viz-timeline-axis { display: none; }
.viz-timeline-step::after {
content: ''; position: absolute; top: 8px; right: -50%;
width: 100%; height: 1px; background: var(--line);
z-index: 0;
}
.viz-timeline-step:nth-child(3n)::after { display: none; }
}
@media (max-width: 500px) {
.viz-timeline-steps { grid-template-columns: repeat(2, 1fr); }
.viz-timeline-step::after { display: none; }
}
/* ---- VIZ 6: Time-to-value comparison (Comparison page) ---- */
.viz-ttv-grid {
margin-top: 32px;
display: flex;
flex-direction: column;
gap: 28px;
}
.viz-ttv-row {
display: grid;
grid-template-columns: 160px 1fr;
gap: 28px;
align-items: center;
}
.viz-ttv-label {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 17px;
color: var(--text);
line-height: 1.25;
}
.viz-ttv-bars {
display: flex;
flex-direction: column;
gap: 10px;
}
.viz-ttv-bar-row {
display: grid;
grid-template-columns: 100px 1fr 140px;
gap: 14px;
align-items: center;
}
.viz-ttv-bar-who {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
}
.viz-ttv-bar-row.us .viz-ttv-bar-who { color: var(--gold); }
.viz-ttv-bar-track {
height: 22px;
background: rgba(200, 169, 107, 0.05);
border: 1px solid var(--line);
position: relative;
}
.viz-ttv-bar-fill {
height: 100%;
background: linear-gradient(90deg, rgba(200, 169, 107, 0.6), rgba(200, 169, 107, 0.25));
}
.viz-ttv-bar-row.us .viz-ttv-bar-fill {
background: linear-gradient(90deg, var(--gold), rgba(200, 169, 107, 0.5));
}
.viz-ttv-bar-row.them .viz-ttv-bar-fill {
background: linear-gradient(90deg, rgba(180, 90, 90, 0.5), rgba(180, 90, 90, 0.2));
}
.viz-ttv-bar-value {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--text-secondary);
letter-spacing: 0.1em;
}
.viz-ttv-bar-row.us .viz-ttv-bar-value { color: var(--gold); }
@media (max-width: 800px) {
.viz-ttv-row { grid-template-columns: 1fr; gap: 14px; }
.viz-ttv-bar-row { grid-template-columns: 80px 1fr 100px; gap: 10px; }
}
@media (max-width: 500px) {
.viz-ttv-bar-row { grid-template-columns: 70px 1fr; }
.viz-ttv-bar-value { grid-column: 2; text-align: right; padding-top: 0; font-size: 14px; }
}
/* /end new viz patterns */
/* Bridge to the callout-box that follows: visually fuse them */
.editorial-viz + .features-list .callout-box {
margin-top: 0;
}
/* CLOCK FACE — AI Agents page */
.viz-clock {
display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: center;
}
.viz-clock svg { max-width: 280px; }
.viz-clock-legend {
display: flex; flex-direction: column; gap: 14px;
}
.viz-clock-legend-row {
display: flex; align-items: baseline; gap: 16px;
padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.viz-clock-legend-row:last-child { border-bottom: none; padding-bottom: 0; }
.viz-clock-legend-row .pct {
font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
font-size: 30px; color: var(--gold);
letter-spacing: -0.01em;
min-width: 80px;
line-height: 1;
}
.viz-clock-legend-row.muted .pct {
color: var(--text-secondary); font-style: normal;
font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 300;
}
.viz-clock-legend-row .desc {
font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.55;
color: var(--text-secondary);
}
.viz-clock-legend-row .desc strong { color: var(--text); font-weight: 500; }
/* STACKED BAR — SEO+GEO page */
.viz-bar-track {
height: 60px;
display: flex;
background: var(--navy-2);
border: 1px solid var(--line);
overflow: hidden;
}
.viz-bar-segment {
display: flex; align-items: center; justify-content: center;
position: relative;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 22px;
letter-spacing: -0.005em;
}
.viz-bar-segment.ai {
background: var(--gold);
color: var(--navy);
}
.viz-bar-segment.google {
background: transparent;
color: var(--text);
border-right: 1px solid var(--line-bright);
border-left: 1px solid var(--line-bright);
}
.viz-bar-segment.direct {
background: transparent;
color: var(--text-secondary);
}
.viz-bar-labels {
display: grid; grid-template-columns: 45fr 30fr 25fr;
margin-top: 18px;
gap: 0;
}
.viz-bar-label-col {
padding-right: 20px;
border-left: 1px solid var(--line);
padding-left: 20px;
}
.viz-bar-label-col:first-child { border-left: none; padding-left: 0; }
.viz-bar-label-col .label-name {
font-family: 'Inter', sans-serif;
font-size: 14px; letter-spacing: 0.15em; text-transform: uppercase;
color: var(--gold);
margin-bottom: 8px;
}
.viz-bar-label-col.muted .label-name { color: var(--text-muted); }
.viz-bar-label-col .label-detail {
font-family: 'Inter', sans-serif; font-size: 12.5px; line-height: 1.55;
color: var(--text-secondary);
}
/* DECAY VS COMPOUND — Websites page */
.viz-decay-grid {
display: grid; grid-template-columns: 1fr 260px; gap: 56px; align-items: center;
}
.viz-decay-grid svg { width: 100%; height: auto; }
.viz-decay-legend {
display: flex; flex-direction: column; gap: 0;
}
.viz-decay-row {
padding: 18px 0; border-bottom: 1px solid var(--line);
}
.viz-decay-row:first-child { padding-top: 0; }
.viz-decay-row:last-child { border-bottom: none; padding-bottom: 0; }
.viz-decay-row .marker-row {
display: flex; align-items: center; gap: 12px;
margin-bottom: 10px;
}
.viz-decay-row .line-swatch {
display: inline-block; width: 32px; height: 2px;
}
.viz-decay-row.us .line-swatch { background: var(--gold); }
.viz-decay-row.them .line-swatch {
background: transparent;
border-top: 1px dashed var(--line-bright);
height: 0;
}
.viz-decay-row .label-name {
font-family: 'Inter', sans-serif;
font-size: 14px; letter-spacing: 0.15em; text-transform: uppercase;
color: var(--gold);
}
.viz-decay-row.them .label-name { color: var(--text-muted); }
.viz-decay-row .stat {
font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
font-size: 26px;
color: var(--gold);
letter-spacing: -0.01em;
margin-bottom: 4px;
}
.viz-decay-row.them .stat {
color: var(--text-secondary); font-style: normal;
font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 300;
}
.viz-decay-row .detail {
font-family: 'Inter', sans-serif; font-size: 12.5px; line-height: 1.55;
color: var(--text-secondary);
}
@media (max-width: 760px) {
.editorial-viz { padding: 40px 24px 32px; margin: 40px 0 -20px; }
.viz-clock, .viz-decay-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.viz-clock svg, .viz-decay-grid svg { max-width: 100%; margin: 0 auto; }
.viz-bar-labels {
grid-template-columns: 1fr;
gap: 16px;
}
.viz-bar-label-col {
border-left: none; padding-left: 0;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.viz-bar-label-col:last-child { border-bottom: none; padding-bottom: 0; }
.viz-bar-segment { font-size: 16px; }
}
/* ============================ PHONE / OMNICHANNEL SECTION — v62 ============================
The agent answers the phone, then hands off to web/SMS, books the appointment,
and sends confirmations. Visualized as a 4-step horizontal flow.
================================================================================ */
.phone-flow-section {
padding: 96px 0;
border-top: 1px solid var(--line);
}
.phone-flow-head {
max-width: 760px;
margin-bottom: 56px;
}
.phone-flow-head .eyebrow { margin-bottom: 16px; }
.phone-flow-head h2 {
font-family: 'Cormorant Garamond', serif; font-weight: 300;
font-size: clamp(32px, 4vw, 48px);
line-height: 1.1; letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 22px;
}
.phone-flow-head h2 em { font-style: italic; color: var(--gold); }
.phone-flow-head p {
font-family: 'Inter', sans-serif; font-weight: 300;
font-size: 16px; line-height: 1.7;
color: var(--text-secondary);
max-width: 64ch;
}
.phone-flow-head p strong { color: var(--text); font-weight: 500; }
.phone-flow-diagram {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-bottom: 48px;
position: relative;
}
.phone-flow-step {
padding: 32px 28px;
border: 1px solid var(--line);
border-right: none;
position: relative;
background: var(--navy);
}
.phone-flow-step:last-child {
border-right: 1px solid var(--line);
}
.phone-flow-step::after {
content: '→';
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
width: 20px; height: 20px;
background: var(--navy);
color: var(--gold);
font-family: 'Inter', sans-serif;
font-size: 14px;
display: flex; align-items: center; justify-content: center;
z-index: 2;
}
.phone-flow-step:last-child::after { display: none; }
.phone-flow-step .step-num {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 18px;
}
.phone-flow-step .step-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-style: italic;
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--text);
margin-bottom: 12px;
}
.phone-flow-step .step-detail {
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.6;
color: var(--text-secondary);
}
.phone-flow-modes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
margin-top: 8px;
}
.phone-flow-mode {
background: var(--navy-2);
padding: 28px 32px;
}
.phone-flow-mode .mode-label {
font-family: 'Inter', sans-serif;
font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold);
margin-bottom: 12px;
}
.phone-flow-mode .mode-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-style: italic;
font-size: 22px;
color: var(--text);
margin-bottom: 10px;
}
.phone-flow-mode .mode-detail {
font-family: 'Inter', sans-serif;
font-size: 13.5px;
line-height: 1.65;
color: var(--text-secondary);
}
.phone-flow-mode .mode-detail strong { color: var(--text); font-weight: 500; }
@media (max-width: 920px) {
.phone-flow-diagram { grid-template-columns: 1fr; }
.phone-flow-step { border-right: 1px solid var(--line); border-bottom: none; }
.phone-flow-step:not(:last-child) { border-bottom: none; }
.phone-flow-step::after {
content: '↓';
right: 50%; top: auto; bottom: -12px;
transform: translateX(50%);
}
.phone-flow-modes { grid-template-columns: 1fr; }
}
/* ============================ TRADES VERTICAL BLOCK — v62 ============================ */
.trades-section {
padding: 96px 0;
background: var(--navy-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.trades-head {
max-width: 760px;
margin-bottom: 56px;
}
.trades-head .eyebrow { margin-bottom: 16px; }
.trades-head h2 {
font-family: 'Cormorant Garamond', serif; font-weight: 300;
font-size: clamp(32px, 4vw, 48px);
line-height: 1.1; letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 22px;
}
.trades-head h2 em { font-style: italic; color: var(--gold); }
.trades-head p {
font-family: 'Inter', sans-serif; font-weight: 300;
font-size: 16px; line-height: 1.7;
color: var(--text-secondary);
max-width: 64ch;
}
.trades-head p strong { color: var(--text); font-weight: 500; }
.trades-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 64px;
align-items: flex-start;
}
.trades-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 32px;
}
.trades-list .trade {
padding: 22px 0;
border-bottom: 1px solid var(--line);
}
.trades-list .trade .trade-name {
font-family: 'Cormorant Garamond', serif;
font-weight: 400; font-style: italic;
font-size: 22px;
color: var(--gold);
margin-bottom: 6px;
letter-spacing: -0.005em;
}
.trades-list .trade .trade-detail {
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.55;
color: var(--text-secondary);
}
.trades-stats {
border-left: 1px solid var(--line);
padding-left: 36px;
}
.trades-stats .stat-row {
padding: 18px 0;
border-bottom: 1px solid var(--line);
}
.trades-stats .stat-row:first-child { padding-top: 0; }
.trades-stats .stat-row:last-child { border-bottom: none; }
.trades-stats .stat-label {
font-family: 'Inter', sans-serif;
font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 8px;
}
.trades-stats .stat-value {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: 28px;
color: var(--gold);
letter-spacing: -0.01em;
line-height: 1.1;
margin-bottom: 6px;
}
.trades-stats .stat-detail {
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.55;
color: var(--text-secondary);
}
@media (max-width: 920px) {
.trades-grid { grid-template-columns: 1fr; gap: 40px; }
.trades-list { grid-template-columns: 1fr; }
.trades-stats { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 24px; }
}
/* Closing note: "And beyond the trades" — quieter than head, signals breadth */
.trades-beyond {
margin-top: 64px;
padding-top: 40px;
border-top: 1px solid var(--line);
max-width: 760px;
}
.trades-beyond .eyebrow { margin-bottom: 16px; }
.trades-beyond p {
font-family: 'Inter', sans-serif; font-weight: 300;
font-size: 15px; line-height: 1.7;
color: var(--text-secondary);
}
.trades-beyond p strong { color: var(--text); font-weight: 500; }
/* ============================ HUMAN vs AI COMPARISON VIZ — v62 ============================
Four-metric horizontal grouped bar chart. Same editorial restraint.
============================================================================== */
.viz-vs-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
.viz-vs-row {
display: grid;
grid-template-columns: 200px 1fr;
gap: 32px;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid var(--line);
}
.viz-vs-row:last-child { border-bottom: none; }
.viz-vs-row .metric-label {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
}
.viz-vs-bars {
display: flex;
flex-direction: column;
gap: 10px;
}
.viz-vs-bar-row {
display: grid;
grid-template-columns: 100px 1fr 200px;
gap: 18px;
align-items: center;
}
.viz-vs-bar-row .bar-who {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--text-secondary);
text-align: right;
}
.viz-vs-bar-row.ai .bar-who { color: var(--gold); }
.viz-vs-bar-track {
height: 18px;
background: transparent;
position: relative;
}
.viz-vs-bar-fill {
height: 100%;
background: var(--gold);
}
.viz-vs-bar-row.human .viz-vs-bar-fill {
background: transparent;
border-top: 1px dashed var(--line-bright);
border-bottom: 1px dashed var(--line-bright);
border-right: 1px solid var(--line-bright);
}
.viz-vs-bar-row .bar-value {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: 18px;
color: var(--text);
line-height: 1.2;
}
.viz-vs-bar-row.ai .bar-value { color: var(--gold); }
.viz-vs-bar-row.human .bar-value {
font-family: 'Inter', sans-serif;
font-style: normal;
font-size: 14px;
font-weight: 300;
color: var(--text-secondary);
}
@media (max-width: 760px) {
.viz-vs-row { grid-template-columns: 1fr; gap: 14px; padding: 18px 0; }
.viz-vs-bar-row { grid-template-columns: 60px 1fr 1fr; gap: 12px; }
.viz-vs-bar-row .bar-value { font-size: 14px; }
}
/* CONTENT BOX (used on product pages for callouts) */
.callout-box {
background: var(--navy-2); border: 1px solid var(--line-gold);
padding: 48px; margin: 60px 0;
position: relative;
}
.callout-box::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.callout-box .eyebrow { margin-bottom: 16px; }
.callout-box h3 {
font-family: 'Cormorant Garamond', serif; font-weight: 300;
font-size: clamp(28px, 3vw, 40px); line-height: 1.15; letter-spacing: -0.02em;
color: var(--text); margin-bottom: 20px;
}
.callout-box h3 em { font-style: italic; color: var(--gold); }
.callout-box p {
font-size: 16px; line-height: 1.7; color: var(--text-secondary);
margin-bottom: 16px;
}
.callout-box p:last-child { margin-bottom: 0; }
.callout-box p strong { color: var(--text); font-weight: 500; }
/* INTEGRATION ROW (calendar/CRM logos as text) */
.integration-row {
padding: 60px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
background: var(--navy);
}
/* ===== components/longform.css ===== */
/* =========================================================================
Long-form injected-content pages (Sources, Legal docs).
The body HTML is injected as editable page content; these styles render it.
Ported + normalized to tokens.
========================================================================= */
/* ----- Sources ----- */
.sources-page-hero { padding: 64px 0 var(--s-48); }
.sources-page-hero .container { max-width: var(--content-narrow); }
.sources-page-hero .eyebrow { margin-bottom: 16px; }
.sources-page-hero h1 { font-size: clamp(40px, 5.5vw, 72px); margin-bottom: var(--s-24); }
.sources-page-hero h1 em { font-style: italic; color: var(--gold); }
.sources-page-hero .lede { max-width: 64ch; }
.sources-page-body { padding: var(--s-48) 0 var(--section-padding); }
.sources-page-body .container { max-width: var(--content-narrow); }
.sources-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-64); }
.source-block h5 { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-24); padding-bottom: var(--s-16); border-bottom: 1px solid var(--line-gold); }
.source-block ul li { font-size: var(--fs-small); line-height: 1.7; color: var(--text-secondary); padding: var(--s-16) 0 var(--s-16) 18px; position: relative; border-bottom: 1px solid var(--line); }
.source-block ul li:last-child { border-bottom: none; }
.source-block ul li::before { content: '·'; position: absolute; left: 0; top: var(--s-16); color: var(--gold); font-weight: 700; font-size: 18px; }
.source-block ul li strong { color: var(--text); font-weight: 500; }
.source-block ul li em { font-style: italic; color: var(--text-muted); font-size: var(--fs-fine); }
.sources-disclaimer-block { margin-top: var(--s-64); padding: var(--s-48); background: var(--navy-2); border: 1px solid var(--line); border-left: 2px solid var(--gold); }
.sources-disclaimer-block h4 { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-16); }
.sources-disclaimer-block p { font-size: var(--fs-small); line-height: 1.8; color: var(--text-secondary); margin-bottom: var(--s-12); }
.sources-disclaimer-block p:last-child { margin-bottom: 0; }
.sources-disclaimer-block p strong { color: var(--text); }
@media (max-width: 760px) {
.sources-disclaimer-block { padding: var(--s-32) var(--s-24); }
}
/* ----- Sources · v175 stat strip ----- */
.sources-stat-strip { padding: 64px 0; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(200, 169, 107, 0.03) 0%, rgba(10, 22, 40, 0) 100%); }
.sources-stat-strip .container { max-width: var(--content-wide); }
.sources-stat-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); background: rgba(10, 22, 40, 0.6); }
.sources-stat-strip-card { padding: 36px 28px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.sources-stat-strip-card:last-child { border-right: none; }
.sources-stat-strip-num { font-family: var(--font-display); font-size: 56px; font-weight: 400; font-style: italic; color: var(--gold); line-height: 1; letter-spacing: -0.02em; }
.sources-stat-strip-num .pct { font-size: 0.5em; font-style: normal; margin-left: 2px; color: var(--gold); opacity: 0.7; }
.sources-stat-strip-label { font-family: var(--font-body); font-size: var(--fs-fine); color: var(--text); line-height: 1.5; }
.sources-stat-strip-label em { font-style: italic; color: var(--gold); }
.sources-stat-strip-source { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-top: auto; padding-top: 8px; }
@media (max-width: 1100px) {
.sources-stat-strip-grid { grid-template-columns: repeat(2, 1fr); }
.sources-stat-strip-card:nth-child(2) { border-right: none; }
.sources-stat-strip-card:nth-child(1), .sources-stat-strip-card:nth-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
.sources-stat-strip-grid { grid-template-columns: 1fr; }
.sources-stat-strip-card { border-right: none; border-bottom: 1px solid var(--line); }
.sources-stat-strip-card:last-child { border-bottom: none; }
.sources-stat-strip-num { font-size: 44px; }
}
/* ----- Sources · v175 inline visualizations ----- */
.sources-viz { margin: 32px 0 8px; padding: 28px 28px 24px; border: 1px solid var(--line); background: rgba(200, 169, 107, 0.04); border-radius: 3px; }
.sources-viz-eyebrow { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.20em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.sources-viz-title { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--text); margin: 0 0 24px; line-height: 1.25; letter-spacing: -0.01em; }
.sources-viz-title em { font-style: italic; color: var(--gold); }
.sources-viz-chart { display: flex; flex-direction: column; gap: 10px; }
.sources-viz-bar-row { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 14px; }
.sources-viz-bar-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-secondary); text-align: right; }
.sources-viz-bar-track { background: rgba(10, 22, 40, 0.6); border: 1px solid rgba(200, 169, 107, 0.08); height: 28px; position: relative; overflow: hidden; }
.sources-viz-bar { height: 100%; background: linear-gradient(90deg, var(--gold), rgba(200, 169, 107, 0.6)); display: flex; align-items: center; padding-left: 12px; transition: width 0.6s ease; }
.sources-viz-bar-dim { background: linear-gradient(90deg, rgba(200, 169, 107, 0.35), rgba(200, 169, 107, 0.15)); }
.sources-viz-bar-val { font-family: var(--font-body); font-size: 11px; font-weight: 500; color: var(--navy); white-space: nowrap; letter-spacing: 0.02em; }
.sources-viz-bar-dim .sources-viz-bar-val { color: var(--text); }
.sources-viz-caption { font-family: var(--font-body); font-size: 12px; color: var(--text-muted); line-height: 1.6; margin: 20px 0 0; font-style: italic; }
.sources-viz-vbar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: end; padding: 12px 0; }
.sources-viz-vbar-col { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sources-viz-vbar-val { font-family: var(--font-display); font-size: 36px; font-weight: 400; font-style: italic; color: var(--gold); line-height: 1; }
.sources-viz-vbar-val .pct { font-size: 0.45em; font-style: normal; margin-left: 2px; opacity: 0.7; }
.sources-viz-vbar-track { width: 80%; height: 160px; background: rgba(10, 22, 40, 0.6); border: 1px solid rgba(200, 169, 107, 0.08); display: flex; align-items: flex-end; position: relative; }
.sources-viz-vbar { width: 100%; background: linear-gradient(180deg, var(--gold), rgba(200, 169, 107, 0.5)); transition: height 0.6s ease; }
.sources-viz-vbar-projected { background: repeating-linear-gradient(-45deg, var(--gold), var(--gold) 4px, rgba(200, 169, 107, 0.5) 4px, rgba(200, 169, 107, 0.5) 8px); }
.sources-viz-vbar-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); text-align: center; line-height: 1.4; }
.sources-viz-vbar-col-projected .sources-viz-vbar-label { color: var(--gold); opacity: 0.85; }
@media (max-width: 600px) {
.sources-viz { padding: 22px 18px 18px; }
.sources-viz-bar-row { grid-template-columns: 56px 1fr; gap: 10px; }
.sources-viz-bar-label { font-size: 9px; }
.sources-viz-vbar-track { height: 120px; }
.sources-viz-vbar-val { font-size: 28px; }
}
/* ----- Sources · v175 methodology callout ----- */
.sources-methodology-section { padding: 56px 0 96px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(10, 22, 40, 0) 0%, rgba(200, 169, 107, 0.04) 100%); }
.sources-methodology-section .container { max-width: var(--content-wide); }
.sources-method-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.sources-method-h2 { font-family: var(--font-display); font-size: 42px; font-weight: 400; color: var(--text); margin: 0 0 16px; line-height: 1.1; letter-spacing: -0.01em; }
.sources-method-intro { font-family: var(--font-body); font-size: 15px; color: var(--text-secondary); line-height: 1.7; max-width: 760px; margin: 0 0 40px; }
.sources-method-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.sources-method-card { padding: 24px 22px; border: 1px solid var(--line); background: rgba(10, 22, 40, 0.5); display: flex; flex-direction: column; gap: 10px; }
.sources-method-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--gold); }
.sources-method-card h4 { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--text); margin: 0; line-height: 1.2; }
.sources-method-card p { font-family: var(--font-body); font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin: 0; }
@media (max-width: 1100px) { .sources-method-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .sources-method-grid { grid-template-columns: 1fr; } .sources-method-h2 { font-size: 32px; } }
/* ===== components/legal.css ===== */
/* Legal documents (injected content) — extracted from v63 and normalized
(mono->Inter, prototype color vars->standardized tokens, sub-14px->14px). */
.legal-draft-banner {
background: rgba(200, 169, 107, 0.08);
border-bottom: 1px solid var(--gold);
padding: 18px 0;
text-align: center;
}
.legal-draft-banner-inner {
max-width: 880px; margin: 0 auto; padding: 0 24px;
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
line-height: 1.6;
}
.legal-draft-banner-inner strong { color: var(--text); }
/* DOCUMENT METADATA HEADER */
.legal-meta-header {
padding: 36px 0 24px;
border-bottom: 1px solid var(--line);
}
.legal-meta-grid {
max-width: 880px; margin: 0 auto; padding: 0 24px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px 64px;
}
.legal-meta-block {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.12em;
}
.legal-meta-label {
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 6px;
letter-spacing: 0.2em;
}
.legal-meta-value {
color: var(--text);
line-height: 1.5;
}
/* DOCUMENT TITLE */
.legal-title-section {
padding: 36px 0 28px;
text-align: center;
}
.legal-title-inner {
max-width: 880px; margin: 0 auto; padding: 0 24px;
}
.legal-title-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: var(--s-16);
}
.legal-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: clamp(32px, 4vw, 44px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 18px;
}
.legal-title em { font-style: italic; color: var(--gold); font-weight: 400; }
.legal-subtitle {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 300;
font-size: clamp(16px, 1.4vw, 19px);
color: var(--text-secondary);
line-height: 1.5;
max-width: 620px;
margin: 0 auto;
}
/* MAIN DOCUMENT BODY — single column, serif, readable */
.legal-body {
padding: 28px 0 56px;
}
.legal-body-inner {
max-width: 760px;
margin: 0 auto;
padding: 0 24px;
}
/* TABLE OF CONTENTS */
.legal-toc {
background: var(--navy-2);
border: 1px solid var(--line);
padding: 24px 28px;
margin-bottom: 36px;
}
.legal-toc-title {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 20px;
}
.legal-toc ol {
list-style: none;
counter-reset: legal-toc-counter;
padding: 0; margin: 0;
}
.legal-toc ol li {
counter-increment: legal-toc-counter;
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.6;
padding: 6px 0 6px 36px;
position: relative;
color: var(--text-secondary);
border-bottom: 1px solid transparent;
transition: color 0.2s;
}
.legal-toc ol li::before {
content: counter(legal-toc-counter, decimal-leading-zero) ".";
position: absolute; left: 0;
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--gold);
letter-spacing: 0.08em;
top: 8px;
}
.legal-toc ol li a {
color: inherit;
text-decoration: none;
cursor: pointer;
}
.legal-toc ol li:hover { color: var(--text); }
/* SECTION HEADINGS */
.legal-section {
margin-bottom: 36px;
counter-increment: legal-section-counter;
scroll-margin-top: 100px;
}
.legal-body-inner { counter-reset: legal-section-counter; }
.legal-section-number {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 12px;
}
/* Section title is an
; override the generic .legal-body-inner h2 top
margin (48px) so the number→title gap stays tight (12px from the number). */
.legal-section-title,
.legal-body-inner h2.legal-section-title {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: clamp(22px, 2.2vw, 28px);
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--text);
margin-top: 0;
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.legal-section-title em { font-style: italic; color: var(--gold); }
/* SUBSECTION HEADINGS */
.legal-subsection {
margin-bottom: 22px;
}
.legal-subsection-title {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 16px;
letter-spacing: 0.005em;
color: var(--text);
margin-bottom: 14px;
display: flex;
align-items: baseline;
gap: 10px;
}
.legal-subsection-title .num {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--gold);
font-weight: 400;
flex-shrink: 0;
}
/* New for v61: section subtitle (used in Privacy + AUP for sub-section headings like "2.1 Information you provide directly") */
.legal-section-subtitle {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 16px;
letter-spacing: 0.005em;
color: var(--text);
margin: 28px 0 14px 0;
line-height: 1.4;
}
/* Legal list — used for the many "ul" lists inside legal sections */
.legal-list {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
}
.legal-list li {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 15px;
line-height: 1.7;
color: var(--text-secondary);
padding: 6px 0 6px 20px;
position: relative;
}
.legal-list li::before {
content: '—';
position: absolute;
left: 0;
color: var(--gold);
font-weight: 400;
}
.legal-list li strong {
color: var(--text);
font-weight: 600;
}
/* Contact block (Privacy Policy Section 15) */
.legal-contact-block {
margin: 24px 0;
padding: 24px 28px;
border: 1px solid var(--line);
background: rgba(200, 169, 107, 0.03);
}
.legal-contact-block p {
margin-bottom: 6px;
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--text-secondary);
}
.legal-contact-block p strong { color: var(--text); font-weight: 500; }
.legal-contact-block a {
color: var(--gold);
text-decoration: none;
border-bottom: 1px solid rgba(200, 169, 107, 0.3);
}
.legal-contact-block a:hover { border-bottom-color: var(--gold); }
/* Closing block at end of legal documents */
.legal-closing {
margin: 64px 0 32px;
padding: 36px;
border-top: 1px solid var(--gold);
border-bottom: 1px solid var(--gold);
text-align: center;
}
.legal-closing p {
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.7;
color: var(--text-secondary);
margin-bottom: 12px;
}
.legal-closing p:last-child { margin-bottom: 0; }
.legal-closing p strong {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 20px;
color: var(--gold);
display: block;
margin-bottom: 8px;
letter-spacing: -0.01em;
}
.legal-closing a {
color: var(--gold);
text-decoration: none;
border-bottom: 1px solid rgba(200, 169, 107, 0.3);
}
.legal-closing a:hover { border-bottom-color: var(--gold); }
/* Style for links inside legal body paragraphs */
.legal-body p a,
.legal-body li a {
color: var(--gold);
text-decoration: none;
border-bottom: 1px solid rgba(200, 169, 107, 0.3);
transition: border-color 0.2s;
}
.legal-body p a:hover,
.legal-body li a:hover {
border-bottom-color: var(--gold);
}
/* BODY PARAGRAPHS — set in a slightly smaller serif body for readability */
.legal-body-inner p {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 15px;
line-height: 1.75;
color: var(--text-secondary);
margin-bottom: 16px;
}
.legal-body-inner p strong {
color: var(--text);
font-weight: 500;
}
.legal-body-inner p em {
font-style: italic;
color: var(--text);
}
/* LISTS WITHIN BODY */
.legal-body-inner ul,
.legal-body-inner ol {
margin: 12px 0 20px 0;
padding-left: 0;
list-style: none;
}
.legal-body-inner ul li,
.legal-body-inner ol li {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 15px;
line-height: 1.7;
color: var(--text-secondary);
padding: 6px 0 6px 24px;
position: relative;
}
.legal-body-inner ul li::before {
content: '—';
position: absolute;
left: 0;
color: var(--gold);
}
.legal-body-inner ol {
counter-reset: legal-list-counter;
}
.legal-body-inner ol li {
counter-increment: legal-list-counter;
}
.legal-body-inner ol li::before {
content: '(' counter(legal-list-counter, lower-alpha) ')';
position: absolute;
left: 0;
color: var(--gold);
font-family: 'Inter', sans-serif;
font-size: 14px;
top: 9px;
letter-spacing: 0.05em;
}
/* DEFINED TERMS */
.legal-defined-term {
color: var(--text);
font-weight: 500;
font-style: normal;
}
/* CALLOUT BOX — used to flag critical sections */
.legal-callout {
background: rgba(200, 169, 107, 0.04);
border-left: 2px solid var(--gold);
padding: 20px 24px;
margin: 20px 0;
}
.legal-callout-label {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 10px;
}
.legal-callout p {
margin-bottom: 0;
}
/* Strategic flag callouts — for the v1.1 stack's ⚑ asset/disclosure/controller-switch flags */
.legal-asset-flag {
background: rgba(200, 169, 107, 0.07);
border: 1px solid var(--line-gold);
padding: 20px 24px;
margin: 22px 0;
position: relative;
}
.legal-asset-flag::before {
content: '⚑';
position: absolute;
top: 18px;
left: 26px;
color: var(--gold);
font-size: 16px;
font-family: 'Inter', sans-serif;
}
.legal-asset-flag-label {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin: 0 0 10px 28px;
font-weight: 500;
}
.legal-asset-flag p {
margin: 0 0 0 28px;
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.7;
color: var(--text-secondary);
}
.legal-asset-flag p strong { color: var(--text); font-weight: 600; }
.legal-asset-flag p em { color: var(--gold); font-style: italic; }
@media (max-width: 600px) {
.legal-asset-flag::before { position: static; display: block; margin-bottom: 8px; }
.legal-asset-flag-label { margin-left: 0; }
.legal-asset-flag p { margin-left: 0; }
}
/* SIGNATURE BLOCK */
.legal-signature-block {
margin-top: 72px;
padding-top: 48px;
border-top: 1px solid var(--line);
}
.legal-signature-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
}
.legal-signature-col h4 {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 20px;
}
.legal-signature-line {
border-bottom: 1px solid var(--text-muted);
height: 56px;
margin-bottom: 8px;
}
.legal-signature-line.short {
height: 28px;
}
.legal-signature-label {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 24px;
}
/* DOCUMENT FOOTER — citations, version, contact */
.legal-doc-footer {
margin-top: 64px;
padding-top: 32px;
border-top: 1px solid var(--line);
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.12em;
color: var(--text-muted);
line-height: 1.7;
}
.legal-doc-footer strong {
color: var(--text);
}
/* MOBILE */
@media (max-width: 760px) {
.legal-meta-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.legal-toc { padding: 24px 22px; }
.legal-signature-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.legal-section { margin-bottom: 40px; }
}
/* Editable WYSIWYG legal body (ACF) — prose styling */
.legal-body-inner .legal-updated { font-family: var(--font-body); font-size: var(--fs-fine); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin-bottom: var(--s-32); padding-bottom: var(--s-16); border-bottom: 1px solid var(--line); }
.legal-body-inner > * + * { margin-top: var(--s-16); }
.legal-body-inner h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-title-md); letter-spacing: -0.015em; color: var(--text); margin-top: var(--s-48); }
.legal-body-inner h3 { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--text); margin-top: var(--s-32); }
.legal-body-inner p { font-size: var(--fs-small); line-height: 1.8; color: var(--text-secondary); }
.legal-body-inner ul, .legal-body-inner ol { margin-left: var(--s-24); }
.legal-body-inner li { font-size: var(--fs-small); line-height: 1.7; color: var(--text-secondary); padding: 6px 0; list-style: disc; }
.legal-body-inner strong { color: var(--text); font-weight: 500; }
.legal-body-inner a { color: var(--gold); border-bottom: 1px solid var(--line-gold); }
/* ===== components/insights.css ===== */
/* =========================================================================
Insights page (injected content) — manifesto, disruption, big stats,
projection, FAQ accordion. Ported + normalized to tokens.
========================================================================= */
.insights-manifesto { padding: var(--section-padding) 0 var(--s-48); background: var(--navy); }
.manifesto-block { max-width: var(--content-narrow); margin: 0 auto; }
.manifesto-block p { font-family: var(--font-display); font-weight: 300; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.45; color: var(--text); margin-bottom: var(--s-32); letter-spacing: -0.01em; }
.manifesto-block p em { font-style: italic; color: var(--gold); }
.manifesto-block p strong { font-weight: 500; color: var(--text); }
.disrupt-section { padding: var(--section-padding) 0; background: var(--navy-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.disrupt-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.disrupt-col { padding: var(--s-48); }
.disrupt-col.old { background: var(--navy); }
.disrupt-col.new { background: rgba(200, 169, 107, 0.04); border-left: 1px solid var(--line-gold); }
.disrupt-col h4 { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: var(--s-16); color: var(--text-muted); }
.disrupt-col.new h4 { color: var(--gold); }
.disrupt-col h3 { font-family: var(--font-display); font-weight: 400; font-size: 32px; letter-spacing: -0.02em; margin-bottom: var(--s-32); color: var(--text); line-height: 1.15; }
.disrupt-col h3 em { font-style: italic; color: var(--gold); }
.disrupt-col ul li { font-size: var(--fs-small); line-height: 1.65; color: var(--text-secondary); padding: 14px 0 14px 24px; border-bottom: 1px solid var(--line); position: relative; }
.disrupt-col ul li:last-child { border-bottom: none; }
.disrupt-col ul li::before { content: ''; position: absolute; left: 0; top: 22px; width: 14px; height: 1px; background: var(--text-muted); }
.disrupt-col.new ul li::before { background: var(--gold); }
.disrupt-col ul li strong { color: var(--text); font-weight: 500; }
.big-stats-section { padding: var(--section-padding) 0; }
.big-stats-head { text-align: center; max-width: 780px; margin: 0 auto var(--s-80); }
.big-stats-head .eyebrow { justify-content: center; }
.big-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.big-stat { padding: var(--s-48) var(--s-32); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s-12); }
.big-stat .n { font-family: var(--font-display); font-size: 72px; font-weight: 300; letter-spacing: -0.035em; line-height: 1; color: var(--gold); }
.big-stat .n .pct { font-size: 44px; vertical-align: super; line-height: 1; }
.big-stat .n .x { font-size: 56px; }
.big-stat .label { font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.55; color: var(--text-secondary); margin-top: var(--s-8); }
.big-stat .label strong { color: var(--text); font-weight: 500; }
.big-stat .source { font-family: var(--font-body); font-size: var(--fs-fine); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin-top: auto; padding-top: var(--s-16); }
.projection-section { padding: var(--section-padding) 0; background: var(--navy-2); border-top: 1px solid var(--line); }
.projection-head { text-align: center; max-width: 800px; margin: 0 auto var(--s-64); }
.projection-head .eyebrow { justify-content: center; }
.projection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.projection-card { background: var(--navy); padding: var(--s-32); display: flex; flex-direction: column; }
.projection-card .label { font-family: var(--font-body); font-size: var(--fs-fine); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-32); }
.projection-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: -0.015em; line-height: 1.2; color: var(--text); margin-bottom: var(--s-16); }
.projection-card h3 em { font-style: italic; color: var(--gold); }
.projection-card p { font-size: var(--fs-small); line-height: 1.7; color: var(--text-secondary); }
.faq-section { padding: var(--section-padding) 0; }
.faq-head { text-align: center; max-width: 800px; margin: 0 auto var(--s-64); }
.faq-head .eyebrow { justify-content: center; }
.faq-list { max-width: var(--content-narrow); margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { padding: var(--s-32) 0 var(--s-32) var(--s-32); list-style: none; cursor: pointer; position: relative; font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; letter-spacing: -0.01em; color: var(--text); transition: color 0.25s; }
.faq-item summary:hover { color: var(--gold); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: '+'; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-weight: 200; font-size: 32px; color: var(--gold); transition: transform 0.25s; }
.faq-item[open] summary::before { transform: translateY(-50%) rotate(45deg); }
.faq-item summary em { font-style: italic; color: var(--gold); }
.faq-answer { padding: 0 0 var(--s-32) var(--s-32); font-size: var(--fs-small); line-height: 1.75; color: var(--text-secondary); }
.faq-answer p { margin-bottom: var(--s-16); }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer strong { color: var(--text); font-weight: 500; }
.faq-answer em { font-style: italic; color: var(--gold); }
@media (max-width: 960px) {
.disrupt-grid, .big-stats-grid, .projection-grid { grid-template-columns: 1fr; }
}
/* ===== components/engagement.css ===== */
/* Pricing engagement tiers + bundles + terms — extracted from v63 + normalized (mono->Inter, color vars->tokens, sub-14px->14px). */
/* ============================ PUBLIC PRICING PAGE ============================ */
.engagement-service-block {
padding: 100px 0;
background: var(--navy);
}
.engagement-service-block.alt {
background: var(--navy-2);
}
.engagement-service-head {
max-width: 880px;
margin: 0 auto 64px;
text-align: center;
}
.engagement-tier-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1320px;
margin: 0 auto;
}
/* 4-up variant for role-based AI Agents pricing */
.engagement-tier-row.engagement-tier-row-4 {
grid-template-columns: repeat(4, 1fr);
max-width: 1500px;
gap: 18px;
}
@media (max-width: 1200px) {
.engagement-tier-row.engagement-tier-row-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.engagement-tier-row.engagement-tier-row-4 { grid-template-columns: 1fr; }
}
.engagement-tier-row-4 .engagement-tier {
padding: 40px 24px;
}
.engagement-tier-row-4 .engagement-tier-price {
font-size: 48px;
}
.engagement-tier {
background: var(--navy);
border: 1px solid var(--line);
padding: 48px 36px;
display: flex;
flex-direction: column;
position: relative;
transition: border-color 0.3s;
}
.engagement-service-block.alt .engagement-tier {
background: var(--navy);
}
.engagement-tier:hover {
border-color: var(--line-bright);
}
.engagement-tier.featured {
background: rgba(200, 169, 107, 0.04);
border-color: var(--line-gold);
}
.engagement-featured-badge {
position: absolute;
top: -1px; left: -1px; right: -1px;
background: var(--gold);
color: var(--navy);
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
padding: 8px 12px;
text-align: center;
}
.engagement-tier.featured > .engagement-tier-label {
margin-top: 0;
}
.engagement-tier-service {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--line);
}
.engagement-tier.featured > .engagement-tier-service {
margin-top: 24px;
}
.engagement-tier-label {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 28px;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 8px;
}
.engagement-tier-price {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 56px;
letter-spacing: -0.025em;
color: var(--text);
line-height: 1;
margin-bottom: 6px;
}
.engagement-tier-price .per-mo {
font-size: 16px;
color: var(--text-muted);
letter-spacing: 0.05em;
font-weight: 400;
margin-left: 4px;
}
.engagement-tier-tagline {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 32px;
line-height: 1.4;
}
.engagement-section-title {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text-muted);
margin: 24px 0 10px;
padding-top: 20px;
border-top: 1px solid var(--line);
}
.engagement-tier > .engagement-section-title:first-of-type {
margin-top: 0;
}
.engagement-tier p {
font-size: 14px;
line-height: 1.65;
color: var(--text-secondary);
margin-bottom: 0;
}
.engagement-includes {
list-style: none;
margin: 8px 0 0;
padding: 0;
}
.engagement-includes li {
font-size: 14px;
line-height: 1.6;
color: var(--text);
padding: 6px 0 6px 18px;
position: relative;
}
.engagement-includes li::before {
content: '—';
position: absolute;
left: 0;
color: var(--gold);
}
.engagement-includes li strong {
color: var(--text);
font-weight: 500;
}
.engagement-tier .btn-tier {
margin-top: 32px;
align-self: stretch;
text-align: center;
}
/* QUIZ CTA — sits between services and bundle section */
.engagement-quiz-cta {
padding: 64px 0;
}
.engagement-quiz-cta-inner {
max-width: 880px;
margin: 0 auto;
padding: 0 32px;
}
.engagement-quiz-cta-card {
background: rgba(200, 169, 107, 0.04);
border: 1px solid var(--gold);
padding: 40px 48px;
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: center;
position: relative;
}
.engagement-quiz-cta-card::before {
content: 'A QUIETER PATH';
position: absolute;
top: -10px;
left: 32px;
background: var(--navy);
padding: 0 12px;
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
color: var(--gold);
}
.engagement-quiz-cta-card--comparison::before {
content: 'CONTEXT';
}
.engagement-quiz-cta-content h3 {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: clamp(22px, 2.4vw, 28px);
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--text);
margin: 0 0 10px 0;
}
.engagement-quiz-cta-content h3 em { font-style: italic; color: var(--gold); }
.engagement-quiz-cta-content p {
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 14px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
}
.engagement-quiz-cta-btn {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.18em;
text-transform: uppercase;
background: var(--gold);
color: var(--navy);
border: none;
padding: 16px 28px;
cursor: pointer;
font-weight: 600;
white-space: nowrap;
transition: background 0.2s, transform 0.2s;
}
.engagement-quiz-cta-btn:hover {
background: #d4b478;
transform: translateX(2px);
}
.engagement-quiz-cta-btn .arrow {
margin-left: 8px;
display: inline-block;
transition: transform 0.2s;
}
.engagement-quiz-cta-btn:hover .arrow {
transform: translateX(3px);
}
@media (max-width: 720px) {
.engagement-quiz-cta-card {
grid-template-columns: 1fr;
gap: 24px;
padding: 32px 28px;
text-align: left;
}
.engagement-quiz-cta-card::before { left: 20px; }
.engagement-quiz-cta-btn { width: 100%; text-align: center; }
}
/* BUNDLE SECTION */
.engagement-bundle-section {
padding: 100px 0;
background: var(--navy-2);
}
/* Sales Force enterprise callout — sits below the three-bundle grid */
.engagement-bundle-enterprise {
max-width: 1320px;
margin: 48px auto 0;
padding: 0;
}
.engagement-bundle-enterprise-inner {
background: var(--navy);
border: 1px solid var(--line-gold);
padding: 48px 56px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.engagement-bundle-enterprise-eyebrow {
font-family: 'Inter', sans-serif;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--gold);
}
.engagement-bundle-enterprise-heading {
font-family: 'Cormorant Garamond', serif;
font-size: 30px;
font-weight: 400;
line-height: 1.25;
color: var(--text);
}
.engagement-bundle-enterprise-heading em {
font-style: italic;
color: var(--gold);
}
.engagement-bundle-enterprise p {
font-size: 14px;
line-height: 1.7;
color: var(--text-secondary);
max-width: 920px;
}
.engagement-bundle-enterprise .btn-tier {
margin-top: 8px;
}
@media (max-width: 720px) {
.engagement-bundle-enterprise-inner { padding: 36px 24px; }
.engagement-bundle-enterprise-heading { font-size: 24px; }
}
.engagement-bundle-head {
max-width: 880px;
margin: 0 auto 64px;
text-align: center;
}
.engagement-bundle-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1320px;
margin: 0 auto;
}
.engagement-bundle-card {
background: var(--navy);
border: 1px solid var(--line);
padding: 48px 36px;
display: flex;
flex-direction: column;
position: relative;
}
.engagement-bundle-card.featured {
background: rgba(200, 169, 107, 0.04);
border-color: var(--line-gold);
}
.engagement-bundle-card.featured > .engagement-bundle-tier {
margin-top: 24px;
}
.engagement-bundle-tier {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 18px;
}
.engagement-bundle-h3 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 36px;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--text);
margin-bottom: 18px;
}
.engagement-bundle-h3 em {
font-style: italic;
color: var(--gold);
}
.engagement-bundle-card > p {
font-size: 14px;
line-height: 1.65;
color: var(--text-secondary);
margin-bottom: 28px;
}
.engagement-bundle-components {
list-style: none;
padding: 24px 0;
margin: 0 0 28px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.engagement-bundle-components li {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text);
padding: 6px 0 6px 22px;
position: relative;
line-height: 1.5;
}
.engagement-bundle-components li::before {
content: '+';
position: absolute;
left: 0; top: 4px;
font-family: 'Inter', sans-serif;
font-weight: 300;
font-size: 18px;
color: var(--gold);
line-height: 1;
}
.engagement-bundle-pricebox {
margin-bottom: 32px;
}
.engagement-bundle-pricebox .strike {
font-family: 'Inter', sans-serif;
font-size: 14px;
color: var(--text-muted);
text-decoration: line-through;
letter-spacing: 0.08em;
margin-bottom: 8px;
}
.engagement-bundle-price {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 56px;
letter-spacing: -0.025em;
line-height: 1;
color: var(--text);
margin-bottom: 8px;
}
.engagement-bundle-period {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 12px;
}
.engagement-bundle-savings {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--gold);
padding: 8px 12px;
border: 1px solid var(--gold);
display: inline-block;
}
.engagement-bundle-card .btn-tier {
margin-top: auto;
align-self: stretch;
text-align: center;
}
.engagement-bundle-note {
max-width: 880px;
margin: 48px auto 0;
padding: 32px;
border: 1px solid var(--line-gold);
background: rgba(200, 169, 107, 0.04);
}
.engagement-bundle-note p {
font-size: 14px;
line-height: 1.65;
color: var(--text-secondary);
}
.engagement-bundle-note strong {
color: var(--text);
}
/* ENGAGEMENT TERMS */
.engagement-terms-section {
padding: 100px 0;
background: var(--navy);
}
.engagement-terms-head {
max-width: 880px;
margin: 0 auto 64px;
text-align: center;
}
.engagement-terms-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
max-width: 1180px;
margin: 0 auto;
}
.engagement-terms-card {
background: var(--navy-2);
border: 1px solid var(--line);
padding: 40px 36px;
}
.engagement-terms-card .num {
font-family: 'Inter', sans-serif;
font-size: 14px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 16px;
}
.engagement-terms-card h3 {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 26px;
letter-spacing: -0.015em;
color: var(--text);
margin-bottom: 16px;
line-height: 1.2;
}
.engagement-terms-card p {
font-size: 14px;
line-height: 1.7;
color: var(--text-secondary);
}
.engagement-terms-card strong {
color: var(--text);
}
/* MOBILE/TABLET RESPONSIVE */
@media (max-width: 960px) {
.engagement-tier-row {
grid-template-columns: 1fr;
gap: 32px;
}
.engagement-bundle-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.engagement-terms-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.engagement-service-block {
padding: 64px 0;
}
.engagement-bundle-section,
.engagement-terms-section {
padding: 64px 0;
}
}
@media (max-width: 760px) {
.engagement-tier-price,
.engagement-bundle-price {
font-size: 48px;
}
.engagement-tier,
.engagement-bundle-card {
padding: 36px 24px;
}
.engagement-bundle-h3 {
font-size: 30px;
}
}
/* Force 2-up to stack cleanly on mobile (reserved for future use) */
@media (max-width: 760px) {
.engagement-service-block .engagement-tier-row[style*="1fr 1fr"] {
grid-template-columns: 1fr !important;
}
}
/* ===== components/pricing-compare.css ===== */
/* =========================================================================
v175 pricing + compare — bespoke sections the generic blocks don't cover:
the "What are you here for?" path navigator, the "Pricing at a glance" cards,
the onboarding-fee table, and the full /compare matrices + sticky jump nav.
Ported from the prototype; palette/font names aliased to the theme tokens.
========================================================================= */
.pricing-paths-section,
.price-glance-section,
.onboarding-section,
.compare-jumpnav,
.compare-section {
--white: var(--text);
--white-soft: var(--text-secondary);
--white-faint: var(--text-muted);
--white-dim: var(--text-muted);
--gold-soft: rgba(200, 169, 107, 0.55);
--line-bright: rgba(248, 247, 244, 0.22);
--font-serif: var(--font-display);
}
/* ---- "What are you here for?" path navigator ---------------------------- */
.pricing-paths-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--line); }
.pricing-path-card {
display: flex; flex-direction: column; align-items: flex-start; text-align: left;
padding: 36px 28px 30px; background: var(--navy); border-right: 1px solid var(--line);
cursor: pointer; transition: background 0.3s ease; position: relative; text-decoration: none;
}
.pricing-path-card:last-child { border-right: none; }
.pricing-path-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.pricing-path-card:hover { background: rgba(200, 169, 107, 0.05); }
.pricing-path-card:hover::after { transform: scaleX(1); }
.pricing-path-card-featured { background: rgba(200, 169, 107, 0.06); }
.pricing-path-card-featured::after { transform: scaleX(1); opacity: 0.5; }
.pricing-path-card-featured:hover::after { opacity: 1; }
.pricing-path-head { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 22px; }
.pricing-path-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--gold); }
.pricing-path-icon { width: 38px; height: 38px; color: var(--gold); flex-shrink: 0; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.pricing-path-icon svg { width: 38px; height: 38px; display: block; }
.pricing-path-card:hover .pricing-path-icon { transform: translateY(-3px) scale(1.06); }
.pricing-path-title { font-family: var(--font-display); font-weight: 300; font-size: 26px; line-height: 1.1; letter-spacing: -0.01em; color: var(--white); margin: 0 0 14px; }
.pricing-path-title em { font-style: italic; color: var(--gold); font-weight: 400; }
.pricing-path-desc { font-family: var(--font-body); font-size: 13px; line-height: 1.6; color: var(--white-soft); margin: 0 0 20px; flex-grow: 1; }
.pricing-path-price { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-faint); margin-bottom: 16px; }
.pricing-path-cta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); transition: letter-spacing 0.25s ease; }
.pricing-path-card:hover .pricing-path-cta { letter-spacing: 0.2em; }
.pricing-paths-foot { text-align: center; margin-top: 28px; font-size: 13px; color: var(--white-faint); }
@media (max-width: 980px) {
.pricing-paths-grid { grid-template-columns: 1fr 1fr; }
.pricing-path-card:nth-child(2) { border-right: none; }
.pricing-path-card:nth-child(1), .pricing-path-card:nth-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
.pricing-paths-grid { grid-template-columns: 1fr; }
.pricing-path-card { border-right: none; border-bottom: 1px solid var(--line); }
.pricing-path-card:last-child { border-bottom: none; }
}
/* ---- "Pricing at a glance" ---------------------------------------------- */
.price-glance-section { padding: 72px 0; background: var(--navy); border-top: 1px solid var(--line); }
.price-glance-section .container { max-width: var(--content-wide); }
.price-glance-intro { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.price-glance-intro .lede { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--white-soft); margin-top: 18px; }
.price-glance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 1080px; margin: 0 auto; border: 1px solid var(--line); }
.price-glance-card { padding: 32px 28px; border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.price-glance-card:last-child { border-right: none; }
.price-glance-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--white-faint); margin-bottom: 14px; }
.price-glance-name { font-family: var(--font-display); font-size: 26px; color: var(--white); margin-bottom: 6px; }
.price-glance-name em { font-style: italic; color: var(--gold); }
.price-glance-from { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--gold); margin-bottom: 16px; }
.price-glance-desc { font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: var(--white-soft); margin-bottom: 18px; flex: 1; }
.price-glance-tiers { font-family: var(--font-body); font-size: 12px; line-height: 1.7; color: var(--white-faint); border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 18px; }
.price-glance-tiers strong { color: var(--white-soft); font-weight: 600; }
.price-glance-link { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); background: none; border: none; padding: 0; cursor: pointer; text-align: left; border-bottom: 1px solid var(--line-gold); align-self: flex-start; transition: border-color 0.2s; text-decoration: none; }
.price-glance-link:hover { border-bottom-color: var(--gold); }
.price-glance-bridge { max-width: 1080px; margin: 0 auto; border: 1px solid var(--line-gold); border-top: none; background: rgba(200, 169, 107, 0.05); padding: 26px 32px; text-align: center; }
.price-glance-bridge p { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--white-soft); margin: 0; }
.price-glance-bridge strong { color: var(--white); }
.price-glance-bridge .stacks-from { color: var(--gold); font-weight: 600; }
.price-glance-bridge a { display: inline-block; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); background: var(--gold); border: none; padding: 11px 26px; cursor: pointer; transition: opacity 0.2s; text-decoration: none; }
.price-glance-bridge a:hover { opacity: 0.88; }
/* ---- Onboarding-fee table ---------------------------------------------- */
.onboarding-section { padding: 72px 0; background: var(--navy-2); border-top: 1px solid var(--line); }
.onboarding-wrap { max-width: 880px; margin: 0 auto; }
.onboarding-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); margin-top: 28px; }
.onboarding-table th, .onboarding-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--white-soft); }
.onboarding-table thead th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white-faint); }
.onboarding-table .ob-tier { color: var(--white); }
.onboarding-table .ob-fee { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--gold); text-align: right; white-space: nowrap; }
.onboarding-table .ob-row-stack td { background: rgba(200, 169, 107, 0.05); }
.onboarding-note { font-family: var(--font-body); font-size: 13px; line-height: 1.6; color: var(--white-faint); margin-top: 20px; }
.onboarding-note strong { color: var(--white-soft); }
@media (max-width: 780px) {
.price-glance-grid { grid-template-columns: 1fr; }
.price-glance-card { border-right: none; border-bottom: 1px solid var(--line); }
.price-glance-section, .onboarding-section { padding: 52px 0; }
.onboarding-table th, .onboarding-table td { padding: 11px 12px; font-size: 13px; }
}
/* ---- /compare sticky jump nav + matrices ------------------------------- */
.compare-jumpnav { position: sticky; top: var(--nav-height); z-index: 50; background: rgba(10, 22, 40, 0.92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.compare-jumpnav-inner { max-width: var(--content-wide); margin: 0 auto; padding: 14px 40px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.compare-jumpnav-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white-faint); margin-right: 8px; }
.compare-jumpnav a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white-soft); padding: 8px 16px; border: 1px solid var(--line); background: transparent; cursor: pointer; transition: all 0.25s; text-decoration: none; }
.compare-jumpnav a:hover { color: var(--navy); background: var(--gold); border-color: var(--gold); }
.compare-section { padding: 56px 0; background: var(--navy); border-top: 1px solid var(--line); scroll-margin-top: 130px; }
.compare-section.alt { background: var(--navy-2); }
.compare-head { margin-bottom: 40px; }
.compare-sub { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--white-soft); max-width: 720px; margin-top: 18px; }
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--gold-soft) transparent; }
.compare-scroll::-webkit-scrollbar { height: 6px; }
.compare-scroll::-webkit-scrollbar-thumb { background: var(--gold-soft); border-radius: 3px; }
.compare-matrix { width: 100%; min-width: 760px; border-collapse: collapse; font-family: var(--font-body); }
.compare-matrix.cols-3 { min-width: 640px; }
.compare-matrix th, .compare-matrix td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--white-soft); vertical-align: middle; }
.compare-matrix thead th { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--white); border-bottom: 1px solid var(--line-bright); padding-top: 10px; padding-bottom: 10px; }
.compare-matrix .cmp-feature-col { text-align: left; color: var(--white); font-size: 13px; font-weight: 400; width: 34%; min-width: 220px; }
.compare-matrix thead .cmp-feature-col { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--white-faint); }
.cmp-price-row td { border-bottom: 1px solid var(--line-bright); padding-top: 4px; }
.cmp-price { font-family: var(--font-display); font-style: italic; font-size: 24px; color: var(--gold); }
.cmp-yes { color: var(--gold); font-size: 15px; }
.cmp-no { color: var(--white-dim); }
.cmp-val { color: var(--white-soft); font-size: 12px; line-height: 1.4; }
.cmp-col-featured { background: rgba(200, 169, 107, 0.06); }
.compare-matrix thead th.cmp-col-featured { color: var(--gold); }
.cmp-cta-row td { border-bottom: none; padding-top: 22px; }
.cmp-cta-row .btn-tier { width: auto; padding: 10px 28px; }
.compare-footnote { margin-top: 22px; font-size: 13px; line-height: 1.6; color: var(--white-faint); max-width: 820px; }
.cmp-inline-link { color: var(--gold); cursor: pointer; background: none; border: none; font-family: inherit; font-size: 13px; padding: 0; border-bottom: 1px solid var(--line-gold); transition: border-color 0.2s; text-decoration: none; }
.cmp-inline-link:hover { border-bottom-color: var(--gold); }
@media (max-width: 760px) {
.compare-jumpnav-inner { padding: 12px 20px; gap: 6px; }
.compare-jumpnav a { padding: 7px 12px; font-size: 10px; }
}
/* ---- "What each stack replaces" comparison grid (pricing page) ----------- */
.cmp-row {
display: grid;
grid-template-columns: 200px 1fr 1fr 1fr;
gap: 16px;
padding: 24px 0;
border-bottom: 1px solid var(--line);
}
.cmp-row:last-child { border-bottom: none; }
.cmp-cell {
padding: 16px;
font-family: var(--font-body);
font-weight: 300;
font-size: 15px;
line-height: 1.55;
color: var(--text-secondary);
}
.cmp-cell strong { color: var(--text); font-weight: 500; }
@media (max-width: 780px) {
.cmp-row { grid-template-columns: 1fr; gap: 0; padding: 16px 0; }
.cmp-row-header { display: none; }
.cmp-cell { padding: 10px 0; border-bottom: 1px solid var(--line); }
.cmp-cell:last-child { border-bottom: none; }
}
/* ---- Pricing FAQ accordion (pricing page) ------------------------------- */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
padding: 28px 0 28px 36px;
list-style: none; cursor: pointer; position: relative;
font-family: var(--font-display); font-weight: 400;
font-size: clamp(18px, 2vw, 24px); line-height: 1.3;
letter-spacing: -0.01em; color: var(--text);
transition: color 0.25s;
}
.faq-item summary:hover { color: var(--gold); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; }
.faq-item summary::before {
content: '+'; position: absolute; left: 0; top: 50%;
transform: translateY(-50%);
font-family: var(--font-body); font-weight: 200;
font-size: 28px; color: var(--gold);
transition: transform 0.25s;
}
.faq-item[open] summary::before { transform: translateY(-50%) rotate(45deg); }
.faq-item > p {
padding: 0 0 28px 36px;
font-family: var(--font-body);
font-size: 15px; line-height: 1.75;
color: var(--text-secondary);
margin: 0;
}
/* ===== components/contact.css ===== */
/* Contact page — extracted from v63 + normalized. */
.contact-content { padding: 100px 0 140px; }
.contact-grid {
display: grid; grid-template-columns: 1fr 1.2fr;
gap: 100px; align-items: start;
}
.contact-info-block { padding: 28px 0; border-bottom: 1px solid var(--line); }
.contact-info-block:first-of-type { border-top: 1px solid var(--line); }
.contact-info-block h5 {
font-family: 'Inter', sans-serif; font-size: 14px;
text-transform: uppercase; letter-spacing: 0.22em;
color: var(--gold); margin-bottom: 12px;
}
.contact-info-block p {
font-family: 'Cormorant Garamond', serif;
font-size: 22px; font-weight: 400; font-style: italic;
color: var(--text);
}
.contact-info-block p a { color: var(--text); text-decoration: none; transition: color 0.25s; }
.contact-info-block p a:hover { color: var(--gold); }
.contact-form {
background: var(--navy-2);
border: 1px solid var(--line);
padding: 48px;
}
.form-field { margin-bottom: 32px; }
.form-field label {
display: block; font-family: 'Inter', sans-serif;
font-size: 14px; text-transform: uppercase; letter-spacing: 0.22em;
color: var(--gold); margin-bottom: 12px;
}
.form-field input, .form-field textarea, .form-field select {
width: 100%; padding: 14px 0;
background: transparent; border: none;
border-bottom: 1px solid var(--line); color: var(--text);
font-family: 'Inter', sans-serif; font-size: 15px;
outline: none; transition: border-color 0.25s;
}
.form-field select option,
.form-field select optgroup {
background: var(--navy-2); color: var(--text);
}
.form-field select optgroup {
font-style: italic; color: var(--gold); font-weight: 500;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--gold); }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--text-muted); }
.form-field textarea { resize: vertical; min-height: 100px; }
.form-field select { appearance: none; cursor: pointer; }
.booking-section {
padding: 80px 0 40px;
border-bottom: 1px solid var(--line);
}
.booking-grid {
display: grid; grid-template-columns: 1fr 1.3fr; gap: 64px;
align-items: start;
max-width: 1180px; margin: 0 auto;
}
.booking-text .eyebrow { margin-bottom: 16px; }
.booking-text h2 {
font-family: 'Cormorant Garamond', serif; font-weight: 300;
font-size: clamp(32px, 4vw, 48px); line-height: 1.1;
letter-spacing: -0.025em; color: var(--text); margin-bottom: 24px;
}
.booking-text h2 em { font-style: italic; color: var(--gold); }
.booking-text p {
font-size: 15px; line-height: 1.7; color: var(--text-secondary);
margin-bottom: 14px;
}
.booking-text .platforms {
margin-top: 24px; padding-top: 20px;
border-top: 1px solid var(--line);
display: flex; gap: 20px; flex-wrap: wrap;
}
.booking-text .platforms .platform-pill {
font-family: 'Inter', sans-serif; font-size: 14px;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--gold);
padding: 8px 14px; border: 1px solid var(--gold);
}
.booking-embed {
background: var(--text);
border: 1px solid var(--line-gold);
position: relative;
min-height: 580px;
display: flex; align-items: center; justify-content: center;
}
.booking-embed .corner { border-color: var(--gold); }
.booking-embed iframe {
width: 100%; height: 580px; border: 0; display: block;
}
.booking-embed-fallback {
padding: 60px 40px; text-align: center;
}
.booking-embed-fallback h3 {
font-family: 'Cormorant Garamond', serif; font-weight: 400;
font-size: 28px; line-height: 1.2; color: var(--navy);
margin-bottom: 16px;
}
.booking-embed-fallback p {
font-size: 14px; line-height: 1.6; color: #475569;
margin-bottom: 28px;
}
.booking-embed-fallback .btn-cal {
display: inline-block;
background: var(--navy); color: var(--text);
padding: 16px 32px;
font-family: 'Inter', sans-serif; font-size: 14px;
font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
text-decoration: none;
transition: all 0.25s;
}
.booking-embed-fallback .btn-cal:hover {
background: var(--gold); color: var(--navy);
}
/* ========== Public QR (face-to-face Sofia handoff) — v175 ========== */
.public-qr-section { padding: 68px 0; background: var(--navy-2); border-top: 1px solid var(--line); }
.public-qr-inner {
max-width: 920px; margin: 0 auto; padding: 0 40px;
display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.public-qr-text .eyebrow { margin-bottom: 20px; }
.public-qr-text h2 {
font-family: var(--font-display); font-weight: 300;
font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1;
letter-spacing: -0.025em; color: var(--text); margin-bottom: 20px;
}
.public-qr-text h2 em { font-style: italic; color: var(--gold); }
.public-qr-text p { font-size: var(--fs-small); line-height: 1.7; color: var(--text-secondary); margin-bottom: 14px; }
.public-qr-text p strong { color: var(--text); font-weight: 500; }
.public-qr-text .steps {
margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line);
font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--gold);
}
.public-qr-display { display: flex; flex-direction: column; align-items: center; }
.public-qr-frame {
background: #fff; padding: 22px; border: 1px solid var(--line-gold);
width: 100%; max-width: 280px; aspect-ratio: 1;
display: flex; align-items: center; justify-content: center;
position: relative; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.public-qr-frame .corner { position: absolute; width: 18px; height: 18px; border-color: var(--gold); z-index: 2; }
.public-qr-frame .corner.tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.public-qr-frame .corner.tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
.public-qr-frame .corner.bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
.public-qr-frame .corner.br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
.public-qr-frame #publicContactQr { width: 100%; height: 100%; }
.public-qr-frame #publicContactQr img { width: 100% !important; height: 100% !important; display: block; }
.public-qr-caption {
margin-top: 18px; font-family: var(--font-mono); font-size: 10px;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted);
}
@media (max-width: 900px) {
/* Stack the two-column layouts; minmax(0,1fr) stops a track from
stretching past the viewport on its content. */
.contact-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
.booking-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.contact-grid > *,
.booking-grid > * { min-width: 0; }
}
@media (max-width: 760px) {
.public-qr-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
.public-qr-text .eyebrow { justify-content: center; }
.public-qr-text .steps { text-align: center; }
}
@media (max-width: 600px) {
.contact-content { padding: 56px 0 72px; }
.contact-grid { gap: 36px; }
/* Form padding 48px is too wide for a phone */
.contact-form { padding: 28px 22px; }
.booking-embed-fallback { padding: 40px 24px; }
.public-qr-inner { padding: 0 24px; }
}
/* ===== components/sofia.css ===== */
/* Sofia standalone page — extracted from v63 + normalized. */
body.sofia-page-active { padding-top: 0; }
/* Hide the global chrome ONLY on the standalone Sofia page (both selectors must be
scoped to .sofia-page-active — otherwise, now that all component CSS ships in one
bundle on every page, an unscoped .site-footer would hide the footer site-wide). */
body.sofia-page-active .site-footer,
body.sofia-page-active > .nav { display: none; }
.sofia-page-nav {
position: sticky; top: 0; z-index: 50;
background: rgba(10, 22, 40, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--line);
padding: 18px 32px;
display: flex; justify-content: space-between; align-items: center;
}
.sofia-page-nav .brand {
display: flex; align-items: center; gap: 12px;
font-family: 'Cormorant Garamond', serif; font-size: 20px;
font-style: italic; font-weight: 400;
color: var(--text); cursor: pointer;
}
.sofia-page-nav .brand-mark {
width: 28px; height: 28px;
}
.sofia-page-nav .brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.sofia-page-back {
font-family: 'Inter', sans-serif; font-size: 14px;
text-transform: uppercase; letter-spacing: 0.15em;
color: var(--text-muted); cursor: pointer;
transition: color 0.2s;
}
.sofia-page-back:hover { color: var(--gold); }
/* ABOVE THE FOLD — Sofia stage */
.sofia-stage-section {
min-height: calc(100vh - 70px);
padding: 48px 24px 64px;
display: flex; align-items: center; justify-content: center;
}
.sofia-stage-inner {
max-width: 780px; width: 100%;
text-align: center;
}
.sofia-stage-eyebrow {
font-family: 'Inter', sans-serif; font-size: 14px;
text-transform: uppercase; letter-spacing: 0.22em;
color: var(--gold);
margin-bottom: 16px;
display: inline-flex; align-items: center; gap: 10px;
}
.sofia-stage-eyebrow .dot {
width: 6px; height: 6px; border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 0 #10b981;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
/* Avatar frame */
.sofia-avatar-frame {
position: relative;
width: 100%; max-width: 380px;
aspect-ratio: 4/5;
margin: 0 auto 36px;
background: var(--navy-2);
border: 1px solid var(--line);
box-shadow: 0 60px 120px rgba(0,0,0,0.5);
overflow: hidden;
}
.sofia-avatar-frame .corner {
position: absolute; width: 22px; height: 22px;
border-color: var(--gold); z-index: 4;
}
.sofia-avatar-frame .corner.tl { top: 14px; left: 14px; border-top: 1px solid; border-left: 1px solid; }
.sofia-avatar-frame .corner.tr { top: 14px; right: 14px; border-top: 1px solid; border-right: 1px solid; }
.sofia-avatar-frame .corner.bl { bottom: 14px; left: 14px; border-bottom: 1px solid; border-left: 1px solid; }
.sofia-avatar-frame .corner.br { bottom: 14px; right: 14px; border-bottom: 1px solid; border-right: 1px solid; }
/* Placeholder state */
.sofia-placeholder {
position: relative;
width: 100%; height: 100%;
}
.sofia-placeholder-img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 22%;
filter: brightness(0.85) contrast(1.04);
}
.sofia-placeholder-overlay {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 36px 24px 28px;
background: linear-gradient(180deg, transparent 0%, rgba(10, 22, 40, 0.85) 50%, rgba(10, 22, 40, 0.98) 100%);
text-align: center;
}
.sofia-placeholder-badge {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Inter', sans-serif; font-size: 14px;
text-transform: uppercase; letter-spacing: 0.22em;
color: var(--gold);
margin-bottom: 16px;
padding: 6px 14px;
background: rgba(200, 169, 107, 0.1);
border: 1px solid rgba(200, 169, 107, 0.3);
}
.sofia-placeholder-badge .badge-dot {
width: 5px; height: 5px; border-radius: 50%;
background: var(--gold);
animation: pulse 2s infinite;
}
.sofia-placeholder-headline {
font-family: 'Cormorant Garamond', serif; font-weight: 400;
font-size: clamp(22px, 3vw, 28px);
color: var(--text);
margin-bottom: 10px;
line-height: 1.2;
}
.sofia-placeholder-headline em {
font-style: italic; color: var(--gold);
}
.sofia-placeholder-sub {
font-size: 14px; line-height: 1.5;
color: var(--text-secondary);
max-width: 32ch; margin: 0 auto;
}
/* Language selector */
.sofia-lang-selector {
margin-bottom: 36px;
}
.sofia-lang-label {
font-family: 'Inter', sans-serif; font-size: 14px;
text-transform: uppercase; letter-spacing: 0.22em;
color: var(--text-muted);
margin-bottom: 16px;
}
.sofia-lang-buttons {
display: flex; gap: 12px; justify-content: center;
flex-wrap: wrap;
margin-bottom: 18px;
}
.sofia-lang-btn {
background: transparent;
border: 1px solid var(--line-bright);
color: var(--text-secondary);
padding: 14px 22px;
cursor: pointer;
transition: all 0.25s;
text-align: center;
display: flex; flex-direction: column; gap: 4px;
min-width: 140px;
font-family: inherit;
}
.sofia-lang-btn .lang-name {
font-family: 'Inter', sans-serif; font-size: 14px;
font-weight: 500;
color: var(--text);
letter-spacing: 0.01em;
}
.sofia-lang-btn .lang-greeting {
font-family: 'Cormorant Garamond', serif; font-style: italic;
font-size: 14px;
color: var(--text-muted);
}
.sofia-lang-btn:hover {
border-color: var(--gold);
color: var(--gold);
}
.sofia-lang-btn:hover .lang-name { color: var(--gold); }
.sofia-lang-btn.active {
background: rgba(200, 169, 107, 0.08);
border-color: var(--gold);
}
.sofia-lang-btn.active .lang-name { color: var(--gold); }
.sofia-lang-btn.active .lang-greeting { color: var(--text-secondary); }
.sofia-lang-more {
font-family: 'Inter', sans-serif; font-size: 14px;
color: var(--text-muted);
line-height: 1.5;
max-width: 50ch; margin: 0 auto;
}
.sofia-lang-more a {
color: var(--gold);
text-decoration: none;
border-bottom: 1px solid rgba(200, 169, 107, 0.3);
}
.sofia-lang-more a:hover { border-bottom-color: var(--gold); }
/* Sofia ownership clarifier — prevents prospects from thinking they're buying "a Sofia" */
.sofia-ownership-clarifier {
margin: 28px auto 0;
padding: 14px 24px;
background: rgba(200, 169, 107, 0.06);
border: 1px solid var(--line-gold);
border-radius: 0;
max-width: 640px;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
text-align: center;
}
.sofia-ownership-dot {
width: 6px; height: 6px;
background: var(--gold);
border-radius: 50%;
flex-shrink: 0;
}
.sofia-ownership-text {
font-family: 'Inter', sans-serif;
font-size: 14px;
line-height: 1.6;
color: var(--text-secondary);
letter-spacing: 0.01em;
}
.sofia-ownership-text em {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 15px;
color: var(--gold);
}
@media (max-width: 600px) {
.sofia-ownership-clarifier {
flex-direction: column;
gap: 10px;
padding: 16px 18px;
}
.sofia-ownership-text em { font-size: 14px; }
}
/* CTA area — notify card (placeholder state) */
.sofia-cta-area {
margin-top: 8px;
}
.sofia-notify-card {
background: rgba(200, 169, 107, 0.04);
border: 1px solid var(--line);
padding: 32px 28px;
max-width: 520px;
margin: 0 auto;
text-align: left;
}
.sofia-notify-eyebrow {
font-family: 'Inter', sans-serif; font-size: 14px;
text-transform: uppercase; letter-spacing: 0.22em;
color: var(--gold);
margin-bottom: 16px;
}
.sofia-notify-title {
font-family: 'Cormorant Garamond', serif; font-weight: 400;
font-size: 24px;
color: var(--text);
margin-bottom: 10px;
letter-spacing: -0.01em;
}
.sofia-notify-sub {
font-size: 14px; line-height: 1.55;
color: var(--text-secondary);
margin-bottom: 20px;
}
.sofia-notify-form {
display: flex; gap: 8px;
margin-bottom: 14px;
}
.sofia-notify-form input {
flex: 1; min-width: 0;
background: var(--navy);
border: 1px solid var(--line-bright);
color: var(--text);
padding: 14px 16px;
font-family: 'Inter', sans-serif; font-size: 14px;
transition: border-color 0.2s;
}
.sofia-notify-form input:focus {
outline: none;
border-color: var(--gold);
}
.sofia-notify-form input::placeholder { color: var(--text-muted); }
.sofia-notify-form button {
background: var(--gold); color: var(--navy);
border: 1px solid var(--gold);
padding: 14px 22px;
font-family: 'Inter', sans-serif; font-size: 14px;
font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
cursor: pointer;
transition: all 0.25s;
display: inline-flex; align-items: center; gap: 10px;
white-space: nowrap;
}
.sofia-notify-form button:hover {
background: transparent;
color: var(--gold);
}
.sofia-notify-fineprint {
font-size: 14px; line-height: 1.5;
color: var(--text-muted);
}
/* LIVE state start button (currently hidden, ready for Viktor) */
.sofia-start-btn {
background: var(--gold); color: var(--navy);
padding: 20px 36px;
border: 1px solid var(--gold);
font-family: 'Inter', sans-serif; font-size: 14px;
font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
cursor: pointer;
display: inline-flex; align-items: center; gap: 14px;
transition: all 0.3s;
}
.sofia-start-btn .pulse-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 0 #10b981;
animation: pulse 2s infinite;
}
.sofia-start-btn:hover {
background: transparent;
color: var(--gold);
}
.sofia-start-meta {
margin-top: 14px;
font-family: 'Inter', sans-serif; font-size: 14px;
text-transform: uppercase; letter-spacing: 0.2em;
color: var(--text-muted);
}
/* BELOW THE FOLD — context section */
.sofia-context-section {
padding: 96px 0;
border-top: 1px solid var(--line);
}
.sofia-context-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px;
max-width: 1180px; margin: 0 auto;
padding: 0 32px;
}
.sofia-context-block .eyebrow { margin-bottom: 16px; }
.sofia-context-block h2 {
font-family: 'Cormorant Garamond', serif; font-weight: 300;
font-size: clamp(28px, 3.2vw, 40px);
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--text);
margin-bottom: 24px;
}
.sofia-context-block h2 em {
font-style: italic; color: var(--gold); font-weight: 400;
}
.sofia-context-block p {
font-family: 'Inter', sans-serif; font-weight: 300;
font-size: 15px; line-height: 1.7;
color: var(--text-secondary);
margin-bottom: 16px;
}
.sofia-context-block p strong { color: var(--text); font-weight: 500; }
.sofia-context-link {
display: inline-flex; align-items: center; gap: 10px;
margin-top: 12px;
font-family: 'Inter', sans-serif; font-size: 14px;
text-transform: uppercase; letter-spacing: 0.15em;
color: var(--gold);
cursor: pointer;
transition: gap 0.25s;
}
.sofia-context-link:hover { gap: 14px; }
/* Roles list — replaces caps list. Used in /sofia "what yours could do" block */
.sofia-roles-intro {
font-size: 14px;
line-height: 1.65;
color: var(--text-secondary);
margin-bottom: 24px;
}
.sofia-roles-list {
list-style: none;
padding: 0;
margin: 0 0 24px;
}
.sofia-role {
padding: 18px 0;
border-bottom: 1px solid var(--line);
}
.sofia-role:last-child {
border-bottom: none;
padding-bottom: 0;
}
.sofia-role:first-child {
padding-top: 0;
}
.sofia-role .role-name {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: 19px;
color: var(--gold);
margin-bottom: 6px;
letter-spacing: -0.005em;
}
.sofia-role .role-detail {
font-family: 'Inter', sans-serif;
font-size: 13.5px;
line-height: 1.65;
color: var(--text-secondary);
}
.sofia-roles-outro {
font-size: 14px;
line-height: 1.65;
color: var(--text-secondary);
padding-top: 24px;
border-top: 1px solid var(--line);
}
.sofia-roles-outro strong {
color: var(--text);
font-weight: 500;
}
/* CTA bottom section */
.sofia-cta-bottom-section {
padding: 96px 0;
background: var(--navy-2);
border-top: 1px solid var(--line);
text-align: center;
}
.sofia-cta-bottom-inner {
max-width: 760px; margin: 0 auto;
padding: 0 32px;
}
.sofia-cta-bottom-inner .eyebrow { justify-content: center; }
.sofia-cta-bottom-inner h2 {
font-family: 'Cormorant Garamond', serif; font-weight: 300;
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 28px;
}
.sofia-cta-bottom-inner h2 em {
font-style: italic; color: var(--gold); font-weight: 400;
}
.sofia-cta-bottom-inner p {
font-family: 'Inter', sans-serif; font-weight: 300;
font-size: 16px; line-height: 1.7;
color: var(--text-secondary);
max-width: 56ch; margin: 0 auto 36px;
}
.sofia-cta-bottom-inner .btn-row { justify-content: center; }
/* Share section */
.sofia-share-section {
padding: 96px 0;
border-top: 1px solid var(--line);
}
.sofia-share-grid {
display: grid; grid-template-columns: 1.2fr 0.8fr;
gap: 64px; align-items: center;
max-width: 1180px; margin: 0 auto;
padding: 0 32px;
}
.sofia-share-text .eyebrow { margin-bottom: 16px; }
.sofia-share-text h2 {
font-family: 'Cormorant Garamond', serif; font-weight: 300;
font-size: clamp(28px, 3.2vw, 40px);
line-height: 1.1; letter-spacing: -0.015em;
color: var(--text); margin-bottom: 20px;
}
.sofia-share-text h2 em { font-style: italic; color: var(--gold); font-weight: 400; }
.sofia-share-text p {
font-size: 15px; line-height: 1.7;
color: var(--text-secondary);
margin-bottom: 24px;
}
.sofia-share-link-row {
display: flex; gap: 8px;
margin-bottom: 20px;
}
.sofia-share-link-row input {
flex: 1; min-width: 0;
background: var(--navy-2);
border: 1px solid var(--line);
color: var(--text);
padding: 12px 14px;
font-family: 'Inter', sans-serif; font-size: 14px;
}
.sofia-share-copy {
background: transparent;
border: 1px solid var(--gold);
color: var(--gold);
padding: 12px 22px;
font-family: 'Inter', sans-serif; font-size: 14px;
font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
cursor: pointer;
transition: all 0.25s;
}
.sofia-share-copy:hover {
background: var(--gold);
color: var(--navy);
}
.sofia-share-copy.copied {
background: var(--gold);
color: var(--navy);
}
.sofia-share-channels {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.sofia-share-channel {
display: flex; flex-direction: column; align-items: center;
gap: 8px;
padding: 18px 12px;
background: var(--navy-2);
border: 1px solid var(--line);
text-decoration: none;
color: var(--text-secondary);
transition: all 0.25s;
}
.sofia-share-channel:hover {
border-color: var(--gold);
color: var(--gold);
}
.sofia-share-channel .ch-icon {
font-family: 'Inter', sans-serif;
font-size: 14px; font-weight: 500;
letter-spacing: 0.05em;
}
.sofia-share-channel .ch-label {
font-size: 14px;
text-transform: uppercase; letter-spacing: 0.15em;
}
.sofia-share-qr {
display: flex; flex-direction: column; align-items: center;
gap: 14px;
}
.sofia-share-qr-frame {
position: relative;
width: 240px; height: 240px;
background: var(--text);
padding: 16px;
display: flex; align-items: center; justify-content: center;
}
.sofia-share-qr-frame .corner {
position: absolute; width: 18px; height: 18px;
border-color: var(--gold); z-index: 4;
}
.sofia-share-qr-frame .corner.tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.sofia-share-qr-frame .corner.tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
.sofia-share-qr-frame .corner.bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
.sofia-share-qr-frame .corner.br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
.sofia-share-qr-frame canvas,
.sofia-share-qr-frame img {
width: 100%; height: 100%; display: block;
}
.sofia-share-qr-caption {
font-family: 'Inter', sans-serif; font-size: 14px;
text-transform: uppercase; letter-spacing: 0.18em;
color: var(--text-muted);
}
/* Page footer */
.sofia-page-footer {
padding: 36px 24px;
border-top: 1px solid var(--line);
text-align: center;
background: var(--navy);
}
.sofia-page-footer-row {
font-family: 'Inter', sans-serif; font-size: 14px;
text-transform: uppercase; letter-spacing: 0.2em;
color: var(--text-muted);
margin-bottom: 14px;
}
.sofia-page-footer-row span {
cursor: pointer;
transition: color 0.2s;
padding: 0 4px;
}
.sofia-page-footer-row span:hover { color: var(--gold); }
.sofia-page-footer-legal {
font-family: 'Inter', sans-serif; font-size: 14px;
color: var(--text-muted);
}
.sofia-page-footer-legal span {
cursor: pointer;
color: var(--text-muted);
transition: color 0.2s;
}
.sofia-page-footer-legal span:hover { color: var(--gold); }
/* ===== Mobile responsiveness — stack grids, keep within viewport ===== */
@media (max-width: 900px) {
.sofia-context-grid { grid-template-columns: 1fr; gap: 48px; }
.sofia-share-grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 600px) {
.sofia-context-section,
.sofia-share-section { padding: 56px 0; }
.sofia-context-grid,
.sofia-share-grid { padding: 0 24px; gap: 36px; }
/* Share: link row and channels stack cleanly */
.sofia-share-link-row { flex-direction: column; gap: 12px; }
.sofia-share-link-row input { width: 100%; }
.sofia-share-copy { width: 100%; }
.sofia-share-channels { grid-template-columns: repeat(2, 1fr); }
/* QR frame must never exceed the column width */
.sofia-share-qr-frame { width: 200px; height: 200px; }
/* Language buttons full-width-ish so they don't crowd */
.sofia-lang-btn { min-width: 120px; flex: 1 1 40%; }
}
/* ===== components/vertical.css ===== */
/* =========================================================================
Studio Máté — vertical.css
Industry vertical landing pages (CPT sm_vertical) + the two hub pages.
Adapted from the v104 prototype to the theme's locked design system:
· two fonts only (no JetBrains Mono — mono eyebrows become Inter .eyebrow style)
· v104 tokens remapped → --text-secondary (was --white-soft),
--text-muted (was --white-dim)
· v104's 9–13px labels/body raised to the theme floors (14px fine / 16px body)
Layout, spacing and the navy/gold identity are preserved 1:1.
========================================================================= */
/* ----- Hero ----- */
.vert-page-hero {
padding: 64px 0 80px;
border-bottom: 1px solid var(--line);
background: var(--navy);
}
.vert-page-hero .container { max-width: var(--content-narrow); }
.vert-eyebrow-row {
display: flex;
align-items: center;
gap: var(--s-16);
margin-bottom: var(--s-32);
flex-wrap: wrap;
}
.vert-eyebrow-tier,
.vert-eyebrow-back {
font-family: var(--font-body);
font-size: var(--fs-fine);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.vert-eyebrow-tier { color: var(--gold); }
.vert-eyebrow-back { color: var(--text-muted); transition: color 0.3s; }
.vert-eyebrow-back:hover { color: var(--gold); }
.vert-eyebrow-divider { width: 32px; height: 1px; background: var(--line-gold); }
.vert-page-hero h1 {
font-family: var(--font-display);
font-size: clamp(40px, 5vw, 56px);
font-weight: 400;
line-height: 1.05;
color: var(--text);
margin: 0 0 28px;
letter-spacing: -0.01em;
}
.vert-page-hero h1 em { font-style: italic; color: var(--gold); }
.vert-page-hero .lede {
font-size: var(--fs-body);
color: var(--text-secondary);
line-height: 1.6;
max-width: 740px;
margin: 0 0 36px;
}
.vert-page-hero .lede strong { color: var(--text); font-weight: 500; }
/* FOMO banner — the "you're falling behind" line */
.vert-fomo-banner {
background: linear-gradient(90deg, rgba(200, 169, 107, 0.08) 0%, rgba(200, 169, 107, 0.02) 100%);
border-left: 3px solid var(--gold);
padding: var(--s-24) var(--s-32);
margin: 36px 0 0;
}
.vert-fomo-banner-label {
font-family: var(--font-body);
font-size: var(--fs-fine);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: var(--s-8);
}
.vert-fomo-banner-text {
font-family: var(--font-display);
font-size: 22px;
font-style: italic;
font-weight: 400;
color: var(--text);
line-height: 1.4;
margin: 0;
}
/* ----- Shared section heading ----- */
.vert-section-eyebrow {
font-family: var(--font-body);
font-size: var(--fs-fine);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: var(--s-16);
}
.vert-section-h2 {
font-family: var(--font-display);
font-size: var(--fs-title-lg);
font-weight: 400;
color: var(--text);
line-height: 1.15;
margin: 0 0 var(--s-32);
}
.vert-section-h2 em { font-style: italic; color: var(--gold); }
/* ----- Chokeholds ----- */
.vert-chokehold-section {
padding: 100px 0;
border-bottom: 1px solid var(--line);
}
.vert-chokehold-section .container { max-width: var(--content-narrow); }
.vert-chokehold-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-24);
margin-top: var(--s-48);
}
.vert-chokehold-card {
padding: 28px 28px 32px;
border: 1px solid var(--line);
background: rgba(248, 247, 244, 0.02);
}
.vert-chokehold-card-num {
font-family: var(--font-body);
font-size: var(--fs-fine);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: var(--s-12);
}
.vert-chokehold-card-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 400;
color: var(--text);
margin: 0 0 var(--s-12);
line-height: 1.3;
}
.vert-chokehold-card-title em { font-style: italic; color: var(--gold); }
.vert-chokehold-card-body {
font-size: var(--fs-small);
color: var(--text-secondary);
line-height: 1.7;
margin: 0;
}
.vert-chokehold-card-body strong { color: var(--text); }
/* ----- Capabilities + scenario ----- */
.vert-capabilities-section {
padding: 100px 0;
border-bottom: 1px solid var(--line);
background: var(--navy);
position: relative;
}
.vert-capabilities-section::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--line-gold) 20%, var(--line-gold) 80%, transparent 100%);
opacity: 0.4;
}
.vert-capabilities-section .container { max-width: 1180px; }
.vert-capabilities-lede {
font-size: var(--fs-body);
color: var(--text-secondary);
line-height: 1.7;
margin: 0 0 56px;
max-width: 760px;
}
.vert-capabilities-lede strong { color: var(--text); }
.vert-capabilities-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--s-16);
margin-bottom: 72px;
}
.vert-capability-card {
background: var(--navy-2);
border: 1px solid var(--line);
padding: 28px 22px;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.vert-capability-card:hover {
border-color: rgba(200, 169, 107, 0.4);
transform: translateY(-2px);
}
.vert-capability-num {
font-family: var(--font-body);
font-size: var(--fs-fine);
letter-spacing: 0.15em;
color: var(--gold);
margin-bottom: var(--s-16);
font-weight: 600;
}
.vert-capability-title {
font-family: var(--font-display);
font-size: 22px;
line-height: 1.25;
color: var(--text);
margin: 0 0 14px;
font-weight: 400;
letter-spacing: -0.01em;
}
.vert-capability-body {
font-size: var(--fs-small);
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
}
.vert-capability-body strong { color: var(--text); }
.vert-scenario-block {
background: linear-gradient(180deg, rgba(200, 169, 107, 0.04) 0%, transparent 100%);
border-left: 2px solid var(--gold);
padding: 40px 48px;
max-width: 920px;
}
.vert-scenario-eyebrow {
font-family: var(--font-body);
font-size: var(--fs-fine);
letter-spacing: 0.18em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: var(--s-16);
font-weight: 600;
}
.vert-scenario-headline {
font-family: var(--font-display);
font-size: clamp(26px, 3vw, 30px);
line-height: 1.3;
color: var(--text);
margin: 0 0 var(--s-16);
font-weight: 400;
letter-spacing: -0.015em;
}
.vert-scenario-headline em { font-style: italic; color: var(--gold); }
.vert-scenario-lede {
font-size: var(--fs-body);
color: var(--text-secondary);
line-height: 1.7;
margin: 0 0 var(--s-24);
}
.vert-scenario-body {
font-size: var(--fs-small);
color: var(--text-secondary);
line-height: 1.75;
margin: 0 0 var(--s-24);
}
.vert-scenario-body strong { color: var(--text); }
.vert-scenario-payoff {
font-size: var(--fs-small);
color: var(--text);
line-height: 1.6;
margin: 0;
padding-top: var(--s-24);
border-top: 1px solid var(--line);
}
.vert-scenario-payoff strong { color: var(--gold); font-weight: 500; }
/* ----- Solutions ----- */
.vert-solution-section {
padding: 100px 0;
border-bottom: 1px solid var(--line);
background: var(--navy-2);
}
.vert-solution-section .container { max-width: var(--content-narrow); }
.vert-solution-intro {
font-size: var(--fs-body);
color: var(--text-secondary);
line-height: 1.7;
margin: 0 0 var(--s-48);
max-width: 760px;
}
.vert-solution-intro strong { color: var(--text); }
.vert-solution-row {
display: grid;
grid-template-columns: 60px 1fr;
gap: var(--s-24);
padding: 28px 0;
border-bottom: 1px solid var(--line);
align-items: flex-start;
}
.vert-solution-row:last-child { border-bottom: none; }
.vert-solution-num {
font-family: var(--font-display);
font-size: 36px;
font-style: italic;
font-weight: 400;
color: var(--gold);
line-height: 1;
}
.vert-solution-content h4 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 400;
color: var(--text);
margin: 0 0 10px;
line-height: 1.3;
}
.vert-solution-content h4 em { font-style: italic; color: var(--gold); }
.vert-solution-content p {
font-size: var(--fs-small);
color: var(--text-secondary);
line-height: 1.7;
margin: 0;
}
.vert-solution-content p strong { color: var(--text); }
/* ----- FAQ ----- */
.vert-faq-section { padding: 100px 0; border-bottom: 1px solid var(--line); }
.vert-faq-section .container { max-width: var(--content-narrow); }
.vert-faq-list { margin-top: var(--s-48); }
.vert-faq-item { border-bottom: 1px solid var(--line); }
.vert-faq-item summary {
padding: 28px 0 28px var(--s-32);
list-style: none;
cursor: pointer;
position: relative;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(18px, 1.7vw, 22px);
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--text);
transition: color 0.25s;
}
.vert-faq-item summary:hover { color: var(--gold); }
.vert-faq-item summary::-webkit-details-marker { display: none; }
.vert-faq-item summary::before {
content: '+';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-body);
font-weight: 200;
font-size: 30px;
color: var(--gold);
transition: transform 0.25s;
}
.vert-faq-item[open] summary::before { transform: translateY(-50%) rotate(45deg); }
.vert-faq-item summary em { font-style: italic; color: var(--gold); }
.vert-faq-item p {
padding: 0 0 28px var(--s-32);
margin: 0;
font-size: var(--fs-small);
line-height: 1.75;
color: var(--text-secondary);
}
.vert-faq-item p strong { color: var(--text); font-weight: 500; }
.vert-faq-item p em { font-style: italic; color: var(--gold); }
/* ----- CTA ----- */
.vert-cta-section {
padding: 100px 0;
text-align: center;
background: linear-gradient(180deg, var(--navy) 0%, rgba(200, 169, 107, 0.06) 100%);
}
.vert-cta-section .container { max-width: 780px; }
.vert-cta-section .vert-section-eyebrow,
.vert-cta-section .btn-row { justify-content: center; display: flex; }
.vert-cta-hook {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 36px);
font-style: italic;
font-weight: 400;
color: var(--text);
line-height: 1.3;
margin: 0 0 var(--s-24);
}
.vert-cta-hook em { color: var(--gold); }
.vert-cta-sub {
font-size: var(--fs-small);
color: var(--text-secondary);
line-height: 1.6;
margin: 0 0 40px;
}
/* ----- Responsive ----- */
@media (max-width: 980px) {
.vert-capabilities-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.vert-chokehold-list { grid-template-columns: 1fr; }
.vert-capabilities-grid { grid-template-columns: 1fr; }
.vert-scenario-block { padding: var(--s-32) var(--s-24); }
.vert-solution-row { grid-template-columns: 44px 1fr; gap: var(--s-16); }
}
/* ===== components/sections.css ===== */
/* =========================================================================
Studio Máté — v104-pages.css
v104 page-rework section blocks (home Sofia hero + industry picker, About /
personas card grids, pricing stack table, cross-link bands, full-stack SVG).
Locked design system only: navy/gold, Inter + Cormorant, theme.json tokens.
No hardcoded sizes below the floors (14px fine / 16px body); tokens only.
========================================================================= */
/* ----- Sofia-first hero (home) — portrait left, greeting right (v104) ----- */
.hero-sofia {
padding: 64px 0 var(--s-120);
border-bottom: 1px solid var(--line);
background: radial-gradient(ellipse at top right, rgba(200, 169, 107, 0.06) 0%, transparent 50%), var(--navy);
position: relative;
overflow: hidden;
}
.hero-sofia::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--line-gold) 50%, transparent 100%);
}
.hero-sofia-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: var(--s-64);
align-items: center;
}
/* Portrait stage */
.hero-sofia-stage { position: relative; display: block; }
.hero-sofia-frame {
position: relative;
aspect-ratio: 4 / 5;
background: var(--navy-2);
overflow: hidden;
border: 1px solid var(--line-gold);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.hero-sofia-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.hero-sofia-stage:hover .hero-sofia-frame img { transform: scale(1.03); }
.hero-sofia-frame .corner { position: absolute; width: 32px; height: 32px; border: 1px solid var(--gold); pointer-events: none; z-index: 2; }
.hero-sofia-frame .corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.hero-sofia-frame .corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.hero-sofia-frame .corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.hero-sofia-frame .corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }
/* HUD overlay */
.hero-sofia-hud {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: var(--s-24);
background: linear-gradient(180deg, transparent 0%, rgba(10, 22, 40, 0.92) 70%);
display: flex;
justify-content: space-between;
align-items: flex-end;
z-index: 2;
}
.hero-sofia-id .label { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-8); }
.hero-sofia-id .name { font-family: var(--font-display); font-size: var(--fs-title-md); color: var(--text); line-height: 1; margin-bottom: 4px; }
.hero-sofia-id .role { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-secondary); }
.hero-sofia-status { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); display: flex; align-items: center; gap: var(--s-8); }
.hero-sofia-status .status-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, 0.6); animation: sofiaPulse 2s ease-in-out infinite; }
@keyframes sofiaPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
/* Talk-to-Sofia voice prompt (top-right of the portrait) — label and ring sit side by side */
.hero-sofia-voice-prompt { position: absolute; top: var(--s-24); right: var(--s-24); display: flex; flex-direction: row; align-items: center; gap: var(--s-12); z-index: 3; pointer-events: none; }
.voice-prompt-ring { width: 56px; height: 56px; border: 1px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(200, 169, 107, 0.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); position: relative; }
.voice-prompt-ring::before, .voice-prompt-ring::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; animation: voiceRingPulse 2.4s ease-out infinite; }
.voice-prompt-ring::after { animation-delay: 1.2s; }
@keyframes voiceRingPulse { 0% { transform: scale(0.85); opacity: 0.7; } 100% { transform: scale(1.4); opacity: 0; } }
.voice-prompt-ring-inner { width: 12px; height: 12px; background: var(--gold); border-radius: 50%; box-shadow: var(--glow); }
.voice-prompt-label { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); background: rgba(10, 22, 40, 0.85); padding: 6px 10px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line-gold); }
/* Caption */
.hero-sofia-caption { margin-top: var(--s-16); display: flex; justify-content: space-between; align-items: center; gap: var(--s-16); font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }
.hero-sofia-caption .right { color: var(--gold); }
.hero-sofia-caption .languages { color: var(--text-secondary); }
/* Right column — greeting */
.hero-sofia-text { display: flex; flex-direction: column; gap: var(--s-32); }
.hero-sofia-eyebrow { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); display: inline-flex; align-items: center; gap: var(--s-12); align-self: flex-start; }
.hero-sofia-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px rgba(74, 222, 128, 0.7); animation: sofiaPulse 2s ease-in-out infinite; }
.hero-sofia-greeting { margin: 0; padding: 0 0 0 var(--s-24); border-left: 2px solid var(--gold); font-family: var(--font-display); color: var(--text); }
.hero-sofia-greeting p { margin: 0 0 14px; line-height: 1.12; letter-spacing: -0.015em; }
.hero-sofia-greeting .greeting-line-1 { font-size: clamp(40px, 4.4vw, 52px); }
.hero-sofia-greeting .greeting-line-1 em { font-style: italic; color: var(--gold); }
.hero-sofia-greeting .greeting-line-2 { font-size: clamp(28px, 3vw, 36px); font-style: italic; color: var(--text-secondary); }
.hero-sofia-greeting .greeting-line-3 { font-family: var(--font-body); font-size: var(--fs-lead); color: var(--text-secondary); line-height: 1.55; margin-top: 18px; max-width: 540px; letter-spacing: 0; }
.hero-sofia-greeting cite { display: block; margin-top: var(--s-16); font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-style: normal; }
/* Action buttons */
.hero-sofia-actions { display: flex; gap: var(--s-16); flex-wrap: wrap; }
.btn-sofia-voice, .btn-sofia-text { display: inline-flex; align-items: center; gap: var(--s-12); padding: var(--s-16) var(--s-24); font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--gold); background: var(--gold); color: var(--navy); transition: filter 0.3s, background 0.3s, color 0.3s; }
.btn-sofia-ico { display: inline-flex; }
.btn-sofia-voice .btn-sofia-ico svg, .btn-sofia-text .btn-sofia-ico svg { width: 16px; height: 16px; display: block; }
.btn-sofia-voice:hover { filter: brightness(1.08); }
.btn-sofia-text { background: transparent; color: var(--gold); }
.btn-sofia-text:hover { background: rgba(200, 169, 107, 0.1); color: var(--gold); }
/* Geo line */
.hero-sofia-geo { margin: var(--s-24) 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); font-family: var(--font-display); font-size: var(--fs-lead); color: var(--text-secondary); line-height: 1.6; max-width: 560px; }
.hero-sofia-geo em { font-style: italic; color: var(--gold); }
.hero-sofia-geo .geo-link { font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid transparent; transition: border-color 0.3s; white-space: nowrap; }
.hero-sofia-geo .geo-link:hover { border-color: var(--gold); }
/* Share bar */
.btn-sofia-share { display: inline-flex; align-items: center; gap: var(--s-12); padding: 0 0 4px; font-family: var(--font-body); font-size: var(--fs-fine); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-secondary); background: transparent; border: none; border-bottom: 1px dashed var(--line-gold); align-self: flex-start; transition: color 0.3s, border-color 0.3s; }
.btn-sofia-share .btn-sofia-ico svg { width: 14px; height: 14px; display: block; opacity: 0.7; }
.btn-sofia-share:hover { color: var(--gold); border-color: var(--gold); }
@media (max-width: 1024px) {
.hero-sofia-grid { grid-template-columns: 1fr; gap: var(--s-48); }
.hero-sofia-stage { max-width: 460px; margin: 0 auto; width: 100%; }
}
/* ----- Industry picker (home) ----- */
/* v175 prototype: "Sofia knows your business" — centered head, then each trade
category stacked full-width with a flush 4-up hairline tile grid (no boxes, no
rounding, no gaps — the cards share single 1px dividers, ledger style). Tile
names are Cormorant serif with a gold-italic suffix. */
.industry-picker {
padding: var(--section-padding) 0;
background: var(--navy);
border-bottom: 1px solid var(--line);
scroll-margin-top: calc(var(--nav-height) + 24px);
}
/* Deep-link targets (#ind-featured / #ind-home-services / …) from the Industries
menu — offset the jump so the sticky nav doesn't cover the category heading. */
.ip-cat { scroll-margin-top: calc(var(--nav-height) + 24px); }
.industry-picker-head { text-align: center; max-width: 880px; margin: 0 auto var(--s-80); }
.industry-picker-head .eyebrow { justify-content: center; }
.industry-picker-head .lead { margin: var(--s-24) auto 0; }
/* Categories stacked vertically (one per row), separated by a top hairline. */
.industry-picker-cats { display: block; }
.ip-cat { margin-top: var(--s-64); padding-top: var(--s-48); border-top: 1px solid var(--line); }
.ip-cat:first-child { margin-top: var(--s-48); border-top: 1px solid var(--line-gold); }
/* Category header: meta (eyebrow + big serif title, baseline-aligned) on the left,
italic personalize copy on the right with a gold rule. Matches the prototype's
1fr 1.4fr header grid. */
.ip-cat-head {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: var(--s-64);
align-items: end;
margin-bottom: var(--s-32);
padding-bottom: var(--s-24);
border-bottom: 1px solid var(--line);
}
.ip-cat-meta { display: flex; align-items: baseline; gap: var(--s-24); }
.ip-cat-eyebrow {
font-family: var(--font-body);
font-size: var(--fs-fine);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
margin: 0;
white-space: nowrap;
}
.ip-cat-title {
font-family: var(--font-display);
font-size: clamp(32px, 3.2vw, 42px);
font-weight: 400;
line-height: 1;
margin: 0;
letter-spacing: -0.01em;
}
.ip-cat-personalize {
justify-self: end;
max-width: 540px;
margin: 0;
padding-left: var(--s-24);
border-left: 1px solid var(--line-gold);
font-family: var(--font-display);
font-style: italic;
font-size: var(--fs-small);
line-height: 1.55;
color: var(--text-secondary);
}
/* Flush hairline tile grid — the grid paints the hairlines, each tile fills navy.
The featured (first) category has 6 tiles → 3-up for a clean 3×2; the rest 4-up. */
.ip-tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
.ip-cat:first-child .ip-tiles { grid-template-columns: repeat(3, 1fr); }
.ip-tile {
display: flex;
flex-direction: column;
gap: var(--s-12);
padding: var(--s-24) var(--s-24);
min-height: 180px;
background: var(--navy);
border: none;
border-radius: 0;
color: inherit;
transition: background 0.3s;
}
.ip-tile:hover { background: rgba(200, 169, 107, 0.06); transform: none; }
.ip-tile-num {
font-family: var(--font-body);
font-size: var(--fs-fine);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
}
.ip-tile-name {
font-family: var(--font-display);
font-size: 21px;
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.005em;
color: var(--text);
}
.ip-tile-name em { font-style: italic; color: var(--gold); }
.ip-tile-hint { font-size: var(--fs-fine); color: var(--text-secondary); line-height: 1.5; margin-bottom: auto; }
.ip-tile-cta {
margin-top: auto;
padding-top: var(--s-12);
border-top: 1px solid var(--line);
font-family: var(--font-body);
font-size: var(--fs-fine);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gold);
transition: color 0.25s;
}
.ip-tile:hover .ip-tile-cta { color: var(--text); }
@media (max-width: 960px) {
.ip-tiles,
.ip-cat:first-child .ip-tiles { grid-template-columns: repeat(2, 1fr); }
.ip-cat-head { grid-template-columns: 1fr; gap: var(--s-16); }
.ip-cat-meta { flex-wrap: wrap; gap: var(--s-8); }
.ip-cat-personalize { justify-self: start; }
}
@media (max-width: 520px) {
.ip-tiles,
.ip-cat:first-child .ip-tiles { grid-template-columns: 1fr; }
}
/* ----- Cross-link band (pricing ↔ standalone) ----- */
.cross-link-section { padding: var(--section-padding) 0; background: var(--navy); }
.cross-link-box {
max-width: var(--content-narrow);
margin: 0 auto;
padding: var(--s-48);
background: var(--navy-2);
border: 1px solid var(--line-gold);
border-radius: 6px;
text-align: center;
}
.cross-link-box .title-lg { margin: var(--s-16) 0; }
.cross-link-box .lead { margin: 0 auto var(--s-32); max-width: 64ch; }
.cross-link-box .btn-row { justify-content: center; }
/* ----- Stack compare table (pricing) ----- */
.stack-compare-section { padding: var(--section-padding) 0; background: var(--navy); }
.stack-compare-head { max-width: var(--content-narrow); margin: 0 0 var(--s-32); }
.stack-compare-wrap { overflow-x: auto; }
.stack-compare-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-body);
font-size: var(--fs-small);
}
.stack-compare-table th,
.stack-compare-table td {
text-align: left;
padding: var(--s-16) var(--s-24);
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.stack-compare-table thead th {
font-size: var(--fs-fine);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold);
font-weight: 500;
border-bottom: 1px solid var(--line-gold);
}
.stack-compare-table .sc-cell-stack {
font-family: var(--font-display);
font-size: var(--fs-title-md);
color: var(--text);
white-space: nowrap;
}
.stack-compare-table .sc-cell-roles { color: var(--text-secondary); line-height: 1.5; }
.stack-compare-table .sc-cell-human { color: var(--text-muted); white-space: nowrap; }
.stack-compare-table .sc-cell-cost,
.stack-compare-table .sc-th-cost {
color: var(--gold);
font-weight: 600;
white-space: nowrap;
}
.stack-compare-table tbody tr:last-child td { border-bottom: none; }
/* ----- Card grid (About product lines, personas, roles, verticals) ----- */
.card-grid-section { padding: var(--section-padding) 0; background: var(--navy); }
.card-grid-section.alt { background: var(--navy-2); }
.card-grid-head { max-width: var(--content-narrow); margin: 0 0 var(--s-48); }
.card-grid-head .lead { margin-top: var(--s-16); }
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--s-24);
}
.cg-card {
display: flex;
flex-direction: column;
gap: var(--s-12);
padding: var(--s-32);
background: var(--navy-2);
border: 1px solid var(--line);
border-radius: 6px;
transition: border-color 0.25s, transform 0.25s;
}
.card-grid-section.alt .cg-card { background: var(--navy); }
.cg-card:hover { border-color: var(--line-gold); transform: translateY(-3px); }
.cg-label {
font-family: var(--font-body);
font-size: var(--fs-fine);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
}
.cg-title { font-size: var(--fs-title-md); margin: 0; line-height: 1.15; }
.cg-meta { font-size: var(--fs-fine); color: var(--text-muted); letter-spacing: 0.04em; }
.cg-body { font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.6; margin: 0; }
.cg-body strong { color: var(--text); font-weight: 500; }
/* ----- Full-stack flow SVG (what-we-build) ----- */
.fullstack-flow { margin: var(--s-48) auto 0; max-width: var(--content-narrow); }
.fullstack-flow .viz-flow-svg { width: 100%; height: auto; display: block; }
.fullstack-flow .viz-flow-node { fill: var(--navy); stroke: var(--gold); stroke-width: 1.5; }
.fullstack-flow .viz-flow-edge { fill: none; stroke: var(--gold); stroke-width: 2.2; }
.fullstack-flow .viz-flow-edge.is-feedback { stroke: var(--line-gold); stroke-width: 1.8; stroke-dasharray: 5 4; }
.fullstack-flow .viz-flow-arrow { fill: var(--gold); }
.fullstack-flow .viz-flow-node-label {
font-family: var(--font-body);
font-size: var(--fs-fine);
letter-spacing: 0.06em;
fill: var(--text);
}
.fullstack-flow .viz-flow-caption {
font-family: var(--font-body);
font-size: var(--fs-fine);
letter-spacing: 0.14em;
text-transform: uppercase;
fill: var(--text-muted);
}
/* ----- Agents page · The faces grid (8 photoreal avatar persona cards) ----- */
.agents-faces-section {
padding: var(--section-padding) 0;
background: var(--navy-2);
border-bottom: 1px solid var(--line);
position: relative;
}
.agents-faces-section::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--line-gold) 50%, transparent 100%);
opacity: 0.5;
}
.agents-faces-section .container { max-width: 1240px; }
.agents-faces-head { max-width: 820px; margin: 0 0 var(--s-48); }
.agents-faces-head .lead { margin-top: var(--s-16); }
.agents-faces-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--s-24);
}
.agents-face-card {
background: var(--navy);
border: 1px solid var(--line);
border-radius: 6px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: border-color 0.25s ease, transform 0.25s ease;
}
.agents-face-card:hover {
border-color: var(--line-gold);
transform: translateY(-4px);
}
.agents-face-portrait {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
border-bottom: 1px solid var(--line);
}
.agents-face-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.agents-face-card:hover .agents-face-portrait img {
transform: scale(1.03);
}
.agents-face-portrait::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(10, 22, 40, 0.75) 100%);
pointer-events: none;
}
.agents-face-badge {
position: absolute;
bottom: var(--s-12);
left: var(--s-12);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.16em;
text-align: center;
color: var(--gold);
background: rgba(10, 22, 40, 0.85);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
padding: 5px 10px;
border-radius: 2px;
text-transform: uppercase;
z-index: 2;
border: 1px solid var(--line-gold);
}
.agents-face-meta {
padding: var(--s-24) var(--s-24) var(--s-24);
display: flex;
flex-direction: column;
gap: var(--s-12);
}
.agents-face-name-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.agents-face-name {
font-family: var(--font-display);
font-size: 24px;
line-height: 1.1;
color: var(--text);
font-weight: 400;
letter-spacing: -0.01em;
margin: 0;
}
.agents-face-role {
font-family: var(--font-mono);
font-size: var(--fs-fine);
letter-spacing: 0.18em;
color: var(--gold);
text-transform: uppercase;
line-height: 1.4;
}
.agents-face-voice {
font-family: var(--font-display);
font-style: italic;
font-size: var(--fs-small);
color: var(--text-secondary);
line-height: 1.5;
margin: 0;
}
.agents-face-story {
font-family: var(--font-body);
font-size: var(--fs-small);
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
}
.agents-face-fit {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.14em;
color: var(--text-secondary);
text-transform: uppercase;
padding: var(--s-12) 0 0;
border-top: 1px solid var(--line);
margin: var(--s-4) 0 0;
line-height: 1.5;
}
.agents-face-fit-label {
color: var(--gold);
font-weight: 500;
}
@media (max-width: 1100px) {
.agents-faces-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
.agents-faces-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.agents-faces-grid { grid-template-columns: 1fr; }
}
/* =========================================================================
v175 CALCULATORS — Growth Projection (.rla/.gp), Workforce ROI (.wfr),
Scaling slider (.scl). Ported from the prototype, re-homed onto the site
design tokens. The calculator containers alias the prototype's palette
names to the real theme tokens, so the ported rules below stay faithful
while consuming a single source of truth (see base.css).
========================================================================= */
.sm-calc-page,
.scl-section {
--white: var(--text);
--white-soft: var(--text-secondary);
--white-faint: var(--text-muted);
--white-dim: var(--text-muted);
--gold-soft: rgba(200, 169, 107, 0.55);
--line-bright: rgba(248, 247, 244, 0.22);
}
/* ---- Growth Projection: quiz shell -------------------------------------- */
.rla-hero { padding: 36px 0 14px; text-align: center; }
.rla-hero-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.rla-hero-eyebrow { font-family:var(--font-body); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.rla-hero h1 { font-family:var(--font-display); font-size:34px; line-height:1.08; color:var(--white); font-weight:400; }
.rla-hero h1 em { font-style:italic; color:var(--gold); }
.rla-hero .lede { font-family:var(--font-body); font-size:14px; line-height:1.5; color:var(--white-soft); margin-top:14px; max-width:620px; margin-left:auto; margin-right:auto; }
.rla-progress-wrap { max-width:680px; margin:0 auto 8px; padding:0 24px; }
.rla-progress-track { height:3px; background:var(--line); position:relative; overflow:hidden; }
.rla-progress-fill { position:absolute; top:0; left:0; height:100%; background:var(--gold); transition:width 0.4s cubic-bezier(0.16,1,0.3,1); }
.rla-progress-meta { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--white-faint); margin-top:12px; }
.rla-progress-meta strong { color:var(--white-soft); }
.rla-quiz-section { padding:20px 0 40px; }
.rla-quiz-inner { max-width:680px; margin:0 auto; padding:0 24px; }
.rla-section-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.rla-question { display:none; }
.rla-question.active { display:block; animation:rlaFade 0.4s ease; }
@keyframes rlaFade { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.rla-question-number { font-family:var(--font-mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--white-faint); margin-bottom:8px; }
.rla-question h2 { font-family:var(--font-display); font-size:26px; line-height:1.12; color:var(--white); font-weight:400; }
.rla-question h2 em { font-style:italic; color:var(--gold); }
.rla-question-helper { font-family:var(--font-body); font-size:13px; line-height:1.5; color:var(--white-faint); margin-top:10px; }
.rla-answers { margin-top:18px; display:flex; flex-direction:column; gap:8px; }
.rla-answer { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; text-align:left; padding:13px 20px; background:var(--navy-2); border:1px solid var(--line); cursor:pointer; transition:all 0.2s; font-family:var(--font-body); }
.rla-answer:hover { border-color:var(--gold); background:rgba(200,169,107,0.06); transform:translateX(4px); }
.rla-answer-content { display:flex; flex-direction:column; gap:4px; }
.rla-answer-content > span:first-child { font-size:15px; color:var(--white); }
.rla-answer-sub { font-size:12px; color:var(--white-faint); }
.rla-answer .arrow { color:var(--gold); opacity:0; transition:opacity 0.2s; }
.rla-answer:hover .arrow { opacity:1; }
.rla-back { font-family:var(--font-mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--white-faint); background:none; border:none; cursor:pointer; padding:0; margin-top:18px; transition:color 0.2s; }
.rla-back:hover { color:var(--gold); }
.rla-select-wrap { margin-top:28px; }
.rla-select {
width:100%; padding:18px 22px; background:var(--navy-2); border:1px solid var(--line);
color:var(--white); font-family:var(--font-body); font-size:16px; cursor:pointer;
-webkit-appearance:none; appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C8A96B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 20px center;
}
.rla-select:focus { outline:none; border-color:var(--gold); }
.rla-select option { background:var(--navy); color:var(--white); }
.rla-select option[disabled] { color:var(--white-faint); }
.rla-continue {
margin-top:20px; font-family:var(--font-mono); font-size:12px; letter-spacing:0.12em;
text-transform:uppercase; color:var(--navy); background:var(--gold); border:none;
padding:15px 30px; cursor:pointer; transition:opacity 0.2s;
}
.rla-continue:hover { opacity:0.9; }
.rla-continue:disabled { opacity:0.4; cursor:not-allowed; }
/* ---- Growth Projection: result ----------------------------------------- */
.rla-result { display:none; max-width:880px; margin:0 auto; padding:0 24px; }
.rla-result.active { display:block; animation:rlaFade 0.5s ease; }
.rla-result-eyebrow { font-family:var(--font-body); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); text-align:center; margin-bottom:16px; }
.rla-leak-disclaimer { font-family:var(--font-body); font-size:12px; line-height:1.55; color:var(--white-faint); max-width:640px; margin:18px auto 0; text-align:center; padding:14px 18px; border:1px solid var(--line); background:var(--navy-2); }
.rla-leak-disclaimer strong { color:var(--white-soft); }
.rla-block-title { font-family:var(--font-display); font-size:30px; color:var(--white); font-weight:400; text-align:center; margin:56px 0 8px; }
.rla-block-title em { font-style:italic; color:var(--gold); }
.rla-block-sub { font-family:var(--font-body); font-size:14px; color:var(--white-soft); text-align:center; max-width:600px; margin:0 auto 32px; }
.rla-leak-list { border-top:1px solid var(--line); }
.rla-leak-item { display:flex; align-items:flex-start; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); }
.rla-leak-dot { width:10px; height:10px; border-radius:50%; margin-top:6px; flex-shrink:0; }
.rla-leak-dot.red { background:#C8584B; box-shadow:0 0 0 3px rgba(200,88,75,0.15); }
.rla-leak-dot.amber { background:var(--gold); box-shadow:0 0 0 3px rgba(200,169,107,0.15); }
.rla-leak-dot.green { background:#5B8C6E; box-shadow:0 0 0 3px rgba(91,140,110,0.15); }
.rla-leak-text { flex:1; }
.rla-leak-area { font-family:var(--font-body); font-size:15px; color:var(--white); font-weight:600; margin-bottom:3px; }
.rla-leak-area .rla-leak-status { font-family:var(--font-mono); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; font-weight:400; margin-left:10px; }
.rla-leak-status.red { color:#C8584B; }
.rla-leak-status.amber { color:var(--gold); }
.rla-leak-status.green { color:#5B8C6E; }
.rla-leak-diag { font-family:var(--font-body); font-size:13px; line-height:1.5; color:var(--white-soft); }
.rla-leak-fix { font-family:var(--font-body); font-size:12px; color:var(--white-faint); margin-top:5px; }
.rla-leak-fix strong { color:var(--gold); font-weight:600; }
.rla-rec { margin-top:48px; padding:36px 32px; background:var(--navy-2); border:1px solid var(--line-gold); text-align:center; }
.rla-rec-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.rla-rec h3 { font-family:var(--font-display); font-size:30px; color:var(--white); font-weight:400; }
.rla-rec h3 em { font-style:italic; color:var(--gold); }
.rla-rec-body { font-family:var(--font-body); font-size:14px; line-height:1.6; color:var(--white-soft); max-width:620px; margin:14px auto 0; }
.rla-rec-cta { display:flex; gap:14px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.rla-email-capture { margin-top:40px; padding:32px; background:var(--navy); border:1px solid var(--line); text-align:center; }
.rla-email-eyebrow { font-family:var(--font-body); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.rla-email-capture h4 { font-family:var(--font-display); font-size:24px; color:var(--white); font-weight:400; margin-bottom:18px; }
.rla-email-capture h4 em { font-style:italic; color:var(--gold); }
.rla-email-form { display:flex; max-width:480px; margin:0 auto; border:1px solid var(--line); }
.rla-email-form input { flex:1; background:transparent; border:none; padding:14px 18px; color:var(--white); font-family:var(--font-body); font-size:14px; }
.rla-email-form input:focus { outline:none; }
.rla-email-form button { font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--navy); background:var(--gold); border:none; padding:14px 24px; cursor:pointer; white-space:nowrap; }
.rla-email-note { font-family:var(--font-body); font-size:11px; color:var(--white-faint); margin-top:12px; }
.rla-email-success { display:none; font-family:var(--font-body); font-size:14px; color:var(--gold); margin-top:16px; }
.rla-restart { font-family:var(--font-mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--white-faint); background:transparent; border:none; cursor:pointer; padding:0; margin:48px auto 0; display:block; transition:color 0.2s; }
.rla-restart:hover { color:var(--gold); }
@media (max-width:760px){
.rla-hero h1 { font-size:38px; }
.rla-question h2 { font-size:27px; }
.rla-quiz-section { padding:28px 0 72px; }
.rla-rec { padding:28px 22px; }
.rla-rec-cta { flex-direction:column; }
.rla-rec-cta .btn-primary, .rla-rec-cta .btn-secondary { width:100%; min-width:0; }
.rla-email-form { flex-direction:column; border:none; gap:12px; }
.rla-email-form input { border:1px solid var(--line); }
}
/* ---- Growth Projection: Sofia guide + breakdown + curve + layers -------- */
.gp-guide { display:flex; align-items:center; gap:16px; max-width:760px; margin:0 auto 26px; padding:14px 18px; background:var(--navy-2); border:1px solid var(--line); }
.gp-guide-avatar { width:48px; height:48px; flex-shrink:0; border-radius:50%; overflow:hidden; border:1px solid var(--line-gold); background:var(--navy); }
.gp-guide-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.gp-guide-text { font-family:var(--font-body); font-size:14px; line-height:1.5; color:var(--white-soft); }
.gp-guide-text .gp-guide-name { font-family:var(--font-mono); font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:4px; }
.gp-hero-metric { text-align:center; margin-top:6px; }
.gp-metric-label { font-family:var(--font-body); font-size:14px; color:var(--white-soft); margin-bottom:8px; }
.gp-metric-figure { font-family:var(--font-display); font-style:italic; font-weight:400; font-size:68px; line-height:1; color:var(--gold); }
.gp-metric-sub { font-family:var(--font-body); font-size:15px; color:var(--white-soft); margin-top:12px; }
.gp-metric-dash{ color:var(--gold-soft); font-weight:300; margin:0 .08em; }
.gp-curve-wrap { margin-top:48px; padding:32px; background:var(--navy-2); border:1px solid var(--line); }
.gp-curve-head { text-align:center; margin-bottom:8px; }
.gp-curve-head h3 { font-family:var(--font-display); font-size:28px; color:var(--white); font-weight:400; }
.gp-curve-head h3 em { font-style:italic; color:var(--gold); }
.gp-curve-head p { font-family:var(--font-body); font-size:13px; line-height:1.5; color:var(--white-faint); max-width:600px; margin:10px auto 0; }
.gp-curve-svg { width:100%; height:auto; display:block; margin-top:18px; }
.gp-curve-legend { display:flex; justify-content:center; gap:28px; margin-top:14px; flex-wrap:wrap; }
.gp-legend-item { display:flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:12px; color:var(--white-soft); }
.gp-legend-swatch { width:18px; height:3px; border-radius:2px; }
.gp-curve-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:24px; background:var(--line); border:1px solid var(--line); }
.gp-curve-stat { background:var(--navy); padding:20px 16px; text-align:center; }
.gp-curve-stat .v { font-family:var(--font-display); font-style:italic; font-size:30px; color:var(--gold); line-height:1; }
.gp-curve-stat .l { font-family:var(--font-body); font-size:12px; color:var(--white-faint); margin-top:10px; line-height:1.4; }
.gp-layers { margin-top:40px; }
.gp-layers-title { font-family:var(--font-display); font-size:26px; color:var(--white); font-weight:400; text-align:center; margin-bottom:6px; }
.gp-layers-title em { font-style:italic; color:var(--gold); }
.gp-layers-sub { font-family:var(--font-body); font-size:13px; color:var(--white-faint); text-align:center; max-width:600px; margin:0 auto 24px; line-height:1.5; }
.gp-layer { display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.gp-layer:first-child { border-top:1px solid var(--line); }
.gp-layer-num { font-family:var(--font-mono); font-size:12px; color:var(--gold); flex-shrink:0; padding-top:2px; }
.gp-layer-body h4 { font-family:var(--font-body); font-size:15px; font-weight:600; color:var(--white); margin-bottom:4px; }
.gp-layer-body p { font-family:var(--font-body); font-size:13px; line-height:1.55; color:var(--white-soft); }
.gp-layer-marker { display:flex; flex-direction:column; align-items:center; gap:7px; flex-shrink:0; padding-top:2px; }
.gp-layer-icon { width:30px; height:30px; color:var(--gold); }
.gp-layer-icon svg { width:30px; height:30px; display:block; }
.gp-layer-marker .gp-layer-num { padding-top:0; }
.gp-proof { margin-top:44px; padding:32px; background:var(--navy); border:1px solid var(--line); }
.gp-proof-eyebrow { font-family:var(--font-body); font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); text-align:center; margin-bottom:16px; }
.gp-proof-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.gp-proof-cell { text-align:center; }
.gp-proof-cell .pn { font-family:var(--font-display); font-size:38px; color:var(--white); line-height:1; }
.gp-proof-cell .pn .u { font-size:22px; color:var(--gold); }
.gp-proof-cell .pl { font-family:var(--font-body); font-size:12px; line-height:1.45; color:var(--white-soft); margin-top:10px; }
.gp-proof-cell .ps { font-family:var(--font-mono); font-size:8px; letter-spacing:0.12em; text-transform:uppercase; color:var(--white-faint); margin-top:8px; }
.gp-proof-link { text-align:center; margin-top:24px; padding-top:18px; border-top:1px solid var(--line); font-family:var(--font-body); font-size:12px; color:var(--white-faint); }
.gp-proof-link-a { font-family:var(--font-mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); background:none; border:none; cursor:pointer; padding:0; transition:opacity 0.2s; }
.gp-proof-link-a:hover { opacity:0.7; }
.gp-proof-link-sep { color:var(--line-bright); margin:0 6px; }
@media (max-width:760px){
.gp-metric-figure { font-size:48px; }
.gp-curve-stats { grid-template-columns:1fr; }
.gp-proof-grid { grid-template-columns:1fr 1fr; gap:20px 16px; }
.gp-curve-wrap, .gp-proof { padding:22px 16px; }
}
/* detailed breakdown */
.gp-breakdown{ max-width:680px; margin:0 auto 30px; background:var(--navy-2); border:1px solid var(--line); border-radius:14px; padding:24px 26px; }
.gp-breakdown-title{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:14px; }
.gp-breakdown-intro{ font-size:13px; line-height:1.55; color:var(--white-dim); margin:-4px 0 16px; }
.gp-breakdown-rows{ display:flex; flex-direction:column; }
.gpb-row{ display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:9px 0; border-bottom:1px solid rgba(248,247,244,0.06); }
.gpb-row:last-child{ border-bottom:none; }
.gpb-k{ font-size:14px; color:var(--white-soft); line-height:1.4; }
.gpb-hint{ display:block; font-size:11.5px; color:var(--white-dim); margin-top:2px; font-style:italic; }
.gpb-v{ font-family:var(--font-mono); font-size:15px; color:var(--white); white-space:nowrap; flex:0 0 auto; }
.gpb-sub .gpb-k, .gpb-sub .gpb-v{ color:var(--gold-soft); }
.gpb-total{ margin-top:4px; border-top:1px solid var(--line-bright); border-bottom:none; padding-top:14px; }
.gpb-total .gpb-k{ font-weight:600; color:var(--white); }
.gpb-total .gpb-v{ font-size:19px; color:var(--gold); }
.gp-breakdown-note{ font-size:12.5px; line-height:1.6; color:var(--white-dim); margin-top:16px; }
.gp-breakdown-note .gpb-comp{ margin:8px 0 8px; padding-left:18px; list-style:disc; }
.gp-breakdown-note .gpb-comp li{ margin:7px 0; line-height:1.5; }
.gp-breakdown-note strong{ color:var(--white-soft); }
.gpb-note-lead{ margin:0 0 8px; color:var(--white-soft); font-size:12.5px; line-height:1.55; }
.gpb-c-k{ color:var(--white-soft); }
.gpb-c-s{ color:var(--white-faint); font-style:italic; }
.gpb-note-cap{ margin:12px 0 0; padding-top:12px; border-top:1px solid rgba(248,247,244,0.07); color:var(--white-dim); font-size:12.5px; line-height:1.6; }
.gpb-note-range{ margin:10px 0 0; color:var(--white-dim); font-size:12.5px; line-height:1.6; }
.gpb-note-cap strong, .gpb-note-range strong{ color:var(--gold-soft); }
.gpb-note-range em, .gpb-note-cap em{ color:var(--white-soft); font-style:italic; }
.gpb-ceil{ color:var(--white-faint); font-style:italic; }
/* what this replaces + leverage ladder */
.gp-replace{ max-width:760px; margin:0 auto 30px; background:linear-gradient(180deg, rgba(200,169,107,0.06), rgba(200,169,107,0.02)); border:1px solid var(--line-bright); border-radius:16px; padding:30px 30px 26px; }
.gp-replace-eyebrow{ font-family:var(--font-body); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.gp-replace h3{ font-family:var(--font-display); font-size:27px; line-height:1.2; color:var(--white); margin:0 0 18px; font-weight:500; }
.gp-replace h3 em{ font-style:italic; color:var(--gold); }
.gp-replace-lede{ font-size:15px; line-height:1.65; color:var(--white-soft); margin:0 0 22px; }
.gp-replace-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:24px; }
.gp-replace-item{ display:flex; flex-direction:column; gap:10px; }
.gpr-ico{ color:var(--gold); display:inline-flex; }
.gpr-ico svg{ width:26px; height:26px; }
.gpr-t strong{ display:block; font-size:13.5px; color:var(--white); margin-bottom:4px; }
.gpr-t span{ display:block; font-size:12.5px; line-height:1.55; color:var(--white-dim); }
.gpr-t em{ font-style:normal; color:var(--gold-soft); }
.gp-replace-foot{ font-size:11.5px; line-height:1.6; color:var(--white-faint); margin-top:16px; }
.gp-replace-foot .gp-proof-link-a{ font-size:11.5px; }
.gp-replace-sep{ font-size:12px; line-height:1.55; color:var(--white-faint); font-style:italic; margin:16px 0 0; text-align:center; }
.gp-leverage{ margin:0 0 4px; }
.gp-lev-logic{ font-size:14px; line-height:1.65; color:var(--white-soft); margin:0 0 20px; }
.gp-lev-logic strong{ color:var(--white); }
.gp-lev-logic em{ color:var(--gold); font-style:italic; }
.gp-lev-flat{ font-family:var(--font-mono); font-size:13px; letter-spacing:0.05em; color:var(--gold); text-align:center; padding:12px; border:1px solid var(--line-bright); border-radius:10px; margin-bottom:10px; }
.gp-lev-flat span{ color:var(--white); font-weight:600; }
.gp-lev-sub{ font-size:12.5px; color:var(--white-faint); text-align:center; margin:0 0 14px; line-height:1.55; }
.gp-lev-sub em{ color:var(--white-soft); font-style:normal; }
.gp-lev-ladder{ border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.gp-lev-head, .gp-lev-row{ display:grid; grid-template-columns:1fr 1.3fr 1.3fr; align-items:center; gap:10px; padding:11px 16px; }
.gp-lev-head{ background:var(--navy-2); font-family:var(--font-mono); font-size:10px; letter-spacing:0.07em; text-transform:uppercase; color:var(--white-faint); }
.gp-lev-row{ border-top:1px solid var(--line); font-size:13.5px; color:var(--white-soft); }
.gp-lev-row .lev-c1{ font-weight:600; color:var(--white); }
.gp-lev-row .lev-c2{ color:var(--white-faint); font-variant-numeric:tabular-nums; }
.gp-lev-row .lev-c3{ text-align:right; font-weight:700; color:var(--gold); font-variant-numeric:tabular-nums; }
.gp-lev-row.is-you{ background:rgba(200,169,107,0.10); }
.gp-lev-row.is-you .lev-c1{ color:var(--gold); }
.gp-lev-row.is-you .lev-c1::after{ content:" \2190 you"; font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.06em; color:var(--gold); opacity:0.85; }
.gp-lev-take{ margin-top:16px; font-size:13.5px; line-height:1.6; color:var(--white-soft); padding:14px 16px; background:rgba(200,169,107,0.06); border-left:2px solid var(--gold); border-radius:0 8px 8px 0; }
.gp-lev-take strong{ color:var(--gold); }
@media (max-width:640px){
.gp-replace-grid{ grid-template-columns:1fr; gap:16px; }
.gp-replace{ padding:24px 20px; }
.gp-breakdown{ padding:20px 18px; }
.gp-lev-head{ display:none; }
.gp-lev-row{ grid-template-columns:1fr auto; grid-template-areas:'a c' 'b b'; gap:3px 12px; }
.gp-lev-row .lev-c1{ grid-area:a; }
.gp-lev-row .lev-c3{ grid-area:c; }
.gp-lev-row .lev-c2{ grid-area:b; font-size:12px; }
}
/* ---- Workforce ROI ----------------------------------------------------- */
#page-workforce-roi { --wfr-radius:14px; }
.wfr-hero { padding:96px 7vw 40px; text-align:center; position:relative; }
.wfr-eyebrow { font-family:var(--font-body); font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.wfr-hook { font-family:var(--font-display); font-weight:600; font-size:clamp(40px,6.6vw,82px); line-height:1.02; color:var(--white); margin:0 auto 22px; max-width:14ch; letter-spacing:-0.01em; }
.wfr-hook em { font-style:italic; color:var(--gold); }
.wfr-sub { font-size:clamp(16px,1.7vw,20px); line-height:1.6; color:var(--white-soft); max-width:60ch; margin:0 auto 18px; }
.wfr-microline { font-size:13.5px; line-height:1.6; color:var(--white-faint); max-width:62ch; margin:0 auto; }
.wfr-calc { padding:30px 6vw 110px; }
.wfr-grid { display:grid; grid-template-columns:0.82fr 1.18fr; gap:28px; max-width:1240px; margin:0 auto; align-items:start; }
.wfr-inputs { background:var(--navy-2); border:1px solid var(--line); border-radius:var(--wfr-radius); padding:26px 24px; position:sticky; top:90px; }
.wfr-block-title { font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin:26px 0 14px; padding-bottom:9px; border-bottom:1px solid var(--line); }
.wfr-block-title:first-child { margin-top:0; }
.wfr-role { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; flex-wrap:wrap; }
.wfr-role-label { font-size:13.5px; color:var(--white-soft); flex:1 1 auto; }
.wfr-role-fields { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.wfr-num { background:var(--navy); border:1px solid var(--line-bright); color:var(--white); font-family:var(--font-body); font-size:14px; padding:8px 9px; border-radius:8px; width:90px; text-align:right; -moz-appearance:textfield; }
.wfr-num::-webkit-outer-spin-button, .wfr-num::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.wfr-num:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,169,107,0.15); }
.wfr-num-c { width:56px; }
.wfr-num-pct { width:58px; }
.wfr-select-sm { background:var(--navy); border:1px solid var(--line-bright); color:var(--white); font-family:var(--font-body); font-size:13px; padding:8px 9px; border-radius:8px; max-width:210px; cursor:pointer; }
.wfr-select-sm:focus { outline:none; border-color:var(--gold); }
.wfr-x { color:var(--white-faint); font-size:13px; }
.wfr-dollar { color:var(--white-faint); font-size:13px; margin-right:-2px; }
.wfr-yr { color:var(--white-faint); font-size:12px; }
.wfr-check { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--white-soft); margin-top:8px; cursor:pointer; }
.wfr-check input { width:16px; height:16px; accent-color:var(--gold); }
.wfr-note { font-size:11.5px; line-height:1.5; color:var(--white-faint); font-style:italic; margin:10px 0 2px; }
.wfr-tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.wfr-tier { background:var(--navy); border:1px solid var(--line-bright); border-radius:10px; padding:11px 8px; cursor:pointer; color:var(--white-soft); font-family:var(--font-body); font-size:12px; font-weight:600; display:flex; flex-direction:column; gap:4px; align-items:center; transition:border-color .15s, background .15s; text-align:center; }
.wfr-tier span { font-family:var(--font-mono); font-size:10.5px; color:var(--white-faint); font-weight:400; }
.wfr-tier:hover { border-color:var(--gold-soft); }
.wfr-tier.is-active { border-color:var(--gold); background:rgba(200,169,107,0.10); color:var(--white); }
.wfr-tier.is-active span { color:var(--gold); }
.wfr-results { display:flex; flex-direction:column; gap:18px; }
.wfr-headline { background:linear-gradient(160deg, rgba(200,169,107,0.12), rgba(200,169,107,0.03)); border:1px solid var(--gold-soft); border-radius:var(--wfr-radius); padding:32px 28px; text-align:center; }
.wfr-headline-num { font-family:var(--font-display); font-style:italic; font-weight:600; font-size:clamp(48px,7vw,76px); line-height:1; color:var(--gold); }
.wfr-headline-label { font-size:14px; color:var(--white-soft); margin-top:12px; letter-spacing:0.01em; }
.wfr-savings-note { font-size:12px; color:var(--white-faint); margin-top:10px; line-height:1.5; }
.wfr-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--wfr-radius); overflow:hidden; }
.wfr-kpi { background:var(--navy); padding:20px 16px; text-align:center; }
.wfr-kpi-hi { background:var(--navy-2); }
.wfr-kpi-v { font-family:var(--font-display); font-style:italic; font-size:30px; line-height:1; color:var(--white); }
.wfr-kpi-hi .wfr-kpi-v { color:var(--gold); }
.wfr-kpi-l { font-size:11px; color:var(--white-faint); margin-top:10px; line-height:1.4; }
.wfr-kpi-sub { font-size:10.5px; color:var(--gold-soft); margin-top:5px; }
.wfr-mini { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--wfr-radius); overflow:hidden; }
.wfr-mini-i { background:var(--navy); padding:16px; text-align:center; }
.wfr-mini-i span:first-child { display:block; font-family:var(--font-mono); font-size:15px; color:var(--gold); }
.wfr-mini-i span:last-child { display:block; font-size:11px; color:var(--white-faint); margin-top:6px; }
.wfr-missed { background:var(--navy-2); border:1px dashed var(--gold-soft); border-radius:var(--wfr-radius); padding:22px 24px; display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
.wfr-missed-num { font-family:var(--font-display); font-style:italic; font-size:38px; line-height:1; color:var(--gold); flex:0 0 auto; }
.wfr-missed-l { font-size:13.5px; color:var(--white-soft); line-height:1.55; flex:1 1 200px; }
.wfr-missed-l span { display:block; font-size:11.5px; color:var(--white-faint); font-style:italic; margin-top:5px; }
.wfr-compare { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.wfr-col { border:1px solid var(--line); border-radius:var(--wfr-radius); padding:20px 18px; }
.wfr-col-ai { border-color:var(--gold-soft); background:rgba(200,169,107,0.05); }
.wfr-col-h { font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:14px; color:var(--white-faint); }
.wfr-col-ai .wfr-col-h { color:var(--gold); }
.wfr-col ul { list-style:none; margin:0; padding:0; }
.wfr-col li { font-size:13px; color:var(--white-soft); padding:6px 0 6px 20px; position:relative; line-height:1.4; }
.wfr-col-human li::before { content:'\2014'; position:absolute; left:0; color:var(--white-faint); }
.wfr-col-ai li::before { content:'\2713'; position:absolute; left:0; color:var(--gold); }
.wfr-philo { font-size:13.5px; line-height:1.65; color:var(--white-soft); padding:0 4px; }
.wfr-cta { background:var(--navy-2); border:1px solid var(--line); border-radius:var(--wfr-radius); padding:30px 28px; text-align:center; }
.wfr-cta h3 { font-family:var(--font-display); font-weight:600; font-size:30px; color:var(--white); margin:0 0 10px; }
.wfr-cta p { font-size:14px; line-height:1.6; color:var(--white-soft); max-width:54ch; margin:0 auto 20px; }
.wfr-cta-btn { background:var(--gold); color:var(--navy); border:none; border-radius:10px; padding:14px 30px; font-family:var(--font-body); font-size:15px; font-weight:600; cursor:pointer; transition:transform .15s, box-shadow .15s; }
.wfr-cta-btn:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(200,169,107,0.25); }
.wfr-disclaimer { font-size:11.5px; line-height:1.6; color:var(--white-faint); text-align:center; max-width:70ch; margin:0 auto; }
@media (max-width:920px){
.wfr-grid { grid-template-columns:1fr; }
.wfr-inputs { position:static; }
.wfr-kpis { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
.wfr-kpis { grid-template-columns:1fr 1fr; }
.wfr-tiers { grid-template-columns:1fr; }
.wfr-compare { grid-template-columns:1fr; }
}
/* ---- Scaling slider ---------------------------------------------------- */
.scl-section { padding:48px 0; }
.scl-inner { max-width:880px; margin:0 auto; padding:0 24px; text-align:center; }
.scl-inner .eyebrow { font-family:var(--font-body); font-size:var(--fs-fine); font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.scl-inner .display { font-family:var(--font-display); font-size:32px; line-height:1.1; color:var(--white); font-weight:400; margin:0 0 14px; }
.scl-inner .display em { font-style:italic; color:var(--gold); }
.scl-inner .lead { font-family:var(--font-body); font-size:15px; line-height:1.6; color:var(--white-soft); max-width:620px; margin:0 auto 28px; }
.scl-wrap { background:var(--navy-2); border:1px solid var(--line); border-radius:16px; padding:28px 26px; text-align:left; }
.scl-controls { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:18px; }
.scl-controls:first-child { margin-top:0; }
.scl-control-label { font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--white-faint); flex:0 0 auto; }
.scl-slider { flex:1 1 220px; accent-color:var(--gold); height:4px; cursor:pointer; }
.scl-team-val { font-family:var(--font-display); font-style:italic; font-size:28px; color:var(--gold); flex:0 0 auto; min-width:1.5ch; text-align:center; }
.scl-tier-pick { display:flex; gap:8px; flex:1 1 auto; flex-wrap:wrap; }
.scl-tier-btn { background:var(--navy); border:1px solid var(--line-bright); border-radius:10px; padding:10px 16px; cursor:pointer; color:var(--white-soft); font-family:var(--font-body); font-size:13px; font-weight:600; transition:border-color .15s, background .15s, color .15s; }
.scl-tier-btn:hover { border-color:var(--gold-soft); }
.scl-tier-btn.is-active { border-color:var(--gold); background:rgba(200,169,107,0.10); color:var(--white); }
.scl-chart-wrap { margin-top:26px; }
.scl-chart { width:100%; height:auto; display:block; }
.scl-legend { display:flex; justify-content:center; gap:26px; margin-top:12px; flex-wrap:wrap; }
.scl-legend span { display:flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:12px; color:var(--white-soft); }
.scl-legend i { width:16px; height:3px; border-radius:2px; display:inline-block; }
.scl-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:26px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.scl-stat { background:var(--navy); padding:18px 14px; text-align:center; }
.scl-stat-v { font-family:var(--font-display); font-style:italic; font-size:26px; color:var(--gold); line-height:1; }
.scl-stat-l { font-family:var(--font-body); font-size:11px; color:var(--white-faint); margin-top:9px; line-height:1.4; }
.scl-takeaway { font-family:var(--font-body); font-size:13.5px; line-height:1.65; color:var(--white-soft); margin:22px 0 0; padding:14px 16px; background:rgba(200,169,107,0.06); border-left:2px solid var(--gold); border-radius:0 8px 8px 0; }
@media (max-width:640px){
.scl-inner .display { font-size:26px; }
.scl-stats { grid-template-columns:1fr; }
.scl-wrap { padding:22px 18px; }
/* Stack the slider controls: label on its own line, slider full width,
so the long mono label can't spill past the card edge. */
.scl-controls { gap:10px; }
.scl-control-label { flex:1 1 100%; }
.scl-slider { flex:1 1 100%; }
}
/* ===== components/landing-pages.css ===== */
/* =========================================================================
Proto-page extras — CSS for the bespoke viz/section classes used by the
injected ai-agents / ai-agents-standalone / websites bodies that the theme
did not already style. Pulled verbatim from the prototype by
tools/extract-proto-css.mjs; fonts are self-hosted, only the --white* /
--line-bright / --gold-soft palette tokens are aliased to theme tokens.
========================================================================= */
.site-main {
--white: var(--text);
--white-soft: var(--text-secondary);
--white-faint: var(--text-muted);
--white-dim: var(--text-muted);
--line-bright: rgba(248, 247, 244, 0.22);
--gold-soft: rgba(200, 169, 107, 0.55);
}
.pricing-face-btn { transition: transform 0.2s ease; }
.pricing-face-btn img { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.pricing-face-btn:hover { transform: translateY(-4px); }
.pricing-face-btn:hover img { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,169,107,0.25); }
.pricing-face-btn:focus-visible { outline: none; }
.pricing-face-btn:focus-visible img { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200,169,107,0.45); }
/* PRICING + STANDALONE ECONOMIC ANCHOR PERSONALIZATION */
.vert-personalized-anchor {
display: none;
margin-top: 32px;
padding: 24px 28px;
border: 1px solid var(--line-gold);
background: rgba(200, 169, 107, 0.06);
}
body.has-vertical .vert-personalized-anchor { display: block; }
.vert-personalized-anchor-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 10px;
}
.vert-personalized-anchor-text {
font-size: 14px;
color: var(--white);
line-height: 1.6;
margin: 0;
}
.vert-personalized-anchor-text strong { color: var(--gold); }
/* Industry card variant — used on /ai-agents-standalone */
.industries-grid .industry-card {
padding: 36px 32px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: flex; flex-direction: column;
transition: background 0.4s;
}
.industries-grid .industry-card:hover { background: var(--navy-2); }
.industry-eyebrow {
font-family: 'JetBrains Mono', monospace; font-size: 10px;
color: var(--gold); letter-spacing: 0.22em; text-transform: uppercase;
margin-bottom: 16px;
}
.industries-grid .industry-card h4 {
font-family: 'Cormorant Garamond', serif;
font-size: 24px; font-weight: 400; letter-spacing: -0.01em;
color: var(--white); line-height: 1.2;
margin: 0 0 12px;
}
.industry-desc {
font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.6;
color: var(--white-soft); margin: 0 0 24px;
}
.industry-meta { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.industry-meta-row {
display: grid; grid-template-columns: 110px 1fr; gap: 12px;
font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.5;
padding: 6px 0;
}
.industry-meta-row .meta-label {
font-family: 'JetBrains Mono', monospace; font-size: 9px;
color: var(--gold); letter-spacing: 0.18em; text-transform: uppercase;
padding-top: 2px;
}
.industry-meta-row .meta-value { color: var(--white-soft); }
/* Also serving strip — used on /ai-agents-standalone */
.also-serving-strip {
margin-top: 56px;
padding: 36px 32px;
border: 1px solid var(--line);
background: rgba(200, 169, 107, 0.03);
}
.also-serving-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold); margin-bottom: 20px;
}
.also-serving-list {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;
}
.also-serving-item { padding-right: 8px; }
.also-serving-name {
font-family: 'Cormorant Garamond', serif;
font-size: 18px; font-weight: 500; color: var(--white);
margin-bottom: 8px; line-height: 1.2;
}
.also-serving-detail {
font-family: 'Inter', sans-serif; font-size: 12px;
color: var(--white-soft); line-height: 1.5;
}
@media (max-width: 1100px) {
.also-serving-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
.also-serving-list { grid-template-columns: 1fr; }
}
/* ============================================================
FUNCTION REPLACEMENT POSITIONING — META FRAME + VIZ + LAYERED
============================================================ */
/* META FRAME — opens the positioning */
.meta-frame {
padding: 56px 48px;
border: 1px solid var(--line-gold);
background: linear-gradient(180deg, rgba(200, 169, 107, 0.06) 0%, rgba(200, 169, 107, 0.02) 100%);
max-width: 1080px;
margin: 0 auto;
}
.meta-frame-h2 {
font-family: 'Cormorant Garamond', serif;
font-size: 42px;
font-weight: 400;
color: var(--white);
margin: 18px 0 28px;
line-height: 1.15;
}
.meta-frame-h2 em { font-style: italic; color: var(--gold); }
.meta-frame-lede {
font-size: 16px;
color: var(--white-soft);
line-height: 1.7;
margin-bottom: 18px;
}
.meta-frame-lede:last-child { margin-bottom: 0; }
.meta-frame-lede strong { color: var(--white); }
.meta-frame-lede em { color: var(--gold); font-style: italic; }
/* VIZ 1 — CAPACITY GAP */
.viz-capacity {
border: 1px solid var(--line);
max-width: 1100px;
margin: 0 auto;
}
.viz-cap-row {
display: grid;
grid-template-columns: 1.3fr 1.8fr 1.8fr;
gap: 0;
border-bottom: 1px solid var(--line);
align-items: center;
}
.viz-cap-row:last-child { border-bottom: none; }
.viz-cap-header {
background: rgba(200, 169, 107, 0.06);
border-bottom: 1px solid var(--line-gold);
}
.viz-cap-header .viz-cap-dim,
.viz-cap-header .viz-cap-human,
.viz-cap-header .viz-cap-ai {
padding: 18px 22px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
font-weight: 500;
text-align: left;
}
.viz-cap-header .viz-cap-sub {
font-family: 'Inter', sans-serif;
font-size: 10px;
color: var(--white-dim);
font-weight: 400;
text-transform: none;
letter-spacing: 0.02em;
display: block;
margin-top: 4px;
}
.viz-cap-dim {
padding: 22px;
font-size: 13px;
color: var(--white);
font-weight: 500;
border-right: 1px solid var(--line);
}
.viz-cap-human, .viz-cap-ai {
padding: 22px;
border-right: 1px solid var(--line);
}
.viz-cap-ai { border-right: none; }
.viz-cap-bar {
width: 100%;
height: 6px;
background: rgba(248, 247, 244, 0.05);
margin-bottom: 10px;
position: relative;
}
.viz-cap-fill {
height: 100%;
}
.viz-cap-fill-human {
background: rgba(248, 247, 244, 0.3);
}
.viz-cap-fill-ai {
background: var(--gold);
}
.viz-cap-val {
font-size: 13px;
color: var(--white-soft);
line-height: 1.4;
}
.viz-cap-val-gold {
color: var(--white);
font-weight: 500;
}
.viz-cap-sub {
display: block;
font-size: 11px;
color: var(--white-dim);
margin-top: 4px;
}
.viz-cap-cost {
background: rgba(200, 169, 107, 0.06);
border-top: 1px solid var(--line-gold);
}
.viz-cap-cost .viz-cap-dim {
font-size: 14px;
color: var(--gold);
}
.viz-cap-cost-val {
font-family: 'Cormorant Garamond', serif;
font-size: 28px;
font-weight: 500;
color: var(--white-soft);
line-height: 1.1;
}
.viz-cap-cost-val.viz-cap-val-gold {
color: var(--gold);
}
.viz-cap-cost-val .viz-cap-sub {
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 400;
display: inline-block;
margin-left: 6px;
color: var(--white-dim);
}
.viz-caption {
font-size: 11px;
color: var(--white-dim);
line-height: 1.6;
max-width: 760px;
margin: 24px auto 0;
font-style: italic;
}
@media (max-width: 900px) {
.viz-cap-row {
grid-template-columns: 1fr;
}
.viz-cap-dim, .viz-cap-human, .viz-cap-ai {
border-right: none;
border-bottom: 1px solid var(--line);
}
.viz-cap-row:last-child .viz-cap-ai { border-bottom: none; }
.meta-frame { padding: 36px 24px; }
.meta-frame-h2 { font-size: 28px; }
}
/* VIZ 2 — COST PER CONVERSATION */
.viz-cpc {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0;
max-width: 1100px;
margin: 0 auto;
border: 1px solid var(--line);
}
.viz-cpc-side {
padding: 56px 48px;
text-align: center;
}
.viz-cpc-human {
background: rgba(248, 247, 244, 0.02);
border-right: 1px solid var(--line);
}
.viz-cpc-ai {
background: rgba(200, 169, 107, 0.05);
border-left: 1px solid var(--line);
}
.viz-cpc-label {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 12px;
}
.viz-cpc-detail {
font-size: 12px;
color: var(--white-dim);
margin-bottom: 24px;
}
.viz-cpc-num {
font-family: 'Cormorant Garamond', serif;
font-size: 96px;
font-weight: 300;
color: var(--white);
line-height: 1;
margin-bottom: 16px;
}
.viz-cpc-ai .viz-cpc-num { color: var(--gold); }
.viz-cpc-unit {
font-size: 24px;
color: var(--white-dim);
font-style: italic;
font-weight: 400;
margin-left: 4px;
}
.viz-cpc-foot {
font-size: 12px;
color: var(--white-soft);
font-style: italic;
}
.viz-cpc-mult {
padding: 32px 28px;
text-align: center;
border-left: 1px solid var(--line-gold);
border-right: 1px solid var(--line-gold);
background: var(--navy-2);
}
.viz-cpc-mult-num {
font-family: 'Cormorant Garamond', serif;
font-size: 72px;
font-weight: 500;
color: var(--gold);
line-height: 1;
}
.viz-cpc-mult-x {
font-size: 36px;
vertical-align: super;
margin-left: 4px;
}
.viz-cpc-mult-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--gold);
margin-top: 12px;
max-width: 140px;
margin-left: auto;
margin-right: auto;
line-height: 1.4;
}
@media (max-width: 900px) {
.viz-cpc { grid-template-columns: 1fr; }
.viz-cpc-human, .viz-cpc-ai {
border-right: none; border-left: none;
border-bottom: 1px solid var(--line);
}
.viz-cpc-num { font-size: 64px; }
.viz-cpc-mult { border: none; border-bottom: 1px solid var(--line-gold); padding: 24px; }
.viz-cpc-mult-num { font-size: 48px; }
}
/* VIZ 3 — COMPETITIVE TIMELINE */
.viz-timeline {
max-width: 1100px;
margin: 0 auto;
padding: 48px 32px 36px;
border: 1px solid var(--line);
position: relative;
}
.viz-tl-axis {
display: grid;
grid-template-columns: repeat(6, 1fr);
margin-bottom: 32px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}
.viz-tl-q {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--white-dim);
text-align: center;
}
.viz-tl-curves {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
}
.viz-tl-curve {
padding: 24px;
border: 1px solid var(--line);
text-align: center;
}
.viz-tl-curve-early {
border-color: var(--line-gold);
background: rgba(200, 169, 107, 0.06);
}
.viz-tl-curve-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 16px;
}
.viz-tl-curve-early .viz-tl-curve-label { color: var(--gold); }
.viz-tl-curve-late .viz-tl-curve-label { color: var(--white-dim); }
.viz-tl-curve-bar {
width: 60%;
background: linear-gradient(180deg, var(--gold) 0%, rgba(200, 169, 107, 0.3) 100%);
margin: 0 auto 16px;
border-radius: 2px 2px 0 0;
min-height: 32px;
max-height: 140px;
}
.viz-tl-curve-late .viz-tl-curve-bar {
background: linear-gradient(180deg, rgba(248, 247, 244, 0.4) 0%, rgba(248, 247, 244, 0.1) 100%);
}
.viz-tl-curve-detail {
font-size: 12px;
color: var(--white-soft);
line-height: 1.5;
}
.viz-tl-now {
position: absolute;
top: 0;
left: 33%;
height: 100%;
pointer-events: none;
}
.viz-tl-now-line {
width: 1px;
height: 100%;
background: var(--gold);
opacity: 0.6;
}
.viz-tl-now-label {
position: absolute;
top: -22px;
left: -34px;
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
background: var(--navy);
padding: 4px 8px;
}
@media (max-width: 900px) {
.viz-tl-curves { grid-template-columns: 1fr; gap: 24px; }
.viz-timeline { padding: 36px 20px 28px; }
.viz-tl-now { display: none; }
}
/* LAYERED FRAME — 3 stacked rows of capability, math, timing */
.layered-frame {
max-width: 1080px;
margin: 0 auto;
border: 1px solid var(--line);
}
.layered-row {
display: grid;
grid-template-columns: 220px 1fr;
gap: 0;
border-bottom: 1px solid var(--line);
align-items: stretch;
}
.layered-row:last-child { border-bottom: none; }
.layered-tag {
background: rgba(200, 169, 107, 0.05);
padding: 40px 32px;
border-right: 1px solid var(--line);
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
display: flex;
align-items: flex-start;
}
.layered-content {
padding: 40px 36px;
}
.layered-content h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 26px;
font-weight: 400;
color: var(--white);
margin: 0 0 16px;
line-height: 1.25;
}
.layered-content h3 em { font-style: italic; color: var(--gold); }
.layered-content p {
font-size: 14px;
color: var(--white-soft);
line-height: 1.7;
margin: 0;
}
.layered-content p strong { color: var(--white); }
@media (max-width: 900px) {
.layered-row { grid-template-columns: 1fr; }
.layered-tag {
border-right: none;
border-bottom: 1px solid var(--line);
padding: 20px 24px;
}
.layered-content { padding: 28px 24px; }
.layered-content h3 { font-size: 22px; }
}
.team-meta-row .meta-label {
font-family: 'JetBrains Mono', monospace; font-size: 9px;
color: var(--gold); letter-spacing: 0.16em; text-transform: uppercase;
padding-top: 2px;
}
.team-meta-row .meta-value { color: var(--white-soft); }
.stats-head { text-align: center; max-width: 720px; margin: 0 auto 70px; }
.stats-head .eyebrow { justify-content: center; margin-bottom: 28px; }
.stats-head h2 { margin-bottom: 24px; }
.hew-wrap { max-width:1100px; margin:0 auto; }
.hew-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:26px; }
.hew-cell { background:var(--navy); padding:24px 18px; }
.hew-cell-ico { width:30px; height:30px; color:var(--gold); margin-bottom:14px; }
.hew-cell h4 { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:19px; color:var(--white); margin:0 0 8px; }
.hew-cell p { font-size:13px; line-height:1.55; color:var(--white-soft); margin:0; }
.hew-foot { margin-top:22px; font-size:13.5px; line-height:1.65; color:var(--white-soft); text-align:center; max-width:72ch; margin-left:auto; margin-right:auto; }
.hew-foot strong { color:var(--gold); }
@media (max-width:860px){ .hew-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .hew-grid { grid-template-columns:1fr; } }
/* ===== components/talk.css ===== */
/* =========================================================================
v175 · TALK page — standalone Sofia landing (mini-nav + bundles + agency
math + Sofia stage + mini-footer). Ported from the prototype; palette/font
names aliased to the theme tokens.
========================================================================= */
body.talk-page-active,
.talk-page,
.talk-nav,
.talk-footer {
--white: var(--text);
--white-soft: var(--text-secondary);
--white-faint: var(--text-muted);
--white-dim: var(--text-muted);
--font-serif: var(--font-display);
}
body.talk-page-active { padding-top: 0; }
.talk-page {
min-height: 100vh;
background: var(--navy);
position: relative;
padding-top: 64px;
}
/* ---- Mini nav ------------------------------------------------------------ */
.talk-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
padding: 20px 24px;
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(10, 22, 40, 0.85);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--line);
}
.talk-nav .brand {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-serif);
font-style: italic;
font-size: 15px;
color: var(--text);
}
.talk-nav .brand-mark {
width: 24px;
height: 24px;
display: inline-flex;
}
.talk-nav .brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.talk-nav .back-link {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--white-faint);
cursor: pointer;
user-select: none;
transition: color 0.2s;
}
.talk-nav .back-link:hover { color: var(--gold); }
/* ---- Bundle pricing section ----------------------------------------------- */
.bundle-section {
padding: 92px 0;
background: var(--navy-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.bundle-head { text-align: center; max-width: 880px; margin: 0 auto 80px; }
.bundle-head .eyebrow { justify-content: center; margin-bottom: 28px; }
.bundle-head h2 { margin-bottom: 28px; }
.bundle-head .lede { margin: 0 auto; }
.bundle-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
max-width: 1320px;
margin: 0 auto;
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.bundle-card {
background: var(--navy);
padding: 48px 36px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: flex;
flex-direction: column;
position: relative;
}
.bundle-card.featured {
background: rgba(200, 169, 107, 0.04);
border-left: 1px solid var(--line-gold);
border-right: 1px solid var(--line-gold);
}
.bundle-card.featured::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* Featured badge text comes from the block engine's data-badge attribute */
.bundle-card.featured::after {
content: attr(data-badge);
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
background: var(--gold);
color: var(--navy);
padding: 6px 18px;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
}
.bundle-card .tier-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 16px;
}
.bundle-card h3 {
font-family: var(--font-serif);
font-weight: 300;
font-size: 32px;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--white);
margin-bottom: 12px;
}
.bundle-card h3 em { font-style: italic; color: var(--gold); }
.bundle-card .bundle-desc {
font-size: 14px;
line-height: 1.6;
color: var(--white-soft);
margin-bottom: 32px;
min-height: 44px;
}
.bundle-card .components {
list-style: none;
margin: 0 0 24px;
padding: 0 0 24px;
border-bottom: 1px solid var(--line);
}
.bundle-card .components li {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--white);
padding: 8px 0 8px 22px;
position: relative;
line-height: 1.4;
}
.bundle-card .components li::before {
content: '+';
position: absolute;
left: 0;
top: 6px;
font-family: var(--font-body);
font-weight: 300;
font-size: 18px;
color: var(--gold);
line-height: 1;
}
.bundle-card .price-block { margin: 8px 0 12px; }
.bundle-card .strike {
font-family: var(--font-mono);
font-size: 11px;
color: var(--white-faint);
text-decoration: line-through;
letter-spacing: 0.08em;
margin-bottom: 6px;
}
.bundle-card .price {
font-family: var(--font-serif);
font-weight: 300;
font-size: 56px;
letter-spacing: -0.025em;
line-height: 1;
color: var(--white);
margin-bottom: 8px;
}
.bundle-card .price-period {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--white-faint);
margin-bottom: 12px;
}
.bundle-card .savings {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 32px;
padding: 8px 12px;
border: 1px solid var(--gold);
display: inline-block;
align-self: flex-start;
}
.btn-tier {
display: inline-block;
background: transparent;
color: var(--gold);
border: 1px solid var(--gold);
padding: 14px 24px;
text-align: center;
cursor: pointer;
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
transition: all 0.3s;
text-decoration: none;
user-select: none;
white-space: nowrap;
}
.btn-tier:hover { background: var(--gold); color: var(--navy); }
.bundle-card.featured .btn-tier {
background: var(--gold);
color: var(--navy);
}
.bundle-card.featured .btn-tier:hover {
background: transparent;
color: var(--gold);
}
.bundle-card .btn-tier {
display: block;
width: 100%;
margin-top: auto;
}
/* ---- Agency cost comparison ------------------------------------------------ */
.traditional-compare { padding: 68px 0; }
.traditional-compare .bundle-head { margin-bottom: 0; }
.traditional-grid {
display: grid;
grid-template-columns: 1fr 1fr;
max-width: 1180px;
margin: 60px auto 0;
border: 1px solid var(--line);
}
.traditional-col { padding: 48px 40px; }
.traditional-col.old { background: var(--navy); }
.traditional-col.new {
background: rgba(200, 169, 107, 0.04);
border-left: 1px solid var(--line-gold);
}
.traditional-col h4 {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--white-faint);
margin: 0 0 18px;
}
.traditional-col.new h4 { color: var(--gold); }
.traditional-col .big-number {
font-family: var(--font-serif);
font-weight: 300;
font-size: 56px;
letter-spacing: -0.025em;
line-height: 1;
color: var(--white);
margin-bottom: 8px;
}
.traditional-col .big-number em { font-style: italic; color: var(--gold); }
.traditional-col .sub-line {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--white-faint);
margin-bottom: 32px;
}
.traditional-col ul { list-style: none; margin: 0; padding: 0; }
.traditional-col ul li {
font-size: 14px;
line-height: 1.6;
color: var(--white-soft);
padding: 12px 0 12px 22px;
border-bottom: 1px solid var(--line);
position: relative;
}
.traditional-col ul li:last-child { border-bottom: none; }
.traditional-col ul li::before {
content: '';
position: absolute;
left: 0;
top: 20px;
width: 12px;
height: 1px;
background: var(--white-faint);
}
.traditional-col.new ul li::before { background: var(--gold); }
.traditional-col li strong { color: var(--white); }
/* ---- Sofia talk hero --------------------------------------------------------- */
.talk-hero {
min-height: 100vh;
padding: 80px 24px 40px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
}
.talk-hero-inner {
max-width: 560px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.talk-hero .eyebrow { margin-bottom: 20px; }
.talk-hero h1 {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(34px, 7vw, 56px);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--white);
margin-bottom: 20px;
}
.talk-hero h1 em { font-style: italic; color: var(--gold); }
.talk-hero .talk-lede {
font-family: var(--font-body);
font-weight: 300;
font-size: clamp(15px, 4.2vw, 18px);
line-height: 1.6;
color: var(--white-soft);
max-width: 44ch;
margin-bottom: 36px;
letter-spacing: 0.005em;
}
.talk-hero .talk-lede strong { color: var(--white); font-weight: 500; }
.talk-sofia-stage {
width: 100%;
max-width: 340px;
margin: 8px auto 36px;
aspect-ratio: 4/5;
position: relative;
}
.talk-sofia-stage .sofia-frame {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background: var(--navy-2);
border: 1px solid var(--line-gold);
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.4);
}
.talk-sofia-stage .sofia-frame img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 22%;
filter: brightness(0.95) contrast(1.04);
}
.talk-sofia-stage .sofia-frame::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(10, 22, 40, 0.7) 100%);
pointer-events: none;
}
.talk-sofia-stage .corner {
position: absolute;
width: 20px;
height: 20px;
border-color: var(--gold);
z-index: 4;
}
.talk-sofia-stage .corner.tl { top: 16px; left: 16px; border-top: 1px solid; border-left: 1px solid; }
.talk-sofia-stage .corner.tr { top: 16px; right: 16px; border-top: 1px solid; border-right: 1px solid; }
.talk-sofia-stage .corner.bl { bottom: 16px; left: 16px; border-bottom: 1px solid; border-left: 1px solid; }
.talk-sofia-stage .corner.br { bottom: 16px; right: 16px; border-bottom: 1px solid; border-right: 1px solid; }
.talk-sofia-stage .sofia-hud {
position: absolute;
left: 28px;
right: 28px;
bottom: 28px;
z-index: 3;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
text-align: left;
}
.talk-sofia-stage .sofia-id .label {
font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--gold);
margin-bottom: 8px;
}
.talk-sofia-stage .sofia-id .name {
font-family: var(--font-serif);
font-size: 28px;
font-style: italic;
font-weight: 400;
color: var(--white);
line-height: 1;
}
.talk-sofia-stage .sofia-id .role {
font-size: 12px;
color: var(--white-soft);
margin-top: 6px;
}
.talk-sofia-stage .sofia-status {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(10, 22, 40, 0.85);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border: 1px solid var(--line-gold);
font-family: var(--font-mono);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--gold);
}
.talk-sofia-stage .status-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 8px var(--gold);
animation: smTalkDotPulse 2.5s ease-in-out infinite;
}
@keyframes smTalkDotPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.talk-cta {
background: var(--gold);
color: var(--navy);
padding: 22px 40px;
border: 1px solid var(--gold);
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 14px;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none;
min-width: 280px;
justify-content: center;
box-shadow: 0 0 0 0 rgba(200, 169, 107, 0);
animation: smTalkPulse 3s ease-in-out infinite;
position: relative;
}
@keyframes smTalkPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(200, 169, 107, 0); }
50% { box-shadow: 0 0 0 12px rgba(200, 169, 107, 0); }
}
.talk-cta:hover {
background: transparent;
color: var(--gold);
animation: none;
}
.talk-cta .pulse-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 8px #10b981;
animation: smTalkDotPulse 2s infinite;
flex-shrink: 0;
}
.talk-meta-row {
margin-top: 24px;
display: flex;
gap: 28px;
flex-wrap: wrap;
justify-content: center;
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--white-faint);
}
.talk-meta-row span { display: inline-flex; align-items: center; gap: 8px; }
.talk-meta-row span::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--gold);
}
.talk-capabilities {
margin: 56px auto 0;
max-width: 560px;
width: 100%;
border-top: 1px solid var(--line);
padding-top: 36px;
}
.talk-capabilities .cap-title {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.22em;
color: var(--gold);
margin-bottom: 20px;
}
.talk-capabilities ul {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 24px;
}
.talk-capabilities li {
font-size: 13px;
line-height: 1.5;
color: var(--white-soft);
padding: 8px 0 8px 20px;
position: relative;
}
.talk-capabilities li::before {
content: '';
position: absolute;
left: 0;
top: 17px;
width: 10px;
height: 1px;
background: var(--gold);
}
/* ---- Mini footer --------------------------------------------------------------- */
.talk-footer {
padding: 40px 24px;
border-top: 1px solid var(--line);
text-align: center;
}
.talk-footer-mini {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--white-faint);
margin-bottom: 12px;
}
.talk-footer-mini a {
color: var(--white-faint);
text-decoration: none;
cursor: pointer;
transition: color 0.2s;
}
.talk-footer-mini a:hover { color: var(--gold); }
.talk-footer-disclaimer {
font-size: 12px;
line-height: 1.6;
color: var(--white-dim);
max-width: 44ch;
margin: 0 auto;
}
/* ---- Responsive ------------------------------------------------------------------ */
@media (max-width: 960px) {
.bundle-grid { grid-template-columns: minmax(0, 1fr); }
.traditional-grid { grid-template-columns: minmax(0, 1fr); }
.bundle-card, .traditional-col { min-width: 0; }
.traditional-col.new { border-left: none; border-top: 1px solid var(--line-gold); }
}
@media (max-width: 600px) {
.talk-hero { padding: 80px 20px 32px; }
.talk-sofia-stage { max-width: 280px; }
.talk-cta { width: 100%; min-width: 0; padding: 20px 24px; font-size: 13px; }
.talk-capabilities ul { grid-template-columns: 1fr; gap: 0; }
.bundle-card { padding: 32px 24px; }
}
/* ===== components/agents.css ===== */
/* =========================================================================
v175 · THE AGENTS page sections — hero meta strip, thesis manifesto,
infrastructure, three-tier personas, personality dial, channel stack,
voice + phone, math of replacement, closing manifesto, faces process.
Ported from the prototype; palette/font names aliased to the theme tokens
(same approach as the calculators in v104-pages.css).
========================================================================= */
.agents-hero-meta-band,
.agents-thesis-section,
.agents-infra-section,
.agents-personas-section,
.agents-dial-section,
.agents-channels-section,
.agents-voicephone-section,
.agents-math-section,
.agents-close-section,
.agents-faces-process {
--white: var(--text);
--white-soft: var(--text-secondary);
--white-faint: var(--text-muted);
--gold-soft: rgba(200, 169, 107, 0.55);
--font-serif: var(--font-display);
}
/* ---- Hero actions + meta strip (band directly under the page hero) ------ */
.agents-hero-meta-band {
background: var(--navy);
padding: 0 0 72px;
}
.agents-hero-meta-band .agents-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.agents-hero-meta {
display: flex;
gap: 32px;
margin-top: 56px;
padding-top: 32px;
border-top: 1px solid var(--line);
flex-wrap: wrap;
}
.agents-hero-meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.agents-hero-meta-num {
font-family: var(--font-serif);
font-size: 32px;
color: var(--gold);
font-weight: 400;
letter-spacing: -0.01em;
}
.agents-hero-meta-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.15em;
color: var(--white-soft);
text-transform: uppercase;
}
/* ---- Thesis manifesto ---------------------------------------------------- */
.agents-thesis-section {
padding: 120px 0;
background: var(--navy);
position: relative;
overflow: hidden;
}
.agents-thesis-section::before {
content: '';
position: absolute;
top: -40%;
right: -10%;
width: 60%;
height: 120%;
background: radial-gradient(circle, rgba(200, 169, 107, 0.06) 0%, transparent 60%);
pointer-events: none;
}
.agents-thesis-section .container { position: relative; max-width: 1180px; }
.agents-thesis-head { max-width: 860px; margin-bottom: 72px; }
.agents-thesis-head h2 {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(38px, 4.6vw, 66px);
line-height: 1.04;
letter-spacing: -0.02em;
color: var(--white);
margin-bottom: 28px;
}
.agents-thesis-head h2 em { font-style: italic; color: var(--gold); font-weight: 400; }
.agents-thesis-head p {
font-family: var(--font-body);
font-weight: 300;
font-size: clamp(17px, 1.35vw, 21px);
line-height: 1.68;
color: var(--white-soft);
letter-spacing: 0.005em;
}
.agents-thesis-head p strong { color: var(--white); font-weight: 500; }
.agents-thesis-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
margin-bottom: 80px;
}
.agents-thesis-card {
background: var(--navy);
padding: 48px 44px;
position: relative;
transition: background 0.4s;
}
.agents-thesis-card:hover { background: var(--navy-2); }
.agents-thesis-card-num {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.2em;
color: var(--gold-soft);
margin-bottom: 22px;
}
.agents-thesis-card h3 {
font-family: var(--font-serif);
font-weight: 400;
font-size: 30px;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--white);
margin-bottom: 18px;
}
.agents-thesis-card h3 em { font-style: italic; color: var(--gold); }
.agents-thesis-card p {
font-family: var(--font-body);
font-weight: 300;
font-size: 15.5px;
line-height: 1.68;
color: var(--white-soft);
}
.agents-thesis-card p strong { color: var(--white); font-weight: 500; }
.agents-thesis-card .agents-thesis-stat {
display: block;
font-family: var(--font-serif);
font-size: 19px;
font-style: italic;
color: var(--gold);
margin-top: 18px;
letter-spacing: 0.01em;
}
.agents-thesis-kicker {
border-top: 1px solid var(--line-gold);
padding-top: 56px;
max-width: 920px;
}
.agents-thesis-kicker h3 {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(28px, 3.2vw, 44px);
line-height: 1.12;
letter-spacing: -0.015em;
color: var(--white);
margin-bottom: 24px;
}
.agents-thesis-kicker h3 em { font-style: italic; color: var(--gold); font-weight: 400; }
.agents-thesis-kicker p {
font-family: var(--font-body);
font-weight: 300;
font-size: 17px;
line-height: 1.7;
color: var(--white-soft);
margin-bottom: 18px;
}
.agents-thesis-kicker p:last-of-type { margin-bottom: 0; }
.agents-thesis-kicker p strong { color: var(--white); font-weight: 500; }
/* ---- Infrastructure (engine stats + agency-layer divider) ---------------- */
.agents-infra-section {
padding: 110px 0;
background: var(--navy);
border-bottom: 1px solid var(--line);
position: relative;
overflow: hidden;
}
.agents-infra-section::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 100%;
background: radial-gradient(ellipse at 80% 30%, rgba(200, 169, 107, 0.06) 0%, transparent 60%);
pointer-events: none;
}
.agents-infra-section .container { max-width: 1140px; position: relative; }
.agents-infra-header {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 56px;
align-items: end;
margin-bottom: 56px;
}
.agents-infra-lede {
font-size: 18px;
line-height: 1.7;
color: var(--white-soft);
margin: 0;
align-self: end;
padding-bottom: 6px;
}
.agents-infra-lede strong { color: var(--white); }
.agents-infra-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-bottom: 48px;
}
.agents-infra-stat {
background: var(--navy-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 32px 26px;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.agents-infra-stat:hover {
border-color: rgba(200, 169, 107, 0.4);
transform: translateY(-2px);
}
.agents-infra-stat-num {
font-family: var(--font-serif);
font-size: 42px;
line-height: 1.05;
color: var(--gold);
font-weight: 400;
letter-spacing: -0.015em;
margin-bottom: 8px;
}
.agents-infra-stat-num sub {
font-size: 16px;
color: var(--gold);
font-family: var(--font-mono);
letter-spacing: 0.05em;
vertical-align: baseline;
margin-left: 2px;
}
.agents-infra-stat-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--white-soft);
text-transform: uppercase;
margin-bottom: 14px;
font-weight: 500;
padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}
.agents-infra-stat-detail {
font-size: 13px;
color: var(--white-soft);
line-height: 1.55;
margin: 0;
}
.agents-infra-divider {
background: linear-gradient(180deg, rgba(200, 169, 107, 0.05) 0%, transparent 100%);
border-left: 2px solid var(--gold);
border-radius: 0 4px 4px 0;
padding: 32px 36px;
}
.agents-infra-divider h3 {
font-family: var(--font-serif);
font-size: 24px;
line-height: 1.3;
color: var(--white);
font-weight: 400;
letter-spacing: -0.01em;
margin: 0 0 14px;
}
.agents-infra-divider h3 em { font-style: italic; color: var(--gold); }
.agents-infra-divider p {
font-size: 15px;
color: var(--white-soft);
line-height: 1.7;
margin: 0;
}
.agents-infra-divider p strong { color: var(--white); }
.agents-infra-divider-meta {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
color: var(--gold);
text-transform: uppercase;
}
/* ---- Three-tier personas -------------------------------------------------- */
.agents-personas-section {
padding: 68px 0;
background: var(--navy-2);
border-bottom: 1px solid var(--line);
}
.agents-personas-section .container { max-width: 1200px; }
.agents-personas-intro {
font-size: 18px;
line-height: 1.7;
color: var(--white-soft);
max-width: 780px;
margin: 0 0 56px;
}
.agents-personas-intro strong { color: var(--white); }
/* Prototype declares a stale 4-column grid for its 3 cards (legacy of the old
7-persona set); three equal columns is the intended layout for three tiers. */
.agents-personas-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.agents-persona-card {
background: var(--navy);
border: 1px solid var(--line);
border-radius: 4px;
padding: 28px 24px;
display: flex;
flex-direction: column;
gap: 14px;
transition: border-color 0.2s ease, transform 0.2s ease;
min-height: 320px;
}
.agents-persona-card:hover {
border-color: rgba(200, 169, 107, 0.4);
transform: translateY(-3px);
}
.agents-persona-num {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--gold);
font-weight: 500;
}
.agents-persona-name {
font-family: var(--font-serif);
font-size: 26px;
line-height: 1.2;
color: var(--white);
font-weight: 400;
letter-spacing: -0.01em;
margin: 0;
}
.agents-persona-job {
font-size: 14px;
color: var(--white-soft);
line-height: 1.6;
margin: 0;
flex: 1;
}
.agents-persona-tonality {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
color: var(--white-soft);
text-transform: uppercase;
padding: 4px 8px;
background: rgba(200, 169, 107, 0.07);
border-radius: 3px;
align-self: flex-start;
}
.agents-persona-replaces {
padding-top: 14px;
border-top: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 3px;
}
.agents-persona-replaces-label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.2em;
color: var(--gold);
text-transform: uppercase;
}
.agents-persona-replaces-value {
font-size: 13px;
color: var(--white);
line-height: 1.4;
}
/* ---- Personality dial (interactive) --------------------------------------- */
.agents-dial-section {
padding: 56px 0;
background: var(--navy);
border-bottom: 1px solid var(--line);
position: relative;
}
.agents-dial-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--line-gold) 50%, transparent 100%);
opacity: 0.4;
}
.agents-dial-section .container { max-width: 1080px; }
.agents-dial-intro {
font-size: 18px;
line-height: 1.7;
color: var(--white-soft);
max-width: 820px;
margin: 0 0 56px;
}
.agents-dial-intro strong { color: var(--white); }
.agents-dial-frame {
background: var(--navy-2);
border: 1px solid var(--line);
border-radius: 6px;
padding: 48px;
position: relative;
}
.agents-dial-prospect {
background: rgba(255, 255, 255, 0.025);
border: 1px solid var(--line);
border-radius: 4px;
padding: 22px 26px;
margin-bottom: 32px;
}
.agents-dial-prospect-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 10px;
font-weight: 500;
}
.agents-dial-prospect-text {
font-size: 17px;
color: var(--white);
line-height: 1.55;
font-style: italic;
margin: 0;
}
.agents-dial-control {
margin: 36px 0 28px;
}
.agents-dial-control-label {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.15em;
color: var(--white-soft);
text-transform: uppercase;
}
.agents-dial-control-label .current {
color: var(--gold);
font-weight: 500;
}
.agents-dial-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
background: linear-gradient(90deg,
rgba(80, 180, 120, 0.4) 0%,
rgba(200, 169, 107, 0.4) 50%,
rgba(220, 100, 80, 0.5) 100%);
border-radius: 3px;
outline: none;
margin: 0;
cursor: pointer;
}
.agents-dial-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
background: var(--gold);
border-radius: 50%;
border: 3px solid var(--navy);
cursor: grab;
box-shadow: 0 0 0 1px var(--gold);
transition: transform 0.15s ease;
}
.agents-dial-slider::-webkit-slider-thumb:active {
cursor: grabbing;
transform: scale(1.15);
}
.agents-dial-slider::-moz-range-thumb {
width: 22px;
height: 22px;
background: var(--gold);
border-radius: 50%;
border: 3px solid var(--navy);
cursor: grab;
box-shadow: 0 0 0 1px var(--gold);
}
.agents-dial-stops {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-top: 14px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.12em;
color: var(--white-soft);
text-transform: uppercase;
}
.agents-dial-stop {
text-align: center;
padding: 4px 2px;
cursor: pointer;
transition: color 0.2s ease;
border-radius: 3px;
}
.agents-dial-stop:hover { color: var(--white); }
.agents-dial-stop.active {
color: var(--gold);
background: rgba(200, 169, 107, 0.08);
}
.agents-dial-response {
background: linear-gradient(180deg, rgba(200, 169, 107, 0.06) 0%, transparent 100%);
border-left: 2px solid var(--gold);
border-radius: 0 4px 4px 0;
padding: 28px 32px;
margin-top: 32px;
min-height: 180px;
transition: opacity 0.25s ease;
}
.agents-dial-response.fading { opacity: 0.25; }
.agents-dial-response-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 12px;
font-weight: 500;
}
.agents-dial-response-text {
font-size: 16px;
color: var(--white);
line-height: 1.65;
margin: 0;
font-family: var(--font-serif);
}
.agents-dial-footnote {
font-size: 13px;
color: var(--white-soft);
margin: 28px 0 0;
font-style: italic;
line-height: 1.5;
}
/* ---- Channel stack --------------------------------------------------------- */
.agents-channels-section {
padding: 68px 0;
background: var(--navy-2);
border-bottom: 1px solid var(--line);
}
.agents-channels-section .container { max-width: 1180px; }
.agents-channels-intro {
font-size: 18px;
line-height: 1.7;
color: var(--white-soft);
max-width: 820px;
margin: 0 0 56px;
}
.agents-channels-intro strong { color: var(--white); }
.agents-channels-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.agents-channel-card {
background: var(--navy);
border: 1px solid var(--line);
border-radius: 4px;
padding: 24px 20px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color 0.2s ease;
}
.agents-channel-card:hover { border-color: rgba(200, 169, 107, 0.35); }
.agents-channel-icon {
display: block;
width: 38px;
height: 38px;
color: var(--gold);
margin-bottom: 18px;
opacity: 0.85;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.agents-channel-card:hover .agents-channel-icon {
opacity: 1;
transform: translateY(-2px);
}
.agents-channel-num {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--gold);
font-weight: 500;
}
.agents-channel-name {
font-family: var(--font-serif);
font-size: 20px;
color: var(--white);
font-weight: 400;
letter-spacing: -0.01em;
margin: 0;
}
.agents-channel-desc {
font-size: 13px;
color: var(--white-soft);
line-height: 1.55;
margin: 0;
}
/* ---- Voice + phone (flow + scenarios) -------------------------------------- */
.agents-voicephone-section {
padding: 56px 0;
background: var(--navy);
border-bottom: 1px solid var(--line);
position: relative;
overflow: hidden;
}
.agents-voicephone-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse at 80% 20%, rgba(200, 169, 107, 0.07) 0%, transparent 55%),
radial-gradient(ellipse at 20% 80%, rgba(200, 169, 107, 0.04) 0%, transparent 50%);
pointer-events: none;
}
.agents-voicephone-section .container { max-width: 1140px; position: relative; }
.agents-voicephone-intro {
font-size: 19px;
line-height: 1.7;
color: var(--white-soft);
max-width: 880px;
margin: 0 0 56px;
}
.agents-voicephone-intro strong { color: var(--white); }
.agents-voicephone-anti {
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--gold);
background: rgba(200, 169, 107, 0.08);
border: 1px solid rgba(200, 169, 107, 0.25);
padding: 6px 14px;
border-radius: 3px;
text-transform: uppercase;
margin-bottom: 28px;
font-weight: 500;
}
.agents-flow {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
margin: 0 0 64px;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--navy-2);
overflow: hidden;
}
.agents-flow-step {
padding: 36px 24px;
border-right: 1px solid var(--line);
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
transition: background 0.2s ease;
}
.agents-flow-step:last-child { border-right: none; }
.agents-flow-step:hover { background: rgba(200, 169, 107, 0.04); }
.agents-flow-step::after {
content: '→';
position: absolute;
right: -12px;
top: 50%;
transform: translateY(-50%);
color: var(--gold);
font-size: 22px;
background: var(--navy);
padding: 4px 0;
z-index: 2;
}
.agents-flow-step:last-child::after { display: none; }
.agents-flow-step-num {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--gold);
text-transform: uppercase;
font-weight: 500;
}
.agents-flow-step-name {
font-family: var(--font-serif);
font-size: 19px;
color: var(--white);
font-weight: 400;
letter-spacing: -0.01em;
margin: 0;
}
.agents-flow-step-desc {
font-size: 12px;
color: var(--white-soft);
line-height: 1.5;
margin: 0;
}
.agents-flow-brain {
text-align: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--gold);
text-transform: uppercase;
margin: -40px 0 56px;
font-weight: 500;
}
.agents-flow-brain-rule {
display: inline-block;
padding: 8px 18px;
background: var(--navy-2);
border: 1px solid rgba(200, 169, 107, 0.3);
border-radius: 3px;
}
.agents-scenarios-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.agents-scenario-card {
background: var(--navy-2);
border: 1px solid var(--line);
border-radius: 4px;
padding: 28px 30px;
transition: border-color 0.2s ease;
}
.agents-scenario-card:hover { border-color: rgba(200, 169, 107, 0.35); }
.agents-scenario-time {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 12px;
font-weight: 500;
}
.agents-scenario-title {
font-family: var(--font-serif);
font-size: 22px;
line-height: 1.2;
color: var(--white);
font-weight: 400;
letter-spacing: -0.01em;
margin: 0 0 14px;
}
.agents-scenario-title em { font-style: italic; color: var(--gold); }
.agents-scenario-body {
font-size: 14px;
color: var(--white-soft);
line-height: 1.65;
margin: 0;
}
.agents-scenario-body strong { color: var(--white); }
/* ---- Math of replacement ---------------------------------------------------- */
.agents-math-section {
padding: 56px 0;
background: var(--navy);
border-bottom: 1px solid var(--line);
}
.agents-math-section .container { max-width: 1080px; }
.agents-math-intro {
font-size: 18px;
line-height: 1.7;
color: var(--white-soft);
max-width: 820px;
margin: 0 0 56px;
}
.agents-math-intro strong { color: var(--white); }
.agents-math-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.agents-math-side {
padding: 36px 32px;
border-radius: 6px;
border: 1px solid var(--line);
}
.agents-math-side-human {
background: rgba(220, 100, 80, 0.03);
border-color: rgba(220, 100, 80, 0.2);
}
.agents-math-side-agent {
background: rgba(80, 180, 120, 0.04);
border-color: rgba(80, 180, 120, 0.25);
}
.agents-math-side-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 14px;
font-weight: 500;
}
.agents-math-side-human .agents-math-side-label { color: #d77065; }
.agents-math-side-agent .agents-math-side-label { color: #7bc299; }
.agents-math-side-title {
font-family: var(--font-serif);
font-size: 28px;
color: var(--white);
font-weight: 400;
letter-spacing: -0.01em;
margin: 0 0 8px;
}
.agents-math-side-cost {
font-family: var(--font-serif);
font-size: 22px;
color: var(--gold);
font-weight: 400;
margin: 0 0 24px;
padding-bottom: 18px;
border-bottom: 1px solid var(--line);
}
.agents-math-side ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.agents-math-side li {
font-size: 14px;
color: var(--white-soft);
line-height: 1.55;
padding-left: 18px;
position: relative;
}
.agents-math-side li::before {
content: '·';
position: absolute;
left: 6px;
color: var(--gold);
font-weight: 700;
}
.agents-math-multiplier {
margin-top: 40px;
padding: 28px 32px;
background: linear-gradient(180deg, rgba(200, 169, 107, 0.08) 0%, transparent 100%);
border-left: 2px solid var(--gold);
border-radius: 0 4px 4px 0;
}
.agents-math-multiplier h3 {
font-family: var(--font-serif);
font-size: 26px;
color: var(--white);
font-weight: 400;
letter-spacing: -0.01em;
margin: 0 0 10px;
}
.agents-math-multiplier h3 em { font-style: italic; color: var(--gold); }
.agents-math-multiplier p {
font-size: 15px;
color: var(--white-soft);
line-height: 1.65;
margin: 0;
}
/* ---- "While you sleep" close ------------------------------------------------ */
.agents-close-section {
padding: 92px 0 100px;
background: var(--navy-2);
border-bottom: 1px solid var(--line);
position: relative;
overflow: hidden;
}
.agents-close-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(ellipse at 20% 80%, rgba(200, 169, 107, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(200, 169, 107, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.agents-close-section .container { max-width: 880px; position: relative; }
.agents-close-h2 {
font-family: var(--font-serif);
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--white);
font-weight: 400;
margin: 28px 0 36px;
}
.agents-close-h2 em {
font-style: italic;
color: var(--gold);
}
.agents-close-body {
font-size: 18px;
line-height: 1.75;
color: var(--white-soft);
margin: 0 0 22px;
}
.agents-close-body strong { color: var(--white); }
/* ---- "How your avatar gets built" process strip (in the faces section) ------ */
.agents-faces-process {
background: linear-gradient(180deg, rgba(200, 169, 107, 0.05) 0%, transparent 100%);
border-left: 2px solid var(--gold);
border-radius: 0 4px 4px 0;
padding: 36px 40px;
max-width: 980px;
margin-top: 48px;
}
.agents-faces-process-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: 16px;
font-weight: 500;
}
.agents-faces-process h3 {
font-family: var(--font-serif);
font-size: 28px;
color: var(--white);
font-weight: 400;
letter-spacing: -0.01em;
margin: 0 0 24px;
}
.agents-faces-process h3 em {
font-style: italic;
color: var(--gold);
}
.agents-faces-process-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.agents-faces-process-step {
display: flex;
flex-direction: column;
gap: 6px;
}
.agents-faces-process-step-num {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--gold);
text-transform: uppercase;
font-weight: 500;
}
.agents-faces-process-step-title {
font-family: var(--font-serif);
font-size: 17px;
color: var(--white);
font-weight: 400;
margin: 0;
}
.agents-faces-process-step-body {
font-size: 13px;
color: var(--white-soft);
line-height: 1.55;
margin: 0;
}
/* ---- Responsive --------------------------------------------------------------- */
@media (max-width: 1100px) {
.agents-personas-grid { grid-template-columns: repeat(2, 1fr); }
.agents-channels-grid { grid-template-columns: repeat(2, 1fr); }
.agents-infra-header { grid-template-columns: 1fr; gap: 24px; }
.agents-infra-grid { grid-template-columns: repeat(2, 1fr); }
.agents-faces-process-steps { grid-template-columns: repeat(2, 1fr); }
.agents-flow { grid-template-columns: 1fr; }
.agents-flow-step {
border-right: none;
border-bottom: 1px solid var(--line);
}
.agents-flow-step:last-child { border-bottom: none; }
.agents-flow-step::after {
content: '↓';
right: 50%;
top: auto;
bottom: -12px;
transform: translateX(50%);
padding: 0 6px;
}
}
@media (max-width: 860px) {
.agents-thesis-section { padding: 80px 0; }
.agents-thesis-grid { grid-template-columns: 1fr; }
.agents-thesis-card { padding: 40px 28px; }
.agents-thesis-head { margin-bottom: 56px; }
}
@media (max-width: 760px) {
.agents-hero-meta-band { padding-bottom: 56px; }
.agents-hero-meta { gap: 20px; }
.agents-hero-meta-num { font-size: 26px; }
.agents-personas-section,
.agents-channels-section,
.agents-math-section { padding: 64px 0; }
.agents-dial-section { padding: 72px 0; }
.agents-close-section { padding: 60px 0 64px; }
.agents-infra-section { padding: 72px 0; }
.agents-voicephone-section { padding: 72px 0; }
.agents-personas-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.agents-persona-card { min-height: 0; padding: 24px 20px; }
.agents-channels-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.agents-channel-icon { width: 32px; height: 32px; margin-bottom: 14px; }
.agents-dial-frame { padding: 28px 22px; }
.agents-dial-stops {
font-size: 9px;
gap: 4px;
}
/* Let the long two-word labels wrap inside their track instead of
spilling past the card / viewport edge. */
.agents-dial-stop {
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
padding: 4px 1px;
}
.agents-dial-response { padding: 22px 20px; }
.agents-math-grid { grid-template-columns: 1fr; }
.agents-math-side { padding: 26px 22px; }
.agents-math-multiplier { padding: 22px 20px; }
.agents-infra-grid { grid-template-columns: 1fr; }
.agents-infra-stat { padding: 24px 22px; }
.agents-infra-stat-num { font-size: 36px; }
.agents-infra-divider { padding: 22px 22px; }
.agents-infra-divider h3 { font-size: 20px; }
.agents-scenarios-grid { grid-template-columns: 1fr; }
.agents-faces-process { padding: 24px 22px; }
.agents-faces-process-steps {
grid-template-columns: 1fr;
gap: 18px;
}
}
/* ===== components/faq.css ===== */
/* ==========================================================================
FAQ page (slug /faq/) — sticky left jump-nav + always-visible Q&A.
Uses the shared design tokens (navy / gold, Inter / Cormorant). Layout only;
no accordion (answers stay in the DOM for crawlers + LLMs).
========================================================================== */
html:has(.faq-page) { scroll-behavior: smooth; }
/* The global body{overflow-x:hidden} turns into a scroll container and
breaks position:sticky. overflow-x:clip contains the same way WITHOUT creating
a scroll container, so the sticky TOC works. Scoped to the FAQ page only. */
body.faq-template { overflow-x: clip; }
/* sticky-TOC / anchor offset = fixed nav (109px) + gap; more when the WP admin bar shows */
.faq-page { --faq-top: 124px; }
.admin-bar .faq-page { --faq-top: 156px; }
.faq-page-section {
padding-block: clamp(3rem, 6vw, 5.5rem);
}
/* --- Hero ------------------------------------------------------------------ */
.faq-hero {
max-width: 62ch;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.faq-hero-title {
margin: 16px 0 0.6em;
font: 300 var(--fs-display)/1.03 var(--font-display);
letter-spacing: -0.025em;
color: var(--text);
}
.faq-hero-lede {
font-family: var(--font-body);
font-size: var(--fs-lead);
font-weight: 300;
line-height: 1.6;
color: var(--text-secondary);
margin: 0 0 0.9em;
}
.faq-updated {
margin-top: 1.2em;
font-family: var(--font-mono);
font-size: 0.8rem;
letter-spacing: 0.04em;
color: var(--text-muted);
}
/* --- Two-column layout ----------------------------------------------------- */
.faq-layout {
display: grid;
grid-template-columns: minmax(0, 244px) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start; /* TOC at natural height; it sticks via .faq-toc below */
}
/* --- Sticky jump-nav (main sections only) --------------------------------- */
.faq-toc {
position: sticky;
top: var(--faq-top);
align-self: start;
}
.faq-toc-label {
display: block;
font-family: var(--font-body);
font-size: var(--fs-fine);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--gold);
margin-bottom: 1rem;
}
.faq-toc-nav {
display: flex;
flex-direction: column;
border-left: 1px solid var(--line);
}
.faq-toc-link {
padding: 0.5rem 0 0.5rem 1rem;
margin-left: -1px;
border-left: 2px solid transparent;
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.35;
color: var(--text-muted);
text-decoration: none;
transition: color 0.18s ease, border-color 0.18s ease;
}
.faq-toc-link:hover { color: var(--text); }
.faq-toc-link.is-active {
color: var(--gold);
border-left-color: var(--gold);
}
/* --- Sections + Q&A -------------------------------------------------------- */
.faqp-section {
scroll-margin-top: var(--faq-top);
padding-bottom: clamp(1rem, 2vw, 1.5rem);
margin-bottom: clamp(1rem, 2vw, 1.5rem);
border-bottom: 1px solid var(--line);
}
.faqp-section:last-child { border-bottom: 0; margin-bottom: 0; }
.faqp-section-title {
margin: 0 0 1.4rem;
font: 300 var(--fs-title-xl)/1.08 var(--font-display);
letter-spacing: -0.02em;
color: var(--text);
}
.faqp-item {
padding-block: 1.35rem;
border-top: 1px solid var(--line);
}
.faqp-item:first-of-type { border-top: 0; padding-top: 0; }
.faqp-q {
margin: 0 0 0.6rem;
font-family: var(--font-body);
font-size: 1.18rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.005em;
color: var(--text);
}
.faqp-a > p {
margin: 0 0 0.75em;
font-family: var(--font-body);
font-size: 1.0625rem;
font-weight: 300;
line-height: 1.65;
color: var(--text-secondary);
max-width: 72ch;
}
.faqp-a > p:last-child { margin-bottom: 0; }
/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 960px) {
.faq-layout { grid-template-columns: 1fr; gap: 2rem; }
.faq-toc { position: static; }
.faq-toc-nav {
flex-direction: row;
flex-wrap: wrap;
gap: 0.4rem 0.5rem;
border-left: 0;
}
.faq-toc-link {
padding: 0.4rem 0.8rem;
margin-left: 0;
border: 1px solid var(--line);
border-radius: 999px;
font-size: 0.85rem;
}
.faq-toc-link.is-active {
border-color: var(--line-gold);
background: rgba(200, 169, 107, 0.08);
}
}
@media (max-width: 600px) {
.faqp-q { font-size: 1.08rem; }
.faqp-a > p { font-size: 1rem; }
}
/* ===== typography-mono.css ===== */
/* =========================================================================
Studio Máté — typography-mono.css
JetBrains Mono treatment for tracked-uppercase NUMERIC TAGS, status pills,
bylines, CTAs, meta lines, and small labels (matches v104 design). Enqueued
LAST so cascade order wins over component-CSS font-family — no !important.
NOTE: section EYEBROWS (the gold uppercase label above a heading) are NOT
mono. They are standardized to Inter / 500 / 0.18em / margin-bottom 16px in
the "Standardized eyebrows" block at the bottom of this file.
========================================================================= */
.cmp-hero-meta,
.cmp-col-header .price-period,
.cmp-row-label,
.cmp-inline-link,
.cmp-tco-card-label,
.tco-period,
.blog-hero-meta,
.blog-featured-label,
.blog-featured-byline,
.blog-featured-cta,
.blog-card-byline,
.blog-card-cta,
.blog-author-role,
.blog-author-stats,
.blog-filter-btn,
.single-byline,
.hero-sofia-status,
.hero-sofia-caption,
.hero-sofia-id .label,
.hero-sofia-id .role,
.hero-sofia-id .status,
.hero-sofia-geo .geo-link,
.voice-prompt-label,
.vert-eyebrow-tier,
.vert-eyebrow-back,
.vert-fomo-banner-label,
.vert-chokehold-card-num,
.industries-tier-num,
.industries-uniform-tile-num,
.industries-uniform-tile-cta,
.industry-hint strong,
.lang-num,
.why-num,
.cta-num,
.foot-label,
.global-region-label,
.global-region-feature .feature-label,
.sofia-id .label,
.sofia-id .role,
.stack-table-num,
.persona-card-num,
.pricing-tier-num,
.pricing-table-label {
font-family: var(--font-mono);
}
/* =========================================================================
Standardized eyebrows — every section eyebrow (gold uppercase label above a
heading) renders identically across the whole site: Inter, weight 500,
0.18em tracking, 16px gap to the heading below. Loaded last so this wins
over any per-component mono/serif/weight declaration.
========================================================================= */
.eyebrow,
.cmp-hero-eyebrow,
.cmp-col-header-eyebrow,
.cmp-tco-eyebrow,
.blog-hero-eyebrow,
.blog-authors-head .eyebrow,
.blog-newsletter .eyebrow,
.single-eyebrow,
.hero-sofia-eyebrow,
.sofia-stage-eyebrow,
.sofia-notify-eyebrow,
.vert-section-eyebrow,
.industries-category-eyebrow,
.ip-cat-eyebrow,
.page-hero .eyebrow,
.sources-page-hero .eyebrow,
.stack-table-eyebrow,
.cross-link-eyebrow,
.industry-picker-eyebrow,
.persona-card-eyebrow,
.pricing-tier-label,
.rla-hero-eyebrow,
.rla-result-eyebrow,
.rla-email-eyebrow,
.gp-replace-eyebrow,
.gp-proof-eyebrow,
.wfr-eyebrow,
.growth-band-eyebrow {
font-family: var(--font-body);
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 16px;
}