/* Generated from new_design/product-v37.html. Do not edit directly. */
:root {
--ink: #1b2a4a;
--ink-3: #475569; /* darker grey body text (overrides theme value) */
--brand-dark: #c94d09;
--rule: rgba(226, 232, 240, 0.92);
--line: #c9d3e0e8;
--green: #22c55e;
--green-dark: #15803d;
--red: #ef4444;
--radius-lg: 12px;
--card-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 20px rgba(15, 23, 42, 0.06);
--tile-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
/* ============================================================
Motion system (v11)
External reveal/hero effects from rizer.css / rizer-v9.css stay
disabled. The page runs its own IntersectionObserver reveals
instead (script at the bottom of ). Without JS, or with
prefers-reduced-motion, everything renders fully visible.
============================================================ */
:root {
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-spring: cubic-bezier(0.34, 1.35, 0.64, 1);
--brand-grad: linear-gradient(135deg, #f97316, #ea580c);
}
.reveal,
.hero-anim {
opacity: 1 !important;
transform: none !important;
transition: none !important;
animation: none !important;
}
/* Hero: fade-up on load, headline then lede */
html.rz-anim .hero-anim {
opacity: 0 !important;
transform: translateY(16px) !important;
transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out) !important;
}
html.rz-anim .hero-anim-2 {
transition-delay: 0.12s !important;
}
html.rz-anim .hero-anim.rz-in {
opacity: 1 !important;
transform: none !important;
}
/* Scroll reveals: fade-up, stagger delays assigned per-card in JS */
html.rz-anim .reveal {
opacity: 0 !important;
transform: translateY(14px) !important;
transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out) !important;
will-change: opacity, transform;
}
html.rz-anim .reveal.rz-in {
opacity: 1 !important;
transform: none !important;
}
/* Process rail markers: scale in as their panel reveals,
check stroke draws itself right after */
html.rz-anim .process-marker {
opacity: 0;
transform: translate(-50%, -50%) scale(0.6);
transition: opacity 0.4s var(--ease-out), transform 0.45s var(--ease-spring);
}
html.rz-anim .process-rail.rz-in .process-marker {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/* Mock-UI children cascade in once their card is on screen.
Per-item delays are assigned in JS. */
html.rz-anim .setup-tile,
html.rz-anim .profile-item,
html.rz-anim .factor,
html.rz-anim .playbook-step,
html.rz-anim .action-table .action-row,
html.rz-anim .insight-row,
html.rz-anim .share-legend-item {
opacity: 0;
transform: translateY(7px);
transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
html.rz-anim .rz-in .setup-tile,
html.rz-anim .rz-in .profile-item,
html.rz-anim .rz-in .factor,
html.rz-anim .rz-in .playbook-step,
html.rz-anim .rz-in .action-table .action-row,
html.rz-anim .rz-in .insight-row,
html.rz-anim .rz-in .share-legend-item {
opacity: 1;
transform: none;
}
/* Charts grow in: vertical bars from the baseline, share segments
and gap fills from the left */
html.rz-anim .trend-bar {
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.55s var(--ease-out);
}
html.rz-anim .rz-in .trend-bar {
transform: scaleY(1);
}
html.rz-anim .share-seg {
transform: scaleX(0);
transform-origin: left;
transition: transform 0.6s var(--ease-out);
}
html.rz-anim .rz-in .share-seg {
transform: scaleX(1);
}
html.rz-anim .loss-bar-fill {
transform: scaleX(0);
transform-origin: left;
transition: transform 0.7s var(--ease-out);
}
html.rz-anim .rz-in .loss-bar-fill {
transform: scaleX(1);
}
/* Readiness score pops once the panel is in view */
@keyframes rz-pop {
0% {
opacity: 0;
transform: translateY(4px) scale(0.85);
}
100% {
opacity: 1;
transform: none;
}
}
.ready-score {
display: inline-block;
}
html.rz-anim .rz-in .ready-score {
animation: rz-pop 0.5s var(--ease-spring) 0.3s backwards;
}
@media (prefers-reduced-motion: reduce) {
html.rz-anim .reveal,
html.rz-anim .hero-anim,
html.rz-anim .process-marker,
html.rz-anim .setup-tile,
html.rz-anim .profile-item,
html.rz-anim .factor,
html.rz-anim .playbook-step,
html.rz-anim .action-table .action-row,
html.rz-anim .insight-row,
html.rz-anim .share-legend-item,
html.rz-anim .trend-bar,
html.rz-anim .share-seg,
html.rz-anim .loss-bar-fill,
html.rz-anim .ready-score {
opacity: 1 !important;
transform: none !important;
transition: none !important;
animation: none !important;
}
}
@media (max-width: 960px) {
.container,
.container-narrow {
padding-left: 20px;
padding-right: 20px;
}
}
.footer {
background: #0b1220;
}
/* ============================================================
Product hero
============================================================ */
.product-hero {
padding: 90px 0 64px;
text-align: center;
background: linear-gradient(180deg, #fff 0%, var(--bg-2) 100%);
border-bottom: 1px solid var(--rule);
}
.product-hero h1,
.section-title,
.product-name,
.product-headline,
.cta-block h2 {
text-wrap: balance;
}
.hero-sub,
.section-lede,
.tier-desc,
.product-panel-copy,
.report-card p {
text-wrap: pretty;
}
.product-hero h1 {
max-width: 1120px;
margin-right: auto;
margin-left: auto;
font-size: clamp(44px, 4.8vw, 66px);
line-height: 0.98;
letter-spacing: -0.045em;
}
.product-hero h1 .hero-line {
white-space: nowrap;
}
.product-hero .lede {
max-width: 760px;
margin: 18px auto 0;
color: var(--ink-3);
font-size: clamp(17px, 1.7vw, 20px);
line-height: 1.5;
}
/* ============================================================
Shared section scaffolding
============================================================ */
.section-header {
margin-bottom: 36px;
}
.section-header.centered {
max-width: 640px;
margin-right: auto;
margin-left: auto;
text-align: center;
margin-bottom: 40px;
}
.section-header.mode-header {
max-width: 780px;
margin-bottom: 34px;
}
.section-header + .pricing-teaser {
margin-top: 0;
}
.section-title {
font-size: clamp(34px, 5vw, 52px);
line-height: 1;
letter-spacing: -0.04em;
}
.loop-title {
max-width: 980px;
}
.loop-title-line {
white-space: nowrap;
}
.loop-section {
background: #fff;
}
.product-steps {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
}
.product-step {
padding: 22px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: #fff;
box-shadow: var(--card-shadow);
}
.product-step-num {
display: grid;
place-items: center;
width: 34px;
height: 34px;
margin-bottom: 16px;
border-radius: 8px;
border: 1px solid rgba(234, 88, 12, 0.16);
background: #fff7ed;
color: rgba(201, 77, 9, 0.62);
font-family: var(--sans);
font-weight: 700;
box-shadow: none;
}
.product-step h3,
.product-panel h3 {
margin-bottom: 8px;
color: #0b1220;
letter-spacing: -0.02em;
}
.product-step p,
.product-panel p,
.report-card p {
color: var(--ink-3);
font-size: 15px;
line-height: 22px;
}
.tier-name {
font-size: 25px;
font-weight: 600;
line-height: 30px;
letter-spacing: -0.02em;
}
.tier-feat-item {
font-size: 15px;
line-height: 22px;
}
/* ============================================================
Product sections — big product name treatment
============================================================ */
.product-intro {
margin-bottom: 44px;
}
.product-name {
margin: 0 0 26px;
font-size: clamp(42px, 4.4vw, 60px);
font-weight: 700;
line-height: 0.95;
letter-spacing: -0.05em;
}
.product-intro-grid {
max-width: none;
}
.product-headline {
margin: 0;
color: #0b1220;
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.025em;
}
.product-intro-grid .section-lede {
max-width: 760px;
margin: 14px 0 0;
}
.process-block {
margin-bottom: 56px;
}
/* ============================================================
Process timeline
============================================================ */
.process-timeline {
display: grid;
grid-template-columns: 60px minmax(0, 1fr);
column-gap: 26px;
row-gap: 0;
}
.process-step {
display: contents;
}
.process-rail {
position: relative;
}
.process-step:not(:last-child) .process-rail::after {
content: "";
position: absolute;
top: 40px;
bottom: -40px;
left: 50%;
width: 2px;
transform: translateX(-50%);
border-radius: 999px;
background: linear-gradient(180deg, rgba(234, 88, 12, 0.32), rgba(226, 232, 240, 0.85));
}
.process-marker {
position: absolute;
top: 40px;
left: 50%;
z-index: 1;
display: grid;
place-items: center;
width: 44px;
height: 44px;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px solid rgba(234, 88, 12, 0.16);
background: #fff7ed;
color: rgba(201, 77, 9, 0.72);
box-shadow: none;
}
.process-marker-icon {
width: 18px;
height: 18px;
}
.process-content.product-panel {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: 30px;
align-items: start;
margin-bottom: 26px;
padding: 30px 32px;
}
.process-copy {
padding-top: 2px;
}
.process-step:last-child .process-content {
margin-bottom: 0;
}
.process-kicker {
display: inline-flex;
margin-bottom: 10px;
color: var(--brand-dark);
font-family: var(--sans);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.process-copy h3 {
margin-bottom: 8px;
color: #0b1220;
letter-spacing: -0.02em;
}
.process-copy p {
color: var(--ink-3);
font-size: 15px;
line-height: 22px;
}
.process-copy .chip-list {
margin-top: 14px;
}
/* ============================================================
Shared visual frame — every product visual on the page sits
on the same tinted canvas so it reads as "a piece of the UI",
not more copy. One framing device per level: cards get the
border, frames get the fill, tiles inside stay flat white.
============================================================ */
.process-visual,
.trend-chart,
.share-stack,
.gap-stack,
.viz-frame {
display: flex;
flex-direction: column;
min-width: 0;
padding: 12px;
border: 0;
border-radius: 10px;
background: var(--bg-2);
}
/* Figure caption — one treatment everywhere: always the first
element in the frame, top-left, same inset, same gap below. */
.process-visual > .trend-caption,
.trend-chart > .trend-caption,
.share-stack > .trend-caption,
.gap-stack > .trend-caption,
.viz-frame > .trend-caption {
order: -1;
}
.trend-chart,
.share-stack,
.gap-stack {
margin-top: 12px;
}
.report-card.featured .viz-frame {
align-self: start;
}
/* Setup / workflow checklist tiles */
.setup-tiles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.setup-tile {
display: flex;
align-items: center;
gap: 9px;
padding: 11px 13px;
border-radius: 8px;
background: #fff;
box-shadow: var(--tile-shadow);
color: var(--ink-2);
font-size: 13px;
font-weight: 600;
}
.setup-tile-check {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--green);
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1;
}
/* Mini HubSpot playbook preview used inside the process visual column */
.hubspot-mini {
padding: 18px 20px;
border-radius: 8px;
background: #fff;
box-shadow: var(--tile-shadow);
}
.hubspot-mini .hubspot-top {
margin-bottom: 10px;
font-size: 13px;
}
.hubspot-mini .company-line {
margin-bottom: 12px;
color: #0b1220;
font-size: 14px;
font-weight: 700;
letter-spacing: -0.01em;
}
.hubspot-mini .playbook-step {
padding: 10px 0;
}
.hubspot-mini .playbook-step:first-of-type {
border-top: 0;
}
.hubspot-mini .playbook-num {
width: 22px;
height: 22px;
font-size: 11px;
}
.hubspot-mini .playbook-step b {
font-size: 13px;
}
.hubspot-mini .playbook-step span {
font-size: 12.5px;
}
.product-panel,
.report-card,
.process-content {
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: #fff;
box-shadow: var(--card-shadow);
}
.product-panel {
padding: 26px;
}
.chip-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.chip {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 6px 10px;
border-radius: 999px;
background: var(--bg-2);
color: var(--ink-3);
font-size: 12px;
font-weight: 700;
}
.profile-grid,
.factor-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.factor-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.profile-item,
.factor {
padding: 14px;
border-radius: 8px;
background: #fff;
box-shadow: var(--tile-shadow);
}
.profile-label,
.factor span {
display: flex;
align-items: center;
gap: 6px;
color: var(--ink-3);
font-size: 12px;
font-weight: 700;
}
.share-dot.s5 { background: var(--green-dark); }
.share-dot.s6 { background: var(--brand); }
.profile-value,
.factor b {
display: block;
margin-top: 4px;
color: #0b1220;
font-size: 14px;
font-weight: 700;
}
/* Secondary detail line inside a profile tile — importance stars,
satisfaction, timing. Quieter than the value, still scannable. */
.profile-meta {
margin-top: 4px;
color: var(--ink-3);
font-size: 11.5px;
font-weight: 600;
}
.profile-meta .stars {
color: #f59e0b;
letter-spacing: 1px;
}
.profile-meta .stars-off {
color: rgba(148, 163, 184, 0.55);
letter-spacing: 1px;
}
/* Action plan mock table (inside featured report card) */
.action-table {
overflow: hidden;
border-radius: 8px;
background: #fff;
box-shadow: var(--tile-shadow);
}
.action-row {
display: grid;
grid-template-columns: 1.35fr 0.7fr 0.8fr 0.8fr;
gap: 12px;
align-items: center;
padding: 14px 16px;
border-bottom: 1px solid var(--rule);
color: var(--ink-2);
font-size: 13px;
}
.action-row:last-child {
border-bottom: 0;
}
.action-head {
color: var(--ink-3);
font-weight: 700;
}
.impact {
color: var(--green-dark);
font-family: var(--sans);
font-weight: 700;
}
.owner-tag {
display: inline-flex;
width: fit-content;
padding: 5px 9px;
border-radius: 999px;
background: var(--brand-tint);
color: var(--brand-dark);
font-size: 12px;
font-weight: 700;
}
/* Trend chart — vertical bars over time (Sales Execution) */
.trend-caption {
display: block;
margin: 0 0 10px;
color: var(--ink-3);
font-size: 12px;
font-weight: 700;
line-height: 1.4;
}
.trend-bars {
display: flex;
align-items: flex-end;
gap: 5px;
height: 84px;
}
.trend-bar {
flex: 1 1 0;
min-width: 0;
border-radius: 3px 3px 0 0;
background: rgba(148, 163, 184, 0.45);
}
.trend-bar.up {
background: var(--red);
}
.trend-axis {
display: flex;
justify-content: space-between;
margin-top: 8px;
color: var(--ink-4);
font-family: var(--sans);
font-size: 10px;
font-weight: 600;
}
/* Share stack — single horizontal stacked bar with legend (Buyer Dynamics).
Layout comes from the shared visual-frame rule above — no local
alignment overrides, so its caption sits exactly like its siblings. */
.share-track {
display: flex;
height: 12px;
overflow: hidden;
border-radius: 999px;
background: #fff;
}
.share-seg {
height: 100%;
}
.share-seg.s1 { background: var(--red); }
.share-seg.s2 { background: #f59e0b; }
.share-seg.s3 { background: #38bdf8; }
.share-seg.s4 { background: rgba(148, 163, 184, 0.7); }
.share-legend {
display: grid;
gap: 8px;
margin-top: 14px;
}
.share-legend-item {
display: flex;
align-items: center;
gap: 8px;
color: var(--ink-2);
font-size: 12px;
font-weight: 600;
}
.share-dot {
flex: 0 0 auto;
width: 9px;
height: 9px;
border-radius: 3px;
}
.share-dot.s1 { background: var(--red); }
.share-dot.s2 { background: #f59e0b; }
.share-dot.s3 { background: #38bdf8; }
.share-dot.s4 { background: rgba(148, 163, 184, 0.7); }
.share-pct {
margin-left: auto;
color: var(--ink-3);
font-family: var(--sans);
font-weight: 700;
}
.report-card--chart p {
min-height: 3.2em;
}
/* Gap bars — horizontal bars, one per gap type (Product Fit) */
.report-card--chart {
display: flex;
flex-direction: column;
}
.report-card--chart > :last-child {
flex: 1 1 auto;
}
/* Inside stretched frames: caption stays pinned to the top edge,
the flexible margin pushes the chart content to the bottom —
captions align across the row AND chart baselines align. */
.report-card--chart > :last-child > .trend-caption {
margin-bottom: auto;
padding-bottom: 10px;
}
.gap-list {
display: grid;
gap: 9px;
}
.gap-row {
display: grid;
grid-template-columns: 1fr 64px;
gap: 10px;
align-items: center;
}
.gap-row .gap-label {
color: var(--ink-2);
font-size: 12.5px;
font-weight: 700;
}
.gap-row .loss-bar-track {
grid-column: 1 / -1;
display: block;
height: 8px;
overflow: hidden;
border-radius: 999px;
background: #fff;
}
.loss-bar-fill {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--brand), #fb923c);
}
.gap-row .loss-bar-value {
color: var(--red);
font-family: var(--sans);
font-size: 12px;
font-weight: 700;
text-align: right;
}
/* Win/lost split — Revenue Impact card. Reuses the share-track
pill so segments inherit the scaleX grow-in animation. */
.gap-row .wl-track {
grid-column: 1 / -1;
height: 9px;
}
.share-seg.won,
.share-dot.won { background: var(--green); }
.share-seg.lost,
.share-dot.lost { background: rgba(239, 68, 68, 0.3); }
.gap-row .wl-value {
color: var(--green-dark);
font-family: var(--sans);
font-size: 12px;
font-weight: 700;
text-align: right;
}
.wl-legend {
display: flex;
gap: 18px;
margin-top: 10px;
}
/* Insight feed — Insights card. White tiles on the tinted frame,
category tag + one concrete recommendation per row. */
.insight-list {
display: grid;
gap: 6px;
}
.insight-row {
padding: 9px 11px;
border-radius: 8px;
background: #fff;
box-shadow: var(--tile-shadow);
}
.insight-tag {
display: inline-flex;
padding: 2px 7px;
border-radius: 999px;
background: var(--brand-tint);
color: var(--brand-dark);
font-size: 11px;
font-weight: 700;
}
/* Extra class in the selector so this survives the later
`.report-card p { font-size: 16px }` type-pass override —
insight rows are mock-UI, not reading copy. */
.report-card .insight-row p {
margin: 4px 0 0;
color: var(--ink-2);
font-size: 13px;
font-weight: 600;
line-height: 1.45;
}
/* Report grids */
#intelligence,
#recycling {
padding-bottom: 56px;
}
.report-block {
margin-top: 26px;
}
.report-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-auto-flow: dense;
gap: 16px;
align-items: stretch;
}
.report-card {
grid-column: span 2;
width: auto;
max-width: none !important;
justify-self: stretch;
min-height: 0;
padding: 20px;
}
.report-grid.recycling-reports .report-card {
min-height: 0;
}
.report-card:not(.featured) h3 {
margin-bottom: 8px;
}
.report-card h3 {
margin-bottom: 8px;
color: #0b1220;
font-size: 25px;
font-weight: 600;
line-height: 30px;
letter-spacing: -0.02em;
}
.report-card.featured {
grid-column: span 4;
grid-row: span 3;
display: grid;
gap: 22px;
align-content: start;
min-height: 0;
}
.report-card-copy {
display: grid;
gap: 16px;
}
.report-grid.intelligence-reports .report-card.featured {
grid-column: span 3;
}
.report-grid.intelligence-reports .report-card:nth-child(2),
.report-grid.intelligence-reports .report-card:nth-child(3),
.report-grid.intelligence-reports .report-card:nth-child(4) {
grid-column: span 3;
}
.report-grid.recycling-reports {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.report-grid.recycling-reports .report-card {
grid-column: span 1;
grid-row: auto;
}
/* Positive-metric variants — same chart primitives, green instead of red
for cards that report a gain rather than a loss (Readiness Score,
Nurturing Performance) */
.trend-chart.positive .trend-bar.up {
background: var(--green);
}
.gap-row.positive .loss-bar-value {
color: var(--green-dark);
}
.gap-row.positive .loss-bar-fill {
background: linear-gradient(90deg, var(--green), #4ade80);
}
/* Recycling: readiness score cards */
.score-cards {
display: grid;
gap: 8px;
}
.score-card {
padding: 18px;
border-radius: 8px;
background: #fff;
box-shadow: var(--tile-shadow);
color: #0b1220;
}
.score-card + .score-card {
opacity: 0.85;
}
.score-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.dashboard-subtitle {
margin-top: 4px;
color: var(--ink-3);
font-size: 13px;
line-height: 1.45;
}
.score-card .factor-grid {
margin-top: 14px;
}
.score-card .factor {
background: var(--bg-2);
box-shadow: none;
}
.score-card .factor b {
display: inline-flex;
width: fit-content;
margin-top: 6px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(21, 128, 61, 0.1);
color: var(--green-dark);
font-size: 12px;
}
.company {
font-weight: 700;
letter-spacing: -0.02em;
}
.ready-score {
color: var(--green-dark);
font-family: var(--sans);
font-size: 25px;
font-weight: 700;
}
.score-value {
display: flex;
align-items: baseline;
gap: 6px;
}
.score-word {
color: var(--ink-3);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
}
/* HubSpot winback playbook */
.hubspot-top {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
color: #ff5c35;
font-weight: 800;
}
.hubspot-top::before {
content: "";
flex: 0 0 auto;
width: 9px;
height: 9px;
border-radius: 2px;
background: #ff5c35;
}
.playbook-step {
display: flex;
gap: 12px;
padding: 13px 0;
border-top: 1px solid var(--rule);
}
.playbook-num {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 26px;
height: 26px;
border-radius: 50%;
background: #fff1ed;
color: #ff5c35;
font-family: var(--sans);
font-size: 12px;
font-weight: 700;
}
.playbook-step b {
display: block;
margin-bottom: 3px;
}
.playbook-step span {
color: var(--ink-3);
font-size: 13px;
line-height: 1.45;
}
/* Deal card showcase: loss intelligence + winback playbook,
shown as they actually appear on the HubSpot deal record */
.dealcard-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
margin-top: 8px;
}
.dealcard {
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: #fff;
box-shadow: var(--card-shadow);
overflow: hidden;
}
.dealcard-chrome {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 0;
padding: 12px 20px;
border-bottom: 1px solid var(--rule);
background: var(--bg-2);
}
.dealcard-powered {
color: inherit;
}
.dealcard-chrome + .dealcard-deal {
padding-top: 16px;
}
.dealcard-deal {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: 68px;
padding: 16px 20px 14px;
border-bottom: 1px solid var(--rule);
box-sizing: border-box;
}
.dealcard-company {
display: flex;
align-items: center;
gap: 10px;
color: #0b1220;
font-size: 16px;
font-weight: 700;
letter-spacing: -0.01em;
}
.dealcard-stage {
padding: 2px 9px;
border-radius: 999px;
font-family: var(--sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.01em;
white-space: nowrap;
}
.dealcard-stage.is-lost {
background: rgba(239, 68, 68, 0.1);
color: var(--red);
}
.dealcard-stage.is-ready {
background: rgba(21, 128, 61, 0.1);
color: var(--green-dark);
}
.dealcard-amount {
flex: 0 0 auto;
margin-top: 3px;
color: var(--ink-3);
font-size: 13px;
font-weight: 600;
text-align: right;
}
.dealcard-body {
padding: 18px 20px 20px;
}
.dealcard-body-title {
margin-bottom: 12px;
color: var(--ink-3);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.dealcard .profile-grid {
grid-template-columns: 1fr;
}
.dealcard .playbook-step:first-of-type {
padding-top: 0;
border-top: 0;
}
.dealcard-caption {
margin-top: 24px;
color: var(--ink-3);
font-size: 13.5px;
text-align: center;
}
@media (max-width: 640px) {
.dealcard-grid {
grid-template-columns: 1fr;
}
}
/* Autopilot mode cards */
.mode-cards .tier-name {
color: #0b1220;
}
.mode-cards {
gap: 24px;
}
.mode-cards .tier {
border: 1px solid var(--line);
background: #fff;
box-shadow: var(--card-shadow);
}
/* ============================================================
Responsive
============================================================ */
@media (max-width: 980px) {
.process-content.product-panel {
grid-template-columns: 1fr;
gap: 20px;
}
.product-hero h1 .hero-line {
white-space: normal;
}
.loop-title-line {
white-space: normal;
}
.product-steps {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.report-grid.intelligence-reports,
.report-grid.recycling-reports {
grid-template-columns: 1fr;
}
.report-card,
.report-card.featured {
grid-column: 1 / -1;
grid-row: auto;
}
.report-card.featured {
grid-template-columns: 1fr;
gap: 22px;
}
}
@media (max-width: 640px) {
.product-steps,
.report-grid,
.profile-grid,
.factor-grid,
.setup-tiles {
grid-template-columns: 1fr;
}
.process-timeline {
grid-template-columns: 40px minmax(0, 1fr);
column-gap: 16px;
}
.process-marker {
width: 36px;
height: 36px;
top: 34px;
}
.process-marker-icon {
width: 15px;
height: 15px;
}
.process-step:not(:last-child) .process-rail::after {
top: 34px;
bottom: -34px;
}
.process-content.product-panel {
padding: 22px 20px;
}
.report-card {
min-height: 0;
}
.action-row {
grid-template-columns: 1fr;
gap: 6px;
}
.score-top {
flex-direction: column;
align-items: flex-start;
}
}
/* ============================================================
DO-inspired type & rhythm pass (v9.1)
Direction: DigitalOcean-style readability — calmer headings
(looser line-height, less aggressive tracking), 18px reading
copy at 1.6, and a slightly more generous vertical rhythm.
Deliberately NOT touched: mock-UI text (tiles, tables,
legends, HubSpot minis) — those are visuals, not prose.
Everything below overrides rules above it; delete this block
to revert.
============================================================ */
/* --- Headings: same sizes, calmer set --- */
.product-hero h1 {
font-size: clamp(42px, 4.4vw, 60px);
line-height: 1.08;
letter-spacing: -0.028em;
}
.section-title {
font-size: clamp(30px, 3.6vw, 44px);
line-height: 1.12;
letter-spacing: -0.022em;
}
.product-name {
line-height: 1.02;
letter-spacing: -0.04em;
}
.product-headline {
line-height: 1.25;
letter-spacing: -0.02em;
}
.report-card h3,
.tier-name {
font-size: 22px;
line-height: 1.3;
}
.product-step h3,
.product-panel h3 {
font-size: 18px;
font-weight: 600;
line-height: 1.35;
margin-bottom: 10px;
}
.process-copy h3 {
font-size: 22px;
font-weight: 600;
line-height: 1.3;
margin-bottom: 10px;
}
/* --- Reading copy: 18px ledes, 16px card prose, 1.6 rhythm --- */
.product-hero .lede {
max-width: 720px;
margin-top: 22px;
font-size: clamp(17px, 1.6vw, 19px);
line-height: 1.6;
}
.section-lede {
font-size: 18px;
line-height: 1.6;
}
.product-step p,
.product-panel p,
.process-copy p,
.report-card p {
font-size: 16px;
line-height: 1.6;
}
.tier-feat-item {
font-size: 16px;
line-height: 1.55;
}
/* Inline emphasis in prose: semibold + one step darker, so bolded
phrases guide scanning without shouting. Mock-UI strong untouched. */
.product-hero .lede strong,
.section-lede strong,
.process-copy p strong,
.report-card-copy p strong {
color: var(--ink-2);
font-weight: 600;
}
.cta-block p strong {
color: inherit;
font-weight: 700;
}
/* --- Vertical rhythm: more air where copy meets copy --- */
.product-hero {
padding: 104px 0 76px;
}
.section-header {
margin-bottom: 48px;
}
.section-header.centered {
max-width: 680px;
margin-bottom: 56px;
}
.section-header.mode-header {
margin-bottom: 48px;
}
.section-header .section-lede,
.product-intro-grid .section-lede {
margin-top: 16px;
}
.product-intro {
margin-bottom: 56px;
}
.process-block {
margin-bottom: 72px;
}
.report-block {
margin-top: 36px;
}
#intelligence,
#recycling {
padding-bottom: 72px;
}
/* --- Cards: a touch more interior padding, wider grid gutters --- */
.product-panel {
padding: 27px;
}
.report-card {
padding: 20px;
}
.product-step {
padding: 26px;
}
.product-steps {
gap: 18px;
}
.report-grid {
gap: 20px;
}
.process-content.product-panel {
gap: 34px;
padding: 30px 34px; /* vertical stays 30px — rail markers are tuned to it */
}
@media (max-width: 640px) {
.product-hero {
padding: 72px 0 56px;
}
.product-panel,
.report-card,
.product-step {
padding: 24px 20px;
}
}
/* ============================================================
Clean-SaaS polish pass (v11)
Direction: quiet surfaces, one warm accent doing the pointing.
Color and size mark hierarchy — the sequence chips, the
featured Action Plan, the dollar impact, the Auto-pilot tier.
Motion rules live in the block above; everything here is
static styling plus hover micro-interactions.
============================================================ */
/* --- Hero atmosphere: faint dot grid + warm glow behind the
headline, fading out before the first section --- */
.product-hero {
position: relative;
overflow: hidden;
}
.product-hero::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(27, 42, 74, 0.13) 1px, transparent 1px);
background-size: 24px 24px;
-webkit-mask-image: radial-gradient(680px 340px at 50% 8%, #000 30%, transparent 75%);
mask-image: radial-gradient(680px 340px at 50% 8%, #000 30%, transparent 75%);
pointer-events: none;
}
.product-hero::after {
content: "";
position: absolute;
top: -220px;
left: 50%;
width: 900px;
height: 480px;
transform: translateX(-50%);
background: radial-gradient(closest-side, rgba(234, 88, 12, 0.08), transparent 70%);
pointer-events: none;
}
.product-hero .container {
position: relative;
z-index: 1;
}
/* --- Sequence chips: filled gradient instead of pale tint, so
the 1→5 loop reads at a glance --- */
.product-step-num {
border: 0;
background: var(--brand-grad);
color: #fff;
font-size: 14px;
box-shadow: 0 2px 6px rgba(234, 88, 12, 0.28);
}
/* --- Featured Action Plan: a size step up on
the heading — this is the card the section argues for --- */
.report-card.featured {
position: relative;
overflow: hidden;
}
.report-card.featured h3 {
font-size: 26px;
}
/* --- Money talks: impact figures get a half-step more presence --- */
.impact {
font-size: 13.5px;
letter-spacing: -0.01em;
}
/* --- Auto-pilot tier: same accent device as the featured card,
marking it as the destination state of the loop --- */
.mode-cards .tier {
position: relative;
overflow: hidden;
}
/* --- Hover micro-interactions --- */
@media (prefers-reduced-motion: no-preference) {
.product-step,
.report-card,
.mode-cards .tier {
transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), border-color 0.22s var(--ease-out);
}
.btn .arrow {
display: inline-block;
transition: transform 0.2s var(--ease-out);
}
.action-row,
.setup-tile,
.score-card,
.chip {
transition: background-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
}
@media (hover: hover) {
.product-step:hover,
.report-card:hover,
.mode-cards .tier:hover {
transform: translateY(-3px);
border-color: rgba(234, 88, 12, 0.28);
box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 14px 30px rgba(15, 23, 42, 0.1);
}
.btn:hover .arrow {
transform: translateX(3px);
}
.action-row:not(.action-head):hover {
background: rgba(255, 247, 237, 0.6);
}
.setup-tile:hover {
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 10px rgba(15, 23, 42, 0.08);
}
.score-card + .score-card:hover {
opacity: 1;
}
}
/* --- Quality floor: visible keyboard focus on interactive bits --- */
.btn:focus-visible,
.nav-links a:focus-visible,
.footer-links a:focus-visible {
outline: 2px solid var(--brand-dark);
outline-offset: 3px;
border-radius: 4px;
}
/* ============================================================
Canonical loop pass (v15 · synthesis)
One loop, five customer verbs; each step carries its own
evidence cards. Uncover · Prioritize · Improve (Intelligence)
Nurture · Winback (Recycling; Score = the step-5 trigger)
The top boxes are anchor links to their matching numbered
step below; setup lives outside the loop as a pre-panel
inside Rizer Intelligence; rail markers carry the same 1–5
numbers as the top boxes so the mapping is self-evident.
============================================================ */
/* --- Loop map: 3 + 2, bracketed under the two products.
Column widths are solved so all five cards are equal:
card x = (C - 4*18)/5 -> intelligence track = 3x + 2 gaps
= calc(60% - 7.2px). Groups are flex columns so the card
rows stretch to the same height on both sides. --- */
.loop-map {
display: grid;
grid-template-columns: calc(60% - 7.2px) minmax(0, 1fr);
gap: 18px;
align-items: stretch;
}
.loop-group {
display: flex;
flex-direction: column;
min-width: 0;
}
.loop-group-steps {
flex: 1 1 auto;
}
.loop-group-label {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 14px;
color: var(--brand-dark);
font-family: var(--sans);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.loop-group-label::before,
.loop-group-label::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: var(--line);
}
.loop-group-steps {
display: grid;
gap: 18px;
}
.loop-group-steps--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.loop-group-steps--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Top boxes are now links to their step */
a.product-step {
display: block;
color: inherit;
text-decoration: none;
}
a.product-step:focus-visible {
outline: 2px solid var(--brand-dark);
outline-offset: 3px;
}
/* Anchor targets land clear of the sticky header */
[id^="step-"] {
scroll-margin-top: 96px;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
/* --- Rail markers: same numbered chips as the top boxes --- */
.process-marker {
border: 0;
background: var(--brand-grad);
color: #fff;
box-shadow: 0 2px 6px rgba(234, 88, 12, 0.28);
}
.process-marker-num {
font-family: var(--sans);
font-size: 15px;
font-weight: 700;
line-height: 1;
}
/* --- OPTION 1 · Foundation band: slab the loop stands on.
One-time things sit beneath recurring things — tinted band,
muted mono label, white chips as the data-model texture. --- */
.loop-foundation {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 18px;
margin-top: 14px;
padding: 14px 18px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--bg-2);
}
.loop-foundation-label {
color: var(--ink-4);
font-family: var(--sans);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.loop-foundation-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.loop-foundation .chip {
background: #fff;
box-shadow: var(--tile-shadow);
}
/* --- OPTION 3 · Platform section panel spacing --- */
#foundation .process-content.product-panel {
margin-bottom: 0;
}
/* (setup-pre rules removed — panel relocated to #foundation section) */
.process-kicker--muted {
color: var(--ink-3);
}
/* --- Titled steps: verb heading sits outside the panel, next to
the numbered marker (mockup layout) --- */
.process-body {
min-width: 0;
margin-bottom: 44px;
}
.process-step:last-child .process-body {
margin-bottom: 0;
}
.process-body > .process-content.product-panel {
margin-bottom: 0;
}
.process-step-title {
display: block;
margin: 8px 0 14px;
color: var(--brand-dark);
font-family: var(--sans);
font-size: 14px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Markers align with the step kicker, not the panel */
.process-marker {
top: 18px;
}
.process-step:not(:last-child) .process-rail::after {
top: 18px;
bottom: -18px;
}
/* --- Step evidence: each step carries its own report cards
directly below its panel --- */
.report-grid.step-cards {
margin-top: 20px;
}
.step-cards--2 .report-card {
grid-column: span 3;
}
/* --- Equal visuals per row: on desktop, the chart cards share
row tracks (title / description / frame) via subgrid, so
every gray frame in a row is pixel-identical in size no
matter how the copy above it wraps. Falls back to the
flex stretch behavior on older browsers and on mobile,
where the cards stack full-width anyway. --- */
@media (min-width: 981px) {
@supports (grid-template-rows: subgrid) {
.report-grid.step-cards {
row-gap: 0; /* cards sit on one line; spacing moves to margins below */
}
.step-cards .report-card--chart {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
align-content: start;
}
.step-cards .report-card--chart h3 {
margin-bottom: 8px;
}
.step-cards .report-card--chart p {
min-height: 0;
margin-bottom: 14px;
}
}
}
/* Note: the 2-up Prioritize cards (Revenue Impact, Insights) now use
the same stretch-to-fill behavior as the other report cards above,
so their gray visual frames match height and align horizontally. */
/* --- Winback: one marker, two stacked panels (readiness + playbook) --- */
.process-stack {
display: grid;
gap: 26px;
}
.process-stack .process-content.product-panel {
margin-bottom: 0;
}
/* --- Report grids get a label: reports are outputs, not steps --- */
.report-label {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
color: var(--ink-3);
font-family: var(--sans);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.report-label::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: var(--line);
}
/* --- Responsive --- */
@media (max-width: 1100px) {
.loop-map {
grid-template-columns: 1fr;
}
}
@media (max-width: 980px) {
.report-grid.step-cards {
grid-template-columns: 1fr;
}
.report-grid.step-cards .report-card {
grid-column: 1 / -1;
}
}
@media (max-width: 640px) {
.loop-group-steps--3,
.loop-group-steps--2 {
grid-template-columns: 1fr;
}
.process-marker-num {
font-size: 13px;
}
.process-marker {
top: 16px;
}
.process-step:not(:last-child) .process-rail::after {
top: 16px;
bottom: -16px;
}
.process-step-title {
font-size: 13px;
margin: 6px 0 12px;
}
.process-group {
padding: 16px 14px;
}
}
/* ============================================================
HubSpot two-way flow diagram (v28 · #hubspot · production)
The section IS the integration. Two nodes, three wires:
Import (orange → Rizer) · Map & detect (slate, dashed, ↔)
· Return (green → HubSpot). Almost no prose — the diagram
plus a one-line mono status strip carry the whole argument.
Choreography (all gated behind html.rz-anim + .rz-in, so
reduced-motion / no-JS users get the full static diagram):
1. nodes pop 2. wires draw from their origin 3. arrowheads
land 4. labels fade up 5. packets start flowing.
============================================================ */
/* --- Stage: faint blueprint dot grid behind the diagram --- */
.hs-stage {
position: relative;
max-width: none;
margin: 0 auto;
padding: 34px 10px;
}
.hs-stage::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(27, 42, 74, 0.12) 1px, transparent 1px);
background-size: 22px 22px;
-webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
pointer-events: none;
}
.hs-diagram {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(240px, 330px) minmax(0, 1fr) minmax(240px, 330px);
gap: 0 36px;
align-items: center;
}
/* --- Nodes --- */
.hs-node {
padding: 22px 24px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: #fff;
box-shadow: var(--card-shadow);
}
.hs-node-head {
margin-bottom: 14px;
font-size: 16px;
font-weight: 800;
letter-spacing: -0.01em;
}
.hs-node-head.is-hubspot { color: #ff5c35; }
.hs-node-head.is-rizer { color: #0b1220; }
.hs-node-row {
display: flex;
align-items: center;
gap: 9px;
margin-top: 6px;
padding: 9px 11px;
border-radius: 8px;
background: var(--bg-2);
color: var(--ink-2);
font-size: 12.5px;
font-weight: 600;
}
.hs-node-row svg {
flex: 0 0 auto;
width: 14px;
height: 14px;
color: #94a3b8;
}
/* --- Wires --- */
.hs-wires {
display: grid;
gap: 46px;
min-width: 0;
}
.hs-wire {
position: relative;
height: 32px;
}
/* Origin ports: hollow ring where the wire leaves its source */
.hs-wire.to-rizer::before,
.hs-wire.to-hubspot::before {
content: "";
position: absolute;
top: 50%;
z-index: 1;
width: 8px;
height: 8px;
transform: translateY(-50%);
border-radius: 50%;
background: #fff;
}
.hs-wire.to-rizer::before {
left: -4px;
border: 2px solid rgba(255, 92, 53, 0.75);
}
.hs-wire.to-hubspot::before {
right: -4px;
border: 2px solid rgba(34, 197, 94, 0.8);
}
.hs-wire-line {
position: absolute;
top: 50%;
right: 0;
left: 0;
height: 2px;
transform: translateY(-50%);
border-radius: 999px;
}
.hs-wire.to-rizer .hs-wire-line {
background: linear-gradient(90deg, rgba(255, 92, 53, 0.16), rgba(255, 92, 53, 0.68));
}
.hs-wire.to-hubspot .hs-wire-line {
background: linear-gradient(90deg, rgba(34, 197, 94, 0.72), rgba(34, 197, 94, 0.16));
}
.hs-wire.two-way .hs-wire-line {
height: 0;
border-top: 2px dashed rgba(100, 116, 139, 0.42);
border-radius: 0;
}
/* Arrowheads at the destination end(s) */
.hs-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: 5px solid transparent;
}
.hs-wire.to-rizer .hs-arrow {
right: -2px;
border-left: 8px solid rgba(255, 92, 53, 0.85);
}
.hs-wire.to-hubspot .hs-arrow {
left: -2px;
border-right: 8px solid rgba(21, 128, 61, 0.8);
}
.hs-wire.two-way .hs-arrow {
border-width: 4px;
}
.hs-wire.two-way .hs-arrow.at-start {
left: -2px;
border-right: 7px solid rgba(100, 116, 139, 0.6);
}
.hs-wire.two-way .hs-arrow.at-end {
right: -2px;
border-left: 7px solid rgba(100, 116, 139, 0.6);
}
/* Small caption sitting above each wire's label chip */
.hs-wire-title {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
transform: translate(-50%, -36px);
font-family: var(--sans);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
white-space: nowrap;
}
.hs-wire.to-rizer .hs-wire-title { color: #ff5c35; }
.hs-wire.two-way .hs-wire-title { color: #94a3b8; }
.hs-wire.to-hubspot .hs-wire-title { color: var(--green-dark); }
/* Label chip riding the wire */
.hs-wire-label {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
transform: translate(-50%, -50%);
border-radius: 999px;
background: #fff;
box-shadow: var(--tile-shadow);
color: var(--ink-2);
font-family: var(--sans);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
}
.hs-wire-dir {
display: none;
font-weight: 700;
}
/* --- Packets --- */
.hs-dot {
position: absolute;
top: 50%;
z-index: 1;
width: 8px;
height: 8px;
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
@keyframes hs-flow-r {
0% { left: 3%; opacity: 0; }
12% { opacity: 1; }
88% { opacity: 1; }
100% { left: 97%; opacity: 0; }
}
@keyframes hs-flow-l {
0% { left: 97%; opacity: 0; }
12% { opacity: 1; }
88% { opacity: 1; }
100% { left: 3%; opacity: 0; }
}
/* --- Choreography: everything keys off .hs-stage.rz-in --- */
html.rz-anim .hs-node {
opacity: 0;
transform: translateY(10px) scale(0.97);
transition: opacity 0.5s var(--ease-out), transform 0.55s var(--ease-spring);
}
html.rz-anim .hs-node:last-child {
transition-delay: 0.12s;
}
html.rz-anim .rz-in .hs-node {
opacity: 1;
transform: none;
}
html.rz-anim .hs-wire-line {
transform: translateY(-50%) scaleX(0);
transition: transform 0.7s var(--ease-out);
}
html.rz-anim .hs-wire.to-rizer .hs-wire-line { transform-origin: left; transition-delay: 0.25s; }
html.rz-anim .hs-wire.two-way .hs-wire-line { transform-origin: center; transition-delay: 0.4s; }
html.rz-anim .hs-wire.to-hubspot .hs-wire-line { transform-origin: right; transition-delay: 0.55s; }
html.rz-anim .rz-in .hs-wire-line {
transform: translateY(-50%) scaleX(1);
}
html.rz-anim .hs-arrow,
html.rz-anim .hs-wire.to-rizer::before,
html.rz-anim .hs-wire.to-hubspot::before {
opacity: 0;
transition: opacity 0.3s var(--ease-out) 0.95s;
}
html.rz-anim .rz-in .hs-arrow,
html.rz-anim .rz-in .hs-wire.to-rizer::before,
html.rz-anim .rz-in .hs-wire.to-hubspot::before {
opacity: 1;
}
html.rz-anim .hs-wire-label,
html.rz-anim .hs-wire-title {
opacity: 0;
transform: translate(-50%, calc(-50% + 6px));
transition: opacity 0.45s var(--ease-out) 1.05s, transform 0.45s var(--ease-out) 1.05s;
}
html.rz-anim .rz-in .hs-wire-label {
opacity: 1;
transform: translate(-50%, -50%);
}
html.rz-anim .rz-in .hs-wire-title {
opacity: 1;
transform: translate(-50%, -36px);
}
/* Packets start once the wires are drawn */
html.rz-anim .rz-in .hs-wire.to-rizer .hs-dot {
background: #ff5c35;
box-shadow: 0 0 0 3px rgba(255, 92, 53, 0.14);
animation: hs-flow-r 3.6s ease-in-out 1.3s infinite;
}
html.rz-anim .rz-in .hs-wire.to-hubspot .hs-dot {
background: var(--green);
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
animation: hs-flow-l 3.6s ease-in-out 2.7s infinite;
}
html.rz-anim .rz-in .hs-wire.two-way .hs-dot {
background: #94a3b8;
box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
}
html.rz-anim .rz-in .hs-wire.two-way .hs-dot:first-of-type {
animation: hs-flow-r 4.4s ease-in-out 2s infinite;
}
html.rz-anim .rz-in .hs-wire.two-way .hs-dot:last-of-type {
animation: hs-flow-l 4.4s ease-in-out 4.2s infinite;
}
@media (prefers-reduced-motion: reduce) {
html.rz-anim .hs-node,
html.rz-anim .hs-wire-line,
html.rz-anim .hs-arrow,
html.rz-anim .hs-wire::before,
html.rz-anim .hs-wire-label,
html.rz-anim .hs-wire-title {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.hs-dot {
animation: none !important;
opacity: 0 !important;
}
.hs-wire-line {
transform: translateY(-50%) !important;
}
.hs-wire-label {
transform: translate(-50%, -50%) !important;
}
.hs-wire-title {
transform: translate(-50%, -36px) !important;
}
}
/* --- Mobile: nodes stack, wires become labeled chips --- */
@media (max-width: 900px) {
.hs-stage {
padding: 20px 0;
}
.hs-diagram {
grid-template-columns: 1fr;
gap: 14px;
}
.hs-wires {
gap: 8px;
}
.hs-wire {
height: auto;
text-align: center;
}
.hs-wire-line,
.hs-dot,
.hs-arrow,
.hs-wire.to-rizer::before,
.hs-wire.to-hubspot::before {
display: none;
}
.hs-wire-title {
position: static;
display: block;
margin-bottom: 6px;
transform: none !important;
}
html.rz-anim .hs-wire-title {
transition-delay: 0.3s;
}
.hs-wire-label {
position: static;
transform: none !important;
white-space: normal;
}
html.rz-anim .hs-wire-label {
transition-delay: 0.3s;
}
.hs-wire-dir {
display: none;
}
}