/* ========================================================================
Imprest marketing site — shared styles (product-aligned v2)
Adopts the product's color tokens, Resin wordmark, and adds Fraunces for
display headlines. Buttons swap from black to copper (--color-accent).
Light-mode only at launch — no dark mode for marketing.
When the product's tokens shift, this file should shift to match.
Source of truth for tokens: frontend/src/app/globals.css.
======================================================================== */
/* Display typefaces — both SIL Open Font License (no commercial restrictions).
· Source Serif 4 — body display headlines (h1, h2, card titles).
· Fraunces — IMPREST wordmark only (nav, footer, partner icons).
Move to self-hosted before production launch to drop the Google Fonts
runtime dependency. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&family=Source+Serif+4:opsz,wght@8..60,300..900&display=swap');
:root {
/* ---- Surfaces — mirror product tokens ---- */
--bg: #FCFAF8; /* product's --color-workspace — warm paper */
--surface: #FFFFFF; /* product's --color-base-100 */
--surface-alt: #F7F8FA; /* product's --color-base-200 */
--ink: #3b4252; /* product's --color-base-content — softer than pure black */
--muted: #6b7280; /* product's --color-text-muted */
--dim: #9ca3af; /* product's --color-text-dim */
--rule: #e2e5ea; /* product's --color-border */
--rule-strong: #b8d8df; /* product's --color-border-accent — pale teal */
/* ---- Brand ---- */
--imprest: #0c2d3b; /* product's --color-primary — deep teal/navy */
--imprest-dim: #f0f9fa; /* very pale teal — onboarding gradient end */
--accent: #cc7e2e; /* product's --color-accent — copper */
--accent-hover: #a8651f; /* darker copper for hover */
/* ---- Active / highlight surfaces ---- */
--highlight: #f3ebe6; /* product's --color-selected-bg — warm blush */
--selected: #f3ebe6; /* alias for clarity */
--hover: #f7f8fa; /* product's --color-hover */
/* ---- Marketing chart palette ---- */
/* Maps the QB-pricing-graphic colors onto product accent families. */
--inflation: #9ca3af; /* product's --color-text-dim */
--essentials: #94a3b8; /* product's --accent-slate-stripe */
--plus: #0c2d3b; /* product's --color-primary — brand color on the "most popular" tier */
--advanced: #991b1b; /* product's --accent-red-icon — serious red, not alarm red */
/* ---- Audience accents ---- */
--smb: #0c2d3b; /* deep teal — brand */
--accountant: #6b21a8; /* product's --accent-purple-icon */
/* ---- Flap aesthetic (carries the QBO split-flap personality) ---- */
--flap-bg: #0F4C5C; /* product's --color-flap-bg — dark teal */
--flap-text: #FFFFFF;
/* ---- Effects ---- */
--shadow: 0 1px 3px rgba(12, 45, 59, 0.06), 0 1px 2px rgba(12, 45, 59, 0.04);
--shadow-lg: 0 12px 32px rgba(12, 45, 59, 0.08);
/* ---- Spacing scale (marketing-scale, extending product's 12px default) ---- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
/* ---- Type scale ---- */
--fs-eyebrow: 13px;
--fs-body: 16px;
--fs-lede: 19px;
--fs-h3: 22px;
--fs-h2: 30px;
--fs-h1: 48px;
--fs-display: 64px;
/* ---- Typography font stacks — single source of truth ----
Swap a font by changing ONLY the values below; every consuming selector
uses `var(--font-X)`. The `-settings` variables hold font-specific
variation axes (opsz, SOFT, wdth, etc.) so a font swap that uses
different axes can update settings here too without touching consumers.
Both display + wordmark fonts are SIL Open Font License (no commercial
restrictions, embedding allowed). */
--font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--font-display: 'Source Serif 4', ui-serif, Georgia, serif;
--font-display-settings: 'opsz' 60;
--font-wordmark: 'Fraunces', ui-serif, Georgia, serif;
--font-wordmark-settings: 'opsz' 144;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-feature-settings: "ss01", "cv11";
-webkit-font-smoothing: antialiased;
line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; max-width: 100%; height: auto; }
/* ========== Top nav ========== */
.site-nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(252, 250, 248, 0.85);
backdrop-filter: saturate(180%) blur(8px);
-webkit-backdrop-filter: saturate(180%) blur(8px);
border-bottom: 1px solid var(--rule);
/* Horizontal padding lives on .site-nav (matches .section / .hero) so
.site-nav-inner's content aligns flush with every other inner. */
padding: 0 32px;
}
.site-nav-inner {
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 14px 0;
display: flex;
align-items: center;
gap: 24px;
}
/* IMPREST wordmark — Fraunces heavy + display opsz, copper dot accent. */
.site-nav-brand {
font-family: var(--font-wordmark);
font-variation-settings: var(--font-wordmark-settings);
font-weight: 700;
font-size: 26px;
letter-spacing: -0.01em;
color: var(--imprest);
flex-shrink: 0;
line-height: 1;
}
.site-nav-brand:hover { text-decoration: none; }
.site-nav-brand .dot { color: var(--accent); }
.site-nav-links {
display: flex;
align-items: center;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
flex: 1;
}
.site-nav-links a {
padding: 6px 12px;
border-radius: 6px;
font-size: 14px;
color: var(--muted);
font-weight: 500;
}
.site-nav-links a:hover {
background: var(--highlight);
color: var(--imprest);
text-decoration: none;
}
.site-nav-links a.active {
color: var(--imprest);
background: var(--highlight);
}
.site-nav-cta {
display: flex;
align-items: center;
gap: 8px;
}
/* ========== Buttons — copper primary, dark-teal secondary ========== */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
border: 1px solid transparent;
transition: transform 0.05s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
text-decoration: none;
white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(0.5px); }
.btn-primary {
background: var(--accent);
color: #FFFFFF;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary {
background: transparent;
color: var(--imprest);
border-color: var(--rule-strong);
}
.btn-secondary:hover { background: var(--highlight); border-color: var(--imprest); }
.btn-ghost {
background: transparent;
color: var(--muted);
}
.btn-ghost:hover { color: var(--imprest); background: var(--highlight); }
.btn-large {
padding: 14px 24px;
font-size: 15px;
border-radius: 10px;
}
/* ========== Layout primitives ========== */
main { display: block; }
.section {
padding: var(--space-9) 32px;
/* Every section below the hero reads as one "room" at the same height.
112vh → 101vh trims ~10% of the vertical padding that the shorter
sections were carrying (content centers within). */
min-height: 101vh;
display: flex;
flex-direction: column;
justify-content: center;
}
/* ---- Agents vignette (Section 2) ----
Two-column layout: text on left, "recurring tasks" timeline card on
right showing 3 agents on schedule with active-now status pills. */
.agents-vignette {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: 48px;
align-items: center;
}
.agents-text { display: flex; flex-direction: column; gap: 16px; }
.agents-timeline {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 16px;
padding: 28px 28px 22px;
box-shadow: 0 4px 24px rgba(12, 45, 59, 0.05);
}
.agents-timeline-title {
text-align: center;
font-size: 17px;
font-weight: 600;
line-height: 1.3;
color: var(--ink);
margin: 0 0 28px;
}
.agents-timeline-rows {
display: flex;
flex-direction: column;
gap: 26px;
}
.agent-row {
display: grid;
grid-template-columns: 180px 1fr;
gap: 18px;
align-items: center;
}
.agent-row-label {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.agent-row-icon {
width: 22px;
height: 22px;
background: var(--ink);
color: #fff;
border-radius: 5px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.agent-row-meta {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.agent-row-name {
font-weight: 600;
font-size: 14px;
color: var(--ink);
white-space: nowrap;
}
.agent-row-schedule {
font-size: 12px;
color: var(--muted);
white-space: nowrap;
}
.agent-row-track {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: center;
height: 28px;
}
/* Dashed connecting rail spans from first to last dot center */
.agent-row-track::before {
content: '';
position: absolute;
left: 6px;
right: 6px;
top: 50%;
margin-top: -1px;
border-top: 1.5px dashed rgba(12, 45, 59, 0.18);
z-index: 0;
}
.agent-row-dot {
position: relative;
width: 12px;
height: 12px;
border-radius: 50%;
border: 1.5px solid rgba(12, 45, 59, 0.22);
background: var(--surface);
justify-self: center;
z-index: 1;
}
.agent-row-dot[data-active="true"] {
width: 14px;
height: 14px;
background: var(--agent-color, var(--section-accent, #7c3aed));
border-color: var(--agent-color, var(--section-accent, #7c3aed));
animation: agent-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes agent-dot-pulse {
0%, 100% { box-shadow: 0 0 0 5px var(--agent-glow-1, rgba(124, 58, 237, 0.16)); }
50% { box-shadow: 0 0 0 10px var(--agent-glow-2, rgba(124, 58, 237, 0.04)); }
}
/* Per-agent color schemes — each row gets its own hue for the active
dot, glow ring, and status pill. */
.agent-row[data-color="purple"] {
--agent-color: #7c3aed;
--agent-glow-1: rgba(124, 58, 237, 0.18);
--agent-glow-2: rgba(124, 58, 237, 0.04);
--agent-pill-bg: rgba(124, 58, 237, 0.14);
}
.agent-row[data-color="amber"] {
--agent-color: #d97706;
--agent-glow-1: rgba(217, 119, 6, 0.22);
--agent-glow-2: rgba(217, 119, 6, 0.04);
--agent-pill-bg: rgba(217, 119, 6, 0.16);
}
.agent-row[data-color="teal"] {
--agent-color: #0891b2;
--agent-glow-1: rgba(8, 145, 178, 0.20);
--agent-glow-2: rgba(8, 145, 178, 0.04);
--agent-pill-bg: rgba(8, 145, 178, 0.14);
}
.agent-row-status {
position: absolute;
bottom: 100%;
transform: translateX(-50%);
padding: 4px 10px;
border-radius: 14px;
background: var(--agent-pill-bg, rgba(124, 58, 237, 0.13));
color: var(--agent-color, var(--section-accent, #7c3aed));
font-size: 11px;
font-weight: 500;
white-space: nowrap;
margin-bottom: 8px;
z-index: 2;
opacity: 0;
/* Slide the pill smoothly between dot positions; fade in/out across
each state change. JS sets `left` and toggles opacity. */
transition: left 0.45s cubic-bezier(.4,0,.2,1), opacity 0.18s ease;
}
.agent-row-status:empty { opacity: 0 !important; }
.agents-timeline-axis {
display: grid;
grid-template-columns: repeat(5, 1fr);
margin-top: 14px;
padding-left: 198px;
font-size: 11px;
color: var(--muted);
font-family: var(--font-mono);
}
.agents-timeline-axis span { text-align: center; }
@media (max-width: 980px) {
.agents-vignette { grid-template-columns: 1fr; gap: 32px; }
.agent-row { grid-template-columns: 1fr; gap: 8px; }
.agents-timeline-axis { padding-left: 0; }
}
/* ---- Migration animation panel — single polished design ----
Split background (QB green left → Imprest dark-teal right), white
circles at each end (QB logo on the left, blank placeholder on the
right), centered progress bar that fills once 0→100% on first view
and stays full, with record counter below. */
.migration-anim-wrap { width: 100%; }
.migration-anim {
position: relative;
border-radius: 16px;
overflow: hidden;
padding: 36px 28px;
/* Split: QB green on the left half, Imprest dark teal on the right. */
background:
linear-gradient(90deg,
#2CA01C 0%,
#2CA01C 50%,
var(--imprest) 50%,
var(--imprest) 100%);
box-shadow:
0 1px 3px rgba(12, 45, 59, 0.08),
0 12px 32px rgba(12, 45, 59, 0.14);
}
.mig-stage {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 28px;
align-items: center;
}
/* Endpoints — symmetric 100×100 white circles with matching ring. */
.mig-circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
border: 3px solid rgba(255, 255, 255, 0.85);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.12),
inset 0 0 0 1px rgba(255, 255, 255, 0.5);
display: inline-flex;
align-items: center;
justify-content: center;
}
.mig-circle-left img {
width: 56px;
height: 56px;
object-fit: contain;
}
.mig-circle-right {
/* Blank — placeholder for the Imprest logo */
}
/* Progress block — centered between the two circles */
.mig-progress-block {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 0 12px;
}
.mig-progress-bar {
position: relative;
width: 100%;
max-width: 320px;
height: 28px;
background: rgba(255, 255, 255, 0.20);
border: 1.5px solid rgba(255, 255, 255, 0.6);
border-radius: 16px;
overflow: hidden;
backdrop-filter: blur(2px);
}
.mig-progress-fill {
position: absolute;
top: 0; bottom: 0;
left: 0;
width: 0%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.55) 0%,
rgba(255, 255, 255, 0.85) 100%
);
border-radius: 14px;
transition: width 4.5s cubic-bezier(.4, 0, .2, 1);
}
.mig-progress-pct {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
color: #fff;
letter-spacing: 0.06em;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
z-index: 2;
}
.mig-progress-count {
font-family: var(--font-mono);
font-size: 12px;
color: rgba(255, 255, 255, 0.92);
letter-spacing: 0.04em;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
@media (max-width: 720px) {
.migration-anim { padding: 24px 18px; }
.mig-stage { gap: 16px; }
.mig-circle { width: 72px; height: 72px; }
.mig-circle-left img { width: 40px; height: 40px; }
}
.section.tight { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.section.alt { background: var(--surface-alt); }
.section-inner {
width: 100%;
max-width: 1320px;
margin: 0 auto;
}
/* Narrow / wide modifiers retained for back-compat but the base now
matches every other top-level inner (1320px) so the left edge of
content is identical across nav, hero, every section, final CTA,
and footer at every viewport. */
.section-inner.narrow { max-width: 720px; }
.section-inner.wide { max-width: 1320px; }
/* ========== Typography — Fraunces for h1/h2 display ========== */
.eyebrow {
display: inline-block;
font-size: var(--fs-eyebrow);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
margin: 0 0 var(--space-3);
}
h1, h2, h3, h4 {
margin: 0;
color: var(--imprest);
letter-spacing: -0.02em;
line-height: 1.1;
}
/* Display headlines — consumes the --font-display token + its settings */
h1, h2 {
font-family: var(--font-display);
font-variation-settings: var(--font-display-settings);
font-weight: 600;
}
h3, h4 {
font-weight: 600;
letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: 17px; letter-spacing: -0.005em; }
.lede {
font-size: var(--fs-lede);
line-height: 1.55;
color: var(--ink);
max-width: 680px;
margin: 0;
}
.lede.muted { color: var(--muted); }
p { margin: 0; }
.row-stack > * + * { margin-top: var(--space-4); }
.row-stack.lg > * + * { margin-top: var(--space-5); }
.row-stack.xl > * + * { margin-top: var(--space-6); }
/* ========== Hero shells ========== */
.hero {
padding: var(--space-9) 32px var(--space-8);
}
.hero-inner {
max-width: 1080px;
margin: 0 auto;
}
.hero h1 {
font-size: clamp(40px, 6vw, var(--fs-display));
line-height: 1.05;
letter-spacing: -0.025em;
max-width: 900px;
margin: 0 0 var(--space-5);
font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.hero .lede { margin-bottom: var(--space-6); }
.hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: var(--space-5);
}
.hero-trust {
font-size: 13px;
color: var(--muted);
letter-spacing: 0.01em;
}
/* ========== Trust strip ==========
Three text-only items in the hero's wake — no boxes, no dividers.
Each carries its own accent color (picked from the section-accent
palette) applied to the icon + label via --pill-accent. */
.trust-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.trust-pill {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 0;
color: var(--ink);
--pill-accent: var(--imprest);
}
.trust-pill[data-color="amber"] { --pill-accent: #a16207; }
.trust-pill[data-color="green"] { --pill-accent: #065f46; }
.trust-pill[data-color="purple"] { --pill-accent: #7c3aed; }
.trust-pill:hover { background: transparent; text-decoration: none; }
.trust-pill:hover .trust-pill-label { text-decoration: underline; }
.trust-pill-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-top: 1px;
color: var(--pill-accent);
}
.trust-pill-icon svg { display: block; width: 22px; height: 22px; }
.trust-pill-text {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.trust-pill-label {
font-size: 14px;
font-weight: 600;
color: var(--pill-accent);
}
.trust-pill-detail {
font-size: 13px;
color: var(--muted);
line-height: 1.4;
}
/* ========== Cards ========== */
.card {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 12px;
padding: 28px;
box-shadow: var(--shadow);
}
.card.lg { padding: 36px; border-radius: 14px; }
.card .card-eyebrow {
font-size: var(--fs-eyebrow);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
margin: 0 0 12px;
}
.card h3 { margin: 0 0 8px; }
.card p { color: var(--ink); }
.card.muted p { color: var(--muted); }
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.card-grid.col-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.col-4 { grid-template-columns: repeat(4, 1fr); }
/* ========== Visual placeholder boxes ========== */
.viz {
border: 1px dashed var(--rule-strong);
border-radius: 12px;
background: linear-gradient(135deg, rgba(184, 216, 223, 0.10), rgba(184, 216, 223, 0.18));
color: var(--muted);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 13px;
letter-spacing: 0.04em;
padding: 24px;
}
.viz.hero-viz { min-height: 360px; margin-top: var(--space-6); border-radius: 16px; }
.viz.tall { min-height: 240px; }
.viz.short { min-height: 120px; }
.viz.tile { min-height: 160px; }
.viz strong {
display: block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--imprest);
margin-bottom: 6px;
}
.viz em {
font-style: normal;
display: block;
font-size: 12px;
color: var(--muted);
max-width: 360px;
line-height: 1.5;
}
/* ========== Tier / pricing cards ========== */
.tier-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
align-items: stretch;
}
.tier {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 14px;
padding: 32px;
display: flex;
flex-direction: column;
gap: 18px;
box-shadow: var(--shadow);
}
.tier-name {
font-size: 14px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
margin: 0;
}
.tier-price {
font-size: 44px;
font-weight: 500;
font-family: var(--font-display);
font-variation-settings: var(--font-display-settings);
letter-spacing: -0.02em;
line-height: 1;
margin: 0;
color: var(--imprest);
}
.tier-price .unit {
font-family: var(--font-body);
font-size: 16px;
font-weight: 500;
color: var(--muted);
letter-spacing: 0;
}
.tier-tagline { color: var(--muted); font-size: 14px; }
.tier-feature-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 14px;
}
.tier-feature-list li {
position: relative;
padding-left: 22px;
}
.tier-feature-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--accent);
font-weight: 700;
}
.tier .btn { align-self: flex-start; margin-top: 8px; }
/* ========== Addon cards ========== */
.addon-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.addon-card {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 10px;
padding: 24px;
}
.addon-card h4 { margin: 0 0 4px; }
.addon-card .price {
font-family: var(--font-display);
font-variation-settings: var(--font-display-settings);
font-size: 26px;
font-weight: 500;
margin: 12px 0 8px;
font-feature-settings: "tnum";
color: var(--imprest);
}
.addon-card .price small {
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: var(--muted);
}
.addon-card p {
font-size: 14px;
color: var(--muted);
line-height: 1.5;
}
/* ========== Feature matrix ========== */
.feature-matrix {
width: 100%;
border-collapse: collapse;
font-size: 14px;
margin-top: var(--space-5);
}
.feature-matrix th, .feature-matrix td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid var(--rule);
}
.feature-matrix th {
font-weight: 600;
background: var(--highlight);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--imprest);
}
.feature-matrix td:not(:first-child) { text-align: center; font-feature-settings: "tnum"; }
.feature-matrix .check { color: var(--accent); font-weight: 700; }
.feature-matrix .dash { color: var(--rule-strong); }
/* ---- .feature-matrix.compare — 4-tier Imprest-vs-QBO comparison ---- */
.feature-matrix.compare {
font-size: 13px;
border: 1px solid var(--rule);
border-radius: 12px;
overflow: hidden;
}
.feature-matrix.compare th,
.feature-matrix.compare td {
padding: 10px 14px;
border-bottom: 1px solid var(--rule);
vertical-align: middle;
}
.feature-matrix.compare thead th {
background: var(--surface);
text-transform: none;
letter-spacing: 0;
font-size: 13px;
padding: 16px 14px;
text-align: center;
border-bottom: 2px solid var(--rule);
}
.feature-matrix.compare thead th:first-child { background: transparent; border-bottom: 2px solid var(--rule); }
/* Imprest columns get a subtle copper tint so the eye groups them as "us" */
.feature-matrix.compare thead th.us {
background: rgba(204, 126, 46, 0.08);
}
.feature-matrix.compare td.us-col {
background: rgba(204, 126, 46, 0.04);
}
.feature-matrix.compare tbody tr:last-child td { border-bottom: none; }
/* Column header stack: brand / tier / price */
.feature-matrix.compare .cmp-brand,
.feature-matrix.compare .cmp-tier,
.feature-matrix.compare .cmp-price {
display: block;
}
.feature-matrix.compare .cmp-brand {
font-size: 11px;
font-weight: 500;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 2px;
}
.feature-matrix.compare .cmp-tier {
font-size: 15px;
font-weight: 700;
color: var(--imprest);
letter-spacing: -0.01em;
}
.feature-matrix.compare .cmp-price {
font-size: 20px;
font-weight: 700;
color: var(--imprest);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
margin-top: 4px;
}
.feature-matrix.compare .cmp-unit {
font-size: 12px;
font-weight: 500;
color: var(--muted);
letter-spacing: 0;
}
.feature-matrix.compare th.us .cmp-price { color: var(--accent); }
/* Category banding row */
.feature-matrix.compare .cat-row td {
background: var(--highlight);
font-weight: 600;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--imprest);
text-align: left !important;
padding: 10px 14px;
}
/* First column (feature name) stays left-aligned */
.feature-matrix.compare td:first-child { text-align: left; color: var(--ink); }
/* Tighten cells on narrow viewports */
@media (max-width: 900px) {
.feature-matrix.compare { font-size: 12px; }
.feature-matrix.compare th,
.feature-matrix.compare td { padding: 8px 8px; }
.feature-matrix.compare .cmp-tier { font-size: 13px; }
.feature-matrix.compare .cmp-price { font-size: 17px; }
}
/* ========== Numbered "shady" list ========== */
.numbered-list {
list-style: none;
padding: 0;
margin: 0;
counter-reset: numbered;
}
.numbered-list-item {
display: grid;
grid-template-columns: 48px 1fr;
gap: 16px;
padding: 20px 0;
border-top: 1px solid var(--rule);
counter-increment: numbered;
}
.numbered-list-item:last-of-type { border-bottom: 1px solid var(--rule); }
.numbered-list-item::before {
content: counter(numbered, decimal-leading-zero);
font-size: 14px;
font-weight: 600;
color: var(--accent);
font-feature-settings: "tnum";
padding-top: 2px;
font-family: var(--font-body);
}
.numbered-list-item h3 {
font-family: var(--font-body);
font-size: 17px;
margin: 0 0 6px;
color: var(--imprest);
}
.numbered-list-item p {
font-size: 15px;
color: var(--ink);
margin: 0;
max-width: 720px;
}
.numbered-list-item .date {
color: var(--muted);
font-feature-settings: "tnum";
}
/* ========== Two-audience split ========== */
.audience-split {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.audience-tile {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 14px;
padding: 32px;
display: flex;
flex-direction: column;
gap: 12px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.audience-tile:hover {
text-decoration: none;
border-color: var(--rule-strong);
box-shadow: var(--shadow);
}
.audience-tile h3 { color: var(--imprest); }
.audience-tile p { color: var(--muted); font-size: 15px; }
.audience-tile .audience-cta {
color: var(--accent);
font-weight: 600;
font-size: 14px;
margin-top: 8px;
}
/* Karbon-shop callout — sits inside the accountant audience tile, just
above the CTA. Signals that Imprest is built by Karbon-native firm
operators and integrates with the user's existing Karbon workflow. */
.audience-karbon {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 8px;
padding: 14px 14px;
border: 1px solid var(--rule);
border-radius: 10px;
background: rgba(12, 45, 59, 0.02);
}
.audience-karbon-logo {
width: 24px;
height: 24px;
flex-shrink: 0;
margin-top: 1px;
object-fit: contain;
border-radius: 4px;
}
.audience-karbon-text {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 13px;
color: var(--muted);
line-height: 1.4;
}
.audience-karbon-text strong {
color: var(--imprest);
font-weight: 600;
font-size: 13px;
}
/* ========== Workflow strip ========== */
.workflow-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.workflow-frame {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
}
.workflow-frame .step-label {
font-size: 12px;
font-weight: 600;
color: var(--accent);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.workflow-frame h4 { margin: 0; font-family: var(--font-body); }
.workflow-frame p { font-size: 13px; color: var(--muted); margin: 0; }
/* ========== Imprest counter card ========== */
.counter-card {
background: var(--surface);
border: 1px solid var(--rule-strong);
border-left: 4px solid var(--accent);
border-radius: 8px;
padding: 28px 32px;
box-shadow: var(--shadow);
}
.counter-card-title {
font-family: var(--font-display);
font-variation-settings: var(--font-display-settings);
font-size: 22px;
letter-spacing: -0.01em;
color: var(--imprest);
font-weight: 600;
margin: 0 0 8px;
}
.counter-card-title .dot { color: var(--accent); }
.counter-card p {
font-size: 19px;
line-height: 1.5;
margin: 0;
}
/* ========== Final CTA ========== */
.final-cta {
padding: var(--space-9) 32px;
text-align: left;
/* Final CTA has a tighter objective than the content sections above,
so it gets a shorter floor — half the height of the other sections. */
min-height: 50vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.final-cta.alt { background: var(--surface-alt); }
.final-cta-inner {
width: 100%;
max-width: 1320px;
margin: 0 auto;
}
.final-cta h2 {
font-size: 40px;
margin-bottom: var(--space-4);
}
.final-cta p {
font-size: 18px;
color: var(--muted);
margin-bottom: var(--space-5);
}
/* ========== Logo wall ========== */
.logo-wall {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.logo-tile {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 8px;
padding: 24px 16px;
text-align: center;
font-size: 13px;
color: var(--muted);
font-weight: 500;
}
/* ========== FAQ ========== */
.faq {
display: flex;
flex-direction: column;
gap: 0;
}
.faq details {
border-top: 1px solid var(--rule);
padding: 18px 0;
}
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary {
cursor: pointer;
font-size: 17px;
font-weight: 600;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
color: var(--imprest);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+";
color: var(--accent);
font-size: 22px;
line-height: 1;
font-weight: 500;
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
margin: 12px 0 0;
color: var(--muted);
font-size: 15px;
line-height: 1.6;
max-width: 720px;
}
/* ========== Footer ========== */
.site-footer {
border-top: 1px solid var(--rule);
padding: var(--space-7) 32px var(--space-6);
background: var(--surface);
color: var(--muted);
font-size: 13px;
}
.site-footer-inner {
width: 100%;
max-width: 1320px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr repeat(5, 1fr);
gap: 32px;
margin-bottom: var(--space-6);
}
.site-footer h5 {
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--imprest);
margin: 0 0 12px;
font-weight: 700;
}
.site-footer ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--imprest); text-decoration: underline; }
.site-footer-base {
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding-top: var(--space-5);
border-top: 1px solid var(--rule);
display: flex;
justify-content: space-between;
font-size: 12px;
flex-wrap: wrap;
gap: 12px;
}
.site-footer-brand {
font-family: var(--font-wordmark);
font-variation-settings: var(--font-wordmark-settings);
font-weight: 700;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--imprest);
margin-bottom: 12px;
line-height: 1;
}
.site-footer-brand .dot { color: var(--accent); }
/* ========== Misc utilities ========== */
.mono { font-feature-settings: "tnum"; }
.text-muted { color: var(--muted); }
.text-imprest { color: var(--imprest); }
.text-advanced { color: var(--advanced); }
.text-accent { color: var(--accent); }
.text-center { text-align: center; }
.divider {
border: none;
border-top: 1px solid var(--rule);
margin: var(--space-7) 0;
}
.banner {
background: var(--highlight);
color: var(--imprest);
padding: 12px 32px;
text-align: center;
font-size: 14px;
font-weight: 500;
}
.banner a { color: var(--accent); font-weight: 600; }
/* ========================================================================
SIZZLE LAYER — per-section accents, gradient washes, split-flap counter,
live activity feed, flip cards, and confetti. Built on the product's
accent token system; the marketing site picks one accent per section.
======================================================================== */
/* ---- Section accents -------------------------------------------------- */
/* Each major section can claim one accent family. Eyebrows, "→" CTAs, and
accent-bordered elements within the section take on that color. */
section[data-accent="ai"] { --section-accent: #7c3aed; --section-accent-bg: rgba(124,58,237,0.06); }
section[data-accent="migration"] { --section-accent: #a16207; --section-accent-bg: rgba(161,98,7,0.06); }
section[data-accent="ecosystem"] { --section-accent: #065f46; --section-accent-bg: rgba(6,95,70,0.06); }
section[data-accent="brand"] { --section-accent: var(--imprest); --section-accent-bg: rgba(12,45,59,0.06); }
section[data-accent="copper"] { --section-accent: var(--accent); --section-accent-bg: rgba(204,126,46,0.08); }
section[data-accent="advanced"] { --section-accent: #991b1b; --section-accent-bg: rgba(153,27,27,0.06); }
section[data-accent] .eyebrow { color: var(--section-accent); }
section[data-accent] .audience-cta { color: var(--section-accent); }
section[data-accent] .deeper-link { color: var(--section-accent); }
/* Accent-tinted backdrop for sections that want a richer pulse */
section.section.washed {
background: var(--section-accent-bg, var(--surface-alt));
}
/* ---- Gradient washes -------------------------------------------------- */
/* Subtle warm gradient on the hero, complemented by a soft pale-teal pull
toward the brand. */
.hero {
background:
radial-gradient(ellipse 1200px 600px at 80% -10%, rgba(184,216,223,0.35), transparent 60%),
radial-gradient(ellipse 900px 500px at 10% 100%, rgba(243,235,230,0.55), transparent 65%),
var(--bg);
}
.section.alt {
background:
linear-gradient(180deg, var(--surface-alt) 0%, var(--bg) 100%);
}
/* === Per-section background washes (scroll-contrast) ===
Each top-level section is tinted by its semantic accent so the scroll
reads as distinct "rooms" rather than two near-identical creams.
Placed after .section.alt to win on source-order at equal specificity. */
.section[data-accent="ai"],
.final-cta[data-accent="ai"] { background: #EFE5FA; } /* faint lavender */
.section[data-accent="copper"],
.final-cta[data-accent="copper"] { background: #F7ECDD; } /* warm cream */
.section[data-accent="migration"],
.final-cta[data-accent="migration"] { background: #F4E6C5; } /* soft amber */
.section[data-accent="brand"],
.final-cta[data-accent="brand"] { background: #DEEAF0; } /* cool blue-gray */
.section[data-accent="ecosystem"],
.final-cta[data-accent="ecosystem"] { background: #DCEAE2; } /* sage mint */
.section[data-accent="advanced"],
.final-cta[data-accent="advanced"] { background: #F4D4D4; } /* soft blush */
/* ---- Split-flap counter ---------------------------------------------- */
/* Carry-over from the product's QBO split-flap aesthetic. Static digits
styled as dark-teal flap tiles with a horizontal seam. */
.flap-counter {
display: inline-flex;
flex-direction: column;
gap: 10px;
padding: 18px 24px;
background: var(--flap-bg);
color: var(--flap-text);
border-radius: 10px;
box-shadow: var(--shadow-lg);
}
.flap-label {
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
font-weight: 600;
}
.flap-digits {
display: flex;
gap: 4px;
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-size: 38px;
font-weight: 700;
line-height: 1;
}
.flap-digit, .flap-comma {
padding: 10px 6px;
min-width: 30px;
text-align: center;
border-radius: 4px;
position: relative;
background:
linear-gradient(to bottom, #08384a 0%, #08384a 49%, rgba(0,0,0,0.35) 50%, #11576A 51%, #11576A 100%);
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.3);
}
.flap-comma {
background: transparent;
box-shadow: none;
min-width: 14px;
padding: 10px 2px;
color: rgba(255,255,255,0.6);
}
.flap-digit::after {
content: "";
position: absolute;
left: 4px; right: 4px;
top: 50%;
height: 1px;
background: rgba(0, 0, 0, 0.45);
}
/* Tiny periodic flip on the rightmost digit just to feel alive */
.flap-digit.live {
animation: flap-tick 8s infinite;
transform-origin: center top;
perspective: 200px;
}
@keyframes flap-tick {
0%, 92% { transform: rotateX(0); }
94% { transform: rotateX(-90deg); }
96% { transform: rotateX(0); }
100% { transform: rotateX(0); }
}
/* ---- Activity feed --------------------------------------------------- */
/* Live-feeling stream of AI agent actions. Items prepend at top; oldest
fades; newest highlights briefly. */
.activity-feed-card {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 14px;
padding: 32px;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.activity-feed-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--rule);
}
.activity-feed-pulse {
width: 10px;
height: 10px;
border-radius: 50%;
background: #7c3aed;
position: relative;
box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.5);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.45); }
70% { box-shadow: 0 0 0 12px rgba(124, 58, 237, 0); }
100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0); }
}
/* Honor user-level reduced-motion preference: freeze the pulse dot
(the JS rotator above also bails out in this case, so the activity
feed reads as a static snapshot). */
@media (prefers-reduced-motion: reduce) {
.activity-feed-pulse { animation: none; }
}
.activity-feed-title {
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
color: var(--imprest);
margin: 0;
}
.activity-feed-meta {
font-size: 13px;
color: var(--muted);
margin-left: auto;
font-feature-settings: "tnum";
}
.activity-feed {
display: flex;
flex-direction: column;
min-height: 350px; /* sized for 8 tightened rows — snug, no bottom padding */
position: relative;
}
/* Four-column row: time / source-icon / text / (optional) action.
The source column is wider (28px) than the old icon column (22px)
so it can host real vendor favicons, channel SVGs (email/Shopify),
or internal Imprest action glyphs interchangeably. Action column is
auto-sized — collapses to nothing when a row has no action. */
.feed-row {
display: grid;
grid-template-columns: 60px 28px 1fr auto;
gap: 12px;
padding: 7px 0;
border-bottom: 1px dashed var(--rule);
font-size: 13.5px;
align-items: center;
transition: opacity 0.45s ease, transform 0.45s ease, background 0.6s ease;
background: transparent;
}
.feed-row:last-child { border-bottom: none; }
.feed-row.is-new {
background: rgba(124, 58, 237, 0.08);
border-radius: 6px;
margin: 0 -8px;
padding-left: 8px;
padding-right: 8px;
}
.feed-row.is-entering {
opacity: 0;
transform: translateY(-12px);
}
.feed-row.is-exiting {
opacity: 0;
transform: translateY(4px);
}
.feed-time {
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted);
font-feature-settings: "tnum";
letter-spacing: 0.02em;
}
/* Inline row action — small accent-color text-link on the right edge
of the row, signals the row is interactive. Optional per item; the
`auto` action column collapses to nothing on rows without one. */
.feed-action {
font-size: 11.5px;
font-weight: 600;
color: var(--accent);
cursor: pointer;
white-space: nowrap;
letter-spacing: 0.01em;
padding: 2px 6px;
border-radius: 4px;
transition: background 0.15s ease, color 0.15s ease;
}
.feed-action:hover {
background: rgba(204, 126, 46, 0.10);
color: var(--accent-hover, var(--accent));
}
.feed-action::after { content: ' →'; }
.feed-icon {
font-weight: 700;
text-align: center;
line-height: 1;
font-size: 14px;
}
.feed-icon.ok { color: var(--imprest); }
.feed-icon.warn { color: var(--accent); }
.feed-icon.insight { color: #7c3aed; }
.feed-text {
color: var(--ink);
line-height: 1.4;
/* No wrap allowed — the design wants every activity on a single line.
Long copy gets ellipsed so the grid stays predictable. min-width: 0
is required for ellipsis to work inside a grid track. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.feed-text .amt { font-feature-settings: "tnum"; font-weight: 600; }
.feed-text .arrow { color: var(--muted); }
/* Source slot — renders one of:
(a) a vendor / partner favicon (loaded via Google's favicon API like
the homepage flip-cards)
(b) an inline SVG glyph for transaction channels (email envelope)
or internal Imprest actions (mark-paid, send-reminder, flag,
credit-memo)
The 32×32 container is a rounded tile with a tinted background per
channel, so even when the favicon is loading the slot reserves space
and reads as "something is here." */
.feed-source {
width: 28px;
height: 28px;
border-radius: 6px;
background: var(--surface);
border: 1px solid var(--rule);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
color: var(--imprest);
}
.feed-source img {
width: 18px;
height: 18px;
object-fit: contain;
display: block;
}
.feed-source svg { width: 14px; height: 14px; }
/* SVG-glyph variant — no tile background, no border, just the icon in
near-black. Used for non-favicon source types (accountant, agent,
close, paid, flag, credit). Slightly larger glyph (20px vs 16px in
the favicon tile) to compensate for the missing chrome. */
.feed-source.is-glyph {
background: transparent;
border: none;
color: #1a1a1a;
}
.feed-source.is-glyph svg { width: 17px; height: 17px; }
/* ---- Flip cards (ecosystem) ----------------------------------------- */
/* Each tile shows a partner logo on the front, a one-line value stat on
the back. Auto-flips on a 12s cycle with staggered delays. Hover pauses. */
.flip-card {
perspective: 1000px;
aspect-ratio: 1;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation: flip-rotate 12s infinite;
animation-play-state: running;
}
.flip-card:hover .flip-card-inner { animation-play-state: paused; }
.flip-card-front, .flip-card-back {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 16px;
}
.flip-card-front {
font-size: 13px;
color: var(--muted);
font-weight: 600;
flex-direction: column;
gap: 8px;
}
.partner-icon {
width: 56px;
height: 56px;
object-fit: contain;
display: block;
}
.partner-icon-letter {
width: 56px;
height: 56px;
border-radius: 12px;
background: var(--imprest);
color: var(--surface);
font-family: var(--font-wordmark);
font-variation-settings: var(--font-wordmark-settings);
font-weight: 700;
font-size: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
letter-spacing: 0.02em;
}
.flip-card-back {
transform: rotateY(180deg);
border-color: var(--rule-strong);
background: linear-gradient(135deg, rgba(184,216,223,0.10), rgba(184,216,223,0.22));
flex-direction: column;
gap: 6px;
}
.flip-card-back .partner {
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
font-weight: 600;
}
.flip-card-back .stat {
font-size: 14px;
color: var(--imprest);
font-weight: 600;
line-height: 1.3;
}
@keyframes flip-rotate {
0%, 38% { transform: rotateY(0); }
50%, 88% { transform: rotateY(180deg); }
100% { transform: rotateY(360deg); }
}
/* Pause flipping at reduced motion */
@media (prefers-reduced-motion: reduce) {
.flip-card-inner { animation: none; }
}
/* ---- Hero chaos→order animation ------------------------------------- */
/* A field of 14 transaction "cards" that orbits chaotically, slows, settles
into a clean stack, picks up category pills, reconciles to the bank, and
posts a total — then loops back to chaos. Lives behind the hero text. */
/* Two-column hero: left = text (left-justified, aligned with nav logo),
right = animation panel containing the chaos→order loop. */
.hero.hero-immersive {
position: relative;
overflow: hidden;
min-height: 78vh;
padding-top: 24px;
padding-bottom: 32px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Trust strip lives inside the hero section so the 3 pills visually
belong to the first vignette, not the start of the next room. */
.hero.hero-immersive .hero-trust-row {
width: 100%;
max-width: 1320px;
margin: 16px auto 0;
/* Horizontal padding comes from .hero — don't duplicate it here. */
padding: 0;
position: relative;
z-index: 2;
}
.hero.hero-immersive .hero-inner {
position: relative;
z-index: 2;
width: 100%;
max-width: 1320px;
margin: 0 auto;
/* Horizontal padding comes from .hero (32px default, 24px at narrow).
Vertical padding only here so the hero content's left edge aligns
with every section below. */
padding: 24px 0 32px;
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: 56px;
align-items: center;
min-height: 0;
}
.hero.hero-immersive .hero-inner::before { display: none; } /* radial backdrop no longer needed */
/* Mirror the gutter on the right side of the panel (between the rows'
right edge and the Sign-up button's right edge) so the hero content
sits inset on the left by the same amount the rows are inset on the
right. Measured 32px at desktop widths.
Flex-stretch + center so .hero-text occupies the full grid-row
height (locked to .hero-anim-panel's 560px) and its content stays
vertically centered — so the eyebrow / h1 / lede / CTAs / trust
line sit at identical Y positions when you toggle between pages,
regardless of copy length variations. */
.hero-text {
text-align: left;
padding-left: 32px;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
}
.hero-text h1 {
text-align: left;
max-width: 540px; /* locks wrap width so every page wraps identically */
font-size: clamp(40px, 4.4vw, 60px);
line-height: 1.05;
margin: 0 0 var(--space-5);
}
/* Footnote marker in the H1 — sized down so it doesn't push the line
into a wrap, and raised to sit up near the cap height. Generic so
it works on any hero h1 (homepage, switch, about, etc.), not just
the .hero-text wrapper used by hero-immersive. */
.hero h1 .hero-asterisk,
.hero-text h1 .hero-asterisk {
font-size: 0.5em;
font-weight: 600;
letter-spacing: 0;
vertical-align: 0.5em;
margin-left: -0.04em;
margin-right: 0.06em;
}
.hero-text .lede { text-align: left; max-width: 540px; margin-bottom: var(--space-6); }
.hero-text .hero-ctas { justify-content: flex-start; }
.hero-text .hero-trust { max-width: 540px; }
/* The hero animation panel — same 560px stage on every page so the
hero feels identical as the user toggles between pages.
- Flex container centers inner content vertically/horizontally
- Absolutely positioned children (e.g. .hero-chaos) ignore the flex
and fill the panel via inset:0, so the homepage chaos animation
still occupies the full stage
- Other content (calc card, orbital SVG, viz placeholder) gets
auto-centered in the 560px box */
.hero-anim-panel {
position: relative;
width: 100%;
height: 560px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hero-anim-panel > .calc-card,
.hero-anim-panel > .viz,
.hero-anim-panel > .qb-chart-card,
.hero-anim-panel > .activity-feed-card { width: 100%; }
.hero-anim-panel > .orbit-anim {
width: 100%;
max-height: 480px; /* fits comfortably within the 560px panel */
}
/* When .viz is the panel's content (placeholder asset note), let it
fill the full panel so it reads as a defined stage — not as a
shorter card with awkward whitespace around it. Also drop the
default top margin which only makes sense for in-flow viz blocks. */
.hero-anim-panel > .viz.hero-viz {
height: 100%;
min-height: 0;
margin-top: 0;
}
.hero-chaos {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
@media (max-width: 980px) {
.hero.hero-immersive .hero-inner { grid-template-columns: 1fr; gap: 32px; min-height: auto; }
.hero-anim-panel { height: 460px; }
}
/* Card has no intrinsic size — children (receipt + row) are absolutely
centered on the card's pivot. The card is positioned by JS each frame. */
.tx-card {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
will-change: transform;
transform-origin: center center;
}
/* ---- Typographic chaos field (top zone) ----
Particles use the SAME type families as the rows below so the falling
fragments read as the row content drifting down: vendors in sans-serif
(matches .tx-row .tx-vendor), dates + amounts in monospace (matches
.tx-row's mono base). No italics — rows aren't italicized either. */
.tx-particle {
position: absolute;
top: 50%;
left: 50%;
pointer-events: none;
white-space: nowrap;
will-change: transform, opacity;
font-family: var(--font-body);
font-feature-settings: 'tnum';
opacity: 0;
color: var(--imprest);
letter-spacing: -0.005em;
}
.tx-particle.amount,
.tx-particle.mono {
font-family: var(--font-mono);
letter-spacing: 0;
}
.tx-particle.w-light { font-weight: 400; }
.tx-particle.w-med { font-weight: 500; }
.tx-particle.w-bold { font-weight: 600; }
.tx-particle.sz-xs { font-size: 10px; }
.tx-particle.sz-sm { font-size: 12px; }
.tx-particle.sz-md { font-size: 17px; }
.tx-particle.sz-lg { font-size: 24px; }
.tx-particle.sz-xl { font-size: 32px; }
.tx-particle.dim { color: rgba(12, 45, 59, 0.45); }
.tx-particle.muted { color: rgba(107, 114, 128, 0.7); }
.tx-particle.accent { color: var(--accent); }
/* Receipt visual (chaos state) — small paper rectangle with torn bottom edge. */
.tx-receipt {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 116px;
background: #FCFAF6;
border: 1px solid rgba(12, 45, 59, 0.07);
padding: 10px 8px 16px;
font-family: var(--font-mono);
font-size: 8.5px;
line-height: 11px;
color: var(--ink);
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.10));
display: flex;
flex-direction: column;
gap: 4px;
align-items: stretch;
clip-path: polygon(
0 0, 100% 0, 100% 92%,
94% 96%, 87% 92%, 80% 96%, 73% 92%, 66% 96%, 59% 92%,
52% 96%, 45% 92%, 38% 96%, 31% 92%, 24% 96%, 17% 92%,
10% 96%, 3% 92%, 0 96%
);
transition: opacity 0.55s ease;
opacity: 1;
}
.tx-receipt .r-vendor {
font-weight: 700;
font-size: 9.5px;
letter-spacing: 0.04em;
text-align: center;
margin-bottom: 2px;
}
.tx-receipt .r-divider {
border-top: 1px dashed rgba(12, 45, 59, 0.28);
margin: 1px 0;
}
.tx-receipt .r-line {
display: flex;
justify-content: space-between;
font-size: 8px;
color: var(--muted);
}
.tx-receipt .r-line.muted { opacity: 0.5; }
.tx-receipt .r-amount {
font-weight: 700;
font-size: 11px;
text-align: center;
color: var(--imprest);
margin-top: 4px;
}
.tx-receipt .r-thanks {
font-size: 7px;
text-align: center;
color: var(--muted);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-top: 2px;
}
/* Row visual (resolved state) — horizontal pill of fields */
.tx-row {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: var(--surface);
border: 1px solid var(--accent);
border-radius: 6px;
padding: 5px 14px;
font-family: var(--font-mono);
font-size: 11px;
font-feature-settings: "tnum";
white-space: nowrap;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 1px 3px rgba(12, 45, 59, 0.08);
width: 480px;
height: 26px;
opacity: 0;
transition: opacity 0.55s ease, background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease, padding 0.45s ease;
}
/* "No box" state for the newest rows — just text, no border/background/shadow.
Pads stays similar so column positions don't jump when the box appears. */
.tx-card.no-box .tx-row {
background: transparent;
border-color: transparent;
box-shadow: none;
padding: 5px 14px;
}
.tx-row .tx-date { color: var(--muted); width: 38px; flex-shrink: 0; }
.tx-row .tx-vendor {
font-family: var(--font-body);
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.tx-row .tx-amt {
color: var(--imprest); font-weight: 600; width: 70px; text-align: right; flex-shrink: 0;
}
.tx-row .tx-cat {
background: rgba(204, 126, 46, 0.16);
color: var(--accent);
padding: 2px 6px;
border-radius: 3px;
font-size: 9.5px;
font-family: var(--font-body);
font-weight: 600;
opacity: 0;
transition: opacity 0.5s ease;
width: 80px; text-align: center; flex-shrink: 0;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.tx-row .tx-cat svg {
flex-shrink: 0;
display: block;
}
/* Category pill animation — slides in from the right with a small overshoot
bounce. Fires once when .is-categorized is added (slot 2 in the row cycle). */
.tx-card.is-categorized .tx-row .tx-cat {
transition: none;
animation: cat-slide 0.55s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes cat-slide {
0% { transform: translateX(42px); opacity: 0; }
60% { transform: translateX(-3px); opacity: 1; }
100% { transform: translateX(0); opacity: 1; }
}
.tx-row .tx-recon {
color: #16a34a;
font-weight: 700;
opacity: 0;
transition: opacity 0.4s ease;
width: 12px; text-align: center; flex-shrink: 0; font-size: 13px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Reconcile ✓ animation — scale-bounce with a green radial glow halo.
Fires once when .is-reconciled is added (slot 3 in the row cycle). */
.tx-card.is-reconciled .tx-row .tx-recon {
transition: none;
animation: recon-pop 0.65s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes recon-pop {
0% { transform: scale(0); opacity: 0; }
45% { transform: scale(1.7); opacity: 1; }
75% { transform: scale(0.9); }
100% { transform: scale(1); opacity: 1; }
}
.tx-card.is-reconciled .tx-row .tx-recon::before {
content: '';
position: absolute;
left: 50%; top: 50%;
width: 26px; height: 26px;
margin: -13px 0 0 -13px;
border-radius: 50%;
background: radial-gradient(circle, rgba(22,163,74,0.50), rgba(22,163,74,0) 70%);
animation: recon-glow 0.7s ease-out forwards;
pointer-events: none;
z-index: -1;
}
@keyframes recon-glow {
0% { opacity: 0; transform: scale(0.3); }
40% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(2); }
}
/* Total bar no longer has a recon ✓ — see the match pill block below for
the matched-state indicator and its animation variants. */
/* State transitions */
.tx-card.is-resolved .tx-receipt { opacity: 0; }
.tx-card.is-resolved .tx-row { opacity: 1; }
.tx-card.is-categorized .tx-row .tx-cat { opacity: 1; }
.tx-card.is-reconciled .tx-row .tx-recon { opacity: 1; }
/* Total row — uses .tx-row markup but its own variant.
Same width + column geometry as the rows above so the $amount column
lines up exactly under the row amounts. */
.tx-card.tx-total .tx-row {
background: var(--imprest);
border-color: var(--imprest);
width: 480px;
}
.tx-card.tx-total .tx-receipt { display: none; }
.tx-card.tx-total .tx-row .tx-date,
.tx-card.tx-total .tx-row .tx-vendor { color: rgba(255, 255, 255, 0.7); }
.tx-card.tx-total .tx-row .tx-amt { color: #fff; font-weight: 700; }
/* Match pill in the cat-column slot — sized like a row's category pill,
white-on-dark for the total bar. The ✓ sits right next to it in the
recon column. Both start hidden, fade in together on the FIRST match,
then stay static and flash-highlight on each subsequent match. */
.tx-card.tx-total .tx-row .tx-cat {
visibility: visible;
background: rgba(255, 255, 255, 0.15);
color: #fff;
position: relative;
opacity: 0;
}
.tx-card.tx-total .tx-row .tx-cat svg { color: #fff; }
.tx-card.tx-total .tx-row .tx-recon {
color: #4ade80;
font-weight: 700;
font-size: 13px;
opacity: 0;
animation: none;
}
.tx-card.tx-total .tx-row .tx-recon::before { display: none; }
/* Persistent state once a match has happened — both elements stay visible. */
.tx-card.tx-total.has-matched .tx-row .tx-cat,
.tx-card.tx-total.has-matched .tx-row .tx-recon {
opacity: 1;
}
/* First match — slide in (same cat-slide as a category pill). */
.tx-card.tx-total.appear-now .tx-row .tx-cat,
.tx-card.tx-total.appear-now .tx-row .tx-recon {
animation: cat-slide 0.55s cubic-bezier(.34,1.56,.64,1);
}
/* Subsequent matches — brief flash-highlight, no movement. */
.tx-card.tx-total.flash-now .tx-row .tx-cat {
animation: match-pill-flash 0.6s ease-out;
}
.tx-card.tx-total.flash-now .tx-row .tx-recon {
animation: match-check-flash 0.6s ease-out;
}
@keyframes match-pill-flash {
0% { background: rgba(74, 222, 128, 0.55); }
100% { background: rgba(255, 255, 255, 0.15); }
}
@keyframes match-check-flash {
0% { color: #ffffff; text-shadow: 0 0 6px rgba(74, 222, 128, 0.9); }
100% { color: #4ade80; text-shadow: none; }
}
.tx-card.tx-total .tx-row { opacity: 0; }
.tx-card.tx-total.is-shown .tx-row { opacity: 1; }
/* Match pill + ✓ animations are defined above (appear-now / flash-now /
has-matched) — no per-frame pulse-check rule needed. */
/* Reduced motion fallback — show the final clean state, no spinning */
@media (prefers-reduced-motion: reduce) {
.hero-chaos { /* JS detects this and snaps to clean state */ }
}
/* ---- QB price-trajectory chart — pricing-page hero right panel ----
Lives inside .hero-anim-panel on the pricing page, mirroring the
layout of the homepage hero's chaos→order panel. Classes namespaced
with `qb-` so they don't collide with section accents elsewhere. */
.qb-chart-card {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 14px;
padding: 28px 32px 22px;
box-shadow: 0 2px 14px rgba(12, 45, 59, 0.06), 0 1px 3px rgba(12, 45, 59, 0.04);
width: 100%;
display: flex;
flex-direction: column;
gap: 18px;
}
.qb-chart-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.qb-chart-title {
font-size: 16px;
font-weight: 600;
margin: 0;
letter-spacing: -0.01em;
color: var(--ink);
font-family: var(--font-body);
}
.qb-chart-meta {
font-size: 12px;
color: var(--muted);
font-family: var(--font-mono);
letter-spacing: 0.04em;
}
svg.qb-chart {
width: 100%;
height: auto;
display: block;
overflow: visible;
}
/* Baseline only — no Y gridlines */
.qb-baseline { stroke: var(--rule); stroke-width: 1; }
.qb-year-tick {
font-size: 13px;
fill: var(--muted);
font-feature-settings: "tnum";
font-weight: 500;
}
/* Lines */
.qb-inflation-line { fill: none; stroke: var(--inflation); stroke-width: 4.5; stroke-dasharray: 7 7; stroke-linecap: round; }
.qb-essentials-line { fill: none; stroke: var(--essentials); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.qb-plus-line { fill: none; stroke: var(--plus); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.qb-advanced-line { fill: none; stroke: var(--advanced); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
/* Labels */
.qb-price-start { font-size: 16px; font-weight: 600; font-feature-settings: "tnum"; }
.qb-price-end { font-size: 26px; font-weight: 700; font-feature-settings: "tnum"; letter-spacing: -0.01em; }
.qb-tier-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.qb-price-start.qb-essentials, .qb-price-end.qb-essentials, .qb-tier-label.qb-essentials { fill: var(--essentials); }
.qb-price-start.qb-plus, .qb-price-end.qb-plus, .qb-tier-label.qb-plus { fill: var(--plus); }
.qb-price-start.qb-advanced, .qb-price-end.qb-advanced, .qb-tier-label.qb-advanced { fill: var(--advanced); }
.qb-inflation-label { font-size: 11px; fill: var(--muted); font-weight: 500; letter-spacing: 0.04em; }
.qb-launch-caption { font-size: 10px; fill: var(--advanced); font-weight: 500; opacity: 0.75; }
/* Summary row under the chart */
.qb-summary-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
padding-top: 18px;
border-top: 1px solid var(--rule);
}
.qb-summary-stat {
font-size: 11px;
color: var(--muted);
line-height: 1.4;
}
.qb-summary-stat strong {
display: block;
font-size: 20px;
font-weight: 700;
margin-bottom: 4px;
font-feature-settings: "tnum";
letter-spacing: -0.01em;
}
.qb-summary-stat.qb-inflation strong { color: var(--inflation); }
.qb-summary-stat.qb-essentials strong { color: var(--essentials); }
.qb-summary-stat.qb-plus strong { color: var(--plus); }
.qb-summary-stat.qb-advanced strong { color: var(--advanced); }
@media (max-width: 720px) {
.qb-chart-card { padding: 22px 18px 18px; }
.qb-chart-title { font-size: 14px; }
.qb-price-start { font-size: 13px; }
.qb-price-end { font-size: 20px; }
.qb-summary-row { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.qb-summary-stat strong { font-size: 17px; }
}
/* Note: removed prior :has(.qb-chart-card) and :has(.calc-card) height-auto
overrides. Every hero panel is locked to 560px now so heros align
identically across pages; content flex-centers within. */
/* ---- Savings calculator (pricing-page hero right panel) ----
Mad-libs prose: the user fills in highlighted tokens inline in plain
English (matches the product's ecosystem-settings UI pattern). The
highlighter visual mirrors product/MadLibChoice + MadLibInput — copper
accent in the marketing context vs amber in the product. */
.calc-card {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: 14px;
padding: 26px 28px 22px;
box-shadow: 0 2px 14px rgba(12, 45, 59, 0.06), 0 1px 3px rgba(12, 45, 59, 0.04);
width: 100%;
}
.calc-prose {
font-family: var(--font-body);
font-size: 17px;
line-height: 1.7;
color: var(--ink);
margin: 0 0 8px;
padding: 0;
letter-spacing: -0.005em;
}
/* Mad-lib token — the inline highlighted "fill-in" pill. Identical visual
contract to the product's MadLibInput / MadLibChoice (highlighter
background + inset underline), but using marketing's copper accent. */
/* Highlighter-stroke aesthetic — replaces the earlier copper-tint look.
An SVG background-image fakes the imperfections of an actual highlighter
dragged across the text:
- Wobbly outer body (top + bottom edges drift independently)
- Slight right-edge overshoot
- Mid-band lighter wash where marker pressure was lightest
- Three darker ochre vertical streaks at ~14% opacity (overlap marks)
`preserveAspectRatio='none'` stretches the stroke to fit any token width
while preserving the imperfections. The black hairline border-bottom
keeps the "this is editable" affordance the inset underline used to give. */
.mad-token {
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
color: #1a1a1a;
border-radius: 0;
/* Zero vertical padding so the token's inline box height matches the
surrounding text — otherwise lines that contain a token grow ~3px
taller than lines that don't, and the prose ends up unevenly spaced. */
padding: 0 8px;
font-weight: 600;
border: none;
/* Underline lives INSIDE the box via inset box-shadow rather than
border-bottom (which is part of the box model and adds 1.5px to the
line height). The SVG's internal viewBox padding (paths sit between
y=8 and y=33 of a 40-unit box) gives the highlighter visual breathing
room above/below the text without inflating the element's height. */
box-shadow: inset 0 -1.5px 0 #1a1a1a;
outline: none;
font-family: inherit;
font-size: inherit;
line-height: inherit;
vertical-align: baseline;
transition: filter 0.12s ease;
}
.mad-token:hover { filter: brightness(0.96); }
/* Focus indicator stays inside the box — a thicker inset underline
(3px instead of 1.5px) reads as "this is the active token" without a
rectangular halo and without pushing the line-box.
The aggressive outline / box-shadow / -webkit-* overrides are
defensive: Chrome and Safari draw a system-tinted focus ring on