/* ==========================================================================
Cohesion Insight — beta prototype stylesheet
Derived from wireframes-v716.html (v7.16). Tokens, type scale, and component
patterns are ported 1:1 where possible; fonts remapped to the brand stack
(Satoshi display + body / JetBrains Mono labels).
========================================================================== */
/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
--magenta: #B83280; /* Signal Magenta */
--plum-deep: #7A1F5C; /* Deep Plum Magenta */
--gold: #8A6800; /* A11y Gold (was #C99700 Strategic Gold — kept in brand palette; UI uses this darker for WCAG AA on cream) */
--gold-warm: #F0B429; /* Bright Gold */
--plum-ink: #351437; /* Plum Ink */
--charcoal: #351437;
--ink: #121014; /* Texture Charcoal */
--dark-plum: #121014;
--cream: #FAF4E3; /* Warm Canvas */
--bone: #FAF4E3;
--paper: #F7E8BD; /* Gold Tint */
--gold-soft: #FFF2BF; /* Gold Wash */
--magenta-soft: #FDE7F3; /* Magenta Wash */
--white: #FFFFFF;
--muted: #6B6660;
--faint: #A9A49B;
--line: #E8DEB8;
--line-strong: #B9A882;
--line-soft: #F7E8BD;
--cream-on-dark: #FAF4E3;
/* Palette B — Deep Plum (how-it-works hero) */
--plum-ink-2: #241028; /* darker plum for surfaces under hero */
--plum-surface: #3F1B41; /* elevated plum card surface */
--plum-line: #5A3160; /* subtle plum divider */
--plum-muted: #B99BB9; /* muted lavender for labels on plum */
--magenta-lite: #D355A6; /* softer magenta on plum surface */
--display: 'Satoshi', 'Onest', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--body: 'Satoshi', 'Onest', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, monospace;
--gutter: 96px;
--maxw: 1408px;
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--cream);
color: var(--ink);
font-family: var(--body);
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul { list-style: none; }
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--plum-ink); color: var(--cream);
padding: 12px 18px; font: 500 12px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
}
.skip-link:focus { left: 8px; top: 8px; }
:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }
/* ---------- 2. Type scale ----------------------------------------------- */
.display-xl { font: 900 92px/0.98 var(--display); letter-spacing: -0.035em; color: var(--plum-ink); -webkit-text-stroke: 0.6px currentColor; text-rendering: geometricPrecision; }
.display-lg { font: 900 76px/1.02 var(--display); letter-spacing: -0.03em; color: var(--plum-ink); -webkit-text-stroke: 0.55px currentColor; text-rendering: geometricPrecision; }
.display-md { font: 900 60px/1.05 var(--display); letter-spacing: -0.025em; color: var(--plum-ink); -webkit-text-stroke: 0.5px currentColor; text-rendering: geometricPrecision; }
.h1 { font: 900 52px/1.06 var(--display); letter-spacing: -0.025em; color: var(--plum-ink); -webkit-text-stroke: 0.45px currentColor; text-rendering: geometricPrecision; }
.h2 { font: 900 38px/1.12 var(--display); letter-spacing: -0.02em; color: var(--plum-ink); -webkit-text-stroke: 0.4px currentColor; text-rendering: geometricPrecision; }
.h3 { font: 900 26px/1.2 var(--display); letter-spacing: -0.012em; color: var(--plum-ink); -webkit-text-stroke: 0.3px currentColor; text-rendering: geometricPrecision; }
.h4 { font: 900 20px/1.28 var(--display); letter-spacing: -0.005em; color: var(--plum-ink); -webkit-text-stroke: 0.25px currentColor; text-rendering: geometricPrecision; }
.display-xl em, .display-lg em, .display-md em, .h1 em, .h2 em, .h3 em {
font-style: normal; color: var(--magenta);
}
.display-lg b, .display-md b, .h1 b, .h2 b {
font-weight: inherit; padding: 0 4px;
background-image: linear-gradient(180deg, transparent 76%, var(--gold-soft) 76%, var(--gold-soft) 95%, transparent 95%);
}
.lede-lg { font: 400 24px/1.45 var(--body); color: var(--muted); max-width: 780px; }
.lede { font: 400 20px/1.5 var(--body); color: var(--muted); max-width: 680px; }
.body { font: 400 17px/1.6 var(--body); color: var(--charcoal); }
.body-lg { font: 400 19px/1.55 var(--body); color: var(--charcoal); }
.small { font: 400 14px/1.5 var(--body); color: var(--muted); }
.micro { font: 500 12px/1.45 var(--body); color: var(--muted); }
.label {
font: 500 12px/1.1 var(--mono);
letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.label.plum { color: var(--plum-deep); }
.label.gold { color: var(--gold); }
.label.magenta { color: var(--magenta); }
.eyebrow {
font: 500 12px/1 var(--mono);
letter-spacing: 0.22em; text-transform: uppercase; color: var(--magenta);
margin-bottom: 20px;
}
.sect-tag {
display: inline-flex; align-items: center; gap: 12px;
font: 500 12px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
color: var(--muted); margin-bottom: 32px;
}
.sect-tag::before { content: ''; width: 40px; height: 1.5px; background: var(--magenta); }
.sect-tag.gold::before { background: var(--gold); }
.chapter { display: flex; align-items: baseline; gap: 20px; }
.chapter-num { font: 700 64px/0.9 var(--display); letter-spacing: -0.04em; color: var(--gold); font-feature-settings: "tnum"; }
.chapter-num.small { font-size: 44px; }
.chapter-num.tiny { font-size: 30px; }
.chapter-label { font: 500 12px/1.2 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.stat { font: 800 72px/0.95 var(--display); letter-spacing: -0.035em; color: var(--plum-ink); font-feature-settings: "tnum","lnum"; }
.stat-md { font: 700 48px/0.98 var(--display); letter-spacing: -0.03em; color: var(--plum-ink); font-feature-settings: "tnum","lnum"; }
.stat.magenta, .stat-md.magenta { color: var(--magenta); }
.stat.gold, .stat-md.gold { color: var(--gold); }
.projected-number { font-weight: 900; color: var(--gold); font-feature-settings: "tnum"; }
/* ---------- 3. Layout primitives ---------------------------------------- */
.container { padding: 0 var(--gutter); max-width: 1600px; margin: 0 auto; }
.container.narrow { max-width: 1100px; }
.section { padding: 88px 0; }
.section.tight { padding: 56px 0; }
.section.flush-top { padding-top: 0; }
.rule { height: 0; border: 0; border-top: 1px solid var(--line-strong); }
.rule.gold { border-top: 1.5px solid var(--gold); }
.rule.plum { border-top: 1.5px solid var(--plum-ink); }
.flex { display: flex; }
.flex.center { align-items: center; }
.flex.between { justify-content: space-between; }
.flex.wrap { flex-wrap: wrap; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; }
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mt-40{margin-top:40px}.mt-48{margin-top:48px}.mt-64{margin-top:64px}
.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}.mb-48{margin-bottom:48px}
.section-lede-grid {
display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center;
}
.dark-band { background: var(--dark-plum); color: var(--cream-on-dark); }
.dark-band .h1, .dark-band .h2, .dark-band .h3, .dark-band .h4,
.dark-band .display-lg, .dark-band .display-md, .dark-band .display-xl { color: var(--cream-on-dark); }
.dark-band .lede, .dark-band .lede-lg, .dark-band .body, .dark-band .body-lg { color: rgba(245,235,212,0.82); }
.dark-band .small, .dark-band .micro { color: rgba(245,235,212,0.62); }
.dark-band .label { color: rgba(245,235,212,0.6); }
.dark-band .rule { border-top-color: rgba(245,235,212,0.2); }
.dark-band .chapter-num { color: var(--gold); }
/* ---------- 4. Buttons -------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 22px; border-radius: 4px; border: none; cursor: pointer;
font: 500 15px/1 var(--body); text-decoration: none;
transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.btn.primary { background: var(--magenta); color: var(--cream); }
.btn.primary:hover { background: var(--plum-deep); }
.btn.plum { background: var(--plum-ink); color: var(--cream); }
.btn.plum:hover { background: var(--magenta); }
.btn.gold { background: var(--gold); color: var(--cream); font-weight: 700; } /* WCAG AA: cream on a11y gold = 4.71:1 (plum-ink was 3.11:1, failed body) */
.btn.ghost { background: transparent; color: var(--plum-ink); border: 1px solid var(--plum-ink); }
.btn.ghost:hover { background: var(--plum-ink); color: var(--cream); }
.btn.ghost.on-dark { color: var(--cream); border-color: rgba(245,235,212,0.4); }
.btn.ghost.on-dark:hover { background: var(--cream); color: var(--plum-ink); }
.btn.lg { padding: 18px 28px; font-size: 16px; }
.btn.block { width: 100%; justify-content: center; }
.btn .arr { font-size: 17px; }
.link-text {
font: 500 14px/1 var(--body); color: var(--plum-deep); text-decoration: none;
border-bottom: 1.5px solid var(--plum-deep); padding-bottom: 3px;
}
.link-text:hover { color: var(--magenta); border-bottom-color: var(--magenta); }
.link-mono {
font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 3px;
}
/* ---------- 5. Beta banner ---------------------------------------------- */
.beta-banner {
display: flex; align-items: center; gap: 20px;
padding: 13px 40px;
background: var(--plum-ink); color: var(--cream);
border-bottom: 1px solid var(--gold);
position: relative; z-index: 60;
}
.beta-banner[hidden] { display: none; }
.beta-banner .bb-eyebrow {
font: 500 11px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase;
color: var(--gold-warm); padding: 4px 10px; border: 1px solid var(--gold-warm); border-radius: 2px;
white-space: nowrap;
}
.beta-banner .bb-body { font: 400 14px/1.4 var(--body); flex: 1; }
.beta-banner .bb-cta {
font: 500 14px/1 var(--body); color: var(--gold-warm);
text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.beta-banner .bb-dismiss {
background: none; border: 0; cursor: pointer; padding: 6px;
font: 400 12px/1 var(--mono); color: rgba(245,235,212,0.7);
}
.beta-banner .bb-dismiss:hover { color: var(--cream); }
/* ---------- 6. Nav ------------------------------------------------------ */
/* v7.26 · nav is transparent by default; scroll adds cream + shadow (see bottom of file). */
.site-nav {
position: sticky; top: 0; z-index: 50;
display: grid; grid-template-columns: auto 1fr auto; align-items: center;
gap: 32px; padding: 20px 40px;
background: transparent; border-bottom: 1px solid transparent;
}
.nav-logo {
display: inline-flex; align-items: center;
text-decoration: none; color: var(--plum-ink);
}
.nav-logo svg { width: 26px; height: 26px; flex: none; }
.nav-logo .wm { font: 700 18px/1 var(--display); letter-spacing: -0.01em; }
.nav-logo .wm span { color: var(--magenta); }
/* v7.37 · nav wordmark = SVG images (Cabinet Grotesk ExtraBold). Two ![]()
tags coexist in .nav-logo; visibility is toggled by nav tone/scroll state.
Default (paper / cream / scrolled): light-bg wordmark (plum + magenta period).
Dark nav tone unscrolled: dark-bg wordmark (cream + warm-gold period). */
.nav-logo .wm-img { display: none; height: 28px; width: auto; flex: none; }
.nav-logo .wm-light { display: block; }
/* On dark-tone pages before scroll: swap to the dark-bg wordmark. */
body[data-nav-tone="dark"] .site-nav:not(.scrolled) .nav-logo .wm-light { display: none; }
body[data-nav-tone="dark"] .site-nav:not(.scrolled) .nav-logo .wm-dark { display: block; }
/* Once scrolled, nav returns to cream — always show the light wordmark. */
.site-nav.scrolled .nav-logo .wm-light { display: block; }
.site-nav.scrolled .nav-logo .wm-dark { display: none; }
.nav-links { display: flex; gap: 30px; justify-content: center; }
.nav-item { position: static; }
.nav-item > a,
.nav-item > .nav-parent {
display: inline-flex; align-items: center; gap: 6px;
font: 500 14px/1 var(--body); color: var(--charcoal); text-decoration: none;
padding: 10px 0;
}
.nav-item > .nav-parent { cursor: default; user-select: none; }
.nav-item > a:hover,
.nav-item > a[aria-current="page"],
.nav-item > .nav-parent:hover,
.nav-item.open > .nav-parent { color: var(--magenta); }
.nav-item > a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--magenta); }
.nav-caret {
width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translateY(-2px); transition: transform 240ms var(--ease);
}
.nav-item.open .nav-caret { transform: rotate(225deg) translateY(2px); }
.nav-actions { display: flex; align-items: center; gap: 16px; }
.nav-actions .sign-in { font: 500 14px/1 var(--body); color: var(--charcoal); text-decoration: none; }
.nav-actions .sign-in:hover { color: var(--magenta); }
.nav-burger {
display: none; background: none; border: 1px solid var(--line-strong); border-radius: 4px;
padding: 9px 11px; cursor: pointer;
}
.nav-burger span { display: block; width: 18px; height: 1.5px; background: var(--plum-ink); }
.nav-burger span + span { margin-top: 4px; }
/* Mega-menu */
.megamenu {
position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
width: min(1180px, calc(100vw - 64px)); max-width: 1180px;
background: var(--bone); border: 1px solid var(--line-strong); border-radius: 12px;
padding: 40px 44px;
display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px;
box-shadow: 0 18px 44px rgba(53,20,55,0.13);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity 240ms var(--ease), transform 240ms var(--ease), visibility 240ms;
}
.nav-item.open .megamenu {
opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.megamenu .mm-col-title {
font: 500 11px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
color: var(--muted); margin-bottom: 14px;
}
.megamenu .mm-item {
display: block; padding: 8px 0; text-decoration: none;
font: 500 15px/1.35 var(--body); color: var(--plum-ink);
}
.megamenu .mm-item:hover { color: var(--magenta); }
.megamenu .mm-feature {
background: var(--paper); border-radius: 8px; padding: 22px;
display: flex; flex-direction: column; gap: 10px; text-decoration: none;
}
.megamenu .mm-feature .mm-feature-eyebrow {
font: 500 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
}
.megamenu .mm-feature .mm-feature-title { font: 700 19px/1.25 var(--display); color: var(--plum-ink); }
.megamenu .mm-feature .mm-feature-body { font: 400 13.5px/1.5 var(--body); color: var(--muted); }
.mm-badge {
display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px;
background: var(--magenta); color: var(--white); font: 500 9px/1.5 var(--mono); letter-spacing: 0.08em;
text-transform: uppercase;
}
.mm-badge.beta {
background: transparent; color: var(--plum-ink);
border: 1px solid var(--line-strong);
}
/* Mobile drawer */
.nav-drawer {
position: fixed; inset: 0; z-index: 90;
background: var(--cream); display: none; flex-direction: column;
transform: translateX(100%); transition: transform 240ms var(--ease);
}
.nav-drawer.mounted { display: flex; }
.nav-drawer.open { transform: translateX(0); }
.nav-drawer .drawer-head {
display: flex; justify-content: space-between; align-items: center;
padding: 20px 24px; border-bottom: 1px solid var(--line);
}
.nav-drawer .drawer-close {
background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--plum-ink);
}
.nav-drawer .drawer-body { flex: 1; overflow-y: auto; padding: 8px 24px 32px; }
.drawer-group { border-bottom: 1px solid var(--line-soft); }
.drawer-toggle {
width: 100%; background: none; border: 0; cursor: pointer;
display: flex; justify-content: space-between; align-items: center;
padding: 18px 0; font: 700 17px/1 var(--display); color: var(--charcoal); text-align: left;
}
.drawer-group.open .drawer-toggle { color: var(--magenta); }
.drawer-panel { display: none; background: var(--paper); margin: 0 -24px; padding: 14px 24px 16px 36px; }
.drawer-group.open .drawer-panel { display: flex; flex-direction: column; gap: 12px; }
.drawer-panel a { font: 500 14px/1.3 var(--body); color: var(--plum-ink); text-decoration: none; }
.drawer-link {
display: block; padding: 18px 0; border-bottom: 1px solid var(--line-soft);
font: 700 17px/1 var(--display); color: var(--charcoal); text-decoration: none;
}
.drawer-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
/* ---------- 7. Hero patterns ------------------------------------------- */
.beta-hero {
padding: 76px 0 64px;
background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
border-bottom: 1px solid var(--line);
}
.beta-hero .h-headline { max-width: 15ch; }
.beta-hero .h-lede { margin-top: 24px; max-width: 720px; }
.beta-hero .h-ctas { display: flex; gap: 20px; align-items: center; margin-top: 40px; flex-wrap: wrap; }
.beta-hero .h-proof {
margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line);
font: 400 14px/1.5 var(--body); color: var(--muted); max-width: 700px;
}
.beta-hero .h-proof::before { content: "● "; color: var(--magenta); }
.hero-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
.page-hero { padding: 64px 0 48px; border-bottom: 1px solid var(--line); }
.page-hero.on-paper { background: var(--paper); }
/* ---------- 8. Morning-brief envelope + filmstrip ---------------------- */
.brief-envelope {
background: var(--white); border: 1px solid var(--line-strong); border-radius: 14px;
padding: 26px 28px 22px; box-shadow: 0 10px 30px rgba(53,20,55,0.08);
position: relative;
}
.brief-envelope::after {
content: ''; position: absolute; inset: 8px 8px auto auto; width: 0; height: 0;
}
.brief-masthead {
display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
font: 500 10px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.brief-masthead .m-tag { color: var(--magenta); }
.brief-brandmark {
font: 700 12px/1 var(--display); letter-spacing: 0.18em; color: var(--plum-ink);
margin: 16px 0 14px; text-transform: uppercase;
}
.brief-brandmark span { color: var(--magenta); }
.brief-decision {
display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: baseline;
padding: 14px 0; border-top: 1px solid var(--line-soft);
}
.brief-decision .b-num { font: 700 18px/1 var(--display); color: var(--magenta); font-feature-settings: "tnum"; }
.brief-decision .b-title { font: 500 15px/1.35 var(--body); color: var(--plum-ink); }
.brief-decision .b-projected { font: 900 15px/1 var(--body); color: var(--gold); font-feature-settings: "tnum"; white-space: nowrap; }
.brief-footer {
display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
font: 500 11px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.brief-footer .f-cta { color: var(--magenta); }
.visual-caption { margin-top: 16px; font: 500 12px/1.5 var(--body); color: var(--muted); }
/* Filmstrip — 3 frames, 3.6s loop */
.filmstrip { margin-top: 40px; }
.filmstrip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.frame {
border: 1px solid var(--line-strong); border-radius: 10px; padding: 18px;
background: var(--bone); min-height: 190px;
}
.frame .f-time { font: 500 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.frame .f-masthead { font: 500 11px/1.3 var(--mono); color: var(--plum-ink); }
.frame .f-row {
margin-top: 8px; padding: 8px 10px; background: var(--white); border-radius: 6px;
font: 400 12px/1.3 var(--body); color: var(--plum-ink);
}
.frame .f-row.skeleton { background: var(--line); height: 30px; }
.frame .f-more { margin-top: 8px; font: 400 11px/1 var(--body); color: var(--muted); }
/* Live animated brief loop */
.brief-loop .brief-masthead,
.brief-loop .brief-brandmark,
.brief-loop .brief-decision,
.brief-loop .brief-footer { animation: brief-in 3.6s var(--ease) infinite both; }
.brief-loop .brief-masthead { animation-delay: 0s; }
.brief-loop .brief-brandmark { animation-delay: .18s; }
.brief-loop .brief-decision:nth-of-type(1) { animation-delay: .5s; }
.brief-loop .brief-decision:nth-of-type(2) { animation-delay: .85s; }
.brief-loop .brief-decision:nth-of-type(3) { animation-delay: 1.2s; }
.brief-loop .brief-footer { animation-delay: 1.55s; }
@keyframes brief-in {
0% { opacity: 0; transform: translateY(6px); }
14% { opacity: 1; transform: translateY(0); }
88% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(0); }
}
.marquee { background: var(--dark-plum); color: var(--gold); padding: 24px 0; overflow: hidden; }
.marquee-inner {
display: flex; gap: 48px; align-items: center; white-space: nowrap;
font: 500 24px/1 var(--display); letter-spacing: -0.01em;
animation: marquee 26s linear infinite; width: max-content;
}
.marquee-inner .sep { color: rgba(245,235,212,0.3); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Customer logo strip (replaces / complements value-marquee) */
.logo-strip { background: var(--dark-plum); padding: 28px 0; overflow: hidden; }
.logo-strip-inner {
display: flex; gap: 56px; align-items: center; white-space: nowrap;
animation: logo-strip-slide 32s linear infinite; width: max-content;
}
.logo-strip .logo {
display: inline-flex; align-items: center; justify-content: center; height: 32px;
color: rgba(245,235,212,0.75);
font: 600 22px/1 var(--display); letter-spacing: 0.01em;
filter: grayscale(1); opacity: 0.85;
transition: opacity .2s ease, filter .2s ease, color .2s ease;
}
.logo-strip .logo:hover { opacity: 1; filter: grayscale(0); color: var(--gold-warm, #F0B429); }
@keyframes logo-strip-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Connector tile hover tooltip (works for .int-card and .int-card-link) */
.int-card, .int-card-link { position: relative; }
.int-tooltip {
position: absolute; bottom: calc(100% + 8px); left: 50%;
transform: translateX(-50%) translateY(4px);
background: var(--ink); color: var(--cream);
font: 500 12px/1.35 var(--body);
padding: 8px 12px; border-radius: 4px; white-space: nowrap;
opacity: 0; pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
box-shadow: 0 8px 24px rgba(0,0,0,0.18); z-index: 5;
}
.int-tooltip::after {
content: ''; position: absolute; top: 100%; left: 50%;
transform: translateX(-50%);
border: 5px solid transparent; border-top-color: var(--ink);
}
.int-card:hover .int-tooltip,
.int-card:focus-visible .int-tooltip,
.int-card-link:hover .int-tooltip,
.int-card-link:focus-visible .int-tooltip {
opacity: 1; transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.logo-strip-inner { animation: none; }
.int-tooltip { transition: opacity .01ms; }
}
/* Quoted proof section (product page FIG-15L) — v7.34 */
.quoted-proof { background: var(--cream); padding: 72px 6vw 28px; }
/* Tighten the gap into the next section (In your words) */
.quoted-proof + .section { padding-top: 40px; }
@media (max-width: 720px) {
.quoted-proof { padding: 48px 6vw 20px; }
.quoted-proof + .section { padding-top: 28px; }
}
.quoted-proof-inner { max-width: 960px; margin: 0 auto; text-align: center; }
.quoted-proof .qp-quote { font: 500 26px/1.4 var(--display); letter-spacing: -0.015em; color: var(--ink); max-width: 820px; margin: 0 auto 24px; }
.quoted-proof.qp-bold { padding: 96px 6vw; }
.quoted-proof.qp-bold .qp-quote { font: 700 44px/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink); max-width: 1040px; margin: 0 auto; }
@media (max-width: 720px) {
.quoted-proof.qp-bold { padding: 56px 6vw; }
.quoted-proof.qp-bold .qp-quote { font-size: 30px; }
}
.quoted-proof .qp-quote .q-mark { color: var(--magenta); }
.quoted-proof .qp-attrib { font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 36px; }
.quoted-proof .qp-strip { display: flex; gap: 44px; justify-content: center; align-items: center; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--line); }
.quoted-proof .qp-strip img { height: 28px; width: auto; max-width: 120px; opacity: 0.7; filter: grayscale(1); transition: opacity 0.18s ease, filter 0.18s ease; }
.quoted-proof .qp-strip img:hover { opacity: 1; filter: grayscale(0); }
.quoted-proof .qp-strip .qp-mark { font: 700 14px/1 var(--body); letter-spacing: 0.02em; color: var(--ink); opacity: 0.55; filter: grayscale(1); transition: opacity 0.18s ease, filter 0.18s ease; user-select: none; }
.quoted-proof .qp-strip:hover .qp-mark { opacity: 1; filter: grayscale(0); }
@media (max-width: 900px) {
.quoted-proof { padding: 48px 6vw; }
.quoted-proof .qp-quote { font-size: 20px; }
.quoted-proof .qp-strip { gap: 24px; }
.quoted-proof .qp-strip img { height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.brief-loop .brief-masthead, .brief-loop .brief-brandmark,
.brief-loop .brief-decision, .brief-loop .brief-footer {
animation: none; opacity: 1; transform: none;
}
.marquee-inner { animation: none; }
* { transition-duration: 1ms !important; }
}
/* ---------- 9. Cards, grids, tiles ------------------------------------- */
.bento { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.tile {
padding: 30px; background: var(--white); border: 1px solid var(--line); border-radius: 12px;
display: flex; flex-direction: column; gap: 14px;
}
.tile.dark { background: var(--dark-plum); border-color: var(--dark-plum); color: var(--cream-on-dark); }
.tile.dark .h3, .tile.dark .h4 { color: var(--cream-on-dark); }
.tile.dark .body { color: rgba(245,235,212,0.78); }
.tile.paper { background: var(--paper); border-color: var(--paper); }
.tile.magenta { background: var(--magenta-soft); border-color: var(--magenta-soft); }
.ed-row {
display: grid; grid-template-columns: 72px 1.3fr 1.7fr auto; gap: 28px; align-items: baseline;
padding: 28px 0; border-top: 1px solid var(--line-strong);
}
.ed-row:last-of-type { border-bottom: 1px solid var(--line-strong); }
.ed-row .ed-num { font: 700 22px/1 var(--display); color: var(--gold); font-feature-settings: "tnum"; }
.ed-row .ed-title { font: 700 22px/1.24 var(--display); color: var(--plum-ink); }
.ed-row .ed-desc { font: 400 15px/1.55 var(--body); color: var(--muted); }
.stat-strip {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
padding: 36px 0; border-top: 1.5px solid var(--plum-ink); border-bottom: 1.5px solid var(--plum-ink);
}
.founding-card {
background: var(--paper); padding: 38px 44px;
border-left: 4px solid var(--gold); border-radius: 0 8px 8px 0;
}
.founding-card ul li {
font: 500 16px/1.5 var(--body); color: var(--plum-ink);
padding: 8px 0 8px 24px; position: relative;
}
.founding-card ul li::before { content: "→"; position: absolute; left: 0; color: var(--magenta); font-weight: 700; }
.callout-strip {
padding: 26px 30px; background: var(--paper);
border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0;
}
.callout-strip.magenta { background: var(--magenta-soft); border-left-color: var(--magenta); }
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
padding: 9px 16px; background: var(--white); border: 1px solid var(--line-strong);
border-radius: 22px; font: 500 13px/1 var(--body); color: var(--plum-ink); text-decoration: none;
}
.chip.active { background: var(--plum-ink); color: var(--cream); border-color: var(--plum-ink); }
.chip { cursor: pointer; transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease); user-select: none; }
.chip:hover:not(.active) { border-color: var(--plum-ink); color: var(--plum-ink); }
.chip.subtle {
padding: 7px 14px; font: 500 12px/1 var(--mono);
letter-spacing: 0.06em; text-transform: uppercase;
background: transparent; border-color: var(--line);
}
.chip.subtle[aria-pressed="true"] { background: var(--plum-ink); color: var(--cream); border-color: var(--plum-ink); }
/* Connectors filter controls (FIG-20) */
.int-controls { display: flex; flex-direction: column; gap: 14px; }
.int-control-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.int-control-label {
font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
color: var(--plum-ink); opacity: 0.7; min-width: 72px;
}
@media (max-width: 720px) {
.int-control-row { flex-direction: column; align-items: flex-start; gap: 8px; }
.int-control-label { min-width: 0; }
}
.int-card.is-hidden,
[data-int-group].is-hidden { display: none !important; }
[data-int-group].is-empty [data-int-grid]::after {
content: "No connectors match those filters.";
grid-column: 1 / -1;
padding: 20px 0; color: var(--plum-ink); opacity: 0.7;
font: 500 14px/1.4 var(--body);
}
.section-head { margin-bottom: 8px; }
/* Editorial index (blog + resources) */
.featured-hero {
display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center;
padding: 36px; background: var(--white); border: 1px solid var(--line-strong); border-radius: 14px;
}
/* v7.28 r3 — blog featured card: cream on cream, border alone defines the card */
[data-route="/blog"] .featured-hero { background: var(--cream); }
.cover-card {
aspect-ratio: 4 / 5; border-radius: 10px; padding: 28px;
display: flex; flex-direction: column; justify-content: space-between;
background: var(--dark-plum); color: var(--cream-on-dark);
}
.cover-card .cc-brand { font: 500 10px/1.4 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.cover-card .cc-title { font: 800 34px/1.05 var(--display); letter-spacing: -0.025em; }
.cover-card .cc-title em { font-style: normal; color: var(--gold); }
.cover-card .cc-meta { font: 500 10px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,235,212,0.7); }
.cover-card.gold { background: var(--gold-soft); color: var(--plum-ink); }
.cover-card.gold .cc-brand { color: var(--gold); }
.cover-card.gold .cc-meta { color: var(--muted); }
.cover-card.gold .cc-title em { color: var(--magenta); }
.cover-card.magenta { background: linear-gradient(150deg, var(--magenta) 0%, var(--plum-deep) 100%); }
.cover-card.magenta .cc-brand { color: var(--gold-soft); }
.cover-card.paper { background: var(--paper); color: var(--plum-ink); }
.cover-card.paper .cc-brand { color: var(--gold); }
.cover-card.paper .cc-meta { color: var(--muted); }
.rail-wrap { position: relative; overflow: hidden; }
.rail {
display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
padding-bottom: 12px; scrollbar-width: thin;
}
.rail > * { flex: 0 0 300px; scroll-snap-align: start; }
.read-card {
display: flex; flex-direction: column; gap: 12px; text-decoration: none;
background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 22px;
}
.read-card:hover { border-color: var(--magenta); }
.read-card .rc-kicker { font: 500 10px/1.4 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--magenta); }
.read-card .rc-title { font: 700 19px/1.24 var(--display); color: var(--plum-ink); }
.read-card .rc-excerpt { font: 400 14px/1.55 var(--body); color: var(--muted); }
.read-card .rc-meta { margin-top: auto; font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.read-card .rc-pin { font: 500 10px/1 var(--mono); letter-spacing: 0.14em; color: var(--gold); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
/* ---------- 10. Article / reader --------------------------------------- */
.a11y-bar {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
padding: 10px 40px; background: var(--paper); border-bottom: 1px solid var(--line-strong);
font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--plum-ink);
}
.a11y-bar button {
background: none; border: 1px solid var(--line-strong); border-radius: 3px;
padding: 6px 10px; cursor: pointer; font: 500 11px/1 var(--mono); color: var(--plum-ink);
}
.article-shell { display: grid; grid-template-columns: 240px minmax(0, 720px) 1fr; gap: 56px; }
.toc { position: sticky; top: 100px; align-self: start; }
.toc .toc-title { font: 500 10px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.toc a { display: block; padding: 7px 0; font: 400 14px/1.4 var(--body); color: var(--muted); text-decoration: none; border-left: 2px solid var(--line); padding-left: 12px; }
.toc a:hover { color: var(--magenta); border-left-color: var(--magenta); }
.article-body > * + * { margin-top: 22px; }
.article-body p { font: 400 18px/1.7 var(--body); color: var(--charcoal); }
.article-body h2 { font: 700 32px/1.15 var(--display); color: var(--plum-ink); margin-top: 52px; letter-spacing: -0.02em; }
.article-body h2 .sec-num { display: block; font: 500 11px/1 var(--mono); letter-spacing: 0.2em; color: var(--magenta); margin-bottom: 12px; }
.article-body blockquote {
padding: 24px 28px; background: var(--magenta-soft); border-left: 3px solid var(--magenta);
font: 500 20px/1.5 var(--display); color: var(--plum-ink);
}
.pull-stat { padding: 28px 30px; background: var(--dark-plum); color: var(--cream-on-dark); border-radius: 10px; }
.pull-stat .ps-value { font: 800 56px/1 var(--display); color: var(--gold); letter-spacing: -0.03em; }
.pull-stat .ps-label { font: 500 11px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,235,212,0.7); margin-top: 12px; }
.pull-stat .ps-note { font: 400 13px/1.6 var(--body); color: rgba(245,235,212,0.72); margin-top: 12px; }
.steps { counter-reset: step; }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.steps li .st-num { font: 700 18px/1.2 var(--display); color: var(--gold); }
.steps li .st-h { font: 700 17px/1.35 var(--display); color: var(--plum-ink); }
.steps li .st-b { font: 400 15px/1.6 var(--body); color: var(--muted); margin-top: 4px; }
.callout-tip {
padding: 22px 26px; background: var(--gold-soft); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0;
}
.callout-tip .ct-label { font: 500 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.author-insert { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.avatar {
width: 56px; height: 56px; border-radius: 50%; background: var(--plum-ink); color: var(--cream);
display: flex; align-items: center; justify-content: center;
font: 700 16px/1 var(--display); letter-spacing: 0.06em;
}
.footnotes { border-top: 1px solid var(--line-strong); padding-top: 20px; }
.footnotes li { font: 400 13px/1.6 var(--body); color: var(--muted); }
/* ---------- 11. FAQ / accordion ---------------------------------------- */
.faq-item { border-top: 1px solid var(--line-strong); }
.faq-item:last-of-type { border-bottom: 1px solid var(--line-strong); }
.faq-q {
width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
display: flex; justify-content: space-between; gap: 24px; align-items: baseline;
padding: 24px 0; font: 700 20px/1.35 var(--display); color: var(--plum-ink);
}
.faq-q .q-id { font: 500 11px/1 var(--mono); letter-spacing: 0.14em; color: var(--faint); flex: none; }
.faq-a { display: none; padding: 0 0 26px; max-width: 780px; }
.faq-item.open .faq-a { display: block; }
.faq-item.open .faq-q { color: var(--magenta); }
/* ---------- 12. Tables / comparison ------------------------------------ */
.matrix { width: 100%; border-collapse: collapse; }
.matrix th, .matrix td { padding: 14px 16px; text-align: left; border-top: 1px solid var(--line); font: 400 14px/1.5 var(--body); color: var(--charcoal); }
.matrix thead th { font: 500 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); border-top: 0; }
.matrix tbody tr:hover { background: var(--white); }
/* ---------- 13. Connectors ------------------------------------------- */
.int-card { display: grid; grid-template-columns: 46px 1fr; gap: 16px; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.int-mark {
width: 46px; height: 46px; border-radius: 8px; background: var(--paper); color: var(--plum-ink);
display: flex; align-items: center; justify-content: center; font: 700 18px/1 var(--display);
overflow: hidden;
/* v7.41 · space between logo container and title/info block below */
margin-bottom: 20px;
}
.int-mark svg { width: 26px; height: 26px; display: block; }
.int-mark img { width: 30px; height: 30px; object-fit: contain; display: block; }
/* v7.26 · real-estate connectors — real brand colors + real vectors */
.int-mark--brand { color: #fff; }
.int-mark--brand .int-wordmark { font: 700 13px/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.int-mark--logo { background: #fff; border: 1px solid var(--line); }
.int-mark--logo img { width: 32px; height: 32px; }
.pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 500 10px/1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.pill.live { background: var(--magenta); color: var(--white); }
.pill.beta { background: var(--gold-soft); color: var(--plum-ink); border: 1px solid var(--gold); }
.pill.roadmap { background: none; color: var(--muted); border: 1px solid var(--line-strong); }
/* ---------- 14. Forms -------------------------------------------------- */
.progress-bar {
display: flex; gap: 14px; margin-bottom: 40px; padding: 18px 22px;
background: var(--paper); border-radius: 6px; flex-wrap: wrap;
}
.progress-bar .step {
flex: 1 1 160px; padding: 10px 14px;
font: 500 12px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted); border-bottom: 3px solid var(--line);
}
.progress-bar .step.active { color: var(--plum-ink); border-bottom-color: var(--magenta); }
.progress-bar .step.done { color: var(--plum-ink); border-bottom-color: var(--gold); }
.progress-bar .step .step-num { color: var(--magenta); font-weight: 700; margin-right: 8px; }
.form-block { max-width: 800px; }
.form-block > h2 { font: 700 28px/1.25 var(--display); color: var(--plum-ink); margin-bottom: 28px; }
.form-field { margin-bottom: 24px; }
.form-field > label, .form-field .fld-label {
display: block; font: 500 12px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--plum-ink); margin-bottom: 10px;
}
.form-field input[type="text"], .form-field input[type="email"], .form-field textarea, .form-field select {
width: 100%; padding: 14px 18px; background: var(--white);
border: 1px solid var(--line-strong); border-radius: 4px;
font: 400 15px/1.4 var(--body); color: var(--charcoal);
}
.form-field textarea { min-height: 110px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--plum-ink); outline: none; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--faint); }
.opt-row { display: flex; flex-wrap: wrap; gap: 12px; }
.opt {
position: relative; display: inline-flex; align-items: center;
padding: 10px 16px; border: 1px solid var(--line-strong); background: var(--white);
border-radius: 4px; font: 500 14px/1 var(--body); color: var(--plum-ink); cursor: pointer;
}
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt:hover { border-color: var(--magenta); }
.opt:has(input:checked) { background: var(--plum-ink); color: var(--cream); border-color: var(--plum-ink); }
.opt:has(input:focus-visible) { outline: 2px solid var(--magenta); outline-offset: 2px; }
.field-error { display: none; margin-top: 8px; font: 500 12px/1.4 var(--body); color: var(--magenta); }
.form-field.invalid .field-error { display: block; }
.form-field.invalid input, .form-field.invalid textarea { border-color: var(--magenta); }
.form-field.invalid .opt-row { box-shadow: none; }
.form-actions {
display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
padding-top: 24px; border-top: 1px solid var(--line); margin-top: 24px;
}
.form-note { font: 400 13px/1.6 var(--body); color: var(--muted); }
/* ---------- Conditional subfield (reveals when a checkbox is chosen) --- */
.form-subfield { margin-top: 12px; }
.form-subfield[hidden] { display: none; }
.form-subfield input[type="text"] {
width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px;
font: 400 15px/1.4 var(--body); color: var(--plum-ink); background: #fff;
}
.form-subfield input[type="text"]:focus { border-color: var(--plum-ink); outline: none; }
.form-subfield input::placeholder { color: var(--faint); }
.form-subfield.invalid input[type="text"] { border-color: var(--magenta); }
.form-subfield .field-error { display: none; font: 400 13px/1.5 var(--body); color: var(--magenta); margin-top: 6px; }
.form-subfield.invalid .field-error { display: block; }
/* ---------- Consent block (GDPR/PECR opt-in checkboxes) --------------- */
.form-field.consent-block { margin-bottom: 16px; }
.form-field.consent-block > label.consent-row {
display: flex; align-items: flex-start; gap: 12px; margin-bottom: 0;
cursor: pointer; font: 400 14px/1.55 var(--body); color: var(--plum-ink);
letter-spacing: 0; text-transform: none;
}
.form-field.consent-block .consent-row input[type="checkbox"] {
flex-shrink: 0; margin-top: 3px; width: 16px; height: 16px; cursor: pointer;
accent-color: var(--magenta);
}
.form-field.consent-block .consent-row a { color: var(--plum-ink); text-decoration: underline; }
.form-field.consent-block .consent-row a:hover { color: var(--magenta); }
.form-field.consent-block.invalid .consent-row input[type="checkbox"] { outline: 2px solid var(--magenta); outline-offset: 2px; }
/* ---------- Product updates opt-in card (confirmation page) ----------- */
.updates-card {
background: var(--cream); border: 1px solid var(--line); border-left: 3px solid var(--magenta);
border-radius: 8px; padding: 24px;
}
.updates-card .label { font: 500 12px/1.2 var(--mono, ui-monospace, monospace); letter-spacing: 0.08em; text-transform: uppercase; color: var(--plum-ink); }
.updates-card .label .muted { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
.updates-card .body { font: 400 15px/1.55 var(--body); color: var(--plum-ink); }
.updates-card .updates-form .form-field { margin-bottom: 12px; }
.updates-card .updates-form input[type="email"] {
width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px;
font: 400 15px/1.4 var(--body); color: var(--plum-ink); background: #fff;
}
.updates-card .updates-form input[type="email"]:focus { border-color: var(--plum-ink); outline: none; }
.updates-card .updates-form .btn { margin-top: 8px; }
.updates-card .updates-thanks .label { color: var(--magenta); }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ---------- 15. 404 ---------------------------------------------------- */
.route-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.route-card {
display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px;
padding: 22px 24px; background: var(--white); border: 1px solid var(--line);
border-radius: 10px; text-decoration: none;
}
.route-card:hover { border-color: var(--magenta); }
.route-card .rt-title { font: 700 18px/1.2 var(--display); color: var(--plum-ink); }
.route-card .rt-sub { font: 400 13px/1.5 var(--body); color: var(--muted); margin-top: 4px; }
.route-card .rt-arrow { color: var(--magenta); font-size: 18px; }
/* ---------- 16. Footer ------------------------------------------------- */
.site-footer {
background: var(--plum-ink); color: #F5EBD4;
padding: 80px var(--gutter) 32px; margin-top: 96px; font-family: var(--body);
}
.site-footer .footer-top {
display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 48px;
padding-bottom: 32px;
}
.site-footer .footer-llm {
display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center;
padding: 20px 0 24px; border-bottom: 1px solid rgba(245,235,212,0.16);
}
.site-footer .footer-llm-label { grid-column: 2 / 3; min-width: 0; overflow: visible; }
.site-footer .footer-llm-icons { grid-column: 3 / -1; min-width: 0; justify-content: flex-end; padding-right: 165px; }
.site-footer .footer-llm-label {
font: 500 10px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase;
color: rgba(245,235,212,0.5); white-space: nowrap;
}
.site-footer .footer-llm-icons { display: flex; gap: 18px; align-items: center; }
.site-footer .footer-llm .footer-icon { color: rgba(245,235,212,0.86); display: inline-flex; }
.site-footer .footer-llm .footer-icon:hover { color: var(--gold-warm); }
.site-footer .footer-brand .wordmark { font: 700 22px/1 var(--display); letter-spacing: -0.01em; color: var(--cream); margin-bottom: 18px; }
/* v7.37 · footer wordmark = SVG (Cabinet Grotesk ExtraBold) */
.site-footer .footer-brand .wm-footer { display: block; height: 38px; width: auto; margin-bottom: 18px; }
.site-footer .footer-brand .tagline { font: 400 15px/1.5 var(--body); color: rgba(245,235,212,0.72); max-width: 320px; margin-bottom: 24px; }
.site-footer .footer-social--brand { padding: 0; border: 0 !important; border-bottom: 0 !important; margin: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; }
.site-footer .footer-social--brand .footer-social-label { align-self: flex-start; }
.site-footer .footer-social--brand .footer-social-icons { gap: 18px; align-self: flex-start; }
.site-footer .footer-col h3,
.site-footer .footer-col h4 {
font: 500 10px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase;
color: rgba(245,235,212,0.5); margin: 0 0 22px 0;
}
.site-footer .footer-col ul { list-style: none; padding: 0; margin: 0; }
.site-footer .footer-col li { margin-bottom: 12px; }
.site-footer .footer-col a { color: #F5EBD4; text-decoration: none; font: 400 14px/1.4 var(--body); }
.site-footer .footer-col a:hover { color: var(--gold-warm); }
.site-footer .compliance-strip {
display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
padding: 22px 0; border-bottom: 1px solid rgba(245,235,212,0.10);
}
.site-footer .compliance-label {
font: 500 10px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase;
color: rgba(245,235,212,0.5); white-space: nowrap;
}
.site-footer .compliance-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.site-footer .compliance-badge {
padding: 6px 12px; border: 1px solid rgba(245,235,212,0.22); border-radius: 3px;
font: 700 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,235,212,0.86);
}
.site-footer .footer-social {
display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
padding: 22px 0; border-bottom: 1px solid rgba(245,235,212,0.10);
}
.site-footer .footer-social-label {
font: 500 10px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase;
color: rgba(245,235,212,0.5); white-space: nowrap;
}
.site-footer .footer-social-icons { display: flex; gap: 16px; align-items: center; }
.site-footer .footer-social .footer-icon { color: rgba(245,235,212,0.72); display: inline-flex; }
.site-footer .footer-social .footer-icon:hover { color: var(--gold-warm); }
.site-footer .footer-bottom {
display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
padding-top: 22px;
}
.site-footer .copyright, .site-footer .footer-legal a {
font: 500 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(245,235,212,0.5); text-decoration: none;
}
.site-footer .footer-legal { display: flex; gap: 24px; flex-wrap: wrap; }
.site-footer .footer-legal a:hover { color: var(--gold-warm); }
/* ---------- 17. Single-page variant ------------------------------------ */
.anchor-nav {
position: sticky; top: 0; z-index: 40;
display: flex; gap: 8px; align-items: center; overflow-x: auto;
padding: 12px 40px; background: var(--cream); border-bottom: 1px solid var(--line-strong);
}
.anchor-nav a {
white-space: nowrap; padding: 8px 14px; border-radius: 999px; text-decoration: none;
font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.anchor-nav a:hover { background: var(--paper); color: var(--plum-ink); }
.anchor-nav a.active { background: var(--plum-ink); color: var(--cream); }
.sp-section { border-top: 1px solid var(--line-strong); scroll-margin-top: 120px; }
.sp-divider {
display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 14px var(--gutter); background: var(--paper); border-bottom: 1px solid var(--line-strong);
font: 500 10px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
}
.sp-divider .fig { color: var(--magenta); }
/* ---------- 18. Responsive --------------------------------------------- */
@media (max-width: 1180px) {
:root { --gutter: 48px; }
.display-xl { font-size: 68px; }
.display-lg { font-size: 56px; }
.display-md { font-size: 44px; }
.h1 { font-size: 40px; }
.h2 { font-size: 32px; }
.article-shell { grid-template-columns: minmax(0, 1fr); }
.toc { position: static; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1023px) {
:root { --gutter: 24px; }
.site-nav { grid-template-columns: 1fr auto; gap: 16px; padding: 16px 24px; }
.site-nav > nav[aria-label="Primary"] { display: none; }
.nav-links, .nav-actions .sign-in, .nav-actions .btn { display: none; }
.nav-actions { display: flex; justify-content: flex-end; }
.nav-burger { display: block; }
.beta-banner { flex-wrap: wrap; gap: 10px 14px; padding: 12px 24px; }
.beta-banner .bb-eyebrow { order: 1; }
.beta-banner .bb-dismiss { order: 2; margin-left: auto; }
.beta-banner .bb-body { flex: 1 1 100%; order: 3; font-size: 13px; }
.beta-banner .bb-cta { order: 4; flex: 0 0 auto; }
.section { padding: 56px 0; }
.display-xl { font-size: 46px; }
.display-lg { font-size: 40px; }
.display-md { font-size: 34px; }
.h1 { font-size: 32px; }
.h2 { font-size: 27px; }
.h3 { font-size: 22px; }
.lede-lg { font-size: 19px; }
.lede { font-size: 17px; }
.section-lede-grid, .hero-split, .featured-hero, .grid-2, .grid-3, .grid-4,
.bento, .filmstrip-grid, .route-grid, .stat-strip { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.ed-row { grid-template-columns: 40px 1fr; gap: 8px 16px; }
.ed-row .ed-desc, .ed-row .ed-cta { grid-column: 2; }
.site-footer { padding: 56px 24px 28px; margin-top: 64px; }
.site-footer .footer-top { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-bottom: 40px; }
.site-footer .footer-llm { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; grid-template-columns: none; }
.site-footer .footer-llm-label { grid-column: auto; }
.site-footer .footer-llm-icons { grid-column: auto; flex-wrap: wrap; }
.site-footer .compliance-strip { flex-direction: column; align-items: flex-start; gap: 14px; }
.site-footer .compliance-badges { justify-content: flex-start; }
.site-footer .footer-social { flex-direction: column; align-items: flex-start; gap: 14px; }
.site-footer .footer-bottom { flex-direction: column; align-items: flex-start; gap: 18px; }
.beta-hero { padding: 44px 0 40px; }
.beta-hero .h-ctas { gap: 12px; }
.beta-hero .h-ctas .btn { width: 100%; justify-content: center; }
.founding-card { padding: 26px 22px; }
.featured-hero { padding: 22px; }
.rail > * { flex-basis: 260px; }
.matrix { display: block; overflow-x: auto; }
.a11y-bar { padding: 10px 24px; gap: 10px; }
.anchor-nav { padding: 10px 16px; }
.article-body p { font-size: 17px; }
.article-body h2 { font-size: 26px; margin-top: 40px; }
.cover-card { aspect-ratio: 3 / 4; }
}
@media (max-width: 560px) {
.progress-bar { padding: 14px; gap: 8px; }
.progress-bar .step { flex: 1 1 100%; padding: 8px 10px; }
.form-actions .btn { width: 100%; justify-content: center; }
}
/* Drawer accordion: the plus rotates into a close mark when its group is open. */
.drawer-toggle span { display: inline-block; transition: transform 200ms var(--ease); }
.drawer-group.open .drawer-toggle span { transform: rotate(45deg); }
/* ==== v7.16 Blog + Resources Featured Reads pattern (FIG 12b / 13b) ==== */
/* Cover-card triangle callout (Option B: faint top-right atmospheric texture) */
.cover-card { position: relative; overflow: hidden; }
.cover-triangles {
position: absolute; inset: 0;
display: flex; align-items: flex-start; justify-content: flex-end;
padding: 20px 20px 0 0;
pointer-events: none; opacity: 0.35;
}
.cover-triangles svg { width: 55%; height: auto; }
.cover-card > *:not(.cover-triangles) { position: relative; z-index: 2; }
/* Rail prev/next arrows */
.rail-controls { display: inline-flex; gap: 6px; margin-left: 12px; }
.rail-arrow {
width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--line-strong); background: var(--white); border-radius: 4px;
color: var(--plum-ink); cursor: pointer;
transition: background 200ms, color 200ms, border-color 200ms;
}
.rail-arrow:hover { background: var(--plum-ink); color: var(--cream); border-color: var(--plum-ink); }
.rail-arrow svg { width: 14px; height: 14px; }
/* Rail card color variants */
.read-card { position: relative; }
.read-card .rc-pin { position: absolute; top: 14px; right: 16px; }
.read-card.plum { background: var(--plum-ink); border-color: var(--plum-ink); color: var(--cream); }
.read-card.plum .rc-kicker { color: var(--gold-warm); }
.read-card.plum .rc-title { color: var(--cream); }
.read-card.plum .rc-excerpt{ color: rgba(245,235,212,0.75); }
.read-card.plum .rc-meta { color: var(--gold-warm); }
.read-card.plum .rc-pin { color: var(--gold-warm); }
.read-card.gold,
.read-card.gold .rc-kicker,
.read-card.gold .rc-title,
.read-card.gold .rc-excerpt,
.read-card.gold .rc-meta,
.read-card.gold .rc-pin { color: var(--cream) !important; } /* WCAG AA: cream on a11y gold = 4.71:1 (plum-ink was 3.11:1, failed body) */
.read-card.gold { background: var(--gold); border-color: var(--gold); }
.read-card.magenta {
background: linear-gradient(150deg, var(--magenta) 0%, var(--plum-deep) 100%);
border-color: var(--magenta); color: var(--cream);
}
.read-card.magenta .rc-kicker { color: var(--gold-warm); }
.read-card.magenta .rc-title { color: var(--cream); }
.read-card.magenta .rc-excerpt { color: rgba(245,235,212,0.85); }
.read-card.magenta .rc-meta { color: var(--gold-warm); }
.read-card.magenta .rc-pin { color: var(--gold-warm); }
.read-card.cream { background: var(--paper); border-color: var(--line-strong); color: var(--plum-ink); }
.read-card.cream .rc-kicker { color: var(--magenta); }
.read-card.cream .rc-title { color: var(--plum-ink); }
.read-card.cream .rc-meta { color: var(--muted); }
/* Blog card grid (replaces the numbered .ed-row list) */
.blog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.blog-card {
min-height: 280px;
padding: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
border: 1px solid var(--line); border-radius: 10px;
background: var(--white); text-decoration: none;
transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.blog-card:hover { border-color: var(--magenta); box-shadow: 0 8px 24px rgba(53,20,55,0.08); transform: translateY(-2px); }
.blog-card .bc-kicker { font: 500 10px/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--magenta); }
.blog-card .bc-title { font: 700 21px/1.22 var(--display); letter-spacing: -0.01em; color: var(--plum-ink); }
.blog-card .bc-meta { font: 500 10px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.blog-card.plum { background: var(--plum-ink); border-color: var(--plum-ink); color: var(--cream); }
.blog-card.plum .bc-kicker { color: var(--gold-warm); }
.blog-card.plum .bc-title { color: var(--cream); }
.blog-card.plum .bc-meta { color: var(--gold-warm); }
.blog-card.gold,
.blog-card.gold .bc-kicker,
.blog-card.gold .bc-title,
.blog-card.gold .bc-meta { color: var(--cream) !important; } /* WCAG AA: cream on a11y gold = 4.71:1 (plum-ink was 3.11:1, failed body) */
.blog-card.gold { background: var(--gold); border-color: var(--gold); }
.blog-card.magenta { background: linear-gradient(150deg, var(--magenta) 0%, var(--plum-deep) 100%); border-color: var(--magenta); color: var(--cream); }
.blog-card.magenta .bc-kicker { color: var(--gold-warm); }
.blog-card.magenta .bc-title { color: var(--cream); }
.blog-card.magenta .bc-meta { color: var(--gold-warm); }
.blog-card.cream { background: var(--paper); border-color: var(--line-strong); }
.blog-card.cream .bc-kicker { color: var(--magenta); }
@media (max-width: 1023px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .blog-grid { grid-template-columns: 1fr; } }
/* Editorial callout — "Why this beats stacked category rails" */
.pattern-callout {
background: var(--paper); border: 1px solid var(--line-strong); border-radius: 14px;
padding: 32px 36px; margin-top: 48px;
}
.pattern-callout h3 { font: 700 22px/1.25 var(--display); color: var(--plum-ink); margin-bottom: 8px; }
.pattern-callout p { color: var(--plum-ink); font-size: 16px; line-height: 1.65; max-width: 78ch; margin-bottom: 14px; }
.pattern-callout p:last-child { margin-bottom: 0; }
.pattern-callout p b { color: var(--plum-ink); font-weight: 700; }
.pattern-callout code {
background: var(--gold-soft); color: var(--plum-ink);
padding: 1px 5px; border-radius: 2px; font-size: 13px;
font-family: var(--mono);
}
/* ==========================================================================
v7.17 · Library rebuild (fr-hero, rail-header, frr-card, rg-card, rationale)
========================================================================== */
/* fr-hero · featured resource with magenta-gold visual + triangles */
.fr-hero {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 56px;
align-items: center;
padding: 44px;
background: var(--paper);
border: 1px solid var(--line-strong);
border-radius: 20px;
}
.fr-hero-copy .fr-hero-badges { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fr-badge {
display: inline-flex; align-items: center;
padding: 5px 12px; border-radius: 999px;
background: var(--gold-warm); color: var(--plum-ink);
font: 500 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
}
.fr-badge-line { font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.fr-hero-title { font: 900 60px/1.02 var(--display); letter-spacing: -0.025em; color: var(--plum-ink); -webkit-text-stroke: 0.5px currentColor; text-rendering: geometricPrecision; }
.fr-hero-deck { font: 400 19px/1.5 var(--body); color: var(--plum-ink); max-width: 46ch; }
.fr-hero-meta {
display: grid; grid-template-columns: repeat(3, auto);
gap: 32px; padding: 0; margin: 0; list-style: none;
}
.fr-hero-meta li { display: grid; gap: 4px; }
.fr-hero-meta li .label { font: 500 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.fr-hero-meta li span:last-child { font: 500 14px/1.3 var(--body); color: var(--plum-ink); }
/* hero-visual · magenta-gold gradient cover with outlined triangles + doc card */
.hero-visual.magenta-gold {
position: relative;
aspect-ratio: 1 / 1.12;
background: linear-gradient(135deg, var(--magenta) 0%, var(--gold) 100%);
border-radius: 14px;
overflow: hidden;
color: var(--cream);
}
.hv-tri {
position: absolute; width: 120px; height: 104px;
color: rgba(250, 244, 227, 0.55);
}
.hv-tri-a { top: 24px; left: 32px; transform: rotate(-6deg); }
.hv-tri-b { top: 90px; right: 28px; transform: rotate(14deg); width: 96px; height: 84px; }
.hv-tri-c { bottom: 40px; left: 44px; transform: rotate(22deg); width: 76px; height: 66px; }
.hv-card {
position: absolute; right: 28px; bottom: 28px; left: 28px;
display: grid; gap: 4px;
padding: 20px; border-radius: 8px;
background: rgba(53, 20, 55, 0.86);
color: var(--cream);
}
.hv-card .hv-brand { font: 500 10px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250, 244, 227, 0.72); }
.hv-card .hv-title { font: 700 30px/1.04 var(--display); color: var(--cream); letter-spacing: -0.02em; }
.hv-card .hv-title em { font-style: normal; color: var(--gold-warm); }
.hv-card .hv-meta { font: 500 10px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-warm); margin-top: 6px; }
.hv-card .hv-pp { font: 700 40px/1 var(--display); color: var(--gold-warm); margin-top: 8px; }
.hv-card .hv-pp em { font-style: normal; font-size: 14px; color: var(--gold-warm); margin-left: 4px; }
@media (max-width: 900px) {
.fr-hero { grid-template-columns: 1fr; gap: 32px; padding: 28px; }
.fr-hero-title { font-size: 44px; }
.fr-hero-meta { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hero-visual.magenta-gold { aspect-ratio: 4 / 3; }
}
/* rail-header · rich header for featured reads rail */
.rail-header {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: end;
margin-bottom: 12px;
}
.rail-header-copy { max-width: 640px; }
.rail-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.rail-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--magenta);
box-shadow: 0 0 0 0 rgba(184, 50, 128, 0.5);
animation: rail-dot-pulse 1.8s ease-out infinite;
}
@keyframes rail-dot-pulse {
0% { box-shadow: 0 0 0 0 rgba(184, 50, 128, 0.5); }
70% { box-shadow: 0 0 0 10px rgba(184, 50, 128, 0); }
100% { box-shadow: 0 0 0 0 rgba(184, 50, 128, 0); }
}
.rail-header-actions { display: inline-flex; align-items: center; gap: 16px; }
@media (max-width: 720px) {
.rail-header { grid-template-columns: 1fr; }
.rail-header-actions { justify-self: start; }
}
/* frr-card · featured-reads rail card with format palette */
.rail > .frr-card { flex: 0 0 300px; scroll-snap-align: start; }
.frr-card {
display: flex; flex-direction: column; gap: 8px;
padding: 22px; border-radius: 12px;
text-decoration: none;
position: relative;
min-height: 260px;
transition: transform 180ms ease, border-color 180ms ease;
}
.frr-card:hover { transform: translateY(-2px); }
.frr-card .frr-pin { position: absolute; top: 16px; right: 18px; font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.frr-card .frr-mast { font: 500 10px/1.2 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; }
.frr-card .frr-kicker { font: 500 10px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; margin-top: 4px; }
.frr-card .frr-title { font: 700 22px/1.18 var(--display); letter-spacing: -0.015em; margin-top: 6px; }
.frr-card .frr-accent { display: block; width: 24px; height: 2px; margin-top: 4px; }
.frr-card .frr-excerpt { font: 400 14px/1.5 var(--body); margin-top: 6px; }
.frr-card .frr-foot { margin-top: auto; font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
/* Playbook · dark plum */
.frr-card.playbook { background: var(--plum-ink); color: var(--cream); }
.frr-card.playbook .frr-mast, .frr-card.playbook .frr-kicker { color: var(--gold-warm); }
.frr-card.playbook .frr-title { color: var(--cream); }
.frr-card.playbook .frr-accent { background: var(--gold-warm); }
.frr-card.playbook .frr-excerpt { color: rgba(250,244,227,0.78); }
.frr-card.playbook .frr-foot { color: var(--gold-warm); }
.frr-card.playbook .frr-pin { color: var(--gold-warm); }
.frr-card.playbook:hover { box-shadow: 0 8px 24px rgba(53,20,55,0.18); }
/* Field note · gold */
.frr-card.field { background: var(--gold-warm); color: var(--plum-ink); }
.frr-card.field .frr-mast, .frr-card.field .frr-kicker { color: var(--plum-ink); }
.frr-card.field .frr-accent { background: var(--plum-ink); }
.frr-card.field .frr-excerpt { color: var(--plum-ink); }
.frr-card.field .frr-foot { color: var(--plum-ink); }
.frr-card.field .frr-pin { color: var(--plum-ink); }
/* Comparison · magenta */
.frr-card.comparison { background: var(--magenta); color: var(--cream); }
.frr-card.comparison .frr-mast, .frr-card.comparison .frr-kicker { color: var(--gold-warm); }
.frr-card.comparison .frr-title { color: var(--cream); }
.frr-card.comparison .frr-accent { background: var(--gold-warm); }
.frr-card.comparison .frr-excerpt { color: rgba(250,244,227,0.9); }
.frr-card.comparison .frr-foot { color: var(--gold-warm); }
.frr-card.comparison .frr-pin { color: var(--gold-warm); }
/* Field guide · paper */
.frr-card.guide { background: var(--paper); color: var(--plum-ink); border: 1px solid var(--line-strong); }
.frr-card.guide .frr-mast, .frr-card.guide .frr-kicker { color: var(--magenta); }
.frr-card.guide .frr-accent { background: var(--magenta); }
.frr-card.guide .frr-excerpt { color: var(--muted); }
.frr-card.guide .frr-foot { color: var(--muted); }
.frr-card.guide .frr-pin { color: var(--magenta); }
/* grid-header · library grid section header */
.grid-header {
display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
flex-wrap: wrap;
padding-bottom: 20px;
border-bottom: 1px solid var(--line-strong);
}
.grid-h { font: 700 30px/1.15 var(--display); color: var(--plum-ink); letter-spacing: -0.015em; margin: 0; }
.grid-count { font: 500 12px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
/* rg-card · library grid card with accent bar (mirrors frr palette) */
.rg-grid { gap: 20px; }
.rg-card {
display: flex; flex-direction: column; gap: 6px;
padding: 24px; border-radius: 10px;
text-decoration: none;
min-height: 280px;
transition: transform 180ms ease, box-shadow 180ms ease;
}
.rg-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(53, 20, 55, 0.14); }
.rg-card .rg-kicker { font: 500 10px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.rg-card .rg-title { font: 700 24px/1.1 var(--display); letter-spacing: -0.02em; }
.rg-card .rg-accent { display: block; width: 24px; height: 2px; margin: 4px 0; opacity: 0.5; }
.rg-card .rg-foot { margin-top: auto; font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.rg-card .rg-foot em { font-style: normal; font-weight: 500; }
.rg-card.playbook { background: var(--plum-ink); color: var(--cream); }
.rg-card.playbook .rg-kicker, .rg-card.playbook .rg-foot { color: var(--gold-warm); }
.rg-card.playbook .rg-accent { background: var(--gold-warm); }
.rg-card.field { background: var(--gold-warm); color: var(--plum-ink); }
.rg-card.field .rg-kicker, .rg-card.field .rg-foot { color: var(--plum-ink); }
.rg-card.field .rg-accent { background: var(--plum-ink); }
.rg-card.comparison { background: var(--magenta); color: var(--cream); }
.rg-card.comparison .rg-kicker, .rg-card.comparison .rg-foot { color: var(--gold-warm); }
.rg-card.comparison .rg-accent { background: var(--gold-warm); }
.rg-card.guide { background: var(--paper); color: var(--plum-ink); border: 1px solid var(--line-strong); }
.rg-card.guide .rg-kicker, .rg-card.guide .rg-foot { color: var(--magenta); }
.rg-card.guide .rg-accent { background: var(--magenta); }
/* library-rationale · closing "why one pattern, two surfaces" block */
.rationale-card {
background: var(--paper);
border: 1px solid var(--line-strong);
border-radius: 16px;
padding: 48px;
}
.rationale-card .label { font: 500 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--magenta); }
.rationale-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 48px; }
.micro-label { font: 700 14px/1.3 var(--display); color: var(--plum-ink); }
@media (max-width: 720px) {
.rationale-card { padding: 28px; }
.rationale-grid { grid-template-columns: 1fr; gap: 20px; }
}
/* ==========================================================================
v7.17 · Blog article masthead (dark plum full-bleed + byline + ask strip)
========================================================================== */
.article-masthead-dark {
background: var(--plum-ink);
color: var(--cream);
padding: 88px 0 72px;
position: relative;
}
.article-masthead-dark::after {
content: ""; display: block; height: 4px;
background: linear-gradient(to right, var(--magenta), var(--gold));
position: absolute; left: 0; right: 0; bottom: 0;
}
.article-masthead-dark .am-badges { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.article-masthead-dark .am-badge {
padding: 5px 12px; border-radius: 999px;
background: var(--gold-warm); color: var(--plum-ink);
font: 500 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
}
.article-masthead-dark .am-badge-sub {
font: 500 11px/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
color: var(--gold-warm);
}
.article-masthead-dark .am-title {
font: 700 60px/1.04 var(--display); letter-spacing: -0.025em; color: var(--cream);
}
.article-masthead-dark .am-title em { font-style: normal; color: var(--gold-warm); }
.article-masthead-dark .am-deck {
font: 400 22px/1.5 var(--body); color: rgba(250, 244, 227, 0.86);
max-width: 60ch;
}
.am-byline {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 20px;
align-items: center;
padding-top: 32px;
border-top: 1px solid rgba(250, 244, 227, 0.12);
}
.avatar.dark {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 50%;
background: var(--gold-warm); color: var(--plum-ink);
font: 700 14px/1 var(--display); letter-spacing: 0.02em;
}
.am-byline-copy .am-byline-name {
font: 700 16px/1.2 var(--display); color: var(--cream);
}
.am-byline-copy .am-byline-meta {
font: 500 11px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
color: var(--gold-warm); margin-top: 4px;
}
.am-byline-actions {
display: inline-flex; align-items: center; gap: 10px;
color: rgba(250, 244, 227, 0.72);
}
.am-byline-actions .label { color: var(--gold-warm); }
.am-share {
font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--cream); text-decoration: none;
border-bottom: 1px dotted rgba(250, 244, 227, 0.36);
padding-bottom: 2px;
}
.am-share:hover { border-bottom-color: var(--gold-warm); color: var(--gold-warm); }
.am-dot { color: rgba(250, 244, 227, 0.36); }
@media (max-width: 720px) {
.article-masthead-dark { padding: 56px 0 44px; }
.article-masthead-dark .am-title { font-size: 40px; }
.article-masthead-dark .am-deck { font-size: 18px; }
.am-byline { grid-template-columns: auto 1fr; gap: 12px; }
.am-byline-actions { grid-column: 1 / -1; }
}
/* Ask this article strip */
.ask-article-strip {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: center;
padding: 28px 32px;
background: var(--paper);
border: 1px solid var(--line-strong);
border-radius: 12px;
}
.ask-article-strip .label { color: var(--magenta); }
@media (max-width: 720px) {
.ask-article-strip { grid-template-columns: 1fr; }
.ask-article-strip .btn { justify-self: start; }
}
/* ==========================================================================
v7.17 · Nav mega-menu enrichments (live status, apply card, latest cards)
========================================================================== */
/* Beta status counter column */
.mm-live-status {
padding: 20px;
background: var(--paper);
border-radius: 8px;
display: flex; flex-direction: column; gap: 10px;
}
.mm-status-row {
display: flex; justify-content: space-between; align-items: baseline;
border-bottom: 1px solid var(--line);
padding-bottom: 6px;
}
.mm-status-row:last-of-type { border-bottom: 0; }
.mm-status-label {
font: 500 11px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
color: var(--muted);
}
.mm-status-value {
font: 700 22px/1 var(--display); color: var(--plum-ink);
font-variant-numeric: tabular-nums;
}
.mm-status-foot {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 4px;
font: 500 10px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--magenta);
}
.mm-status-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--magenta);
box-shadow: 0 0 0 0 rgba(184, 50, 128, 0.5);
animation: rail-dot-pulse 1.8s ease-out infinite;
}
/* Apply-card in solutions megamenu */
.mm-apply-card {
display: flex; flex-direction: column; gap: 10px;
padding: 22px; border-radius: 8px;
background: var(--plum-ink); color: var(--cream);
text-decoration: none;
transition: transform 180ms ease;
}
.mm-apply-card:hover { transform: translateY(-2px); }
.mm-apply-eyebrow {
font: 500 10px/1.2 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
color: var(--gold-warm);
}
.mm-apply-body { font: 400 13.5px/1.5 var(--body); color: rgba(250, 244, 227, 0.86); }
.mm-apply-cta {
margin-top: auto;
font: 700 14px/1 var(--display);
color: var(--gold-warm);
}
/* Latest posts / latest reads cards */
.mm-latest .mm-latest-card {
display: flex; flex-direction: column; gap: 4px;
padding: 12px 0;
border-bottom: 1px solid var(--line);
text-decoration: none;
}
.mm-latest .mm-latest-card:first-of-type { padding-top: 0; }
.mm-latest .mm-latest-card:last-of-type { border-bottom: 0; }
.mm-latest-kicker {
font: 500 10px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--magenta);
}
.mm-latest-title {
font: 700 15px/1.25 var(--display); color: var(--plum-ink);
}
.mm-latest-meta {
font: 500 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
color: var(--muted);
margin-top: 2px;
}
.mm-latest .mm-latest-card:hover .mm-latest-title { color: var(--magenta); }
/* Ensure 4-col layout stays coherent even with new content types */
.megamenu.mm-4col { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
@media (max-width: 1023px) {
.megamenu { display: none; }
}
/* ============================================================
v7.18 — Blog article (v7.15 spec) + Resources index (v7.15 spec)
============================================================ */
/* ---------- Resources · v7.18 additions ------------------------------ */
/* Breadcrumbs on library masthead */
.breadcrumbs {
font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted); display: inline-flex; gap: 10px; align-items: center;
}
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--plum-ink); }
.breadcrumbs .sep { color: var(--faint); }
.breadcrumbs .current { color: var(--plum-ink); }
/* Library masthead: gold label + 72px Onest headline + magenta field notes */
.lib-label {
font: 500 11px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
color: var(--gold);
}
.lib-h1 {
font: 900 72px/0.98 var(--display);
letter-spacing: -0.035em; color: var(--plum-ink); margin: 0;
-webkit-text-stroke: 0.55px currentColor; text-rendering: geometricPrecision;
}
.lib-h1 em { color: var(--magenta); font-style: normal; }
.lib-lede {
font: 400 17px/1.55 var(--body); color: var(--muted); max-width: 620px;
}
@media (max-width: 720px) {
.lib-h1 { font-size: 44px; }
}
/* fr-hero-badge (v7.15 pattern — replaces older fr-badge/fr-hero-badges) */
.fr-hero-badge {
display: inline-block; padding: 6px 12px;
background: var(--gold-warm); color: var(--plum-ink);
font: 500 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
border-radius: 2px;
}
.fr-hero-badge-line {
display: inline-block; margin-left: 12px;
font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted);
}
.fr-hero-eb {
font: 500 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
color: var(--magenta); margin: 0 0 16px 0;
}
.fr-hero-meta .by { color: var(--muted); }
/* hero-visual v7.15 structure — hv-top/hv-headline/hv-accent/hv-bot/hv-shapes */
.hero-visual.magenta-gold {
position: relative; overflow: hidden;
background: linear-gradient(135deg, var(--magenta) 0%, var(--plum-ink) 100%);
color: var(--cream);
padding: 32px 32px 36px 32px;
min-height: 460px;
display: flex; flex-direction: column; justify-content: space-between;
border-radius: 4px;
}
.hero-visual.magenta-gold .hv-top {
position: relative; z-index: 2;
font: 500 10px/1.2 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
color: var(--gold-warm);
}
.hero-visual.magenta-gold .hv-headline {
position: relative; z-index: 2;
font: 800 56px/1 var(--display); letter-spacing: -0.02em; color: var(--cream);
margin-top: 24px;
}
.hero-visual.magenta-gold .hv-accent {
height: 3px; width: 60px; background: var(--gold-warm); margin-bottom: 12px;
position: relative; z-index: 2;
}
.hero-visual.magenta-gold .hv-bot {
position: relative; z-index: 2;
display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
}
.hero-visual.magenta-gold .hv-loc {
font: 500 10px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--gold-warm);
}
.hero-visual.magenta-gold .hv-time {
font: 700 32px/1 var(--display); color: var(--gold-warm);
}
.hero-visual.magenta-gold .hv-shapes {
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
z-index: 1; pointer-events: none;
}
.hero-visual.magenta-gold .hv-shapes svg {
position: absolute; color: var(--gold-warm); fill: none;
}
.hero-visual.magenta-gold .hv-shapes svg:nth-child(1) { top: 20px; right: 40px; }
.hero-visual.magenta-gold .hv-shapes svg:nth-child(2) { bottom: 40px; right: 20px; }
.hero-visual.magenta-gold .hv-shapes svg:nth-child(3) { bottom: -20px; right: -40px; }
.hero-visual.magenta-gold .hv-shapes .tri { stroke: currentColor; }
/* fr-chips (v7.15) — replaces older chip-row/chip */
.fr-chips {
display: flex; flex-wrap: wrap; gap: 8px;
}
.fr-chip {
display: inline-flex; align-items: center; padding: 8px 14px;
border: 1px solid var(--line-strong); background: var(--white);
font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
color: var(--plum-ink); text-decoration: none; border-radius: 999px;
transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.fr-chip:hover { background: var(--paper); }
.fr-chip.active { background: var(--plum-ink); color: var(--cream); border-color: var(--plum-ink); }
/* rail-block wrapper (v7.15) */
.rail-block { position: relative; }
/* rail-header v7.15 replacement — flex row with header-copy left, controls right */
.rail-header > div:first-child { max-width: 640px; }
/* rail-eyebrow now hosts autoscroll-badge */
.rail-eyebrow > span:first-child {
font: 500 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
color: var(--magenta);
}
.autoscroll-badge {
display: inline-flex; align-items: center; gap: 6px;
margin-left: 12px; padding: 4px 10px;
background: var(--gold-soft); color: var(--plum-ink);
font: 500 9px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
border-radius: 999px;
}
.autoscroll-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--magenta);
animation: autoscroll-pulse 1.6s ease-in-out infinite;
}
@keyframes autoscroll-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.72); }
}
@media (prefers-reduced-motion: reduce) {
.autoscroll-dot { animation: none; }
}
.rail-title {
font: 700 26px/1.2 var(--display); letter-spacing: -0.015em;
color: var(--plum-ink); margin: 10px 0 0 0;
}
.rail-desc {
font: 400 15px/1.55 var(--body); color: var(--muted);
margin: 10px 0 0 0; max-width: 60ch;
}
.rail-controls {
display: inline-flex; align-items: center; gap: 16px; margin-left: 0;
}
.rail-see-all {
font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
color: var(--magenta); text-decoration: none;
}
.rail-see-all:hover { text-decoration: underline; }
.rail-arrows {
display: inline-flex; gap: 6px;
}
/* scroll-rail (replaces .rail on this page) */
.scroll-rail {
display: grid; grid-auto-flow: column; grid-auto-columns: 300px;
gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
padding: 24px 0 8px 0;
scrollbar-width: thin;
}
.scroll-rail::-webkit-scrollbar { height: 6px; }
.scroll-rail::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.scroll-rail .frr-card { scroll-snap-align: start; }
/* frr-format + frr-sub + new frr-foot (grid: series/vol left, pp right) */
.frr-card .frr-format {
font: 500 10px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
margin-top: 4px;
}
.frr-card .frr-sub {
font: 400 14px/1.5 var(--body); margin-top: 6px;
}
.frr-card .frr-foot {
display: flex; justify-content: space-between; align-items: flex-end; gap: 8px;
}
.frr-card .frr-foot .series {
font: 500 10px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.frr-card .frr-foot .vol {
font: 500 9px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
opacity: 0.72; margin-top: 2px;
}
.frr-card .frr-foot .pp {
font: 700 20px/1 var(--display); letter-spacing: -0.01em;
}
/* Rail progress bar under scroll-rail */
.rail-progress {
height: 3px; background: var(--line); margin-top: 12px; overflow: hidden;
border-radius: 2px;
}
.rail-progress-fill {
height: 100%; width: 30%; background: var(--magenta);
transition: width .2s ease;
}
/* grid-block wrapper */
.grid-block { position: relative; }
.resource-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
@media (max-width: 1024px) { .resource-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .resource-grid { grid-template-columns: 1fr; } }
/* rg-mast (ALL CAPS format+date) + new rg-foot with series/pp split */
.rg-card .rg-mast {
font: 500 10px/1.3 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
}
.rg-card .rg-foot {
display: flex; justify-content: space-between; align-items: flex-end; gap: 8px;
}
.rg-card .rg-foot .series {
font: 500 10px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.rg-card .rg-foot .pp {
font: 700 18px/1 var(--display); letter-spacing: -0.01em;
}
/* fr-rationale card (v7.15) */
.fr-rationale {
background: var(--paper); padding: 40px 44px;
border: 1px solid var(--line-strong); border-radius: 4px;
}
.rat-eyebrow {
font: 500 11px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
color: var(--magenta);
}
.rat-title {
font: 700 32px/1.15 var(--display); letter-spacing: -0.02em;
color: var(--plum-ink); margin-top: 16px; max-width: 32ch;
}
.rat-body {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; margin-top: 32px;
}
.rat-body p {
font: 400 15px/1.6 var(--body); color: var(--plum-ink); margin: 0;
}
.rat-body p b {
font-weight: 700; color: var(--plum-ink);
}
@media (max-width: 720px) {
.rat-body { grid-template-columns: 1fr; }
.fr-rationale { padding: 28px 24px; }
.rat-title { font-size: 24px; }
}
/* ============================================================
Blog article (v7.15 spec) — a11y-toolbar, art-header (cream),
art-body 3-col (TOC + main + rail), read-aloud, cmp-* components
============================================================ */
/* --- a11y-toolbar (top strip, replaces old a11y-bar on this page) --- */
.a11y-toolbar {
border-bottom: 1px solid var(--line);
background: var(--cream);
position: relative;
}
.a11y-toolbar .a11y-inner {
max-width: var(--maxw); margin: 0 auto; padding: 10px var(--gutter);
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
color: var(--muted);
}
.a11y-toolbar .a11y-item {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 10px; border: 1px solid transparent; background: transparent;
color: var(--muted); cursor: pointer;
font: inherit; text-decoration: none; border-radius: 2px;
}
.a11y-toolbar .a11y-item:hover { color: var(--plum-ink); border-color: var(--line-strong); }
.a11y-toolbar .a11y-item.on {
background: var(--plum-ink); color: var(--cream); border-color: var(--plum-ink);
}
.a11y-toolbar .a11y-item .a-icon {
display: inline-block; font-weight: 700;
}
.a11y-toolbar .a11y-sml .a-icon { font-size: 10px; }
.a11y-toolbar .a11y-med .a-icon { font-size: 12px; }
.a11y-toolbar .a11y-lrg .a-icon { font-size: 14px; }
.a11y-toolbar .a11y-skip {
margin-right: auto; color: var(--magenta);
}
.a11y-progress {
position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
background: transparent;
}
.a11y-progress-fill {
height: 100%; width: 12%; background: var(--magenta);
transition: width .1s linear;
}
/* --- art-header on cream (v7.15 — replaces old dark plum masthead) --- */
.art-header {
background: var(--cream); padding: 64px 0 48px 0;
border-bottom: 1px solid var(--line);
}
.art-header .container { max-width: 820px; }
.art-tags {
display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;
}
.art-tag {
display: inline-flex; align-items: center; padding: 5px 11px;
background: var(--white); border: 1px solid var(--line-strong);
font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--plum-ink); border-radius: 999px;
}
.art-tag-cash { background: var(--gold-soft); border-color: var(--gold); color: var(--plum-ink); }
.art-tag-reading { background: var(--magenta-soft); border-color: var(--magenta); color: var(--plum-ink); }
.art-title {
font: 700 56px/1.05 var(--display); letter-spacing: -0.025em; color: var(--plum-ink);
margin: 0;
}
.art-title em { color: var(--magenta); font-style: normal; }
.art-lede {
font: 400 20px/1.55 var(--body); color: var(--muted); margin-top: 20px; max-width: 60ch;
}
.art-byline {
display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center;
margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line);
}
.art-byline .avatar {
width: 44px; height: 44px; border-radius: 50%; background: var(--plum-ink); color: var(--gold-warm);
display: inline-flex; align-items: center; justify-content: center;
font: 700 14px/1 var(--display);
}
.art-byline-copy .by-name {
font: 700 15px/1.2 var(--body); color: var(--plum-ink);
}
.art-byline-copy .by-meta {
font: 400 13px/1.4 var(--body); color: var(--muted); margin-top: 2px;
}
.art-byline-actions { display: inline-flex; gap: 12px; }
.art-share {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 2px;
font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
color: var(--plum-ink); text-decoration: none;
}
.art-share:hover { background: var(--paper); }
@media (max-width: 720px) {
.art-header { padding: 40px 0 32px 0; }
.art-title { font-size: 34px; }
.art-lede { font-size: 17px; }
}
/* --- art-body 3-col grid --- */
.art-body-section { padding: 48px 0 96px 0; background: var(--cream); }
.art-body {
display: grid; grid-template-columns: 200px minmax(0, 1fr) 280px;
gap: 48px; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
}
@media (max-width: 1080px) {
.art-body { grid-template-columns: 1fr; gap: 32px; }
.art-toc, .art-rail { position: static !important; }
}
/* --- art-toc (sticky left) --- */
.art-toc {
position: sticky; top: 24px; align-self: start;
max-height: calc(100vh - 48px); overflow-y: auto;
}
.toc-title {
font: 500 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
color: var(--muted); margin-bottom: 14px;
}
.art-toc ul { display: grid; gap: 8px; }
.art-toc a {
display: block; padding: 6px 0 6px 12px;
border-left: 2px solid var(--line);
font: 500 13px/1.4 var(--body); color: var(--muted);
text-decoration: none;
}
.art-toc a:hover { color: var(--plum-ink); border-left-color: var(--line-strong); }
.art-toc a.active {
color: var(--magenta); border-left-color: var(--magenta); font-weight: 700;
}
/* --- art-main (center) --- */
.art-main article { max-width: 68ch; }
.art-main h2 {
font: 700 30px/1.18 var(--display); letter-spacing: -0.015em; color: var(--plum-ink);
margin: 48px 0 16px 0; scroll-margin-top: 100px;
display: flex; align-items: baseline; gap: 12px;
}
.art-main h2 .sec-num {
display: inline-block; padding: 4px 8px;
background: var(--magenta); color: var(--cream);
font: 700 11px/1 var(--mono); letter-spacing: 0.12em;
border-radius: 2px; flex-shrink: 0;
transform: translateY(-4px);
}
.art-main h3 {
font: 700 22px/1.25 var(--display); letter-spacing: -0.01em; color: var(--plum-ink);
margin: 32px 0 12px 0;
}
.art-main p {
font: 400 17px/1.65 var(--body); color: var(--plum-ink); margin: 0 0 18px 0;
}
.art-main p a {
color: var(--magenta); text-decoration: underline; text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.art-main ul, .art-main ol {
margin: 0 0 18px 0; padding-left: 20px;
}
.art-main ul { list-style: disc; }
.art-main ol { list-style: decimal; }
.art-main li { font: 400 17px/1.65 var(--body); color: var(--plum-ink); margin-bottom: 8px; }
/* --- read-aloud bar --- */
.read-aloud {
display: grid; grid-template-columns: 48px 1fr auto auto auto;
gap: 12px; align-items: center;
padding: 14px 18px; background: var(--white);
border: 1px solid var(--line-strong); border-radius: 4px;
margin-bottom: 32px; position: relative;
}
.read-aloud .ra-play {
width: 48px; height: 48px; border-radius: 50%;
background: var(--plum-ink); color: var(--gold-warm); border: none;
cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
font-size: 18px;
}
.read-aloud .ra-play:hover { background: var(--magenta); color: var(--cream); }
.read-aloud .ra-copy .ra-label {
font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted);
}
.read-aloud .ra-copy .ra-title {
font: 700 15px/1.3 var(--body); color: var(--plum-ink); margin-top: 4px;
}
.read-aloud .ra-copy .ra-title small {
font: 400 12px/1 var(--body); color: var(--muted); font-weight: 400;
display: block; margin-top: 2px;
}
.read-aloud .ra-time,
.read-aloud .ra-speed,
.read-aloud .ra-voice {
font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
color: var(--muted); padding: 6px 10px; border: 1px solid var(--line);
background: var(--cream); border-radius: 2px;
}
.read-aloud .ra-progress {
grid-column: 1 / -1; height: 2px; background: var(--line);
margin-top: 6px; overflow: hidden; border-radius: 2px;
}
.read-aloud .ra-progress-fill {
height: 100%; width: 0%; background: var(--magenta);
}
.read-aloud .ra-machine-note {
grid-column: 1 / -1;
font: 400 11px/1.4 var(--body); color: var(--muted); margin-top: 4px;
}
/* --- cmp-stat (pull-stat figure) --- */
.cmp-stat {
display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center;
padding: 32px 28px; margin: 40px 0;
background: var(--paper); border: 1px solid var(--line-strong); border-radius: 4px;
}
.cmp-stat .stat-num {
font: 800 84px/1 var(--display); letter-spacing: -0.03em; color: var(--magenta);
font-feature-settings: "tnum","lnum";
}
.cmp-stat .stat-copy .stat-label {
font: 500 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
color: var(--muted);
}
.cmp-stat .stat-copy .stat-h {
font: 700 20px/1.25 var(--display); letter-spacing: -0.01em; color: var(--plum-ink);
margin-top: 6px;
}
.cmp-stat .stat-copy .stat-b {
font: 400 14px/1.55 var(--body); color: var(--plum-ink); margin-top: 6px;
}
@media (max-width: 560px) {
.cmp-stat { grid-template-columns: 1fr; gap: 8px; padding: 24px 20px; }
.cmp-stat .stat-num { font-size: 56px; }
}
/* --- cmp-quote (big block quote) --- */
.cmp-quote {
font: 500 24px/1.4 var(--display); color: var(--plum-ink);
border-left: 3px solid var(--magenta); padding: 8px 0 8px 24px;
margin: 40px 0;
letter-spacing: -0.01em;
}
.cmp-quote em { color: var(--magenta); font-style: normal; }
/* --- cmp-steps (numbered step list) --- */
.cmp-steps {
list-style: none; padding: 0; margin: 32px 0;
display: grid; gap: 20px;
}
.cmp-step {
display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start;
padding: 20px; background: var(--white);
border: 1px solid var(--line); border-radius: 4px;
}
.cmp-step .step-num {
width: 44px; height: 44px; border-radius: 50%;
background: var(--plum-ink); color: var(--gold-warm);
display: inline-flex; align-items: center; justify-content: center;
font: 700 16px/1 var(--display);
}
.cmp-step .step-body .step-h {
font: 700 18px/1.3 var(--display); color: var(--plum-ink); letter-spacing: -0.01em;
}
.cmp-step .step-body .step-b {
font: 400 15px/1.55 var(--body); color: var(--plum-ink); margin-top: 6px;
}
/* --- cmp-callout (tip / key) --- */
.cmp-callout {
display: grid; grid-template-columns: 32px 1fr; gap: 16px;
padding: 20px 22px; margin: 32px 0; border-radius: 4px;
}
.cmp-callout.tip { background: var(--paper); border: 1px solid var(--line-strong); }
.cmp-callout.key { background: var(--magenta-soft); border: 1px solid var(--magenta); }
.cmp-callout .co-icon {
font-size: 20px; line-height: 1; padding-top: 2px;
}
.cmp-callout .co-copy .co-h {
font: 700 14px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--plum-ink);
}
.cmp-callout.key .co-copy .co-h { color: var(--magenta); }
.cmp-callout .co-copy .co-b {
font: 400 15px/1.55 var(--body); color: var(--plum-ink); margin-top: 6px;
}
/* --- cmp-baf (before/after comparison) --- */
.cmp-baf {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 40px 0;
}
.cmp-baf .baf-side { display: grid; gap: 0; }
.cmp-baf .baf-eyebrow {
font: 500 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
padding: 8px 12px;
}
.cmp-baf .baf-eyebrow.before { background: var(--line); color: var(--muted); }
.cmp-baf .baf-eyebrow.after { background: var(--magenta); color: var(--cream); }
.cmp-baf .baf-panel {
padding: 20px; border: 1px solid var(--line-strong);
font: 400 15px/1.55 var(--body); color: var(--plum-ink);
min-height: 120px;
}
.cmp-baf .baf-panel.before { background: var(--white); color: var(--muted); }
.cmp-baf .baf-panel.after { background: var(--paper); }
.cmp-baf .baf-cap {
font: 500 10px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
padding: 8px 12px; color: var(--muted); background: var(--cream);
border: 1px solid var(--line); border-top: none;
}
@media (max-width: 720px) { .cmp-baf { grid-template-columns: 1fr; } }
/* --- cmp-listicle (numbered list w/ meta) --- */
.cmp-listicle {
list-style: none; padding: 0; margin: 32px 0; display: grid; gap: 24px;
}
.cmp-listicle-item {
display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start;
}
.cmp-listicle-item .li-num {
font: 800 40px/1 var(--display); letter-spacing: -0.02em; color: var(--magenta);
}
.cmp-listicle-item .li-body .li-meta {
font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted);
}
.cmp-listicle-item .li-body .li-h {
font: 700 20px/1.25 var(--display); color: var(--plum-ink); margin-top: 4px;
}
.cmp-listicle-item .li-body .li-b {
font: 400 15px/1.55 var(--body); color: var(--plum-ink); margin-top: 6px;
}
/* --- cmp-part-break --- */
.cmp-part-break {
text-align: center; padding: 48px 0; margin: 48px 0;
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cmp-part-break .pb-eyebrow {
font: 500 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
color: var(--magenta);
}
.cmp-part-break .pb-h {
font: 700 32px/1.18 var(--display); color: var(--plum-ink); letter-spacing: -0.015em;
margin-top: 12px;
}
.cmp-part-break .pb-h em { color: var(--magenta); font-style: normal; }
/* --- cmp-author (insert callout for author) --- */
.cmp-author {
display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start;
padding: 24px; margin: 40px 0;
background: var(--white); border: 1px solid var(--line-strong); border-radius: 4px;
}
.cmp-author .au-avatar {
width: 56px; height: 56px; border-radius: 50%;
background: var(--gold-warm); color: var(--plum-ink);
display: inline-flex; align-items: center; justify-content: center;
font: 700 16px/1 var(--display);
}
.cmp-author .au-copy .au-name {
font: 700 15px/1.2 var(--body); color: var(--plum-ink);
}
.cmp-author .au-copy .au-role {
font: 400 12px/1.4 var(--body); color: var(--muted); margin-top: 2px;
}
.cmp-author .au-copy .au-quote {
font: 500 16px/1.5 var(--display); color: var(--plum-ink);
letter-spacing: -0.005em; margin-top: 12px;
}
/* --- cmp-cta-body (in-body CTA card) --- */
.cmp-cta-body {
padding: 32px 28px; margin: 40px 0; border-radius: 4px;
background: linear-gradient(135deg, var(--paper) 0%, var(--gold-soft) 100%);
border: 1px solid var(--line-strong);
display: flex; flex-direction: column; gap: 16px;
}
.cmp-cta-body .body-cta-copy .body-cta-h {
font: 700 24px/1.2 var(--display); letter-spacing: -0.015em; color: var(--plum-ink);
}
.cmp-cta-body .body-cta-copy .body-cta-h em { color: var(--magenta); font-style: normal; }
.cmp-cta-body .body-cta-copy .body-cta-b {
font: 400 15px/1.55 var(--body); color: var(--plum-ink); margin-top: 8px;
}
.cmp-cta-body .btn { align-self: flex-start; }
/* --- footnotes --- */
.cmp-fn-ref {
font-size: 0.75em; color: var(--magenta); vertical-align: super;
padding: 0 2px; font-weight: 700;
}
.cmp-fn-block {
margin: 48px 0 0 0; padding-top: 24px; border-top: 1px solid var(--line);
}
.cmp-fn-block .fn-h {
font: 500 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
color: var(--muted); margin-bottom: 12px;
}
.cmp-fn-block .fn {
display: grid; grid-template-columns: 32px 1fr; gap: 8px;
padding: 8px 0; font: 400 13px/1.5 var(--body); color: var(--plum-ink);
}
.cmp-fn-block .fn-num {
font: 700 12px/1 var(--mono); color: var(--magenta);
}
.cmp-fn-block .fn-body a { color: var(--magenta); text-decoration: underline; }
/* --- art-rail (sticky right) --- */
.art-rail {
position: sticky; top: 24px; align-self: start;
display: grid; gap: 16px;
}
.art-rail .rail-card {
padding: 20px 22px; border: 1px solid var(--line-strong); border-radius: 4px;
background: var(--white);
}
.art-rail .rail-card.dark {
background: var(--plum-ink); color: var(--cream); border-color: var(--plum-ink);
}
.art-rail .rail-card.ask {
background: var(--paper);
}
.art-rail .rail-eyebrow {
font: 500 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
color: var(--muted);
}
.art-rail .rail-eyebrow-gold {
font: 500 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
color: var(--gold-warm);
}
.art-rail .rail-card-title {
font: 700 20px/1.2 var(--display); letter-spacing: -0.01em; margin-top: 8px;
}
.art-rail .rail-card.dark .rail-card-title { color: var(--cream); }
.art-rail .rail-card-title-sm {
font: 700 14px/1.3 var(--display); letter-spacing: -0.005em; margin-top: 6px;
color: var(--plum-ink);
}
.art-rail .rail-card-body {
font: 400 13px/1.5 var(--body); color: var(--cream); margin-top: 8px; opacity: 0.85;
}
.art-rail .rail-card .btn { margin-top: 14px; width: 100%; text-align: center; }
.art-rail .btn.gold {
background: var(--gold); color: var(--cream); border: none; /* a11y-safe: cream on a11y gold #8A6800 = 4.71:1 */
}
.art-rail .btn.gold:hover { background: #6E5300; }
.art-rail .rail-related {
display: grid; gap: 8px; margin-top: 10px; padding-left: 0;
}
.art-rail .rail-related li {
font: 400 13px/1.4 var(--body); color: var(--plum-ink);
padding: 8px 0; border-bottom: 1px solid var(--line);
}
.art-rail .rail-related li:last-child { border-bottom: none; }
.art-rail .rail-related a { text-decoration: none; color: inherit; }
.art-rail .rail-related a:hover { color: var(--magenta); }
/* --- btn variants for article --- */
.btn.sm {
padding: 8px 12px; font: 500 11px/1 var(--mono); letter-spacing: 0.12em;
}
/* ============================================================
v7.19 · Reader chrome + component library additions
Reader = shares .art-header / .art-body / .art-toc / .art-main / .art-rail
with blog-article; only chips + actions + gold-paper card differ.
============================================================ */
/* --- Reader header · chips + actions --- */
.rr-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.rr-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 999px;
font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
border: 1px solid var(--line-strong); background: var(--paper); color: var(--plum-ink);
}
.rr-chip.playbook { background: var(--magenta-soft); border-color: var(--magenta); color: var(--magenta); }
.rr-chip.time { background: var(--white); color: var(--muted); }
.rr-actions {
display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line);
}
.rr-actions .btn.gold.lg { background: var(--gold); color: var(--cream); border: none; } /* a11y-safe: cream on a11y gold */
.rr-actions .btn.gold.lg:hover { background: #6E5300; }
.rr-actions .btn.secondary {
background: transparent; color: var(--plum-ink);
border: 1px solid var(--line-strong); padding: 10px 14px;
font: 500 13px/1 var(--body); border-radius: 6px; text-decoration: none;
}
.rr-actions .btn.secondary:hover { background: var(--paper); border-color: var(--plum-ink); }
.rr-actions .pdf-meta {
margin-left: auto; font: 400 12px/1 var(--mono); letter-spacing: 0.06em;
color: var(--muted);
}
/* --- Gold-paper rail card (Table of components) --- */
.art-rail .rail-card.gold-paper {
background: var(--paper); border: 1px solid var(--line-strong); color: var(--plum-ink);
}
.art-rail .rail-card.gold-paper .rail-eyebrow { color: var(--magenta); }
.art-rail .rail-card.gold-paper .rail-related li { color: var(--plum-ink); border-bottom-color: rgba(53,20,55,0.14); }
.art-rail .rail-card.gold-paper .rail-related a { color: var(--plum-ink); }
.art-rail .rail-card.gold-paper .rail-related a:hover { color: var(--magenta); }
/* --- Dark rail card · ghost button on dark --- */
.art-rail .rail-card.dark .btn.ghost { color: var(--cream); border: 1px solid rgba(250,244,227,0.3); background: transparent; }
.art-rail .rail-card.dark .btn.ghost:hover { background: rgba(250,244,227,0.08); border-color: var(--cream); }
.art-rail .btn.block { display: block; width: 100%; text-align: center; }
.mt-8 { margin-top: 8px; }
/* --- Preview steps · used in resource-download preview tile --- */
.preview-steps {
list-style: decimal; margin: 0 0 0 22px; padding: 0;
font: 400 15px/1.6 var(--body); color: var(--plum-ink);
}
.preview-steps li { margin-top: 8px; padding-left: 6px; }
.preview-steps li::marker { color: var(--gold-warm); font: 700 15px/1 var(--display); }
/* --- Additional reader components used in resource-reader.html --- */
/* Preamble label (used above chapter opener) */
.cmp-label {
font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--magenta); margin: 8px 0 24px 0; padding-bottom: 12px;
border-bottom: 1px solid var(--line);
}
/* Attributed quote (with cite) */
.cmp-quote-attributed { display: grid; gap: 8px; }
.cmp-quote-attributed p { margin: 0; }
.cmp-quote-attributed cite {
font: 500 12px/1.4 var(--mono); letter-spacing: 0.06em;
color: var(--muted); font-style: normal; padding-left: 18px;
}
/* Standard figure (16:9 tile + caption) */
.cmp-fig { margin: 32px 0; }
.cmp-fig .fig-16x9 {
aspect-ratio: 16/9; background: var(--paper); border: 1px solid var(--line-strong);
display: flex; align-items: center; justify-content: center;
color: var(--muted); font: 500 12px/1 var(--mono); letter-spacing: 0.12em;
text-transform: uppercase; text-align: center; padding: 20px;
}
.cmp-fig figcaption {
margin-top: 12px; font: 400 13px/1.5 var(--body); color: var(--muted);
}
.cmp-fig-dark .fig-16x9 {
background: var(--plum-ink); color: var(--cream); border-color: var(--plum-ink);
}
/* Checklist (unordered, custom check marker) */
.cmp-checklist { list-style: none; padding-left: 0; margin: 16px 0; display: grid; gap: 10px; }
.cmp-checklist li {
display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start;
font: 400 15px/1.55 var(--body); color: var(--plum-ink);
}
.cmp-checklist li::before {
content: "✓"; color: var(--magenta); font-weight: 700; font-size: 16px; line-height: 1.4;
}
/* Callout variants beyond tip/key */
.cmp-callout.warn { background: #FFF5EA; border: 1px solid #EBAF7D; }
.cmp-callout.warn .co-copy .co-h { color: #A65515; }
.cmp-callout.note { background: var(--white); border: 1px solid var(--line-strong); }
.cmp-callout.note .co-copy .co-h { color: var(--plum-ink); }
/* Aside (sidebar-in-body) */
.cmp-aside {
margin: 24px 0; padding: 20px 24px;
background: var(--white); border-left: 4px solid var(--gold-warm);
border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cmp-aside .aside-eyebrow {
font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--gold-warm); margin-bottom: 8px;
}
.cmp-aside p { margin: 0; font: 400 15px/1.6 var(--body); color: var(--plum-ink); }
/* Code snippet block */
.cmp-code {
background: var(--plum-ink); color: var(--cream);
padding: 16px 20px; border-radius: 6px; margin: 20px 0 8px 0;
font: 400 13px/1.55 var(--mono);
overflow-x: auto; white-space: pre; -webkit-overflow-scrolling: touch;
}
.cmp-code code { font: inherit; color: inherit; background: transparent; padding: 0; }
.cmp-code-cap {
font: 400 12px/1.5 var(--body); color: var(--muted); margin: 0 0 24px 0;
padding-left: 4px; border-left: 2px solid var(--line); padding-left: 12px;
}
/* Data table */
.cmp-table {
width: 100%; border-collapse: collapse; margin: 20px 0; font-family: var(--body);
}
.cmp-table th, .cmp-table td {
padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line);
font: 400 14px/1.4 var(--body); color: var(--plum-ink); vertical-align: top;
}
.cmp-table thead th {
font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
color: var(--muted); border-bottom: 2px solid var(--plum-ink); padding-bottom: 10px;
}
.cmp-table tbody tr:hover { background: var(--paper); }
/* Widen the article body for the reader page and blog page (v7.19).
Two constraints choked the middle column: the art-body grid capped at
maxw 1408 with 96px gutters (leaving ~832px article track), AND
.art-main article capped at 68ch (~610px). Widen the grid, reduce
gutter padding, and raise the reading-measure cap so long-form text
flows through the full column width instead of hugging the left edge. */
.art-body {
padding: 0 40px !important;
max-width: 1520px !important;
grid-template-columns: 220px 1fr 300px !important;
gap: 56px !important;
}
.art-main article { max-width: none !important; }
.art-main p, .art-main ul, .art-main ol, .art-main blockquote { max-width: 78ch; }
@media (max-width: 1200px) {
.art-body { grid-template-columns: 180px 1fr 260px !important; gap: 40px !important; padding: 0 32px !important; }
}
@media (max-width: 900px) {
.art-body { padding: 0 24px !important; grid-template-columns: 1fr !important; }
.art-main p, .art-main ul, .art-main ol, .art-main blockquote { max-width: none; }
}
/* Also widen the header container on article pages so the masthead matches. */
.art-header .container.narrow { max-width: 960px; }
/* Reader header is a lighter variant of art-header */
.art-header.rr-header { background: var(--cream); }
/* =============================================================================
v7.20 · Approved rebuild
- Blog article & resource-reader: v7.9/v7.14 full-bleed hero
- Resource index: clean v7.12 covers, featured playbook mega-card (no texture)
- About: v7 letter p47 (timeline + principles + CTA)
- FAQ: v7 letter p49 (categories sidebar + click-to-filter)
========================================================================== */
/* ----- Preview 01 · Blog article — full-bleed dark plum hero ------------- */
.v720-blog-hero {
background: linear-gradient(180deg, #2B1029 0%, var(--plum-ink) 100%);
color: var(--cream-on-dark);
padding: 56px 64px 48px;
position: relative;
overflow: hidden;
}
.v720-blog-hero::before {
content: ''; position: absolute; inset: -40% -20% auto auto;
width: 720px; height: 720px;
background: radial-gradient(circle at 30% 30%, rgba(240,180,41,0.10), transparent 60%);
pointer-events: none;
}
.v720-blog-crumbs {
font: 500 11px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(245,235,212,0.55); margin-bottom: 22px;
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.v720-blog-crumbs a { color: rgba(245,235,212,0.55); text-decoration: none; }
.v720-blog-crumbs .sep { color: rgba(245,235,212,0.3); }
.v720-blog-crumbs .current { color: var(--cream-on-dark); }
.v720-blog-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: end; }
.v720-blog-cat-row { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.v720-blog-chip {
display: inline-block; padding: 5px 12px; border-radius: 999px;
border: 1px solid var(--gold-warm); color: var(--gold-warm);
font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.v720-blog-series {
font: 500 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(245,235,212,0.55);
}
.v720-blog-h1 {
font: 900 60px/1.02 var(--display); letter-spacing: -0.03em; color: var(--cream-on-dark);
margin: 0 0 20px 0;
-webkit-text-stroke: 0.5px currentColor; text-rendering: geometricPrecision;
}
.v720-blog-h1 em { font-style: normal; color: var(--gold-warm); font-weight: 700; }
.v720-blog-lede {
font: 400 19px/1.5 var(--body); color: rgba(245,235,212,0.88); max-width: 620px; margin: 0;
}
.v720-blog-meta {
display: flex; gap: 24px; margin-top: 26px; align-items: center; flex-wrap: wrap;
font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(245,235,212,0.65);
}
.v720-blog-meta b { color: var(--gold-warm); font-weight: 700; }
.v720-blog-asset-slot {
background: rgba(245,235,212,0.05); border: 1px dashed rgba(245,235,212,0.22);
border-radius: 10px; aspect-ratio: 16/10;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 24px;
color: rgba(245,235,212,0.42);
font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.v720-blog-asset-slot .play { font-size: 34px; color: var(--gold-warm); margin-bottom: 12px; }
.v720-blog-asset-slot .note { font: 400 11px/1.4 var(--body); text-transform: none; letter-spacing: 0; margin-top: 12px; color: rgba(245,235,212,0.42); }
@media (max-width: 900px) {
.v720-blog-hero { padding: 40px 24px 32px; }
.v720-blog-grid { grid-template-columns: 1fr; gap: 32px; }
.v720-blog-h1 { font-size: 40px; }
.v720-blog-lede { font-size: 17px; }
}
/* Byline strip (cream, full-bleed under hero) */
.v720-byline-strip {
background: var(--cream);
padding: 22px 64px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--line);
gap: 20px; flex-wrap: wrap;
}
.v720-byline-left { display: flex; gap: 16px; align-items: center; }
.v720-byline-avatar {
width: 56px; height: 56px; border-radius: 50%;
background: linear-gradient(135deg, var(--gold-warm), var(--gold));
display: flex; align-items: center; justify-content: center;
font: 700 20px/1 var(--display); color: var(--plum-ink); flex-shrink: 0;
}
.v720-byline-name {
font: 600 16px/1.3 var(--display); color: var(--plum-ink);
border-bottom: 1.5px solid var(--gold-warm); padding-bottom: 1px; display: inline-block;
}
.v720-byline-role {
font: 500 11px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 4px;
}
.v720-byline-right { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.v720-ask-chip {
display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px;
background: linear-gradient(90deg, var(--plum-deep), var(--magenta)); color: var(--cream);
font: 500 13px/1 var(--body); text-decoration: none;
}
.v720-ask-chip .icon {
width: 18px; height: 18px; border-radius: 50%; background: var(--gold-warm); color: var(--plum-ink);
display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}
.v720-share-row { display: flex; gap: 6px; }
.v720-share-btn {
width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line-strong);
display: inline-flex; align-items: center; justify-content: center;
font: 500 12px/1 var(--mono); color: var(--plum-ink); text-decoration: none;
}
@media (max-width: 900px) {
.v720-byline-strip { padding: 18px 24px; }
}
/* Full-bleed override for article body sections when preceded by v720 hero */
.v720-full-body { padding: 40px 64px 60px; background: var(--cream); }
.v720-full-body .art-body {
max-width: 1520px; padding: 0; margin: 0 auto;
grid-template-columns: 220px minmax(0, 1fr) 320px; gap: 56px;
}
@media (max-width: 1200px) {
.v720-full-body .art-body { grid-template-columns: 180px 1fr 260px; gap: 40px; }
}
@media (max-width: 900px) {
.v720-full-body { padding: 32px 24px; }
.v720-full-body .art-body { grid-template-columns: 1fr; gap: 32px; }
}
/* ----- Preview 02 · Resource reader — color-matched full-bleed hero ------ */
.v720-res-hero {
color: var(--cream-on-dark);
padding: 56px 64px 48px;
position: relative;
overflow: hidden;
}
.v720-res-hero.plum { background: linear-gradient(180deg, #4A1740 0%, var(--plum-ink) 100%); }
.v720-res-hero.gold { background: linear-gradient(180deg, #C99700 0%, #A57900 100%); color: var(--plum-ink); }
.v720-res-hero.magenta { background: linear-gradient(180deg, var(--magenta) 0%, var(--plum-deep) 100%); }
.v720-res-hero.cream { background: linear-gradient(180deg, var(--paper) 0%, #E4CE93 100%); color: var(--plum-ink); }
.v720-res-crumbs {
font: 500 11px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(245,235,212,0.55); margin-bottom: 20px;
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.v720-res-crumbs a { color: rgba(245,235,212,0.55); text-decoration: none; }
.v720-res-crumbs .sep { opacity: 0.55; }
.v720-res-crumbs .current { color: var(--cream-on-dark); }
.v720-res-cat-row { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.v720-res-chip {
display: inline-block; padding: 5px 12px; border-radius: 999px;
border: 1px solid var(--gold-warm); color: var(--gold-warm);
font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.v720-res-series {
font: 500 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(245,235,212,0.55);
}
.v720-res-h1 {
font: 900 60px/1.02 var(--display); letter-spacing: -0.03em; color: var(--cream-on-dark);
margin: 0 0 18px 0; max-width: 900px;
-webkit-text-stroke: 0.5px currentColor; text-rendering: geometricPrecision;
}
.v720-res-h1 em { font-style: normal; color: var(--gold-warm); font-weight: 700; }
.v720-res-lede {
font: 400 19px/1.5 var(--body); color: rgba(245,235,212,0.88); max-width: 700px; margin: 0;
}
.v720-res-meta {
display: flex; gap: 24px; margin-top: 22px; flex-wrap: wrap;
font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(245,235,212,0.7);
}
.v720-res-meta b { color: var(--gold-warm); font-weight: 700; }
.v720-res-actions-row { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.v720-res-actions-row .v720-btn-gold {
background: var(--gold-warm); color: var(--plum-ink); font-weight: 700; padding: 12px 22px; border-radius: 8px;
text-decoration: none; font-family: var(--body); font-size: 14px; display: inline-flex; align-items: center; gap: 8px;
}
.v720-res-actions-row .v720-btn-on-dark {
background: transparent; color: var(--cream); border: 1px solid rgba(245,235,212,0.35); padding: 12px 20px; border-radius: 8px;
text-decoration: none; font-family: var(--body); font-size: 14px; display: inline-flex; align-items: center; gap: 8px;
}
/* Gold variant — invert text & CTA colors for legibility */
.v720-res-hero.gold .v720-res-h1 { color: var(--plum-ink); }
.v720-res-hero.gold .v720-res-h1 em { color: #6E1C4B; }
.v720-res-hero.gold .v720-res-lede { color: rgba(53,20,55,0.82); }
.v720-res-hero.gold .v720-res-crumbs,
.v720-res-hero.gold .v720-res-crumbs a { color: rgba(53,20,55,0.55); }
.v720-res-hero.gold .v720-res-crumbs .current { color: var(--plum-ink); }
.v720-res-hero.gold .v720-res-meta { color: rgba(53,20,55,0.7); }
.v720-res-hero.gold .v720-res-meta b { color: #6E1C4B; }
.v720-res-hero.gold .v720-res-chip { border-color: var(--plum-ink); color: var(--plum-ink); }
.v720-res-hero.gold .v720-res-series { color: rgba(53,20,55,0.55); }
.v720-res-hero.gold .v720-res-actions-row .v720-btn-gold { background: var(--plum-ink); color: var(--cream); }
.v720-res-hero.gold .v720-res-actions-row .v720-btn-on-dark { color: var(--plum-ink); border-color: rgba(53,20,55,0.4); }
/* Magenta variant — accents flip to gold-warm on the deep magenta bg */
.v720-res-hero.magenta .v720-res-h1 em { color: var(--gold-warm); }
/* Cream variant — invert text & CTA colors for legibility */
.v720-res-hero.cream .v720-res-h1 { color: var(--plum-ink); }
.v720-res-hero.cream .v720-res-h1 em { color: var(--magenta); }
.v720-res-hero.cream .v720-res-lede { color: rgba(53,20,55,0.82); }
.v720-res-hero.cream .v720-res-crumbs,
.v720-res-hero.cream .v720-res-crumbs a { color: rgba(53,20,55,0.55); }
.v720-res-hero.cream .v720-res-crumbs .current { color: var(--plum-ink); }
.v720-res-hero.cream .v720-res-meta { color: rgba(53,20,55,0.7); }
.v720-res-hero.cream .v720-res-meta b { color: var(--magenta); }
.v720-res-hero.cream .v720-res-chip { border-color: var(--plum-ink); color: var(--plum-ink); }
.v720-res-hero.cream .v720-res-series { color: rgba(53,20,55,0.55); }
.v720-res-hero.cream .v720-res-actions-row .v720-btn-gold { background: var(--plum-ink); color: var(--cream); }
.v720-res-hero.cream .v720-res-actions-row .v720-btn-on-dark { color: var(--plum-ink); border-color: rgba(53,20,55,0.4); }
@media (max-width: 900px) {
.v720-res-hero { padding: 40px 24px 32px; }
.v720-res-h1 { font-size: 40px; }
.v720-res-lede { font-size: 17px; }
}
/* Post-download strip (renders only on ?arrived=download) */
.v720-dl-strip[hidden] { display: none !important; }
.v720-dl-strip {
background: var(--paper); border-bottom: 1px solid rgba(53,20,55,0.14);
padding: 12px 64px; display: flex; align-items: center; justify-content: space-between;
font: 500 12px/1.4 var(--body); color: var(--plum-ink); gap: 16px; flex-wrap: wrap;
}
.v720-dl-strip .lft { display: flex; gap: 14px; align-items: center; }
.v720-dl-strip .ok {
width: 20px; height: 20px; border-radius: 50%; background: var(--plum-ink); color: var(--gold-warm);
display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.v720-dl-strip .fname { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
.v720-dl-strip .actions { display: flex; gap: 10px; }
.v720-dl-strip .actions a {
font: 500 12px/1 var(--body); color: var(--plum-ink); text-decoration: none;
padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 6px;
}
@media (max-width: 900px) { .v720-dl-strip { padding: 12px 24px; } }
/* ----- Preview 03 · Resource index — clean covers ----------------------- */
.v720-res-index-hero {
padding: 72px 64px 56px; background: var(--paper);
}
.v720-res-index-lib {
font: 500 11px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
margin-bottom: 12px;
}
.v720-res-index-h1 {
font: 900 72px/1.02 var(--display); letter-spacing: -0.03em; color: var(--plum-ink);
max-width: 900px; margin: 0;
-webkit-text-stroke: 0.55px currentColor; text-rendering: geometricPrecision;
}
.v720-res-index-h1 em { font-style: normal; color: var(--magenta); font-weight: 700; }
.v720-res-index-sub {
font: 400 17px/1.55 var(--body); color: var(--plum-ink); opacity: 0.75;
max-width: 620px; margin-top: 22px;
}
@media (max-width: 900px) {
.v720-res-index-hero { padding: 48px 24px 40px; }
.v720-res-index-h1 { font-size: 44px; }
}
.v720-res-filters {
padding: 22px 64px 30px; background: var(--cream);
display: flex; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--line);
}
.v720-filter-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 16px; border-radius: 999px;
background: transparent; border: 1px solid var(--line-strong); color: var(--plum-ink);
font: 500 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
cursor: pointer; text-decoration: none;
}
.v720-filter-chip.active { background: var(--plum-ink); color: var(--cream); border-color: var(--plum-ink); }
@media (max-width: 900px) { .v720-res-filters { padding: 18px 24px 22px; } }
/* Featured playbook mega-card */
.v720-res-featured-band { padding: 40px 64px; }
.v720-res-featured-band h2 { font: 700 22px/1.2 var(--display); color: var(--plum-ink); margin: 0 0 4px 0; }
.v720-res-featured-band .sublabel { font: 400 13px/1.5 var(--body); color: var(--muted); }
@media (max-width: 900px) { .v720-res-featured-band { padding: 32px 24px; } }
.v720-featured-playbook {
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
border-radius: 14px; overflow: hidden;
background: var(--paper);
margin-top: 12px;
}
.v720-featured-playbook .left {
padding: 40px 40px 32px; display: flex; flex-direction: column; justify-content: center;
}
.v720-featured-playbook .left .eyebrow-row { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.v720-fp-featured {
background: var(--gold-warm); color: var(--plum-ink); padding: 4px 10px; border-radius: 4px;
font: 700 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
}
.v720-featured-playbook .fp-title {
font: 700 48px/1.05 var(--display); letter-spacing: -0.025em; color: var(--plum-ink); margin: 0 0 16px 0;
}
.v720-featured-playbook .fp-desc {
font: 400 15px/1.5 var(--body); color: var(--plum-ink); opacity: 0.82; margin: 0 0 18px 0;
}
.v720-featured-playbook .fp-meta {
font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
margin-bottom: 20px;
}
.v720-featured-playbook .fp-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.v720-featured-playbook .fp-cta .btn.primary {
background: var(--magenta); color: var(--cream); border: none;
padding: 12px 22px; border-radius: 8px; font: 600 14px/1 var(--body); text-decoration: none;
display: inline-flex; align-items: center; gap: 8px;
}
.v720-featured-playbook .fp-cta .btn.primary:hover { background: var(--plum-deep); }
.v720-featured-playbook .right {
background: var(--plum-ink);
padding: 48px 56px; display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden;
}
.v720-fp-cover {
width: 100%; max-width: 340px; aspect-ratio: 3/4; border-radius: 6px;
background: linear-gradient(160deg, var(--magenta) 0%, var(--plum-deep) 100%);
padding: 26px 24px; display: flex; flex-direction: column; justify-content: space-between;
color: var(--cream); box-shadow: 0 22px 50px rgba(0,0,0,0.35), 0 6px 14px rgba(0,0,0,0.2);
}
.v720-fp-cover .masthead {
font: 500 10px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-warm);
}
.v720-fp-cover .format-line {
font: 500 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(250,244,227,0.7); margin-top: 6px;
}
.v720-fp-cover .bigtitle {
font: 700 34px/1.02 var(--display); letter-spacing: -0.02em; color: var(--cream);
margin-top: 14px;
}
.v720-fp-cover .accent { width: 48px; height: 3px; background: var(--gold-warm); margin-top: 12px; }
.v720-fp-cover .foot {
display: flex; justify-content: space-between; align-items: flex-end;
font: 500 10px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(250,244,227,0.7);
}
.v720-fp-cover .pp { font: 700 26px/0.9 var(--display); color: var(--gold-warm); }
@media (max-width: 900px) {
.v720-featured-playbook { grid-template-columns: 1fr; }
.v720-featured-playbook .left { padding: 32px 24px; }
.v720-featured-playbook .right { padding: 40px 24px; }
.v720-featured-playbook .fp-title { font-size: 34px; }
}
/* v7.12 clean cover (used in editor's picks + full library grid) */
.v720-cover-cell { display: block; text-decoration: none; }
.v720-cover {
aspect-ratio: 3/4; border-radius: 8px; padding: 20px; position: relative; overflow: hidden;
display: flex; flex-direction: column; justify-content: space-between;
color: var(--cream-on-dark);
}
.v720-cover.plum { background: var(--plum-ink); }
.v720-cover.gold { background: var(--gold); color: var(--plum-ink); }
.v720-cover.magenta { background: linear-gradient(160deg, var(--magenta), var(--plum-deep)); }
.v720-cover.cream { background: var(--cream); color: var(--plum-ink); border: 1px solid var(--line); }
.v720-cover .masthead {
font: 500 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7;
}
.v720-cover .format-line {
font: 500 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
margin-top: 6px; opacity: 0.75;
}
.v720-cover .title {
font: 700 22px/1.15 var(--display); letter-spacing: -0.015em;
margin-top: 8px; max-width: 90%;
}
.v720-cover .accent { width: 42px; height: 3px; background: var(--gold-warm); margin-top: 10px; }
.v720-cover.gold .accent { background: var(--plum-ink); }
.v720-cover.cream .accent { background: var(--magenta); }
.v720-cover .bottom-row {
display: flex; justify-content: space-between; align-items: flex-end;
font: 500 10px/1.2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
}
.v720-cover .series { max-width: 60%; opacity: 0.75; }
.v720-cover .pp {
font-size: 22px; font-weight: 700; font-family: var(--display); letter-spacing: -0.01em;
color: var(--gold-warm);
}
.v720-cover.gold .pp { color: var(--plum-ink); }
.v720-cover.cream .pp { color: var(--magenta); }
.v720-cover-meta {
margin-top: 12px;
font: 500 10px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.v720-cover-title-below { font: 600 16px/1.25 var(--display); color: var(--plum-ink); margin-top: 6px; }
.v720-cover-desc { font: 400 13px/1.5 var(--body); color: var(--muted); margin-top: 4px; }
.v720-cover-rail {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px;
}
@media (max-width: 1100px) { .v720-cover-rail { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .v720-cover-rail { grid-template-columns: 1fr; } }
.v720-full-lib { padding: 24px 64px 60px; }
.v720-full-lib h2 { font: 700 22px/1.2 var(--display); color: var(--plum-ink); margin: 0 0 20px 0; }
.v720-full-lib .meta-note {
font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted); font-weight: 500; margin-left: 10px;
}
.v720-lib-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.v720-lib-grid .v720-cover { aspect-ratio: 4/5; }
.v720-lib-grid .v720-cover .title { font-size: 20px; }
@media (max-width: 1100px) { .v720-lib-grid { grid-template-columns: repeat(2, 1fr); } .v720-full-lib { padding: 24px 24px 48px; } }
@media (max-width: 600px) { .v720-lib-grid { grid-template-columns: 1fr; } }
/* ----- Preview 04 · About — v7 letter p47 ------------------------------- */
.v720-about-hero { padding: 72px 64px 48px; background: var(--cream); }
.v720-about-eyebrow-row {
font: 500 12px/1 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold);
display: inline-flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.v720-about-eyebrow-row .num { font: 700 18px/1 var(--display); color: var(--gold); }
.v720-about-h1 {
font: 700 68px/1.02 var(--display); letter-spacing: -0.03em; color: var(--plum-ink);
max-width: 900px; margin: 0;
}
.v720-about-h1 em { font-style: normal; color: var(--magenta); }
.v720-about-lede {
font: 400 17px/1.55 var(--body); color: var(--plum-ink); opacity: 0.8;
max-width: 640px; margin: 22px 0 0 0;
}
@media (max-width: 900px) {
.v720-about-hero { padding: 48px 24px 32px; }
.v720-about-h1 { font-size: 44px; }
}
.v720-timeline-section { padding: 56px 64px; background: var(--cream); border-top: 1px solid var(--line); }
.v720-timeline-eyebrow-row {
font: 500 11px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
display: inline-flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.v720-timeline-eyebrow-row::before { content: ''; width: 30px; height: 1.5px; background: var(--gold); }
.v720-timeline-h2 {
font: 700 44px/1.05 var(--display); letter-spacing: -0.02em; color: var(--plum-ink);
max-width: 640px; margin: 0 0 6px 0;
}
.v720-timeline-h2 em { font-style: normal; color: var(--magenta); }
.v720-timeline-sub { font: 400 15px/1.55 var(--body); color: var(--muted); max-width: 640px; margin: 0 0 32px 0; }
.v720-timeline { position: relative; padding-left: 44px; }
.v720-timeline::before {
content: ''; position: absolute; top: 8px; bottom: 8px; left: 8px; width: 2px; background: var(--line-strong);
}
.v720-tl-row {
position: relative; padding-bottom: 30px; display: grid;
grid-template-columns: 100px 1fr; gap: 24px;
}
.v720-tl-row::before {
content: ''; position: absolute; left: -44px; top: 6px; width: 18px; height: 18px; border-radius: 50%;
background: var(--gold-warm); border: 3px solid var(--cream);
}
.v720-tl-year { font: 700 22px/1 var(--display); color: var(--magenta); }
.v720-tl-body .v720-tl-role { font: 600 16px/1.35 var(--display); color: var(--plum-ink); margin-bottom: 6px; }
.v720-tl-body .v720-tl-story { font: 400 14.5px/1.55 var(--body); color: var(--plum-ink); opacity: 0.82; max-width: 720px; }
@media (max-width: 900px) {
.v720-timeline-section { padding: 40px 24px; }
.v720-timeline-h2 { font-size: 32px; }
}
.v720-principles-section { padding: 56px 64px; background: var(--paper); }
.our-vision-section .v720-principles-sub { max-width: 720px; margin-bottom: 20px; }
.our-vision-cta { margin: 8px 0 0 0; }
.our-vision-cta .btn.ghost { padding: 10px 18px; }
.v720-principles-h2 {
font: 700 44px/1.05 var(--display); letter-spacing: -0.02em; color: var(--plum-ink); margin: 0 0 6px 0;
}
.v720-principles-h2 em { font-style: normal; color: var(--magenta); }
.v720-principles-sub { font: 400 15px/1.55 var(--body); color: var(--muted); max-width: 640px; margin: 0 0 32px 0; }
.v720-principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.v720-principle-card {
padding: 24px 24px 26px; background: var(--cream); border-radius: 10px;
border-top: 3px solid var(--gold-warm);
}
.v720-principle-eyebrow {
font: 500 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--magenta);
margin-bottom: 12px;
}
.v720-principle-title {
font: 700 20px/1.25 var(--display); color: var(--plum-ink); margin-bottom: 10px;
}
.v720-principle-body {
font: 400 14px/1.55 var(--body); color: var(--plum-ink); opacity: 0.82;
}
@media (max-width: 900px) {
.v720-principles-section { padding: 40px 24px; }
.v720-principles-grid { grid-template-columns: 1fr; }
.v720-principles-h2 { font-size: 32px; }
}
.v720-about-cta {
padding: 48px 64px; background: var(--plum-ink); color: var(--cream);
display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.v720-about-cta .l { max-width: 700px; }
.v720-about-cta .eyebrow-row {
font: 500 11px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-warm);
margin-bottom: 10px;
}
.v720-about-cta h3 { font: 700 28px/1.15 var(--display); color: var(--cream); letter-spacing: -0.015em; margin: 0; }
.v720-about-cta .r { display: flex; gap: 12px; flex-wrap: wrap; }
.v720-about-cta .btn.gold,
.v720-about-cta .btn.primary {
background: var(--gold); color: var(--cream); padding: 12px 22px; border-radius: 8px; /* a11y-safe: cream on a11y gold */
font: 600 14px/1 var(--body); text-decoration: none; border: none;
display: inline-flex; align-items: center; gap: 8px;
}
.v720-about-cta .btn.gold:hover { background: #6E5300; }
.v720-about-cta .btn.primary { background: var(--magenta); color: var(--cream); }
.v720-about-cta .btn.primary:hover { background: var(--plum-deep); }
.v720-about-cta .btn.ghost {
background: transparent; color: var(--cream); border: 1px solid rgba(250,244,227,0.4); padding: 12px 20px; border-radius: 8px;
font: 500 14px/1 var(--body); text-decoration: none;
display: inline-flex; align-items: center; gap: 8px;
}
@media (max-width: 900px) { .v720-about-cta { padding: 32px 24px; } .v720-about-cta h3 { font-size: 22px; } }
/* ----- Preview 05 · FAQ — v7 letter p49 --------------------------------- */
.v720-faq-hero { padding: 72px 64px 40px; background: var(--cream); }
.v720-faq-eyebrow-row {
font: 500 11px/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
display: inline-flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.v720-faq-eyebrow-row::before { content: ''; width: 30px; height: 1.5px; background: var(--gold); }
.v720-faq-h1 {
font: 700 68px/1.02 var(--display); letter-spacing: -0.03em; color: var(--plum-ink);
max-width: 900px; margin: 0;
}
.v720-faq-h1 em { font-style: normal; color: var(--magenta); }
.v720-faq-lede { font: 400 15px/1.55 var(--body); color: var(--muted); max-width: 560px; margin: 18px 0 0 0; }
.v720-faq-cta-row { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.v720-faq-cta-row .btn { padding: 10px 18px; }
@media (max-width: 900px) {
.v720-faq-hero { padding: 48px 24px 32px; }
.v720-faq-h1 { font-size: 44px; }
}
.v720-faq-layout { padding: 40px 64px 60px; display: grid; grid-template-columns: 260px 1fr; gap: 40px; }
.v720-faq-sidebar { position: sticky; top: 24px; align-self: start; }
.v720-faq-sidebar .sb-label {
font: 500 11px/1 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
margin-bottom: 14px;
}
.v720-cat-list { list-style: none; display: flex; flex-direction: column; gap: 2px; margin: 0 0 24px 0; padding: 0; }
.v720-cat-list li {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 12px; border-radius: 6px; cursor: pointer;
font: 500 14px/1.3 var(--body); color: var(--plum-ink);
transition: background 140ms var(--ease), color 140ms var(--ease);
}
.v720-cat-list li:hover { background: rgba(53,20,55,0.04); }
.v720-cat-list li.active { background: var(--plum-ink); color: var(--cream); }
.v720-cat-list li.active .count { color: var(--gold-warm); }
.v720-cat-list .count { font: 500 11px/1 var(--mono); letter-spacing: 0.06em; color: var(--muted); }
.v720-faq-ask-card { background: var(--paper); border-radius: 10px; padding: 20px; }
.v720-faq-ask-card .l {
font: 500 11px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--magenta); margin-bottom: 8px;
}
.v720-faq-ask-card .t { font: 600 15px/1.35 var(--display); color: var(--plum-ink); margin-bottom: 6px; }
.v720-faq-ask-card .d { font: 400 13px/1.5 var(--body); color: var(--plum-ink); opacity: 0.8; margin-bottom: 12px; }
.v720-faq-ask-card a {
font: 500 12px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--magenta); text-decoration: none;
}
.v720-faq-main .cat-heading {
font: 500 11px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--magenta);
margin-bottom: 20px;
}
.v720-faq-item {
border-bottom: 1px solid var(--line);
padding: 18px 0;
}
.v720-faq-item .row {
display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start;
cursor: pointer;
}
.v720-faq-item .q {
font: 600 17px/1.35 var(--display); color: var(--plum-ink);
}
.v720-faq-item .num {
font: 500 11px/1 var(--mono); letter-spacing: 0.14em; color: var(--muted);
padding-top: 4px;
}
.v720-faq-item .a {
font: 400 15px/1.6 var(--body); color: var(--plum-ink); opacity: 0.82; margin-top: 10px;
max-width: 780px; display: none;
}
.v720-faq-item.open .a { display: block; }
.v720-faq-item .related {
font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
margin-top: 14px; display: none;
}
.v720-faq-item.open .related { display: block; }
.v720-faq-item .related a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; margin-right: 12px; }
.v720-faq-group[hidden] { display: none; }
@media (max-width: 900px) {
.v720-faq-layout { grid-template-columns: 1fr; padding: 32px 24px 48px; }
.v720-faq-sidebar { position: static; }
}
/* ---------------------------------------------------------------
FIG-19C · FAQ ask module · variant B
Magenta-soft wash + plum-ink tile. Applied on FAQ page.
--------------------------------------------------------------- */
.ask-variant-b { background: var(--magenta-soft); }
.ask-variant-b .sect-tag { color: var(--plum-deep); }
.ask-variant-b .sect-tag::before { background: var(--plum-deep); }
.ask-variant-b .h1 { color: var(--plum-ink); }
.ask-variant-b .h1 em { color: var(--magenta); }
.ask-variant-b .lede { color: var(--plum-ink); }
.ask-variant-b .micro a { color: var(--plum-deep); text-decoration: underline; text-underline-offset: 3px; }
.ask-variant-b .tile.dark {
background: var(--plum-ink);
border-color: var(--plum-ink);
color: var(--cream);
}
.ask-variant-b .tile.dark .label { color: rgba(245, 235, 212, 0.7); }
.ask-variant-b .tile.dark .fld-label {
display: block;
font: 500 11px/1 var(--mono);
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(245, 235, 212, 0.65);
margin: 12px 0 8px;
}
.ask-variant-b .tile.dark input {
background: rgba(255, 255, 255, 0.06);
color: var(--cream);
border: 1px solid rgba(245, 235, 212, 0.2);
border-radius: 4px;
padding: 14px 18px;
font: 400 15px/1.4 var(--body);
width: 100%;
outline: none;
}
.ask-variant-b .tile.dark input:focus {
border-color: var(--gold-warm);
background: rgba(255, 255, 255, 0.08);
}
.ask-variant-b .tile.dark input::placeholder { color: rgba(245, 235, 212, 0.42); }
.ask-variant-b .tile.dark .micro { color: rgba(245, 235, 212, 0.55); margin-top: 10px; }
.ask-variant-b .tile.dark .chip {
background: transparent;
color: var(--cream);
border: 1px solid rgba(245, 235, 212, 0.28);
}
.ask-variant-b .tile.dark .chip:hover {
border-color: var(--gold-warm);
color: var(--gold-warm);
cursor: pointer;
}
/* Smooth-scroll for CTA jump (fallback: instant jump) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* ---------------------------------------------------------------
FIG-22 · 404 hero · v7.21 big numeral
--------------------------------------------------------------- */
.hero-404 { position: relative; overflow: hidden; }
.hero-404::before {
content: '404';
position: absolute;
right: -20px;
top: -40px;
font: 800 380px/0.8 var(--display);
color: rgba(122, 31, 92, 0.06);
letter-spacing: -0.04em;
pointer-events: none;
z-index: 0;
}
.hero-404 > .container { position: relative; z-index: 1; }
.hero-404-num {
font: 800 128px/0.9 var(--display);
color: var(--magenta);
letter-spacing: -0.045em;
margin: 0 0 6px;
line-height: 1;
}
.hero-404-num .dot { color: var(--gold); }
.hero-404-kicker {
font: 500 11px/1 var(--mono);
letter-spacing: 0.22em;
color: var(--plum-deep);
text-transform: uppercase;
margin: 6px 0 24px;
}
@media (max-width: 720px) {
.hero-404::before { font-size: 240px; top: -20px; }
.hero-404-num { font-size: 88px; }
}
/* ---------------------------------------------------------------
v7.21 · Resource-reader + article-reader mobile fixes
Focus: 375px behavior — TOC collapses to horizontal chip strip,
stat + table + baf reflow cleanly.
--------------------------------------------------------------- */
@media (max-width: 900px) {
/* Reader body — kill the 3-col grid entirely on mobile */
.v720-full-body { padding: 24px 20px 48px; }
.v720-full-body .art-body { grid-template-columns: 1fr; gap: 28px; padding: 0; }
/* Article main content — tighten to viewport */
.art-main article { max-width: 100%; }
.art-main h2 { font-size: 24px; line-height: 1.2; margin: 32px 0 12px; }
.art-main h3 { font-size: 18px; margin: 24px 0 10px; }
.art-main p, .art-main li { font-size: 15px; line-height: 1.6; }
/* TOC — horizontal scroll strip instead of tall stacked block.
Anchors are direct children of .art-toc; make it a scroll container with
inline-block chips using white-space: nowrap. */
.art-toc {
position: static;
display: block;
max-height: none;
overflow-y: visible;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
margin: 0 -20px;
padding: 0 20px 12px;
scrollbar-width: thin;
}
.art-toc .toc-title {
display: block;
margin-bottom: 8px;
white-space: normal;
}
.art-toc a {
display: inline-block;
padding: 8px 14px;
margin: 0 6px 0 0;
border: 1px solid var(--line-strong);
border-left: 1px solid var(--line-strong);
border-radius: 999px;
white-space: nowrap;
font-size: 12px;
line-height: 1;
vertical-align: top;
}
.art-toc a.active {
background: var(--plum-ink);
color: var(--cream);
border-color: var(--plum-ink);
border-left-color: var(--plum-ink);
}
/* Rail — stacks below main, cards full-width */
.art-rail { position: static; margin-top: 8px; }
.art-rail > * { margin-bottom: 20px; }
}
@media (max-width: 720px) {
/* Stat figures — force 1-col, drop numeral size */
.cmp-stat {
grid-template-columns: 1fr;
gap: 8px;
padding: 20px 18px;
text-align: left;
}
.cmp-stat .stat-num { font-size: 48px; line-height: 1; }
.cmp-stat .stat-copy .stat-h { font-size: 16px; }
.cmp-stat .stat-copy .stat-b { font-size: 14px; }
/* Tables — horizontal scroll wrapper */
.art-main .cmp-table,
.art-main table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
margin: 20px 0;
border: 1px solid var(--line);
border-radius: 4px;
}
.art-main .cmp-table table,
.art-main table > * {
min-width: 520px;
}
.art-main .cmp-table th,
.art-main .cmp-table td,
.art-main table th,
.art-main table td {
white-space: nowrap;
padding: 10px 12px;
font-size: 13px;
}
/* Before/after — stack vertically, tighten padding */
.cmp-baf { grid-template-columns: 1fr; gap: 12px; }
.cmp-baf .baf-panel { padding: 16px 18px; font-size: 14px; }
/* Callouts — tighter padding */
.cmp-callout { padding: 14px 16px; font-size: 14px; }
.cmp-callout .co-icon { font-size: 20px; }
/* Full-bleed hero — trim vertical padding on mobile */
.v720-res-hero { padding: 40px 20px 32px; }
.v720-res-hero .v720-res-h1 { font-size: 32px; line-height: 1.1; }
.v720-res-hero .v720-res-lede { font-size: 15px; }
.v720-res-hero .v720-res-cta-row { flex-direction: column; gap: 10px; align-items: stretch; }
.v720-res-hero .v720-res-cta-row .btn { text-align: center; }
}
@media (max-width: 480px) {
.v720-full-body { padding: 20px 16px 40px; }
.art-toc { margin: 0 -16px; padding: 0 16px 8px; }
.cmp-stat .stat-num { font-size: 40px; }
.art-main h2 { font-size: 22px; }
.art-main h2 .sec-num { padding: 2px 6px; font-size: 12px; }
}
/* ---------------------------------------------------------------
Cookie consent (V1 corner card + preferences modal)
Cookies-only storage. Injected by js/cookie-consent.js.
--------------------------------------------------------------- */
.cb-corner {
position: fixed; left: 24px; bottom: 24px; z-index: 200;
width: 380px; max-width: calc(100vw - 48px);
background: var(--cream); color: var(--ink);
border: 1px solid var(--line-strong); border-radius: 8px;
box-shadow: 0 20px 48px rgba(53,20,55,0.16), 0 4px 12px rgba(53,20,55,0.08);
padding: 24px;
animation: cb-in 220ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes cb-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.cb-corner .cb-eyebrow,
.cb-modal .cb-eyebrow {
font: 500 10px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase;
color: var(--gold); margin: 0 0 12px;
}
.cb-corner .cb-title,
.cb-modal .cb-title {
font: 700 16px/1.3 var(--display); color: var(--plum-ink); margin: 0 0 8px;
letter-spacing: -0.005em;
}
.cb-corner .cb-body,
.cb-modal .cb-body {
font: 400 13px/1.55 var(--body); color: var(--muted); margin: 0 0 20px;
}
.cb-corner .cb-body a,
.cb-modal .cb-body a { color: var(--plum-ink); text-decoration: underline; }
.cb-corner .cb-actions { display: flex; flex-direction: column; gap: 8px; }
.cb-corner .cb-actions .cb-row { display: flex; gap: 8px; }
.cb-corner .cb-actions .cb-row .btn { flex: 1; }
.cb-corner .btn { font-size: 13px; padding: 11px 16px; }
/* Preferences modal */
.cb-modal-overlay {
position: fixed; inset: 0; z-index: 300;
background: rgba(18,16,20,0.56);
display: flex; align-items: center; justify-content: center;
padding: 24px;
animation: cb-scrim-in 180ms ease-out both;
}
.cb-modal-overlay[hidden] { display: none; }
@keyframes cb-scrim-in { from { opacity: 0; } to { opacity: 1; } }
.cb-modal {
width: min(480px, 100%); max-height: calc(100vh - 48px); overflow: auto;
background: var(--cream); color: var(--ink);
border: 1px solid var(--line-strong); border-radius: 8px;
box-shadow: 0 32px 64px rgba(53,20,55,0.32), 0 8px 20px rgba(53,20,55,0.16);
padding: 28px 28px 24px;
}
.cb-prefs { display: flex; flex-direction: column; gap: 16px; margin: 4px 0 24px; padding-top: 4px; border-top: 1px solid var(--line); }
.cb-pref {
display: flex; gap: 16px; align-items: flex-start;
padding-top: 16px; border-top: 1px solid var(--line);
}
.cb-pref:first-child { border-top: 0; padding-top: 20px; }
.cb-pref-text { flex: 1; }
.cb-pref-text h4 {
font: 700 14px/1.3 var(--display); color: var(--plum-ink); margin: 0 0 4px;
}
.cb-pref-text p {
font: 400 12.5px/1.5 var(--body); color: var(--muted); margin: 0 0 6px;
}
.cb-pref-flag {
display: inline-block;
font: 500 9px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
color: var(--gold); padding: 4px 0;
}
.cb-switch {
position: relative; flex: 0 0 auto;
width: 42px; height: 24px; margin-top: 2px;
cursor: pointer;
}
.cb-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.cb-slider {
position: absolute; inset: 0;
background: var(--line-strong); border-radius: 999px;
transition: background 160ms ease;
}
.cb-slider::before {
content: ''; position: absolute; top: 2px; left: 2px;
width: 20px; height: 20px; background: var(--cream);
border-radius: 999px;
box-shadow: 0 1px 3px rgba(53,20,55,0.24);
transition: transform 160ms ease;
}
.cb-switch input:checked ~ .cb-slider { background: var(--magenta); }
.cb-switch input:checked ~ .cb-slider::before { transform: translateX(18px); }
.cb-switch-locked .cb-slider { background: var(--plum-ink); }
.cb-switch input:disabled { cursor: not-allowed; }
.cb-modal-actions {
display: flex; gap: 12px; justify-content: flex-end;
padding-top: 4px; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 20px;
}
.cb-modal-actions .btn { padding: 10px 18px; font-size: 13px; }
/* Prevent scroll when modal open */
body[data-cb-modal-open="true"] { overflow: hidden; }
/* Mobile */
@media (max-width: 480px) {
.cb-corner {
left: 12px; right: 12px; bottom: 12px;
width: auto; max-width: none;
padding: 20px;
}
.cb-modal { padding: 24px 20px 20px; }
.cb-modal-actions { flex-direction: column-reverse; }
.cb-modal-actions .btn { width: 100%; justify-content: center; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.cb-corner, .cb-modal-overlay { animation: none; }
.cb-slider, .cb-slider::before { transition: none; }
}
/* ===== PRODUCT HERO — dark, product-forward (v7.22 FIG-15) ===== */
/* ────────────────────────────────────────────────────────────────
Product hero — dark, product-forward (adapted from reference #3)
Uses on-system tokens: --plum-ink dark band, 4px btn radius,
--magenta primary, --gold-warm KPI accents. NO nav changes.
─────────────────────────────────────────────────────────────── */
.product-hero-dark{
background:var(--plum-ink);
color:var(--cream-on-dark);
padding:72px 0 88px;
overflow:hidden;
position:relative;
}
.product-hero-dark::before{
content:"";
position:absolute;inset:0;
background:radial-gradient(900px 480px at 50% -12%,rgba(184,50,128,.14),transparent 62%);
pointer-events:none;
}
.product-hero-dark .container{position:relative;z-index:1}
.product-hero-dark .chapter-label{
color:var(--gold-warm);
border-color:var(--gold-warm);
}
.product-hero-dark .inner{
max-width:960px;margin:0 auto;
padding:16px 24px 12px;
text-align:center;
}
.product-hero-dark .eyebrow{
font:500 11px/1 var(--mono);
letter-spacing:.16em;text-transform:uppercase;
color:var(--gold-warm);
display:inline-flex;align-items:center;gap:8px;
margin:0;
}
.product-hero-dark .eyebrow::before{
content:"";width:7px;height:7px;border-radius:50%;
background:var(--gold-warm);
animation:phPulse 2.4s ease-in-out infinite;
}
@keyframes phPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.product-hero-dark h1.ph-headline{
font-family:var(--display);font-weight:800;
font-size:clamp(40px,6.2vw,72px);
line-height:1.02;letter-spacing:-.028em;
margin:20px auto 0;max-width:16ch;
color:var(--cream-on-dark);
}
.product-hero-dark h1.ph-headline .gld{color:var(--gold-warm)}
.product-hero-dark .ph-sub{
margin:20px auto 0;
color:rgba(245,235,212,.82);
max-width:60ch;
font-size:18px;line-height:1.55;
}
.product-hero-dark .ph-ctas{
display:flex;justify-content:center;gap:14px;
margin-top:30px;flex-wrap:wrap;
}
/* On-dark ghost + primary — 4px radius per site tokens */
.product-hero-dark .ph-ctas .btn.ghost{
color:var(--cream);border-color:rgba(245,235,212,.4);
}
.product-hero-dark .ph-ctas .btn.ghost:hover{
background:var(--cream);color:var(--plum-ink);
}
/* Wide product view — placeholder for the video that's landing soon */
.ph-wideview{
max-width:1100px;margin:44px auto 0;padding:0 4vw;
position:relative;
}
.ph-video-placeholder{
aspect-ratio:16/9;
width:100%;
border-radius:14px;
background:var(--magenta-soft, #FDE7F3);
border:1px solid rgba(184,50,128,.35);
box-shadow:0 40px 80px -40px rgba(0,0,0,.55),0 2px 0 rgba(184,50,128,.28) inset;
display:flex;align-items:center;justify-content:center;
color:var(--plum-deep, #7A1F5C);
overflow:hidden;
position:relative;
}
.ph-video-placeholder::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(600px 300px at 50% 100%, rgba(184,50,128,.16), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,.35), transparent 55%);
pointer-events:none;
}
.ph-vp-inner{
position:relative;z-index:1;
display:flex;flex-direction:column;align-items:center;gap:18px;
}
.ph-vp-play{
color:var(--plum-deep, #7A1F5C);
display:inline-flex;align-items:center;justify-content:center;
filter:drop-shadow(0 8px 24px rgba(122,31,92,.28));
}
.ph-vp-label{
margin:0;
font:500 13px/1 var(--mono, ui-monospace, SFMono-Regular, monospace);
letter-spacing:.14em;text-transform:uppercase;
color:var(--plum-deep, #7A1F5C);
}
@media (max-width:900px){
.ph-wideview{margin-top:32px;padding:0 20px}
.ph-video-placeholder{border-radius:10px}
.ph-vp-play svg{width:44px;height:44px}
.ph-vp-label{font-size:11px;letter-spacing:.12em}
}
@media (max-width:520px){
.ph-wideview{margin-top:24px;padding:0 16px}
.ph-vp-inner{gap:12px}
.ph-vp-play svg{width:36px;height:36px}
}
.ph-wideui{
background:var(--white);
border-radius:14px 14px 0 0;
box-shadow:0 -20px 80px -30px rgba(0,0,0,.55);
overflow:hidden;text-align:left;
border:1px solid rgba(53,20,55,.08);
border-bottom:none;
}
.ph-wtop{
display:flex;align-items:center;justify-content:space-between;
padding:14px 20px;
border-bottom:1px solid rgba(53,20,55,.08);
}
.ph-brand{
font-family:var(--mono);font-size:11px;
letter-spacing:.1em;text-transform:uppercase;
color:var(--plum-ink);font-weight:700;
display:flex;align-items:center;gap:8px;
}
.ph-brand .d{width:9px;height:9px;border-radius:50%;background:var(--magenta)}
.ph-wtime{
font-family:var(--mono);font-size:10.5px;
color:rgba(53,20,55,.5);letter-spacing:.06em;
}
.ph-cols{
display:grid;grid-template-columns:1fr 1fr 1fr;
gap:1px;background:rgba(53,20,55,.08);
}
.ph-wcol{background:var(--white);padding:20px}
.ph-wcol .cl{
font-family:var(--mono);font-size:9.5px;
letter-spacing:.1em;text-transform:uppercase;
color:rgba(53,20,55,.5);margin-bottom:12px;
}
.ph-wcol .kpi{
font-family:var(--body);font-weight:900;
font-size:30px;color:var(--plum-ink);line-height:1;
font-variant-numeric:tabular-nums lining-nums;
}
.ph-wcol .kpi.g{color:var(--gold)}
.ph-wcol .sm{
font-size:11.5px;color:rgba(53,20,55,.55);margin-top:6px;
}
.ph-bars{display:flex;align-items:flex-end;gap:6px;height:60px;margin-top:14px}
.ph-bars i{
flex:1;background:var(--magenta-soft);
border-radius:3px 3px 0 0;height:0;
transition:height .7s cubic-bezier(.2,.7,.2,1);
}
.product-hero-dark.play .ph-bars i{height:var(--h)}
.product-hero-dark.play .ph-bars i:nth-child(1){transition-delay:.5s}
.product-hero-dark.play .ph-bars i:nth-child(2){transition-delay:.56s}
.product-hero-dark.play .ph-bars i:nth-child(3){transition-delay:.62s}
.product-hero-dark.play .ph-bars i:nth-child(4){transition-delay:.68s}
.product-hero-dark.play .ph-bars i:nth-child(5){transition-delay:.74s}
.product-hero-dark.play .ph-bars i:nth-child(6){transition-delay:.80s}
.ph-bars i.hot{background:var(--magenta)}
.ph-bars i.g{background:var(--gold)}
/* reveal utility scoped to product hero */
.product-hero-dark .rv{opacity:0;transform:translateY(18px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.product-hero-dark.play .rv{opacity:1;transform:none}
.product-hero-dark.play .rv1{transition-delay:.05s}
.product-hero-dark.play .rv2{transition-delay:.16s}
.product-hero-dark.play .rv3{transition-delay:.28s}
.product-hero-dark.play .rv4{transition-delay:.40s}
.product-hero-dark.play .rv5{transition-delay:.52s}
@media (max-width:880px){
.ph-cols{grid-template-columns:1fr}
.product-hero-dark h1.ph-headline{font-size:clamp(34px,8vw,48px)}
}
@media (prefers-reduced-motion:reduce){
.product-hero-dark .rv,.product-hero-dark .ph-bars i{transition:none!important}
}
/* ===== HOMEPAGE HERO — AI-forward ask (v7.22 FIG-02A) ===== */
/* ────────────────────────────────────────────────────────────────
Homepage hero — AI-forward "ask" (adapted from reference #5)
On-system: 4px btn radius, magenta primary, cream canvas,
Satoshi display + body, JetBrains Mono labels.
─────────────────────────────────────────────────────────────── */
.home-hero-ai{
background:var(--cream);
color:var(--ink);
padding:40px 0 64px;
overflow:hidden;
position:relative;
}
.home-hero-ai::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(1200px 500px at 50% 0%, rgba(184,50,128,.06), transparent 60%),
radial-gradient(900px 400px at 50% 100%, rgba(201,151,0,.05), transparent 55%);
pointer-events:none;
z-index:0;
}
.home-hero-ai .container{position:relative;z-index:1}
.home-hero-ai .inner{max-width:820px;margin:0 auto;text-align:center}
.home-hero-ai .eyebrow{
font-family:var(--mono);
font-size:12px;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--magenta);
font-weight:500;
display:inline-flex;
align-items:center;
gap:9px;
}
.home-hero-ai .eyebrow::before{
content:"";
width:8px;height:8px;
border-radius:50%;
background:var(--magenta);
animation:hh-pulse 2.4s ease-in-out infinite;
}
@keyframes hh-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.65)}}
.home-hero-ai h1.hh-headline{
font-family:var(--display);
font-weight:800;
font-size:clamp(38px,6vw,72px);
line-height:1.02;
letter-spacing:-.024em;
margin:0 auto;
color:var(--ink);
max-width:15ch;
}
.home-hero-ai h1.hh-headline .mag{color:var(--magenta);font-style:normal}
.home-hero-ai .hh-sub{
font-size:19px;
line-height:1.5;
color:rgba(53,20,55,.78);
margin:18px auto 0;
max-width:56ch;
}
/* ---------- Big ask + AI answer ---------- */
.home-hero-ai .askwrap{max-width:680px;margin:24px auto 0}
.home-hero-ai .bigask{
display:flex;
align-items:center;
gap:12px;
background:#fff;
border:1px solid rgba(53,20,55,.16);
border-radius:14px;
padding:16px 18px;
box-shadow:0 20px 50px -30px rgba(53,20,55,.5);
text-align:left;
}
.home-hero-ai .bigask .qq{
flex:1;
font-family:var(--body);
font-size:16px;
font-weight:500;
color:var(--ink);
min-height:22px;
text-align:left;
}
.home-hero-ai .bigask .caret{
display:inline-block;
width:2px;height:18px;
background:var(--magenta);
margin-left:2px;
vertical-align:-3px;
animation:hh-blink 1s step-end infinite;
}
@keyframes hh-blink{0%,100%{opacity:1}50%{opacity:0}}
.home-hero-ai .bigask .go{
background:var(--plum-ink);
color:#fff;
border-radius:4px;
padding:11px 18px;
font-family:var(--body);
font-weight:700;
font-size:14px;
display:inline-flex;
gap:7px;
align-items:center;
flex:none;
border:none;
cursor:pointer;
transition:background .18s ease;
}
.home-hero-ai .bigask .go:hover{background:#000}
.home-hero-ai .aianswer{
margin-top:14px;
background:#fff;
border:1px solid rgba(53,20,55,.14);
border-radius:14px;
box-shadow:0 24px 60px -34px rgba(53,20,55,.55);
overflow:hidden;
opacity:0;
transform:translateY(10px);
transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
text-align:left;
}
.home-hero-ai .aianswer.shown{opacity:1;transform:none}
.home-hero-ai .aianswer .ahd{
display:flex;align-items:center;gap:9px;
padding:13px 18px;
border-bottom:1px solid rgba(53,20,55,.08);
font-family:var(--mono);
font-size:11px;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--magenta);
font-weight:700;
}
.home-hero-ai .aianswer .ahd .d{
width:8px;height:8px;border-radius:50%;background:var(--magenta);
}
.home-hero-ai .aianswer .abody{padding:18px 20px}
.home-hero-ai .aianswer .abody p{
font-family:var(--body);
font-size:15.5px;
line-height:1.55;
color:var(--ink);
margin:0;
}
.home-hero-ai .aianswer .abody p b{font-weight:700}
.home-hero-ai .aichips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.home-hero-ai .aichip{
font-family:var(--mono);
font-size:11px;
padding:7px 12px;
border-radius:100px;
background:var(--cream);
border:1px solid rgba(53,20,55,.14);
color:var(--ink);
font-weight:500;
}
.home-hero-ai .aichip b{color:var(--gold);font-weight:900}
/* CTA row */
.home-hero-ai .hh-ctas{
display:flex;
gap:12px;
justify-content:center;
margin-top:24px;
flex-wrap:wrap;
}
/* Reveal animation */
.home-hero-ai .rv{
opacity:0;
transform:translateY(14px);
transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.home-hero-ai.play .rv{opacity:1;transform:none}
.home-hero-ai.play .rv1{transition-delay:.05s}
.home-hero-ai.play .rv2{transition-delay:.16s}
.home-hero-ai.play .rv3{transition-delay:.28s}
.home-hero-ai.play .rv4{transition-delay:.40s}
.home-hero-ai.play .rv5{transition-delay:.52s}
/* Mobile */
@media (max-width:720px){
.home-hero-ai{padding:28px 0 48px}
.home-hero-ai h1.hh-headline{font-size:clamp(32px,8vw,44px);max-width:none}
.home-hero-ai .hh-sub{font-size:16px}
.home-hero-ai .bigask{flex-direction:column;align-items:stretch;gap:14px}
.home-hero-ai .bigask .qq{min-height:44px}
.home-hero-ai .bigask .go{justify-content:center}
.home-hero-ai .hh-ctas .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
.home-hero-ai .rv,
.home-hero-ai .aianswer,
.home-hero-ai .eyebrow::before,
.home-hero-ai .bigask .caret{transition:none!important;animation:none!important}
}
/* ============================================================
HOW IT WORKS HERO · v7.24 · Palette B (Deep Plum)
Scoped to .hiw-hero — does not affect other sections
============================================================ */
.hiw-hero {
background: var(--plum-ink);
color: var(--cream);
padding: 96px 0 80px;
position: relative;
}
.hiw-hero .container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.hiw-hero .hh-eyebrow {
font: 500 11px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.14em;
color: var(--gold-warm); margin: 0;
}
.hiw-hero .hh-subeye {
font: 500 11px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.14em;
color: var(--plum-muted); margin-top: 6px;
}
.hiw-hero h1 {
font: 700 clamp(48px, 6vw, 88px)/1.02 var(--display);
letter-spacing: -0.02em; color: var(--cream); margin: 28px 0 0; max-width: 900px;
}
.hiw-hero h1 em { color: var(--gold-warm); font-style: italic; font-weight: 800; }
.hiw-hero .hh-lede {
font: 500 clamp(18px, 1.4vw, 22px)/1.45 var(--display);
color: var(--cream); opacity: 0.88; max-width: 640px; margin: 28px 0 0;
}
.hiw-hero .hh-ctas { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.hiw-hero .hh-ctas .btn.primary {
background: var(--magenta); color: var(--cream); border: 1px solid transparent;
}
.hiw-hero .hh-ctas .btn.primary:hover { background: var(--magenta-lite); }
.hiw-hero .hh-ctas .btn.ghost {
background: transparent; color: var(--cream); border: 1px solid var(--cream);
}
.hiw-hero .hh-ctas .btn.ghost:hover { background: rgba(250,244,227,0.08); }
/* Decision-anatomy card, embedded in hero */
.hiw-anat {
margin-top: 56px; background: var(--plum-surface); border: 1px solid var(--plum-line);
border-radius: 12px; padding: 36px 40px 28px;
}
.hiw-anat-head {
display: flex; justify-content: space-between; align-items: baseline;
padding-bottom: 16px; border-bottom: 1px solid var(--plum-line);
}
.hiw-anat-head .l,
.hiw-anat-head .r {
font: 500 11px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.14em;
}
.hiw-anat-head .l { color: var(--gold-warm); }
.hiw-anat-head .r { color: var(--plum-muted); }
.hiw-anat-row {
display: grid; grid-template-columns: 180px 1fr auto; gap: 24px; align-items: baseline;
padding: 20px 0; border-bottom: 1px dashed var(--plum-line);
}
.hiw-anat-row:last-of-type { border-bottom: none; }
.hiw-anat-row .lbl {
font: 500 10.5px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.14em;
color: var(--plum-muted); padding-top: 4px;
}
.hiw-anat-row .txt {
font: 500 clamp(17px, 1.35vw, 21px)/1.4 var(--display); color: var(--cream);
}
.hiw-anat-row .note {
font: 500 9.5px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.14em;
color: var(--plum-muted); white-space: nowrap;
}
.hiw-anat-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.hiw-anat-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border: 1px solid var(--plum-line); border-radius: 20px;
background: var(--plum-ink-2); font: 500 13px/1 var(--body); color: var(--cream);
text-decoration: none;
}
.hiw-anat-chip .arr { color: var(--gold-warm); font-size: 11px; }
.hiw-anat-chip:hover { background: var(--plum-ink); border-color: var(--gold-warm); }
.hiw-anat-impact {
font: 800 clamp(28px, 2.6vw, 36px)/1 var(--display); color: var(--gold-warm);
letter-spacing: -0.02em;
}
.hiw-anat-impact-sub {
font: 400 14px/1 var(--body); color: var(--plum-muted); margin-left: 8px;
}
.hiw-anat-actions {
display: flex; justify-content: flex-end; gap: 20px; padding-top: 20px;
align-items: center; flex-wrap: wrap;
}
.hiw-anat-actions a {
font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em;
color: var(--cream); text-decoration: none;
}
.hiw-anat-actions a:hover { color: var(--gold-warm); }
.hiw-anat-actions a.primary {
background: var(--gold-warm); color: var(--plum-ink); padding: 10px 16px; border-radius: 4px;
}
.hiw-anat-actions a.primary:hover { background: #FFC553; }
/* Thread-states row below the memo card */
.hiw-thread {
margin-top: 36px; display: grid;
grid-template-columns: auto repeat(4, 1fr); gap: 0; align-items: stretch;
}
.hiw-thread .th-label {
font: 500 10.5px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.14em;
color: var(--plum-muted); padding: 12px 24px 12px 0;
display: flex; align-items: center;
}
.hiw-state {
padding: 16px 20px; background: var(--plum-surface); border: 1px solid var(--plum-line);
border-right: none; display: flex; flex-direction: column; gap: 4px;
}
.hiw-state:last-of-type { border-right: 1px solid var(--plum-line); background: var(--magenta); }
.hiw-state:last-of-type .n { color: var(--plum-ink); opacity: 0.7; }
.hiw-state:last-of-type .t { color: var(--plum-ink); }
.hiw-state .n {
font: 500 9.5px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.14em;
color: var(--plum-muted);
}
.hiw-state .t { font: 500 15px/1.3 var(--body); color: var(--cream); }
.hiw-tags { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.hiw-tag {
padding: 5px 12px; border: 1px solid var(--plum-line); border-radius: 16px;
background: transparent; font: 500 12px/1 var(--body); color: var(--cream);
text-decoration: none;
}
.hiw-tag:hover { border-color: var(--gold-warm); color: var(--gold-warm); }
/* Mobile */
@media (max-width: 900px) {
.hiw-hero { padding: 64px 0 56px; }
.hiw-anat { margin-top: 40px; padding: 24px 20px 20px; }
.hiw-anat-row { grid-template-columns: 1fr; gap: 6px; }
.hiw-anat-row .lbl { padding-top: 0; }
.hiw-anat-row .note { white-space: normal; }
.hiw-anat-actions { justify-content: flex-start; }
.hiw-thread { grid-template-columns: 1fr 1fr; }
.hiw-thread .th-label { grid-column: 1 / -1; padding: 0 0 8px; }
.hiw-state, .hiw-state:last-of-type { border-right: 1px solid var(--plum-line); }
}
/* ==========================================================================
v7.25 · How it works · additional sections (FIG-04E/F/G/H)
========================================================================== */
/* --- Section A · Walkthrough video / interactive placeholder --- */
.hiw-walkthrough .hiw-video-frame {
position: relative;
background: linear-gradient(135deg, var(--plum-surface) 0%, var(--plum-ink-2) 100%);
border: 1px solid var(--plum-line);
border-radius: 16px;
padding: 96px 40px;
color: var(--cream);
overflow: hidden;
}
.hiw-walkthrough .hiw-video-frame::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 20%, rgba(240,180,41,0.08), transparent 40%),
radial-gradient(circle at 80% 80%, rgba(184,50,128,0.10), transparent 45%);
pointer-events: none;
}
.hiw-walkthrough .hiw-video-inner {
position: relative; z-index: 1;
text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 20px;
max-width: 640px; margin: 0 auto;
}
.hiw-walkthrough .hiw-video-eyebrow {
font: 500 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
color: var(--gold-warm);
}
.hiw-walkthrough .hiw-video-title {
font: 700 32px/1.15 var(--display); letter-spacing: -0.02em; color: var(--cream);
margin: 0;
}
.hiw-walkthrough .hiw-play-btn {
width: 72px; height: 72px; border-radius: 50%; border: none;
background: var(--magenta); color: var(--cream);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; box-shadow: 0 12px 40px rgba(184,50,128,0.35);
transition: transform 200ms, box-shadow 200ms;
padding-left: 4px;
}
.hiw-walkthrough .hiw-play-btn:hover { transform: scale(1.05); box-shadow: 0 16px 48px rgba(184,50,128,0.5); }
.hiw-walkthrough .hiw-video-caption {
font: 400 15px/1.5 var(--body); color: var(--plum-muted); margin: 0; max-width: 440px;
}
.hiw-walkthrough .hiw-video-toggle {
display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px;
background: rgba(0,0,0,0.25); border: 1px solid var(--plum-line);
margin-top: 4px;
}
.hiw-walkthrough .hiw-toggle {
font: 500 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
padding: 10px 16px; border-radius: 999px; color: var(--plum-muted);
cursor: pointer;
}
.hiw-walkthrough .hiw-toggle.active { background: var(--gold-warm); color: var(--plum-ink); }
.hiw-walkthrough .hiw-chapters {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
background: var(--plum-ink); color: var(--cream);
border: 1px solid var(--plum-line); border-radius: 12px;
padding: 24px 28px;
margin-top: -1px;
}
.hiw-walkthrough .hiw-chapter { padding: 4px 12px; border-left: 1px solid var(--plum-line); }
.hiw-walkthrough .hiw-chapter:first-child { border-left: 0; }
.hiw-walkthrough .chp-num {
font: 500 10.5px/1 var(--mono); color: var(--gold-warm); text-transform: uppercase;
letter-spacing: 0.14em;
}
.hiw-walkthrough .chp-title { font: 500 15px/1.3 var(--display); color: var(--cream); margin: 8px 0 4px; }
.hiw-walkthrough .chp-desc { font: 400 13px/1.5 var(--body); color: var(--plum-muted); margin: 0; }
@media (max-width: 800px) {
.hiw-walkthrough .hiw-video-frame { padding: 56px 24px; }
.hiw-walkthrough .hiw-video-title { font-size: 24px; }
.hiw-walkthrough .hiw-chapters { grid-template-columns: 1fr; gap: 16px; }
.hiw-walkthrough .hiw-chapter { border-left: 0; border-top: 1px dashed var(--plum-line); padding-top: 16px; }
.hiw-walkthrough .hiw-chapter:first-child { border-top: 0; padding-top: 0; }
}
/* --- Section B · What connects (data-sources card) --- */
.hiw-what-connects .hiw-connects-grid {
display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start;
}
.hiw-sources-card {
background: var(--paper, #FBF5DE);
border: 1px solid var(--line);
border-radius: 12px;
padding: 20px 24px;
}
.hiw-sources-head {
display: flex; justify-content: space-between; padding-bottom: 12px;
border-bottom: 1px dashed var(--line-strong, #B9A882);
font: 500 10.5px/1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted, #6E6A5F);
}
.hiw-source-row {
display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: center;
padding: 16px 0; border-bottom: 1px dashed var(--line);
}
.hiw-source-row:last-child { border-bottom: 0; }
.hiw-source-row .src-mark {
width: 44px; height: 44px; border-radius: 8px;
background: var(--plum-ink); color: var(--gold-warm);
display: inline-flex; align-items: center; justify-content: center;
font: 700 14px/1 var(--display); letter-spacing: 0.02em;
}
.hiw-source-row .src-name { font: 500 15px/1.2 var(--display); color: var(--plum-ink); margin: 0; }
.hiw-source-row .src-desc { font: 400 12px/1.4 var(--mono); color: var(--muted, #6E6A5F); margin: 4px 0 0; text-transform: uppercase; letter-spacing: 0.06em; }
.hiw-source-row .src-status {
display: inline-flex; align-items: center; gap: 8px;
font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em;
color: #437A22;
}
.hiw-source-row .src-status .dot {
width: 8px; height: 8px; border-radius: 50%; background: #6DAA45;
box-shadow: 0 0 0 3px rgba(109,170,69,0.20);
}
@media (max-width: 800px) {
.hiw-what-connects .hiw-connects-grid { grid-template-columns: 1fr; gap: 32px; }
}
/* --- Section C · Overnight timeline --- */
.hiw-ritual .hiw-timeline {
display: flex; flex-direction: column;
border-top: 1px solid var(--line-strong, #B9A882);
}
.hiw-ritual .hiw-tl-row {
display: grid; grid-template-columns: 120px 1fr 100px; gap: 32px;
align-items: baseline;
padding: 24px 4px; border-bottom: 1px dashed var(--line);
}
.hiw-ritual .hiw-tl-row:last-child { border-bottom: 1px solid var(--line-strong, #B9A882); }
.hiw-ritual .tl-time {
font: 500 14px/1 var(--mono); color: var(--magenta); letter-spacing: 0.06em;
}
.hiw-ritual .tl-title { font: 500 18px/1.25 var(--display); color: var(--plum-ink); margin: 0; }
.hiw-ritual .tl-desc { font: 400 14px/1.5 var(--body); color: var(--muted, #6E6A5F); margin: 6px 0 0; }
.hiw-ritual .tl-stage {
font: 500 10px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.16em;
color: var(--gold); text-align: right;
}
@media (max-width: 800px) {
.hiw-ritual .hiw-tl-row { grid-template-columns: 90px 1fr; }
.hiw-ritual .hiw-tl-row .tl-stage { grid-column: 2; text-align: left; margin-top: 4px; }
}
/* --- Section D · Managed setup grid --- */
.hiw-setup .hiw-setup-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.hiw-setup .hiw-setup-card {
background: var(--paper, #FBF5DE);
border: 1px solid var(--line);
border-radius: 12px;
padding: 28px 24px;
display: flex; flex-direction: column; gap: 4px;
}
.hiw-setup .hiw-setup-card .label.gold {
font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.14em;
color: var(--gold);
}
.hiw-setup .hiw-setup-card .h3 { font: 700 20px/1.2 var(--display); color: var(--plum-ink); }
.hiw-setup .hiw-setup-card .body { font: 400 14px/1.5 var(--body); color: var(--muted, #6E6A5F); flex: 1; }
.hiw-setup-chip {
align-self: flex-start;
padding: 6px 12px; border-radius: 999px;
background: var(--plum-ink); color: var(--gold-warm);
font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.12em;
margin-top: 16px;
}
@media (max-width: 800px) {
.hiw-setup .hiw-setup-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
v7.25 · FAQ sticky-then-release
========================================================================== */
.v720-faq-sidebar { top: 96px; } /* offset for sticky nav (~72px + breathing room) */
/* v7.26 r4 · Disabled forced static — was blocking sticky. */
/* .v720-faq-sidebar.unstuck { position: static !important; } */
/* ==========================================================================
v7.26 · Nav · transparent by default; cream + shadow on scroll
========================================================================== */
.site-nav {
transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
/* Dark-tone pages: nav painted with hero color so it visually merges with
the hero band. Each dark route declares its own tone via --nav-tone-bg. */
body[data-nav-tone="dark"] { --nav-tone-bg: var(--plum-ink); }
body[data-nav-tone="dark"] .site-nav:not(.scrolled) {
background: var(--nav-tone-bg);
border-bottom-color: transparent;
}
/* Dark-tone hero pages: nav sits over a dark surface, so items go cream and
the CTA switches to gold. Set data-nav-tone="dark" on for these routes. */
body[data-nav-tone="dark"] .site-nav:not(.scrolled) .nav-logo,
body[data-nav-tone="dark"] .site-nav:not(.scrolled) .nav-logo .wm,
body[data-nav-tone="dark"] .site-nav:not(.scrolled) .nav-item > a,
body[data-nav-tone="dark"] .site-nav:not(.scrolled) .nav-item > .nav-parent,
body[data-nav-tone="dark"] .site-nav:not(.scrolled) .nav-actions .sign-in,
body[data-nav-tone="dark"] .site-nav:not(.scrolled) .nav-right .nav-signin {
color: var(--cream);
}
body[data-nav-tone="dark"] .site-nav:not(.scrolled) .nav-item > .nav-parent:hover,
body[data-nav-tone="dark"] .site-nav:not(.scrolled) .nav-item.open > .nav-parent,
body[data-nav-tone="dark"] .site-nav:not(.scrolled) .nav-item > a:hover,
body[data-nav-tone="dark"] .site-nav:not(.scrolled) .nav-actions .sign-in:hover {
color: var(--gold-warm);
}
body[data-nav-tone="dark"] .site-nav:not(.scrolled) .nav-cta {
background: var(--gold-warm); color: var(--plum-ink);
}
body[data-nav-tone="dark"] .site-nav:not(.scrolled) .nav-cta:hover {
background: var(--gold, #C99700);
}
/* On-scroll: solid cream + subtle shadow, works on every page */
.site-nav.scrolled {
background: var(--cream) !important;
border-bottom-color: var(--line) !important;
box-shadow: 0 4px 20px rgba(53,20,55,0.06);
}
.site-nav.scrolled .nav-logo,
.site-nav.scrolled .nav-logo .wm,
.site-nav.scrolled .nav-item > a,
.site-nav.scrolled .nav-item > .nav-parent,
.site-nav.scrolled .nav-actions .sign-in,
.site-nav.scrolled .nav-right .nav-signin {
color: var(--charcoal);
}
.site-nav.scrolled .nav-cta { background: var(--magenta); color: var(--cream); }
/* Mega-menu panels always stay cream — legibility over blend */
.mega-menu, .mm-panel { background: var(--cream); }
/* ==========================================================================
v7.26 r4 · nav truly transparent → hero extends up under nav on ALL pages
========================================================================== */
/* The seam problem: nav takes 84px of flow between beta-banner and the first hero.
That 84px strip shows body cream, so any non-cream hero has a visible edge.
Solution: pull the first section of up so its color bleeds behind the nav. */
main#main > *:first-child:not(.a11y-toolbar):not(.v720-dl-strip) {
margin-top: -84px;
padding-top: 108px; /* 84px nav + 24px original breathing room */
}
/* When a11y toolbar sits first (blog-article, resource-reader), pull the *next* section up. */
main#main > .a11y-toolbar + section,
main#main > .a11y-toolbar + div {
/* toolbar itself keeps its natural position under nav; hero starts right after */
}
/* Nav stays fully transparent by default — no data-nav-tone painting needed */
body[data-nav-tone="paper"] { background: var(--paper); }
body[data-nav-tone="paper"] .site-nav:not(.scrolled) {
background: transparent;
border-bottom-color: transparent;
}
/* FAQ sticky sidebar: give the layout viewport height so sticky has room to stick */
.v720-faq-layout { min-height: calc(100vh - 84px); }
.v720-faq-sidebar { top: 108px; }
/* Homepage logo wall (FIG-02E) */
.logo-wall { background: var(--cream); padding: 96px 0; }
.logo-wall .lw-head { max-width: 820px; margin: 0 auto 48px; text-align: center; }
.logo-wall .eyebrow {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--magenta); font-weight: 500;
display: inline-flex; align-items: center; gap: 8px;
}
.logo-wall .eyebrow::before {
content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--magenta);
}
.logo-wall .lw-h2 {
font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.06;
margin: 16px auto 0; font-size: clamp(28px, 3.4vw, 42px); max-width: 22ch;
color: var(--charcoal);
}
.logo-wall .lw-lede {
font-size: 17px; line-height: 1.55; color: rgba(53,20,55,0.78);
margin: 18px auto 0; max-width: 56ch;
}
.logo-wall .lw-grid {
display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
max-width: 1200px; margin: 0 auto; padding: 0 6vw;
}
.logo-wall .lw-card {
background: #fff; border: 1px solid var(--line); border-radius: 10px;
padding: 22px 16px; display: flex; flex-direction: column;
align-items: center; justify-content: center; min-height: 96px; gap: 10px;
transition: transform 0.18s ease, box-shadow 0.18s ease;
text-decoration: none; color: inherit;
}
.logo-wall a.lw-card:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }
.logo-wall .lw-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px -20px rgba(53,20,55,0.35);
}
.logo-wall .lw-card img { max-height: 34px; max-width: 110px; object-fit: contain; }
.logo-wall .lw-name {
font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
text-transform: uppercase; color: rgba(53,20,55,0.58);
}
.logo-wall .lw-cta { text-align: center; margin-top: 40px; }
@media (max-width: 900px) {
.logo-wall { padding: 56px 0; }
.logo-wall .lw-head { text-align: left; padding: 0 6vw; margin-bottom: 32px; }
.logo-wall .lw-h2 { margin-left: 0; font-size: 26px; text-align: left; }
.logo-wall .lw-lede { margin-left: 0; text-align: left; }
.logo-wall .lw-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.logo-wall .lw-card { padding: 18px 8px; min-height: 88px; }
.logo-wall .lw-cta { text-align: left; margin-top: 28px; padding: 0 6vw; }
}
/* Pricing hero v3 (v7.49 · Calm canvas + single magenta focus glow):
Texture removed. Warm canvas base matches the rest of the site so pricing
feels of-a-piece. A single quiet magenta radial sits behind the headline
to give the hero focus without any pattern noise. */
.pricing-hero-v3 {
position: relative; overflow: hidden;
background:
/* Soft magenta focus glow behind the headline */
radial-gradient(48% 42% at 50% 44%, rgba(184,50,128,.09), transparent 70%),
/* Faint plum bloom, top-left, keeps depth without adding a pattern */
radial-gradient(38% 34% at 12% 6%, rgba(53,20,55,.05), transparent 65%),
var(--cream);
padding: 112px 0 88px;
text-align: center;
}
.pricing-hero-v3-content {
position: relative; z-index: 1;
max-width: 820px; margin: 0 auto; padding: 0 6vw;
text-align: center;
}
.pricing-hero-v3-content .chapter { justify-content: center; display: flex; }
.pricing-hero-v3-content h1.display-md { max-width: 17ch; margin: 18px auto 0; }
.pricing-hero-v3-content h1.display-md .accent { color: var(--magenta); }
.pricing-hero-v3-content .lede-lg { margin: 24px auto 0; max-width: 52ch; }
.pricing-hero-v3-ctas {
display: flex; gap: 12px; margin: 40px auto 0;
align-items: center; flex-wrap: wrap; justify-content: center;
}
/* Timeline card under CTAs */
.pricing-hero-timeline {
position: relative; z-index: 1;
max-width: 1000px; margin: 44px auto 0; padding: 0 6vw;
}
.pricing-hero-timeline .timeline-card {
display: flex; border: 1px solid rgba(53,20,55,.12); border-radius: 13px;
overflow: hidden; background: #fff;
box-shadow: 0 22px 52px -28px rgba(53,20,55,.45);
text-align: left;
}
.pricing-hero-timeline .tstep {
flex: 1; padding: 20px 22px; background: #fff;
border-right: 1px solid rgba(53,20,55,.1);
}
.pricing-hero-timeline .tstep:last-child { border-right: none; }
.pricing-hero-timeline .tstep .tl {
font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
text-transform: uppercase; color: rgba(53,20,55,.5); font-weight: 600;
}
.pricing-hero-timeline .tstep .tv {
font-family: var(--display); font-weight: 800; font-size: 20px;
margin-top: 10px; color: var(--plum-ink, #351437); letter-spacing: -.01em;
}
.pricing-hero-timeline .tstep .td {
font-family: var(--body); font-size: 12.5px; color: rgba(53,20,55,.62);
margin-top: 8px; line-height: 1.45;
}
.pricing-hero-timeline .tstep.now { background: #FDEFF6; }
.pricing-hero-timeline .tstep.now .tv { color: var(--magenta); }
.pricing-hero-timeline .tstep.later .tv { color: var(--gold); }
@media (max-width: 820px) {
.pricing-hero-timeline .timeline-card { flex-direction: column; }
.pricing-hero-timeline .tstep { border-right: none; border-bottom: 1px solid rgba(53,20,55,.1); }
.pricing-hero-timeline .tstep:last-child { border-bottom: none; }
}
@media (max-width: 900px) {
.pricing-hero-v3 { padding: 64px 0 52px; }
.pricing-hero-timeline { margin-top: 32px; }
}
/* v7.27 · When the conversion-band CTA is the last section before the footer,
remove the whitespace between them (zero gap), but keep breathing room *inside*
the CTA below the buttons. Footer margin-top is zeroed so the two sections
sit flush; the CTA keeps a smaller-than-default bottom padding of its own. */
main > [data-component="conversion-band"]:last-child { padding-bottom: 56px; }
@media (max-width: 640px) {
main > [data-component="conversion-band"]:last-child { padding-bottom: 40px; }
}
main:has(> [data-component="conversion-band"]:last-child) + .site-footer { margin-top: 0; }
/* v7.26 r4 · Inline SVG icons used in reader action buttons + a11y toolbar */
.btn-ico { flex: none; width: 16px; height: 16px; opacity: 0.9; }
.v720-btn-on-dark .btn-ico { margin-right: 2px; }
.a11y-toolbar .a11y-item .btn-ico { margin-right: 4px; }
/* ==========================================================================
v7.27 · Solutions hero visualization (real-estate + home-services)
Local scope — variables redefined so they don't clash with global tokens
========================================================================== */
.solutions-hero-viz {
--brightgold: #F0B429;
--goldtint: #F7E8BD;
--hero-canvas:#FAF4E3;
--hero-plum: #7A1F5C;
--hero-ink: #351437;
color: var(--hero-ink);
font-family: var(--body);
-webkit-font-smoothing: antialiased;
}
.solutions-hero-viz .viz {position:relative;width:100%;max-width:640px;aspect-ratio:640/600;margin:0 auto}
.solutions-hero-viz .stage {position:absolute;top:0;left:0;width:640px;height:600px;transform-origin:top left;background:transparent}
.solutions-hero-viz .stage .bg {position:absolute;inset:0;pointer-events:none;background:
repeating-radial-gradient(circle at 320px 188px, rgba(122,31,92,.05) 0 1px, transparent 1px 32px),
radial-gradient(40% 36% at 50% 31%, rgba(184,50,128,.12), transparent 64%);}
.solutions-hero-viz .top {position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:22px 24px;z-index:6}
.solutions-hero-viz .brand {font-family:var(--display);font-weight:800;font-size:16px;display:flex;align-items:center;gap:8px}
.solutions-hero-viz .brand .dot {width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 32% 30%,var(--c2),var(--c3))}
.solutions-hero-viz .brand .b2 {color:var(--accent)}
.solutions-hero-viz .vtag {display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--tagfg);background:var(--tagbg);border:1px solid var(--tagbd);border-radius:100px;padding:6px 12px;font-weight:700;backdrop-filter:blur(4px)}
.solutions-hero-viz .vtag .vi {width:13px;height:13px;stroke:var(--accent);fill:none;stroke-width:1.7}
.solutions-hero-viz .orbit {position:absolute;inset:0}
.solutions-hero-viz .links {position:absolute;inset:0}
.solutions-hero-viz .links #lg .a {stop-color:var(--link);stop-opacity:0}
.solutions-hero-viz .links #lg .b {stop-color:var(--link);stop-opacity:.45}
.solutions-hero-viz .beam {position:absolute;left:319px;top:244px;width:2px;height:150px;border-radius:2px;background:linear-gradient(var(--link),rgba(184,50,128,0));opacity:.28;transition:opacity .4s}
.solutions-hero-viz .stage.gen .beam {opacity:.7}
.solutions-hero-viz .emit {position:absolute;left:315px;top:242px;width:9px;height:9px;border-radius:50%;background:var(--brightgold);box-shadow:0 0 12px var(--brightgold);opacity:0;z-index:4}
.solutions-hero-viz .stage.gen .emit {animation:emit .72s cubic-bezier(.4,0,.5,1) forwards}
@keyframes emit {0%{opacity:0;transform:translateY(0) scale(.7)}16%{opacity:1;transform:translateY(6px) scale(1)}88%{opacity:1}100%{opacity:0;transform:translateY(150px) scale(.7)}}
.solutions-hero-viz .core {position:absolute;left:266px;top:134px;width:108px;height:108px}
.solutions-hero-viz .core .cinner {position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 36% 30%,var(--c1),var(--c2) 42%,var(--c3));display:grid;place-items:center;color:#fff;text-align:center;box-shadow:0 18px 44px -16px rgba(184,50,128,.8),inset 0 2px 10px rgba(255,255,255,.25);overflow:hidden;transition:box-shadow .5s}
.solutions-hero-viz .stage.gen .core .cinner {box-shadow:0 20px 54px -14px rgba(184,50,128,.95),0 0 0 6px rgba(240,180,41,.14),inset 0 2px 10px rgba(255,255,255,.3)}
.solutions-hero-viz .core .cinner b {font-family:var(--display);font-weight:800;font-size:13px;line-height:1.12;position:relative;z-index:2}
.solutions-hero-viz .core .spark {position:absolute;inset:-30%;background:conic-gradient(from 0deg,transparent 0deg,rgba(247,232,189,.55) 42deg,transparent 92deg);animation:spin 6s linear infinite;z-index:1}
.solutions-hero-viz .core .ring {position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--link);opacity:.5;animation:pulse 3.2s ease-out infinite}
.solutions-hero-viz .core .ring.r2 {animation-delay:1.06s}
.solutions-hero-viz .core .ring.r3 {animation-delay:2.12s}
@keyframes pulse {0%{transform:scale(1);opacity:.5}100%{transform:scale(2.15);opacity:0}}
@keyframes spin {to{transform:rotate(360deg)}}
.solutions-hero-viz .vtile {position:absolute;width:54px;padding:0;background:transparent;border:0;border-radius:0;display:flex;flex-direction:column;align-items:center;gap:6px;z-index:3}
.solutions-hero-viz .vtile .logo {width:54px;height:54px;border-radius:50%;background:transparent;border:0;box-shadow:none;display:grid;place-items:center}
.solutions-hero-viz .vtile .logo svg {width:32px;height:32px;stroke:var(--hero-plum);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(53,20,55,.18))}
.solutions-hero-viz .vtile .tname {font-family:var(--mono);font-size:9px;letter-spacing:.03em;color:rgba(53,20,55,.55);white-space:nowrap;font-weight:500}
.solutions-hero-viz .flowdot {position:absolute;left:317px;top:185px;width:6px;height:6px;border-radius:50%;opacity:0;animation-duration:2.2s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.4,0,.6,1)}
.solutions-hero-viz .flowdot.p1 {background:var(--pd1);box-shadow:0 0 6px var(--pd1)}
.solutions-hero-viz .flowdot.p2 {background:var(--pd2);box-shadow:0 0 6px var(--pd2)}
.solutions-hero-viz .fd-NW {animation-name:flowNW}
@keyframes flowNW {0%{transform:translate(-152px,-80px);opacity:0}12%{opacity:1}82%{opacity:1}100%{transform:translate(0,0);opacity:0}}
.solutions-hero-viz .fd-NE {animation-name:flowNE}
@keyframes flowNE {0%{transform:translate(152px,-80px);opacity:0}12%{opacity:1}82%{opacity:1}100%{transform:translate(0,0);opacity:0}}
.solutions-hero-viz .fd-W {animation-name:flowW}
@keyframes flowW {0%{transform:translate(-170px,38px);opacity:0}12%{opacity:1}82%{opacity:1}100%{transform:translate(0,0);opacity:0}}
.solutions-hero-viz .fd-E {animation-name:flowE}
@keyframes flowE {0%{transform:translate(170px,38px);opacity:0}12%{opacity:1}82%{opacity:1}100%{transform:translate(0,0);opacity:0}}
.solutions-hero-viz .status {position:absolute;left:0;right:0;top:300px;display:flex;justify-content:center;z-index:5}
.solutions-hero-viz .status span {display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;background:rgba(250,244,227,.72);padding:5px 12px;border-radius:100px;backdrop-filter:blur(4px)}
.solutions-hero-viz .status .analyzing {color:var(--accent)}
.solutions-hero-viz .status .sp {width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blip 1.4s ease-out infinite}
@keyframes blip {0%{box-shadow:0 0 0 0 rgba(184,50,128,.5)}100%{box-shadow:0 0 0 9px rgba(184,50,128,0)}}
.solutions-hero-viz .status .ell {display:inline-flex;gap:3px}
.solutions-hero-viz .status .ell i {width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.4;animation:bob 1.1s infinite}
.solutions-hero-viz .status .ell i:nth-child(2) {animation-delay:.15s}
.solutions-hero-viz .status .ell i:nth-child(3) {animation-delay:.3s}
@keyframes bob {0%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.solutions-hero-viz .status .ready {color:var(--gold);display:none}
.solutions-hero-viz .status .ready .chk {width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.solutions-hero-viz .stage.done .analyzing {display:none}
.solutions-hero-viz .stage.done .ready {display:inline-flex}
.solutions-hero-viz .answer {position:absolute;left:34px;right:34px;bottom:30px;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border:1px solid rgba(53,20,55,.10);border-top:2px solid var(--accent);border-radius:16px;padding:16px 18px;box-shadow:0 24px 60px -30px rgba(53,20,55,.55);opacity:0;transform:translateY(16px) scale(.985);transform-origin:top center;transition:.6s cubic-bezier(.2,.8,.2,1)}
.solutions-hero-viz .stage.ans-in .answer {opacity:1;transform:none}
.solutions-hero-viz .answer .anode {position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(255,255,255,.9),0 0 10px var(--accent)}
.solutions-hero-viz .answer .al {font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700}
.solutions-hero-viz .answer .at {font-size:14.5px;line-height:1.5;color:var(--hero-ink);margin-top:8px;min-height:44px}
.solutions-hero-viz .answer .at .cur {display:inline-block;width:2px;height:15px;background:var(--accent);vertical-align:-2px;animation:blink 1s step-end infinite}
@keyframes blink {50%{opacity:0}}
.solutions-hero-viz .answer .metric {display:flex;align-items:center;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(53,20,55,.1)}
.solutions-hero-viz .answer .val {font-family:var(--body);font-weight:900;font-size:25px;color:var(--gold);line-height:1;white-space:nowrap}
.solutions-hero-viz .answer .mnote {font-size:11px;color:rgba(53,20,55,.6);line-height:1.35}
.solutions-hero-viz .answer .mnote b {color:var(--hero-ink);font-weight:700}
@media (prefers-reduced-motion:reduce) {
.solutions-hero-viz .flowdot, .solutions-hero-viz .core .spark, .solutions-hero-viz .core .ring, .solutions-hero-viz .status .sp, .solutions-hero-viz .status .ell i, .solutions-hero-viz .emit {animation:none}
.solutions-hero-viz .answer {opacity:1;transform:none}
}
/* --- v8.2026 · Solutions hero photo (replaces viz) --- */
.solutions-hero-photo { width: 100%; max-width: 640px; margin: 0 auto; display: block; }
.solutions-hero-photo picture, .solutions-hero-photo img { display: block; width: 100%; height: auto; }
.solutions-hero-photo img { border-radius: 18px; }
@media (max-width: 720px) { .solutions-hero-photo { max-width: 100%; } }
/* Vertical hero video (T1 full-bleed with warm canvas left fade) */
.beta-hero.hero-video-bleed { position: relative; overflow: hidden; isolation: isolate; }
.beta-hero.hero-video-bleed > .container { position: relative; z-index: 3; }
.beta-hero.hero-video-bleed .hero-bg-video-wrap {
position: absolute; inset: 0; z-index: 1; overflow: hidden;
pointer-events: none;
}
.beta-hero.hero-video-bleed .hero-bg-video-wrap video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; display: block;
}
.beta-hero.hero-video-bleed .hero-bg-fade {
position: absolute; inset: 0; z-index: 2; pointer-events: none;
background:
linear-gradient(
90deg,
rgba(250,244,227,0.86) 0%,
rgba(250,244,227,0.80) 30%,
rgba(250,244,227,0.64) 46%,
rgba(250,244,227,0.40) 58%,
rgba(250,244,227,0.14) 76%,
rgba(250,244,227,0.02) 92%,
rgba(250,244,227,0.0) 100%
);
}
/* Hide the right-column photo when video is active */
.beta-hero.hero-video-bleed .solutions-hero-photo { display: none; }
/* Keep the hero grid columns balanced so copy sits in the left half only */
.beta-hero.hero-video-bleed .hero-split > div:last-child { min-height: 1px; }
@media (max-width: 820px) {
.beta-hero.hero-video-bleed .hero-bg-fade {
background:
linear-gradient(
180deg,
rgba(250,244,227,0.82) 0%,
rgba(250,244,227,0.72) 42%,
rgba(250,244,227,0.42) 62%,
rgba(250,244,227,0.08) 86%,
rgba(250,244,227,0.0) 100%
);
}
}
/* v7.58 · Solutions hero sub-copy a11y fix
Darken lede text to Plum Ink for AA contrast over the video/photo background.
Scoped to solutions vertical heroes only. */
.beta-hero[data-component="vertical-hero"] .lede {
color: var(--plum-ink, #351437);
}
@media (prefers-reduced-motion: reduce) {
.beta-hero.hero-video-bleed .hero-bg-video-wrap video { display: none; }
.beta-hero.hero-video-bleed .hero-bg-video-wrap { background-size: cover; background-position: center; }
}
/* =============================================================================
v7.28 · Batch fixes
- Ask modules: functional Send button + answer panel
- Hero send buttons: remove :hover state (auto-anim reads as click FX)
- Mobile burger: light color on dark hero backgrounds
- Solutions "In beta" pill: wrap-safe mobile
- Solutions audience chips: single unified pill treatment
- Blog article: mobile grid overflow fix (min-width, read-aloud stack)
========================================================================== */
/* --- Ask modules · functional Send + answer panel --- */
.ask-input-row {
display: flex; gap: 8px; align-items: stretch; margin-top: 0;
}
.ask-input-row input {
flex: 1; min-width: 0;
padding: 14px 18px; border: 1px solid var(--line-strong); border-radius: 4px;
font: 400 15px/1.4 var(--body); background: var(--white); color: var(--plum-ink);
}
.ask-input-row .ask-send {
padding: 12px 18px; border-radius: 4px; border: 0;
background: var(--magenta); color: var(--white);
font: 600 13px/1 var(--body); letter-spacing: 0.02em;
cursor: pointer; transition: background 160ms var(--ease);
white-space: nowrap;
}
.ask-input-row .ask-send:hover { background: var(--magenta-dk, #9c1c6a); }
.ask-input-row .ask-send:disabled { background: var(--muted); cursor: not-allowed; opacity: 0.6; }
/* Dark tile variant */
.tile.dark .ask-input-row input {
background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2);
color: var(--cream);
}
.tile.dark .ask-input-row input::placeholder { color: rgba(245,235,212,0.5); }
.tile.dark .ask-input-row .ask-send { background: var(--gold-warm); color: var(--plum-ink); }
.tile.dark .ask-input-row .ask-send:hover { background: var(--gold); }
/* Chips clickable */
.tile .chip-row .chip { cursor: pointer; user-select: none; }
/* Answer panel */
.ask-answer {
margin-top: 16px; padding: 16px 18px; border-radius: 4px;
background: var(--white); border: 1px solid var(--line-strong);
animation: askFadeIn 240ms var(--ease) both;
}
.ask-answer[hidden] { display: none; animation: none; }
.ask-answer .aa-label {
font: 500 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase;
color: var(--magenta); margin-bottom: 8px;
}
.ask-answer .aa-q {
font: 500 14px/1.4 var(--body); color: var(--muted); margin: 0 0 10px 0;
}
.ask-answer .aa-body {
font: 400 15px/1.55 var(--body); color: var(--plum-ink); margin: 0;
}
.ask-answer .aa-body + .aa-body { margin-top: 10px; }
.ask-answer .aa-foot {
margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
font: 500 12px/1.4 var(--body); color: var(--muted);
}
.ask-answer .aa-foot a { color: var(--magenta); text-decoration: none; }
.ask-answer .aa-foot a:hover { text-decoration: underline; }
.tile.dark .ask-answer {
background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14);
}
.tile.dark .ask-answer .aa-q { color: rgba(245,235,212,0.6); }
.tile.dark .ask-answer .aa-body { color: var(--cream); }
.tile.dark .ask-answer .aa-foot { border-top-color: rgba(255,255,255,0.14); color: rgba(245,235,212,0.6); }
.tile.dark .ask-answer .aa-foot a { color: var(--gold-warm); }
.tile.dark .ask-answer .aa-label { color: var(--gold-warm); }
/* v7.32.1 · Dark ask module: cite superscripts, source list, read more links */
.tile.dark .ask-answer .aa-body sup.aa-cite { color: var(--gold-warm); }
.tile.dark .ask-answer .aa-cites {
background: rgba(255,255,255,0.05);
}
.tile.dark .ask-answer .aa-cites li { color: var(--cream); }
.tile.dark .ask-answer .aa-cites li::before { color: var(--gold-warm); }
.tile.dark .ask-answer .aa-cites li a {
color: var(--cream);
text-decoration-color: rgba(245,235,212,0.35);
}
.tile.dark .ask-answer .aa-cites li a:hover {
color: var(--gold-warm);
text-decoration-color: var(--gold-warm);
}
.tile.dark .ask-answer .aa-readmore { border-top-color: rgba(255,255,255,0.14); }
.tile.dark .ask-answer .aa-readmore-label { color: rgba(245,235,212,0.6); }
.tile.dark .ask-answer .aa-readmore ul a {
color: var(--cream);
text-decoration-color: rgba(245,235,212,0.35);
}
.tile.dark .ask-answer .aa-readmore ul a:hover {
color: var(--gold-warm);
text-decoration-color: var(--gold-warm);
}
.tile.dark .ask-answer .aa-readmore ul a::after { color: var(--gold-warm); }
@keyframes askFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* --- Homepage + HIW hero: decorative animated buttons ---
These buttons are inside auto-playing hero animations. They're not real
controls, so they should not read as clickable. Remove hover FX AND
the pointer cursor. */
.home-hero-ai .bigask .go {
cursor: default !important;
pointer-events: none;
}
.home-hero-ai .bigask .go:hover,
.home-hero-ai .bigask .go:focus-visible {
background: var(--plum-ink);
color: var(--cream);
}
.hiw-hero .hiw-anat-actions a {
cursor: default !important;
pointer-events: none;
}
.hiw-hero .hiw-anat-actions a.primary:hover,
.hiw-hero .hiw-anat-actions a.primary:focus-visible {
background: var(--gold-warm);
color: var(--plum-ink);
}
.hiw-hero .hiw-anat-actions a:not(.primary):hover,
.hiw-hero .hiw-anat-actions a:not(.primary):focus-visible {
background: transparent;
color: var(--cream);
border-color: rgba(245,235,212,0.5);
}
/* --- Mobile nav burger: light color on dark heroes ---
Dark-hero routes tag . While the nav is over
the hero (unscrolled), the burger bars need to be cream. Once scrolled
past the hero the nav flips to cream background and the burger goes
back to plum-ink automatically via the default rule above. */
body[data-nav-tone="dark"] .site-nav:not(.scrolled) .nav-burger span {
background: var(--cream);
}
/* --- Solutions vertical audience chips: dark/filled treatment ---
Override the outlined variant. All chips read as plum-ink filled with
cream text; no visual differentiation between .active and default. */
.beta-hero .chip-row .chip,
.beta-hero .chip-row .chip.active {
background: var(--plum-ink);
color: var(--cream);
border: 1px solid var(--plum-ink);
cursor: default;
}
.beta-hero .chip-row .chip:hover,
.beta-hero .chip-row .chip.active:hover {
background: var(--plum-ink);
color: var(--cream);
border-color: var(--plum-ink);
}
/* --- Solutions "In beta" pill: promote to a dedicated status row --- */
/* Wrap the chapter in a column so the pill sits above the eyebrow, hugging
its content instead of spanning the container. */
.beta-hero .chapter {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.beta-hero .chapter .mm-badge.beta {
margin: 0 !important; /* clear the inline HTML margin-left */
order: -1; /* sit above the eyebrow */
align-self: flex-start; /* hug content */
display: inline-flex;
align-items: center;
white-space: nowrap;
padding: 3px 10px;
font-size: 10px;
}
/* --- Blog article mobile fit --- */
@media (max-width: 900px) {
.art-toc,
.art-main,
.art-rail {
min-width: 0;
max-width: 100%;
}
.art-toc {
overflow-x: auto;
}
.art-toc a {
white-space: normal;
word-break: break-word;
}
}
@media (max-width: 640px) {
/* Read-aloud bar: stack controls vertically on narrow screens */
.read-aloud {
grid-template-columns: 48px 1fr !important;
grid-template-rows: auto auto;
row-gap: 10px;
}
.read-aloud .ra-time,
.read-aloud .ra-speed,
.read-aloud .ra-voice {
grid-column: span 2;
justify-self: start;
}
.read-aloud .ra-progress {
grid-column: 1 / -1;
}
.ra-machine-note {
grid-column: 1 / -1;
max-width: 100% !important;
word-break: break-word;
}
/* Any wide media inside .art-main should not exceed viewport */
.art-main img,
.art-main figure,
.art-main pre,
.art-main .cmp-stat,
.art-main .art-callout {
max-width: 100%;
box-sizing: border-box;
}
}
/* --- Featured card whole-area clickable (blog + resources) --- */
.featured-hero-link,
.v720-featured-playbook-link {
display: block;
color: inherit;
text-decoration: none;
transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
.featured-hero-link:hover,
.v720-featured-playbook-link:hover {
transform: translateY(-2px);
}
.featured-hero-link:focus-visible,
.v720-featured-playbook-link:focus-visible {
outline: 3px solid var(--magenta);
outline-offset: 3px;
border-radius: 6px;
}
.featured-hero-link .featured-hero,
.v720-featured-playbook-link .v720-featured-playbook {
cursor: pointer;
}
/* v7.30/v7.31 · connectors sidebar layout · variant F (white card on cream) */
.int-layout { display: grid; grid-template-columns: 260px 1fr; gap: 56px; align-items: start; }
.int-results { min-width: 0; }
.int-results > section.section { padding-top: 0; padding-bottom: 40px; }
.int-results > section.section:first-child { padding-top: 0; }
.int-results .container { max-width: none; padding: 0; }
.int-sidebar {
position: sticky; top: 96px;
padding: 24px 22px;
border-radius: 12px;
display: flex; flex-direction: column; gap: 22px;
background: var(--white, #ffffff);
border: 1px solid var(--line);
box-shadow: 0 1px 3px rgba(53,20,55,0.04), 0 4px 12px rgba(53,20,55,0.03);
}
/* search input */
.int-search-wrap { position: relative; }
.int-search-ic {
position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}
.int-search-input {
width: 100%; padding: 10px 34px 10px 36px;
border-radius: 4px; border: 1px solid var(--line-strong, var(--line));
background: var(--white, #ffffff); color: var(--plum-ink);
font: 400 14px/1.4 var(--body);
outline: none; transition: border-color 0.15s, box-shadow 0.15s;
box-sizing: border-box;
}
.int-search-input::placeholder { color: var(--muted); }
.int-search-input:focus { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(184,50,128,0.12); }
.int-search-clear {
position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
width: 22px; height: 22px; border: 0; background: transparent; cursor: pointer;
color: var(--muted); font-size: 20px; line-height: 1; padding: 0;
display: flex; align-items: center; justify-content: center; border-radius: 4px;
}
.int-search-clear:hover { color: var(--plum-ink); background: rgba(53,20,55,0.06); }
/* Sidebar filter sections */
.side-block { display: flex; flex-direction: column; gap: 8px; }
.side-label {
font: 700 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
margin: 0 0 4px; color: var(--muted);
}
.chip-col { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.chip-col .chip {
display: inline-block; padding: 7px 12px; border-radius: 4px;
font: 500 13px/1.2 var(--body);
background: transparent; color: var(--plum-ink); border: 1px solid transparent;
cursor: pointer; transition: background 0.15s, color 0.15s;
user-select: none;
}
.chip-col .chip:hover { background: rgba(53,20,55,0.06); }
.chip-col .chip.active { background: var(--plum-ink); color: var(--cream); }
/* Card as anchor: keep visual identical, add external arrow top-right, remove underline */
.int-card {
position: relative;
text-decoration: none; color: inherit;
display: block;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.int-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(53,20,55,0.06); }
.int-card:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; border-radius: 8px; }
.int-ext {
position: absolute; top: 16px; right: 16px;
width: 14px; height: 14px; color: var(--muted); opacity: 0.7;
transition: color 0.15s, opacity 0.15s, transform 0.15s;
}
.int-card:hover .int-ext { color: var(--magenta); opacity: 1; transform: translate(2px, -2px); }
/* Empty state when search returns nothing */
[data-int-group].is-search-empty { display: none; }
.int-results .no-results {
padding: 48px 24px; text-align: center;
color: var(--muted); font: 500 14px/1.5 var(--body);
}
.int-results .no-results.hidden { display: none; }
@media (max-width: 900px) {
.int-layout { grid-template-columns: 1fr; gap: 32px; }
.int-sidebar { position: static; padding: 20px; }
.chip-col { flex-direction: row; flex-wrap: wrap; }
.chip-col .chip { padding: 6px 12px; }
}
/* v7.30 · ask module numbered citations + Read more list */
.aa-body sup.aa-cite {
color: var(--magenta); font-weight: 600; font-size: 0.75em;
vertical-align: super; line-height: 0; margin-left: 1px;
text-decoration: none;
}
.aa-cites {
margin: 20px 0 0; padding: 16px 20px;
border-radius: 8px; background: rgba(53,20,55,0.04);
list-style: none; counter-reset: aa-cite;
}
.aa-cites li {
position: relative; padding-left: 28px; counter-increment: aa-cite;
font: 400 13px/1.5 var(--body); color: var(--plum-ink);
margin-bottom: 8px;
}
.aa-cites li:last-child { margin-bottom: 0; }
.aa-cites li::before {
content: "[" counter(aa-cite) "]";
position: absolute; left: 0; top: 0;
color: var(--magenta); font-weight: 600; font-size: 12px;
font-family: var(--mono);
}
.aa-cites li a { color: var(--plum-ink); text-decoration: underline; text-decoration-color: var(--line-strong, var(--line)); text-underline-offset: 3px; }
.aa-cites li a:hover { color: var(--magenta); text-decoration-color: var(--magenta); }
.aa-readmore {
margin: 20px 0 0; padding-top: 16px;
border-top: 1px solid var(--line);
}
.aa-readmore-label {
font: 700 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
margin: 0 0 12px; color: var(--muted);
}
.aa-readmore ul {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 8px;
}
.aa-readmore ul a {
display: inline-flex; align-items: baseline; gap: 6px;
font: 500 14px/1.4 var(--body); color: var(--plum-ink);
text-decoration: underline; text-decoration-color: var(--line-strong, var(--line)); text-underline-offset: 3px;
}
.aa-readmore ul a:hover { color: var(--magenta); text-decoration-color: var(--magenta); }
.aa-readmore ul a::after { content: "→"; color: var(--magenta); font-size: 0.9em; margin-left: 2px; }
/* v7.31.2 · beta-apply pages: compact hero + tighter form gap so the survey
is visible above the fold. Warm canvas is inherited from the body. */
.page-hero.compact { padding: 28px 0 20px; border-bottom: 0; }
.page-hero.compact + .section { padding-top: 12px; }
@media (max-width: 720px) {
.page-hero.compact { padding: 20px 0 14px; }
.page-hero.compact + .section { padding-top: 8px; }
}
/* ==========================================================================
v7.37 · Scroll reveal — variant A
Fade + 12px lift, 900ms expo-out, applied via IntersectionObserver.
Add class="reveal-a" to any block; JS toggles .is-visible when it scrolls in.
Existing .rv rv1/rv2 keyframe reveals are unaffected.
========================================================================== */
.reveal-a {
opacity: 0;
transform: translateY(12px);
transition:
opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.reveal-a.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.reveal-a { opacity: 1; transform: none; transition: none; }
}
/* ==========================================================================
v7.37 · Product scroller (in-hero + homepage between HIW and Solutions)
Four dashboards, 7s autoplay, previous+next peek, continuous progress bar,
pause on hover/focus, swipe on mobile, WCAG 2.2.2 compliant.
========================================================================== */
.product-scroller-section { background: var(--paper); padding: 80px 0; }
.product-scroller-section .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.product-scroller-section .ps-head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.product-scroller-section .ps-eyebrow {
display: inline-block;
font: 500 11px/1 var(--mono);
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--magenta); margin-bottom: 14px;
}
.product-scroller-section .ps-headline {
font: 900 32px/1.15 var(--display);
letter-spacing: -0.02em; color: var(--plum-ink); margin: 0 0 12px;
}
.product-scroller-section .ps-lede {
font: 400 16px/1.5 var(--body);
color: var(--plum-ink); margin: 0;
}
@media (min-width: 720px) {
.product-scroller-section .ps-headline { font-size: 40px; }
}
.scroller {
position: relative;
margin: 0 auto;
cursor: grab;
}
.scroller.is-dragging { cursor: grabbing; }
.scroller.is-dragging .scroller-viewport { cursor: grabbing; }
.scroller-viewport {
--slide-w: 74%;
--gap: 2%;
position: relative;
overflow: hidden;
background: transparent;
touch-action: pan-y pinch-zoom;
aspect-ratio: calc(1400 / 900 / 0.74);
cursor: grab;
-webkit-user-select: none;
user-select: none;
}
.scroller-viewport img, .scroller-viewport picture { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
@media (max-width: 720px) {
.scroller-viewport { --slide-w: 84%; --gap: 2%; aspect-ratio: calc(1400 / 900 / 0.84); }
}
.scroller-track {
position: absolute; inset: 0;
display: flex; align-items: stretch; gap: var(--gap);
transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
transform: translateX(calc(50% - (var(--slide-w) / 2) - var(--i, 0) * (var(--slide-w) + var(--gap)) + var(--drag-x, 0px)));
}
.scroller.is-dragging .scroller-track { transition: none; }
.scroller-track.no-transition { transition: none; }
.scroller .slide {
flex: 0 0 var(--slide-w);
height: 100%;
position: relative;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--line);
box-shadow: 0 20px 60px -30px rgba(53, 20, 55, 0.25);
background: var(--cream);
transition: opacity 400ms ease, transform 400ms ease, filter 400ms ease;
opacity: 0.28; filter: saturate(0.6); transform: scale(0.95); transform-origin: center;
}
.scroller .slide.is-current { opacity: 1; filter: saturate(1); transform: scale(1); }
.scroller .slide img {
display: block; width: 100%; height: 100%;
object-fit: cover; object-position: center center;
user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.scroller-chrome {
position: absolute; top: 0;
left: calc((100% - 74%) / 2);
right: calc((100% - 74%) / 2);
bottom: 0; pointer-events: none; z-index: 3;
}
@media (max-width: 720px) {
.scroller-chrome { left: calc((100% - 84%) / 2); right: calc((100% - 84%) / 2); }
}
.scroller-pause {
position: absolute; top: 16px; right: 16px; z-index: 4;
background: rgba(53, 20, 55, 0.82); color: var(--cream);
border: none; padding: 8px 14px; border-radius: 999px; cursor: pointer;
font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
display: inline-flex; align-items: center; gap: 8px;
backdrop-filter: blur(6px);
opacity: 0; transform: translateY(-4px);
transition: opacity 220ms ease, transform 220ms ease, background 180ms ease;
pointer-events: none;
}
@media (hover: hover) {
.scroller:hover .scroller-pause,
.scroller-pause:focus-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
}
.scroller.controls-visible .scroller-pause,
.scroller.is-paused .scroller-pause { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scroller-pause:hover { background: rgba(53, 20, 55, 0.95); }
.scroller-pause:focus-visible { outline: 2px solid var(--gold-warm); outline-offset: 2px; }
.scroller-pause .icon { width: 10px; height: 12px; display: inline-flex; align-items: center; justify-content: center; }
.scroller-pause .icon-play { display: none; }
.scroller-pause[data-paused="true"] .icon-pause { display: none; }
.scroller-pause[data-paused="true"] .icon-play { display: inline-flex; }
.scroller .sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.scroller-progress {
position: absolute; bottom: 0; left: 0; right: 0;
height: 3px; background: rgba(255, 255, 255, 0.18); z-index: 3; overflow: hidden;
}
.scroller-progress .fill { height: 100%; width: 0%; background: var(--magenta); transition: width 100ms linear; }
.scroller-hint {
position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
background: rgba(53, 20, 55, 0.82); color: var(--cream);
padding: 6px 12px; border-radius: 999px;
font: 500 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
z-index: 4; opacity: 0; pointer-events: none; backdrop-filter: blur(6px);
transition: opacity 400ms ease; white-space: nowrap;
}
.scroller-hint.show { opacity: 1; }
@media (hover: hover) { .scroller-hint { display: none; } }
@media (prefers-reduced-motion: reduce) {
.scroller-track, .scroller-pause, .scroller-progress .fill, .scroller .slide { transition: none; }
.scroller-progress { display: none; }
.scroller-hint { display: none !important; }
.scroller .slide { opacity: 1; filter: none; transform: none; }
}
/* v7.37 · product hero scroller — sits inside .ph-wideview slot */
.ph-wideview-scroller {
background: transparent;
padding: 0;
margin-top: 32px;
max-width: 1120px;
margin-left: auto;
margin-right: auto;
}
.ph-wideview-scroller .scroller { width: 100%; }
.ph-wideview-scroller .scroller-viewport {
background: transparent;
}
.ph-wideview-scroller .scroller .slide {
border-color: rgba(255,255,255,0.10);
box-shadow: 0 30px 80px -30px rgba(0,0,0,0.6);
}
/* v7.38 · loading-fill CTA
4px Strategic Gold → Signal Magenta gradient strip, 8px below button,
L→R reveal on 6s infinite cycle. Only on primary CTAs, sparingly.
Respects prefers-reduced-motion. */
.btn-loading-fill {
position: relative;
}
.btn-loading-fill::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -8px;
height: 4px;
border-radius: 2px;
background-color: transparent;
background-image: linear-gradient(90deg, #C99700 0%, #B83280 100%);
clip-path: inset(0 100% 0 0);
animation: none;
pointer-events: none;
}
.btn-loading-fill.is-visible::after {
animation: cohesion-lf 6s cubic-bezier(0.45, 0.05, 0.35, 1) 1 forwards;
}
@keyframes cohesion-lf {
0% { clip-path: inset(0 100% 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
.btn-loading-fill.is-visible::after {
animation: none;
clip-path: inset(0 0 0 0);
}
}
/* v7.38 · KPI dashboard, in-body variant (product.html FIG-15D)
Re-shape .ph-wideui when placed inside a light-cream body section:
symmetric border-radius, softer shadow (no upward-glow from dark hero). */
.ph-wideview-in-body {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.ph-wideview-in-body .ph-wideui {
border-radius: 14px;
box-shadow: 0 20px 60px -20px rgba(53, 20, 55, 0.18);
border: 1px solid rgba(53, 20, 55, 0.08);
}
/* ==========================================================================
v7.38 · Subscribe module — Option A (editorial line-input) + inline card
Cookie: cs_sub=1
========================================================================== */
/* --- shared subscribed state --- */
.sub-subscribed{display:flex;align-items:center;gap:12px;font-family:'Satoshi','Onest',system-ui,sans-serif;color:var(--plum-ink,#351437)}
.sub-subscribed .sub-check{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#C99700;color:#fff;flex:0 0 28px}
.sub-subscribed .sub-subscribed-text{font-weight:600;font-size:1.0625rem;letter-spacing:-0.005em}
.sub-subscribed.sub-tone-plum{color:#FAF4E3}
.sub-subscribed.sub-tone-plum .sub-check{background:#C99700;color:#351437}
/* --- Option A · editorial line-input (index heroes) --- */
.subA{margin-top:36px;max-width:640px}
.subA-label{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;color:#B83280;margin:0 0 12px}
.subA-plum .subA-label{color:#F0B429}
.subA-row{display:flex;align-items:flex-end;gap:16px;border-bottom:2px solid #B83280;padding:4px 0 10px}
.subA-plum .subA-row{border-bottom-color:#C99700}
.subA-row input[type="email"]{flex:1;min-width:0;border:0;background:transparent;font-family:'Satoshi','Onest',system-ui,sans-serif;font-size:1.125rem;color:#351437;padding:6px 0;outline:none;letter-spacing:-0.005em}
.subA-row input[type="email"]::placeholder{color:#7A6A7C}
.subA-plum .subA-row input[type="email"]{color:#FAF4E3}
.subA-plum .subA-row input[type="email"]::placeholder{color:#C9B8CC}
.subA-btn{border:0;background:transparent;padding:6px 2px;font-family:'Satoshi','Onest',system-ui,sans-serif;font-weight:700;font-size:1.0625rem;color:#B83280;cursor:pointer;letter-spacing:-0.005em;white-space:nowrap;transition:color .15s ease,transform .15s ease}
.subA-btn:hover{color:#7A1F5C;transform:translateX(2px)}
.subA-btn:focus-visible{outline:2px solid #B83280;outline-offset:4px;border-radius:2px}
.subA-plum .subA-btn{color:#F0B429}
.subA-plum .subA-btn:hover{color:#FFD97A}
.subA-plum .subA-btn:focus-visible{outline-color:#F0B429}
.subA-consent{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-family:'Satoshi','Onest',system-ui,sans-serif;font-size:0.8125rem;color:#5A4A5C;line-height:1.5}
.subA-plum .subA-consent{color:#C9B8CC}
.subA-consent input[type="checkbox"]{margin-top:3px;width:14px;height:14px;accent-color:#B83280;cursor:pointer;flex:0 0 14px}
.subA-plum .subA-consent input[type="checkbox"]{accent-color:#F0B429}
.subA-consent a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.subA-consent a:hover{color:#B83280}
.subA-plum .subA-consent a:hover{color:#F0B429}
.subA-error{margin-top:10px;font-family:'Satoshi','Onest',system-ui,sans-serif;font-size:0.8125rem;color:#A12C7B;font-weight:500}
.subA-plum .subA-error{color:#F0B429}
@media (max-width:600px){
.subA{margin-top:28px}
.subA-row{flex-direction:column;align-items:stretch;gap:6px;border-bottom-width:2px;padding-bottom:12px}
.subA-btn{align-self:flex-start;padding:8px 0 2px}
.subA-consent{font-size:0.75rem}
}
/* --- inline card variant (reader pages: blog-article + resource-reader) --- */
.subC{background:#F7E8BD;border:1px solid #E8DEB8;border-left:4px solid #B83280;padding:28px 32px;border-radius:6px;font-family:'Satoshi','Onest',system-ui,sans-serif;max-width:720px;margin:0 auto}
.subC-eyebrow{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;color:#B83280;margin:0 0 10px}
.subC-title{font-family:'Satoshi','Onest',system-ui,sans-serif;font-weight:700;font-size:1.375rem;line-height:1.25;letter-spacing:-0.01em;color:#351437;margin:0 0 8px}
.subC-sub{font-size:0.9375rem;color:#5A4A5C;margin:0 0 18px;line-height:1.5}
.subC-row{display:flex;gap:10px;align-items:stretch}
.subC-row input[type="email"]{flex:1;min-width:0;border:1px solid #D6C89E;background:#FAF4E3;font-family:'Satoshi','Onest',system-ui,sans-serif;font-size:1rem;color:#351437;padding:11px 14px;border-radius:4px;outline:none}
.subC-row input[type="email"]:focus{border-color:#B83280;box-shadow:0 0 0 3px rgba(184,50,128,0.15)}
.subC-row input[type="email"]::placeholder{color:#8A7A8C}
.subC-btn{border:0;background:#B83280;color:#fff;font-family:'Satoshi','Onest',system-ui,sans-serif;font-weight:700;font-size:0.9375rem;padding:11px 22px;border-radius:4px;cursor:pointer;letter-spacing:-0.005em;transition:background .15s ease}
.subC-btn:hover{background:#7A1F5C}
.subC-btn:focus-visible{outline:2px solid #351437;outline-offset:2px}
.subC-consent{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:0.8125rem;color:#5A4A5C;line-height:1.5}
.subC-consent input[type="checkbox"]{margin-top:3px;width:14px;height:14px;accent-color:#B83280;cursor:pointer;flex:0 0 14px}
.subC-consent a{color:#351437;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.subC-consent a:hover{color:#B83280}
.subC-error{margin-top:10px;font-size:0.8125rem;color:#A12C7B;font-weight:500}
.sub-subscribed-card{background:#F7E8BD;border:1px solid #E8DEB8;border-left:4px solid #C99700;padding:28px 32px;border-radius:6px;max-width:720px;margin:0 auto;justify-content:center}
@media (max-width:600px){
.subC{padding:22px 20px}
.subC-title{font-size:1.1875rem}
.subC-row{flex-direction:column;gap:10px}
.subC-btn{padding:12px 18px}
.sub-subscribed-card{padding:22px 20px}
}
/* =====================================================================
* Author-state toggle (dev-only) — ships on blog-article + resource-reader
* Rendered only when ?dev=1 is present. Sits above site chrome.
* ===================================================================== */
.dev-author-strip {
position: sticky;
top: 0;
z-index: 10000;
background: #1a0d1e;
color: #f7e8bd;
padding: 8px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-bottom: 2px solid #b83280;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
line-height: 1.2;
}
.dev-author-strip__brand { display: flex; align-items: center; gap: 8px; }
.dev-author-strip__brand b { color: white; font-weight: 700; letter-spacing: 0.14em; }
.dev-author-strip__label { opacity: 0.85; }
.dev-author-strip__dot {
width: 7px; height: 7px; border-radius: 999px;
background: #b83280;
box-shadow: 0 0 0 3px rgba(184, 50, 128, 0.18);
}
.dev-author-strip__chips { display: flex; align-items: center; gap: 6px; }
.dev-author-strip__chips-lbl { opacity: 0.7; margin-right: 4px; }
.dev-author-strip__chips button {
background: transparent;
color: #f7e8bd;
border: 1px solid rgba(247, 232, 189, 0.28);
padding: 4px 10px;
border-radius: 4px;
font-family: inherit;
font-size: inherit;
text-transform: inherit;
letter-spacing: inherit;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.dev-author-strip__chips button:hover {
border-color: rgba(247, 232, 189, 0.55);
color: white;
}
.dev-author-strip__chips button.on {
background: #b83280;
color: white;
border-color: #b83280;
}
.dev-author-strip__chips button:focus-visible {
outline: 2px solid #c99700;
outline-offset: 2px;
}
.dev-author-strip__right { display: flex; align-items: center; gap: 16px; }
.dev-author-strip__flag { opacity: 0.6; }
.dev-author-strip__hide {
background: transparent;
color: #f7e8bd;
opacity: 0.75;
border: 0;
padding: 4px 6px;
font-family: inherit;
font-size: inherit;
text-transform: inherit;
letter-spacing: inherit;
cursor: pointer;
}
.dev-author-strip__hide:hover { opacity: 1; color: white; }
@media (max-width: 720px) {
.dev-author-strip {
flex-wrap: wrap;
padding: 6px 12px;
gap: 8px;
}
.dev-author-strip__chips { flex-wrap: wrap; }
.dev-author-strip__chips button { padding: 3px 7px; }
.dev-author-strip__right { margin-left: auto; }
}
/* Sponsored bar (only rendered by dev toggle in sponsored state) */
.dev-sponsored-bar {
background: #351437;
color: #faf4e3;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
text-align: center;
padding: 10px 16px;
}
/* Guest-author pill (added to meta row) */
.v720-guest-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.28);
color: #faf4e3;
padding: 3px 9px;
border-radius: 999px;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 9.5px;
font-weight: 600;
}
/* Partner lockup (added to meta row in co-authored state) */
.v720-partner-lockup {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px 4px 4px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.09);
border: 1px solid rgba(255, 255, 255, 0.22);
font-size: 12px;
color: #faf4e3;
}
.v720-partner-logo {
width: 20px; height: 20px;
border-radius: 4px;
background: #c99700;
color: #351437;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 800;
font-family: 'Satoshi', 'DM Sans', system-ui, sans-serif;
}
/* Sponsor note (added to meta row in sponsored state) */
.v720-sponsor-note {
font-style: italic;
opacity: 0.88;
padding-left: 12px;
border-left: 2px solid #b83280;
color: #faf4e3;
}
.v720-res-hero .v720-sponsor-note { border-left-color: #c99700; }
/* Co-author avatars stacked in meta row */
.v720-coauth-avatars { display: inline-flex; margin-right: 8px; }
.v720-coauth-av {
width: 22px; height: 22px;
border-radius: 999px;
background: #b83280;
color: white;
font-size: 10px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1.5px solid #4a1e56;
font-family: 'Satoshi', 'DM Sans', system-ui, sans-serif;
}
.v720-coauth-av + .v720-coauth-av { margin-left: -6px; }
.v720-res-hero .v720-coauth-av { background: #c99700; color: #351437; border-color: #351437; }
/* Byline-strip variant: second avatar for co-authored (blog-article only) */
.v720-byline-author { display: flex; align-items: center; gap: 16px; }
.v720-byline-strip.is-coauthored .v720-byline-left {
flex-wrap: wrap;
row-gap: 12px;
column-gap: 24px;
}
.v720-byline-avatar--co { background: #7a1f5c; color: #faf4e3; }
/* ==========================================================================
v7.42 · Vertical page motion layer (use-case + solutions templates)
Paired with js/vertical-motion.js. Every beat degrades to a static end
state under prefers-reduced-motion, and to a calm profile at <=720px.
========================================================================== */
/* Hero title measure: the use-case hero has no photo column, so the headline
needs its own measure to keep the ragging tight. */
.beta-hero[data-component="use-case-hero"] .display-md { max-width: 22ch; }
/* 1 · hero em underline draw */
.hero-title-motion em {
position: relative;
display: inline-block;
font-style: normal;
}
.hero-title-motion em::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -0.06em;
height: 3px;
border-radius: 2px;
background: var(--plum-ink);
transform: scaleX(0);
transform-origin: left center;
transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-title-motion em.is-drawn::after { transform: scaleX(1); }
/* 2 · hero chip cascade */
.chip-cascade > * {
opacity: 0;
transform: translateY(6px);
transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.chip-cascade.is-cascaded > * { opacity: 1; transform: none; }
/* 3 · ed-row divider draw, number count-up, metric badge slide-in */
.ed-row.reveal-a { position: relative; }
.ed-row.reveal-a::before {
content: "";
position: absolute;
top: -1px; left: 0; right: 0;
height: 1.5px;
background: var(--plum-ink);
transform: scaleX(0);
transform-origin: left center;
transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ed-row.reveal-a.is-visible::before { transform: scaleX(1); }
.ed-row.reveal-a > .label {
opacity: 0;
transform: translateX(12px);
transition: opacity 620ms var(--ease) 220ms, transform 620ms var(--ease) 220ms;
}
.ed-row.reveal-a.is-visible > .label { opacity: 1; transform: none; }
/* 4 · stat-strip ambient wash drift */
.stat-strip { position: relative; isolation: isolate; }
.stat-strip::after {
content: "";
position: absolute;
inset: -18px -6% -18px -6%;
z-index: -1;
background:
radial-gradient(46% 68% at 18% 42%, rgba(253, 231, 243, 0.85) 0%, rgba(253, 231, 243, 0) 72%),
radial-gradient(40% 62% at 78% 58%, rgba(255, 242, 191, 0.7) 0%, rgba(255, 242, 191, 0) 74%);
animation: ci-wash-drift 26s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes ci-wash-drift {
0% { transform: translate3d(-1.5%, 0, 0) scale(1); }
100% { transform: translate3d(1.5%, -1.2%, 0) scale(1.04); }
}
/* 5 · connector card stagger + hover tilt */
.card-stagger {
opacity: 0;
transform: translateY(10px);
transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.is-staggered .card-stagger { opacity: 1; transform: none; }
@media (hover: hover) and (min-width: 721px) {
.is-staggered .card-stagger:hover {
transform: translateY(-3px) rotate(-0.35deg);
transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
box-shadow: 0 14px 34px -18px rgba(53, 20, 55, 0.32);
}
}
/* 6 · word-by-word quote reveal (use-case page) */
.quote-words .qw {
display: inline-block;
opacity: 0;
transform: translateY(8px);
transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.quote-words.is-shown .qw { opacity: 1; transform: none; }
.quote-attrib {
opacity: 0;
transition: opacity 520ms var(--ease);
}
.quote-attrib.is-shown { opacity: 1; }
.quote-words.quote-plain { opacity: 0; transition: opacity 600ms var(--ease); }
.quote-words.quote-plain.is-shown { opacity: 1; }
/* 5b · connector card hover detail: mark wash + arrow travel */
.card-stagger .int-mark { transition: background-color 260ms var(--ease); }
.card-stagger .int-ext { transition: transform 260ms var(--ease); }
@media (hover: hover) and (min-width: 721px) {
.is-staggered .card-stagger:hover .int-mark { background: var(--magenta-soft); }
.is-staggered .card-stagger:hover .int-ext { transform: translateX(4px); }
}
/* 7 · cross-nav chip hover, ink bleeding in from the left */
[data-component="vertical-cross-nav"] .chip {
position: relative;
overflow: hidden;
transition: transform 220ms var(--ease), border-color 220ms var(--ease);
}
[data-component="vertical-cross-nav"] .chip::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--magenta-soft);
transform: translateX(-101%);
transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (min-width: 721px) {
[data-component="vertical-cross-nav"] .chip:hover { transform: translateY(-2px); border-color: var(--magenta); }
[data-component="vertical-cross-nav"] .chip:hover::before,
[data-component="vertical-cross-nav"] .chip:focus-visible::before { transform: translateX(0); }
}
/* 8 · conversion band label pulse plus travelling tick */
.band-pulse { animation: ci-band-fade 3s ease-in-out infinite; }
.band-pulse::before { transform-origin: left center; animation: ci-band-tick 3s cubic-bezier(0.45, 0.05, 0.35, 1) infinite; }
@keyframes ci-band-fade {
0%, 100% { opacity: 0.85; }
50% { opacity: 1; }
}
@keyframes ci-band-tick {
0% { transform: scaleX(0.4); }
45% { transform: scaleX(1.35); }
70%, 100% { transform: scaleX(1); }
}
/* Calm profile: <=720px */
@media (max-width: 720px) {
.chip-cascade > * { opacity: 1; transform: none; transition: none; }
.ed-row.reveal-a::before { display: none; }
.stat-strip::after { animation: none; }
.card-stagger { transition-duration: 420ms; }
.band-pulse, .band-pulse::before { animation: none; }
}
/* Static end state: reduced motion wins over everything above */
@media (prefers-reduced-motion: reduce) {
.hero-title-motion em::after { transform: scaleX(1); transition: none; }
.chip-cascade > * { opacity: 1; transform: none; transition: none; }
.ed-row.reveal-a::before { transform: scaleX(1); transition: none; }
.ed-row.reveal-a > .label { opacity: 1; transform: none; transition: none; }
.stat-strip::after { animation: none; }
.card-stagger { opacity: 1; transform: none; transition: none; }
.is-staggered .card-stagger:hover { transform: none; box-shadow: none; }
.quote-words .qw { opacity: 1; transform: none; transition: none; }
.quote-words.quote-plain { opacity: 1; }
.quote-attrib { opacity: 1; }
[data-component="vertical-cross-nav"] .chip { transition: none; }
[data-component="vertical-cross-nav"] .chip:hover { transform: none; }
[data-component="vertical-cross-nav"] .chip::before { display: none; }
.band-pulse, .band-pulse::before { animation: none; }
}
@media (max-width: 960px) {
.beta-hero[data-component="use-case-hero"] .display-md { max-width: 18ch; }
}
@media (max-width: 640px) {
.beta-hero[data-component="use-case-hero"] .display-md { max-width: none; }
}
/* ============================================================
v7.43 · Vertical page product UI beats
New: .section-ui band, .ui-card shell, .ui-beat reveal,
.ui-unfold paper unfold, .tick-cascade / .tick-pill, .read-line.
Motion is gated by the data-motion full/calm/static attribute
set by js/vertical-motion.js, plus a hard reduced-motion reset.
============================================================ */
/* --- band wrapper: tighter vertical rhythm than .section ---- */
.section.section-ui { padding: 56px 0; }
.section.section-ui .ui-eyebrow { margin-bottom: 20px; }
.section.section-ui + .section.section-ui { padding-top: 0; }
.ui-eyebrow {
font-family: var(--body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--plum-deep);
display: flex;
align-items: center;
gap: 12px;
margin: 0;
}
.ui-eyebrow::before {
content: "";
width: 40px;
height: 1.5px;
background: var(--magenta);
flex: none;
}
/* --- the card shell -------------------------------------- */
.ui-card {
position: relative;
max-width: 1100px;
margin: 0 auto;
background: var(--cream);
border: 1px solid rgba(53, 20, 55, 0.08);
border-radius: 20px;
box-shadow: 0 6px 24px rgba(53, 20, 55, 0.06);
padding: 16px 16px 4px;
overflow: hidden;
}
.ui-card.ui-card-portrait { max-width: 720px; }
.ui-card > img {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
}
.ui-caption {
font-family: var(--body);
font-size: 15px;
line-height: 1.55;
color: var(--muted);
margin: 14px 4px 12px;
max-width: 76ch;
}
.ui-caption strong { color: var(--plum-ink); font-weight: 600; }
/* --- 1 · UI card reveal + magenta wash glow pulse --------- */
.ui-beat {
opacity: 0;
transform: translateY(24px);
transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ui-beat.is-lit { opacity: 1; transform: none; }
.ui-beat::after {
content: "";
position: absolute;
inset: -20%;
pointer-events: none;
opacity: 0;
filter: blur(48px);
background: radial-gradient(closest-side, rgba(184, 50, 128, 0.55), rgba(184, 50, 128, 0) 72%);
}
.ui-beat.is-glowing::after { animation: ci-ui-glow 900ms ease-in-out 1; }
@keyframes ci-ui-glow {
0% { opacity: 0; }
45% { opacity: 0.35; }
100% { opacity: 0; }
}
/* --- 2 · paper unfold (Tuesday brief) -------------------- */
.ui-unfold {
transform: scale(0.96) translateY(18px);
opacity: 0;
box-shadow: 0 6px 24px rgba(53, 20, 55, 0.06);
transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ui-unfold.is-lit {
opacity: 1;
transform: scale(1) translateY(0);
box-shadow: 0 24px 64px rgba(53, 20, 55, 0.14);
}
/* --- 3 · tick cascade ------------------------------------ */
.tick-cascade {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 16px 4px 4px;
list-style: none;
padding: 0;
}
.tick-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
border-radius: 999px;
background: var(--magenta-soft);
border: 1px solid rgba(53, 20, 55, 0.06);
font-family: var(--body);
font-size: 13px;
font-weight: 500;
color: var(--plum-ink);
opacity: 0.35;
transition: opacity 260ms var(--ease);
}
.tick-pill .tick-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--magenta);
flex: none;
transform: scale(1);
}
.tick-pill.is-lit { opacity: 1; }
.tick-pill.is-lit .tick-dot { animation: ci-tick-dot 420ms cubic-bezier(0.22, 1, 0.36, 1) 1; }
@keyframes ci-tick-dot {
0% { transform: scale(1); }
50% { transform: scale(1.4); }
100% { transform: scale(1); }
}
/* --- 4 · read line across the stack section --------------- */
.read-line { position: relative; }
.read-line::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--magenta), rgba(184, 50, 128, 0.15));
transform: scaleX(0);
transform-origin: left center;
transition: transform 500ms cubic-bezier(0.45, 0.05, 0.35, 1);
}
.read-line.is-read::before { transform: scaleX(1); }
/* --- inline right-side UI card in a section grid ---------- */
.ui-card-inline {
max-width: none;
margin: 0;
padding: 14px 14px 4px;
}
.ui-card-inline .ui-caption { font-size: 13px; margin: 10px 2px 10px; }
/* --- calm profile: <=720px and data-motion="calm" --------- */
[data-motion="calm"] .ui-beat::after,
[data-motion="calm"] .ui-card.is-glowing::after { display: none; }
[data-motion="calm"] .ui-beat { transition-duration: 420ms; }
[data-motion="calm"] .ui-unfold {
transform: none;
box-shadow: 0 6px 24px rgba(53, 20, 55, 0.06);
transition: opacity 420ms var(--ease);
}
[data-motion="calm"] .ui-unfold.is-lit { box-shadow: 0 6px 24px rgba(53, 20, 55, 0.06); }
[data-motion="calm"] .tick-pill { transition: none; }
[data-motion="calm"] .tick-pill.is-lit .tick-dot { animation: none; }
/* --- static profile: final states, no animation ----------- */
[data-motion="static"] .ui-beat,
[data-motion="static"] .ui-unfold { opacity: 1; transform: none; transition: none; }
[data-motion="static"] .ui-beat::after { display: none; }
[data-motion="static"] .tick-pill { opacity: 1; transition: none; }
[data-motion="static"] .tick-pill .tick-dot { animation: none; }
[data-motion="static"] .read-line::before { transform: scaleX(1); transition: none; }
/* --- mobile: full width minus 32px gutters ---------------- */
@media (max-width: 720px) {
.section.section-ui { padding: 40px 0; }
.ui-card,
.ui-card.ui-card-portrait {
max-width: none;
width: calc(100% - 32px);
margin: 0 auto;
padding: 12px 12px 2px;
border-radius: 16px;
}
.ui-card-inline { width: auto; }
.ui-caption { font-size: 14px; margin: 12px 2px 10px; }
.tick-pill { font-size: 12px; padding: 6px 11px; }
}
/* --- reduced motion wins over everything above ------------ */
@media (prefers-reduced-motion: reduce) {
.ui-beat, .ui-unfold {
opacity: 1;
transform: none;
transition: none;
box-shadow: 0 6px 24px rgba(53, 20, 55, 0.06);
}
.ui-beat::after { display: none; }
.tick-pill { opacity: 1; transition: none; }
.tick-pill .tick-dot { animation: none; }
.read-line::before { transform: scaleX(1); transition: none; }
}
/* v7.43 · FIG-11C split grid on home-services: stacked decision tiles at
left, the integration-read UI card as a sticky-height right column. */
.ui-grid-split { align-items: start; }
.ui-grid-col { display: grid; gap: 24px; }
@media (max-width: 960px) {
.ui-grid-col { gap: 20px; }
}
/* v7.43b · nightly join card header (home services, image-free tick card) */
.ui-card .tick-head {
font-family: var(--body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--plum-deep);
margin: 0 0 20px;
}
/* ==========================================================================
v7.44 · Vertical page story scroller
Reuses the shipped .scroller component (js/product-scroller.js) inside a
standard .section on use-case.html and home-services.html. Only two things
are new: the tighter section rhythm, and a 4:3 slide box so the generated
story cards render at their native aspect with no crop.
========================================================================== */
.section.section-scroller { padding: 64px 0; }
.section.section-scroller + .section.section-ui { padding-top: 0; }
.section-scroller .scroller { width: 100%; max-width: 1120px; }
.section-scroller .scroller-viewport { aspect-ratio: calc(4 / 3 / 0.74); }
.section-scroller .scroller .slide { border-radius: 20px; }
.section-scroller .scroller .slide img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: 20px;
}
.section-scroller .scroller-progress { background: rgba(53, 20, 55, 0.12); }
@media (max-width: 720px) {
.section.section-scroller { padding: 44px 0; }
.section-scroller .scroller-viewport { aspect-ratio: calc(4 / 3 / 0.84); }
}
/* ============================================================================
PROTOTYPE TEMPLATES — appended v7.49 · scoped under .proto-scope
Source: cohesion-templates-prototype/css/{bento.css, templates.css}
Applied on: home-services.html, real-estate.html, use-case.html (below-hero)
Do NOT edit these rules without regenerating from the prototype source.
============================================================================ */
/* Prototype token shim — maps prototype-only tokens onto live-site variables
so appended selectors resolve correctly. Scoped to .proto-scope so it never
affects live-site rules outside the rewritten templates. */
.proto-scope {
--canvas: var(--cream);
--canvas-soft: #F5EBD0;
--canvas-76: rgba(250, 244, 227, 0.76);
--canvas-18: rgba(250, 244, 227, 0.18);
--plum-ink-72: rgba(53, 20, 55, 0.72);
--plum-ink-16: rgba(53, 20, 55, 0.16);
--plum-ink-8: rgba(53, 20, 55, 0.08);
--magenta-wash: #FDE7F3;
--gold-tint: #FFF2BF;
--plum-deep: var(--plum);
--charcoal-x: #121014;
}
/* Bento component — the three canonical arrangements used across the three lanes
SIXUNEVEN · SIXEVEN · PHBLEED
Per component spec: display:grid with 1px gap for dividers, radius 0, no shadows.
*/
.proto-scope .bento {
display: grid;
gap: 1px;
background: currentColor; /* becomes the divider color via bg */
color: var(--plum-ink); /* default divider tone; override per treatment */
}
.proto-scope .bento-tile {
padding: 32px;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 16px;
transition: background 200ms ease;
}
.proto-scope .bento-tile.short { padding: 24px; gap: 12px; }
.proto-scope .bento-micro {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.7;
}
.proto-scope .bento-lead-q {
font-size: 24px;
line-height: 1.35;
font-weight: 500;
letter-spacing: -0.01em;
}
.proto-scope .bento-short-q {
font-size: 15px;
line-height: 1.45;
font-weight: 500;
}
.proto-scope .bento-answer-h {
font-size: 24px;
line-height: 1.15;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 8px;
}
.proto-scope .bento-answer-b {
font-size: 14px;
line-height: 1.55;
font-weight: 400;
}
/* -------- Canvas treatment (Warm Canvas field, Plum Ink type) -------- */
.proto-scope .bento.treat-canvas {
color: var(--plum-ink-16); /* dividers */
}
.proto-scope .bento.treat-canvas .bento-tile {
background: var(--canvas);
color: var(--plum-ink-72);
}
.proto-scope .bento.treat-canvas .bento-lead-q,
.proto-scope .bento.treat-canvas .bento-short-q { color: var(--plum-ink); }
.proto-scope .bento.treat-canvas .bento-tile.answer {
background: var(--plum-ink);
color: var(--canvas-76);
}
.proto-scope .bento.treat-canvas .bento-tile.answer .bento-answer-h { color: var(--canvas); }
/* -------- Plum Ink treatment (Plum Ink field, Warm Canvas type) -------- */
.proto-scope .bento.treat-plum {
color: var(--canvas-18); /* dividers */
}
.proto-scope .bento.treat-plum .bento-tile {
background: var(--plum-ink);
color: var(--canvas-76);
}
.proto-scope .bento.treat-plum .bento-lead-q,
.proto-scope .bento.treat-plum .bento-short-q { color: var(--canvas); }
.proto-scope .bento.treat-plum .bento-tile.answer {
background: var(--gold-tint);
color: var(--plum-ink);
}
.proto-scope .bento.treat-plum .bento-tile.answer .bento-answer-h { color: var(--plum-ink); }
/* -------- SIXUNEVEN: 4 cols · lead + answer span 2 · 'a a b c' / 'd e f f' -------- */
.proto-scope .bento.sixuneven {
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
'lead lead s1 s2'
's3 s4 answer answer';
}
.proto-scope .bento.sixuneven .tile-lead { grid-area: lead; }
.proto-scope .bento.sixuneven .tile-s1 { grid-area: s1; }
.proto-scope .bento.sixuneven .tile-s2 { grid-area: s2; }
.proto-scope .bento.sixuneven .tile-s3 { grid-area: s3; }
.proto-scope .bento.sixuneven .tile-s4 { grid-area: s4; }
.proto-scope .bento.sixuneven .tile-answer { grid-area: answer; }
/* -------- SIXEVEN: 3 equal-width cols · row heights content-driven -------- */
.proto-scope .bento.sixeven {
grid-template-columns: repeat(3, 1fr);
/* No grid-template-rows: rows sized by content per spec.
Top row holds the lead (taller); bottom row shorts + answer. */
}
/* -------- PHBLEED: 3 cols · 'p p q' / 'r s s' · photo spans 2 cols row 1 -------- */
.proto-scope .bento.phbleed {
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
'photo photo q'
'r answer answer';
}
.proto-scope .bento.phbleed .tile-photo { grid-area: photo; position: relative; padding: 0; min-height: 320px; overflow: hidden; }
.proto-scope .bento.phbleed .tile-q { grid-area: q; }
.proto-scope .bento.phbleed .tile-r { grid-area: r; }
.proto-scope .bento.phbleed .tile-answer { grid-area: answer; }
.proto-scope .bento.phbleed .tile-photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* PHBLEED capsule — solid fill, offset 24px from image's left+bottom, max-width 70% */
.proto-scope .phbleed-capsule {
position: absolute;
bottom: 24px;
left: 24px;
max-width: 70%;
padding: 18px 22px;
background: var(--plum-ink);
color: var(--canvas);
pointer-events: none;
}
.proto-scope .bento.treat-canvas .phbleed-capsule { background: var(--plum-ink); color: var(--canvas); }
.proto-scope .bento.treat-plum .phbleed-capsule { background: var(--canvas); color: var(--plum-ink); }
.proto-scope .phbleed-capsule .bento-micro { opacity: 0.6; margin-bottom: 6px; display: block; }
.proto-scope .phbleed-capsule .cap-q {
font-size: 20px;
line-height: 1.35;
font-weight: 500;
letter-spacing: -0.005em;
}
/* -------- PHTILE: 4 cols · 'a a p p' / 'b c d d' · photo tile in mosaic -------- */
.proto-scope .bento.phtile {
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
'lead lead photo photo'
's1 s2 answer answer';
}
.proto-scope .bento.phtile .tile-lead { grid-area: lead; }
.proto-scope .bento.phtile .tile-photo { grid-area: photo; position: relative; padding: 0; min-height: 210px; overflow: hidden; }
.proto-scope .bento.phtile .tile-s1 { grid-area: s1; }
.proto-scope .bento.phtile .tile-s2 { grid-area: s2; }
.proto-scope .bento.phtile .tile-answer { grid-area: answer; }
/* v7.52: when tile-photo has no ![]()
or