/* ==========================================================================
Rhenti — Variant Alpha · Modern & Clean, Brand-Colored
Same structure as Variant A; palette rebuilt around the brand colors
(blue / navy / yellow / amber / red — see :root). Hand-crafted CSS · mobile-first
========================================================================== */
/* --------------------------------------------------------------------------
Modern CSS reset (Andy Bell, lightly adapted)
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
html, body { min-height: 100%; }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-top: 64px; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; border-radius: 4px; }
/* --------------------------------------------------------------------------
Design tokens
-------------------------------------------------------------------------- */
:root {
/* color
Brand palette sampled from brand_colors.png:
blue #045FB0 · navy #050580 · yellow #FFDF01 · amber #F0AC0C · red #D64040.
Neutrals stay slate (cool, near-navy) so brand hues read clearly against them. */
--white: #ffffff;
--slate-50: #f6f8fb;
--slate-100: #eef2f7;
--slate-200: #e1e7ef;
--slate-300: #c5cedb;
--slate-400: #8e9bb0;
--slate-500: #5f6e85;
--slate-600: #44516a;
--slate-700: #2e3a52;
--slate-800: #1a2238;
--slate-900: #0b1124;
/* primary brand — blue (replaces the old rose accent across the whole site) */
--blue-50: #e8f1fa;
--blue-100: #cfe3f5;
--blue-200: #a3c8ea;
--blue-500: #1672c4;
--blue-600: #045fb0; /* brand blue — primary accent */
--blue-700: #03406f;
/* deep brand indigo — for dark structural moments + secondary accent */
--navy-50: #e7e7f4;
--navy: #050580;
--navy-700: #03035a;
/* warm brand accents — used for stats, highlights, status */
--yellow: #ffdf01;
--amber: #f0ac0c;
--amber-700: #8a6200;
--red-50: #fbe6e6;
--red: #d64040;
--red-700: #a82a2a;
--green-50: #ecfdf5;
--green-600: #059669;
--green-700: #047857;
--yellow-50: #fff8d6;
--yellow-700: #8a6200;
/* fonts */
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
/* layout */
--container: 1200px;
--gutter: 1.5rem;
--radius-sm: 6px;
--radius: 10px;
--radius-lg: 16px;
/* elevation */
--shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-md: 0 6px 24px -8px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.04);
--shadow-lg: 0 24px 60px -20px rgba(15, 23, 42, 0.18), 0 8px 24px -12px rgba(15, 23, 42, 0.10);
/* motion */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
/* Criss-cross brand bands — two opposing diagonal band sets in the brand
palette. Reused by every region; each region masks it to taste. */
/* Accent: thick diagonal colour streaks in choice spots (replaces the plaid). */
/* Accent: thick parallel racing stripes (single diagonal, no criss-cross) —
grouped thick + thin pairs in the brand palette. */
--bands:
repeating-linear-gradient(45deg,
transparent 0 64px,
rgba(4, 95, 176, 0.28) 64px 112px,
transparent 112px 124px,
rgba(4, 95, 176, 0.16) 124px 140px,
transparent 140px 280px,
rgba(240, 172, 12, 0.26) 280px 328px,
transparent 328px 340px,
rgba(240, 172, 12, 0.16) 340px 356px,
transparent 356px 470px,
rgba(214, 64, 64, 0.22) 470px 514px,
transparent 514px 524px,
rgba(5, 5, 128, 0.18) 524px 540px,
transparent 540px 640px);
--band-tile: calc(640px * 1.4142136);
/* corner-accent bloom radii — wider than tall, so the pattern fades faster
vertically as it moves away from a corner. */
--bloom-x: 560px;
--bloom-y: 380px;
}
/* --------------------------------------------------------------------------
Base typography
-------------------------------------------------------------------------- */
body {
font-family: var(--font-sans);
font-size: 1rem;
color: var(--slate-600);
background-color: var(--white);
position: relative;
}
/* Establish a stacking context for main + footer content. */
main, .site-footer {
position: relative;
z-index: 1;
}
h1, h2, h3, h4 { color: var(--slate-900); font-weight: 600; }
h1 { letter-spacing: -0.03em; line-height: 1.05; font-weight: 700; }
h2 { letter-spacing: -0.02em; line-height: 1.1; }
h3 { letter-spacing: -0.01em; line-height: 1.2; }
p { color: var(--slate-600); }
.eyebrow {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--blue-600);
}
/* --------------------------------------------------------------------------
Layout primitives
-------------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: var(--slate-900);
color: var(--white);
padding: 0.5rem 1rem;
border-radius: var(--radius-sm);
z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }
/* --------------------------------------------------------------------------
Buttons
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
border-radius: var(--radius-sm);
font-weight: 500;
font-size: 0.9375rem;
line-height: 1;
border: 1px solid transparent;
transition: background-color 150ms var(--ease),
border-color 150ms var(--ease),
color 150ms var(--ease),
transform 150ms var(--ease),
box-shadow 150ms var(--ease);
white-space: nowrap;
}
.btn-lg { padding: 0.875rem 1.5rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-primary {
background: var(--blue-600);
color: var(--white);
}
.btn-primary:hover { background: var(--blue-700); }
.btn-secondary {
background: var(--white);
color: var(--blue-600);
border-color: var(--blue-200);
}
.btn-secondary:hover { background: var(--blue-50); border-color: var(--blue-500); color: var(--blue-700); }
.btn-ghost {
background: transparent;
color: var(--slate-700);
}
.btn-ghost:hover { background: var(--slate-100); color: var(--slate-900); }
.link-arrow {
display: inline-flex;
align-items: center;
font-weight: 500;
color: var(--blue-600);
transition: color 150ms var(--ease);
}
.link-arrow:hover { color: var(--blue-700); }
/* --------------------------------------------------------------------------
Nav
-------------------------------------------------------------------------- */
.site-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.85);
background-clip: padding-box; /* keep the bg out of the 1px border so it can't wash the hero seam */
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
transition: background-color 200ms var(--ease),
box-shadow 200ms var(--ease);
}
.site-nav.is-scrolled {
background: rgba(255, 255, 255, 0.95);
box-shadow: var(--shadow-sm);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
height: 64px;
transition: height 200ms var(--ease);
}
.site-nav.is-scrolled .nav-inner { height: 56px; }
.nav-brand img { height: 28px; width: auto; }
.nav-links {
display: none;
gap: 0.25rem;
align-items: center;
margin-left: auto;
justify-content: center;
}
.nav-link {
padding: 0.5rem 0.875rem;
border-radius: var(--radius-sm);
font-size: 0.9375rem;
font-weight: 500;
color: var(--slate-700);
transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.nav-link:hover { color: var(--slate-900); background: var(--slate-100); }
.nav-link--disabled {
color: var(--slate-400);
cursor: not-allowed;
pointer-events: none;
}
.nav-actions {
display: none;
gap: 0.5rem;
align-items: center;
}
.nav-toggle {
display: inline-flex;
flex-direction: column;
justify-content: space-between;
width: 28px;
height: 22px;
padding: 2px;
}
.nav-toggle span {
display: block;
height: 2px;
background: var(--slate-800);
border-radius: 2px;
transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
.mobile-nav {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.75rem var(--gutter) 1.25rem;
border-top: 1px solid var(--slate-200);
background: var(--white);
}
.mobile-nav[hidden] { display: none; }
.mobile-link {
padding: 0.875rem 0.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--slate-800);
border-bottom: 1px solid var(--slate-100);
}
.mobile-link--disabled { color: var(--slate-400); pointer-events: none; }
.mobile-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
@media (min-width: 880px) {
.nav-links, .nav-actions { display: flex; }
.nav-toggle { display: none; }
.mobile-nav { display: none !important; }
}
/* --------------------------------------------------------------------------
Sections — shared
-------------------------------------------------------------------------- */
section { padding-block: 5rem; }
@media (min-width: 768px) { section { padding-block: 7rem; } }
@media (min-width: 1200px) { section { padding-block: 8rem; } }
.alt-bg { background: transparent; }
/* Criss-cross brand bands — a per-region accent that SCROLLS WITH THE PAGE
(each region paints the plaid on its own ::after layer behind content).
Masked so the pattern is prominent in two opposite corners and fades to
nothing elsewhere; alternating sections flip the diagonal for a gentle
zigzag. The nav concentrates it at its left/right ends; the solid-colour
final CTA opts out. */
section, .site-nav, .site-footer { isolation: isolate; }
section { position: relative; }
section:not(.final-cta):not(.pillars):not(.scale):not(.faq)::after,
.site-nav::after,
.site-footer::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background-image: var(--bands);
background-size: var(--band-tile) var(--band-tile);
/* --band-offset is set per-section by JS to -(section's document top), which
anchors every banded layer to a single document origin. That makes the
stripes line up across the boundary between any two adjacent banded
sections; the pattern still scrolls with the page. */
background-position: 0 var(--band-offset, 0px);
}
/* default diagonal accent — top-left + bottom-right corners */
section:not(.final-cta):not(.pillars):not(.scale):not(.faq)::after,
.site-footer::after {
-webkit-mask-image:
radial-gradient(var(--bloom-x) var(--bloom-y) at top left, #000, transparent),
radial-gradient(var(--bloom-x) var(--bloom-y) at bottom right, #000, transparent);
mask-image:
radial-gradient(var(--bloom-x) var(--bloom-y) at top left, #000, transparent),
radial-gradient(var(--bloom-x) var(--bloom-y) at bottom right, #000, transparent);
}
/* alternate sections flip the diagonal — top-right + bottom-left corners */
section:nth-of-type(even):not(.final-cta):not(.pillars):not(.scale):not(.faq)::after {
-webkit-mask-image:
radial-gradient(var(--bloom-x) var(--bloom-y) at top right, #000, transparent),
radial-gradient(var(--bloom-x) var(--bloom-y) at bottom left, #000, transparent);
mask-image:
radial-gradient(var(--bloom-x) var(--bloom-y) at top right, #000, transparent),
radial-gradient(var(--bloom-x) var(--bloom-y) at bottom left, #000, transparent);
}
/* nav — blooms from the bottom-left, matching the hero's top-left corner so the
pattern's opacity reads continuous across the nav/hero seam */
.site-nav::after {
-webkit-mask-image:
radial-gradient(var(--bloom-x) var(--bloom-y) at bottom left, #000, transparent);
mask-image:
radial-gradient(var(--bloom-x) var(--bloom-y) at bottom left, #000, transparent);
}
/* The nav is position:fixed (offset 0 -> anchored to the viewport top), so at
rest it shares the document origin with the sections and the plaid is
continuous across the nav/hero seam. The hero and every other banded section
get their --band-offset from JS (see alignBands in main.js); the hero's works
out to -64px (its document top). Scrolling slides the sections' pattern away
from the fixed nav, as intended. */
.section-head {
max-width: 720px;
margin: 0 auto 3.5rem;
text-align: center;
}
.section-head .eyebrow { margin-bottom: 0.875rem; }
.section-title {
font-size: clamp(2rem, 3.5vw, 3rem);
color: var(--slate-900);
}
.section-lead {
margin-top: 1rem;
font-size: 1.0625rem;
color: var(--slate-600);
}
/* --------------------------------------------------------------------------
HERO
-------------------------------------------------------------------------- */
.hero {
position: relative;
padding-block: 4.5rem 5rem;
overflow: hidden;
}
@media (min-width: 768px) { .hero { padding-block: 6rem 7rem; } }
@media (min-width: 1024px) { .hero { padding-block: 7rem 8rem; } }
.hero-bg-grid {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(15, 23, 42, 0.08) 1px, transparent 0);
background-size: 28px 28px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 80%);
pointer-events: none;
}
.hero-grid {
position: relative;
display: grid;
gap: 3rem;
align-items: center;
}
@media (min-width: 1024px) {
.hero-grid { grid-template-columns: 1.05fr 1fr; gap: 4rem; }
}
.hero-copy { max-width: 640px; }
.hero-copy .eyebrow { margin-bottom: 1rem; }
.hero-title {
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.05;
color: var(--slate-900);
}
.hero-sub {
margin-top: 1.25rem;
font-size: 1.125rem;
line-height: 1.55;
font-weight: 700;
color: var(--slate-900);
max-width: 36rem;
}
/* Hero supporting points — numbered badges for the three Rhenti levers */
.hero-points {
margin-top: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.625rem;
max-width: 34rem;
list-style: none; /* drop the default markers — custom bullet below */
padding: 0;
}
.hero-points li {
position: relative;
padding-left: 1.5rem;
font-size: 1.0625rem;
line-height: 1.4;
font-weight: 500;
color: var(--slate-900);
}
/* Brand-blue bullet markers */
.hero-points li::before {
content: "\2022";
position: absolute;
left: 0;
top: 0;
color: var(--blue-600);
font-weight: 700;
}
/* Supporting paragraph under the hero levers — who the platform is for */
.hero-lede {
margin-top: 2.25rem;
font-size: 1rem;
line-height: 1.6;
font-weight: 400;
color: var(--slate-700);
max-width: 36rem;
}
.hero-cta {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 2rem;
}
.hero-microcopy {
margin-top: 1rem;
font-size: 0.8125rem;
color: var(--slate-400);
}
/* Mock CRM screenshot */
.hero-visual { position: relative; }
.hero-mock { position: relative; } /* anchors the floating stat to the mock, not the caption */
/* --------------------------------------------------------------------------
Live activity board — the hero visual (last-30-days counters + conversions)
-------------------------------------------------------------------------- */
.live-board {
background: var(--white);
border: 1px solid var(--slate-200);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.live-board__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.live-board__title {
font-size: 0.9375rem;
font-weight: 700;
color: var(--slate-900);
}
.live-board__range {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.6875rem;
font-weight: 700;
color: var(--slate-500);
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
}
.live-pulse {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--green-600);
flex: none;
animation: livePulse 2.2s ease-out infinite;
}
@keyframes livePulse {
0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.45); }
70% { box-shadow: 0 0 0 7px rgba(5, 150, 105, 0); }
100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}
@media (prefers-reduced-motion: reduce) {
.live-pulse { animation: none; }
}
/* Funnel: three stacked stat panels joined by conversion connectors */
.live-funnel { display: flex; flex-direction: column; }
.live-stat {
background: var(--slate-50);
border: 1px solid var(--slate-200);
border-radius: var(--radius);
padding: 0.95rem 1.2rem;
text-align: left;
}
.live-stat__value {
display: block;
font-size: 2.1rem;
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--slate-900);
font-variant-numeric: tabular-nums;
}
.live-stat__label {
display: block;
margin-top: 0.2rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--slate-500);
}
.live-stat--lead .live-stat__value { color: var(--blue-600); }
.live-stat--show .live-stat__value { color: var(--amber-700); }
.live-stat--app .live-stat__value { color: var(--green-700); }
/* Brief lift when a live tick bumps a value */
.live-stat__value.is-bumped { animation: liveBump 0.6s var(--ease); }
@keyframes liveBump {
0%, 100% { transform: translateY(0); }
35% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
.live-stat__value.is-bumped { animation: none; }
}
/* Conversion connector sitting between two funnel panels */
.live-conv {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0 0.45rem 1.2rem;
}
.live-conv__arrow {
width: 0; height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid var(--slate-300);
flex: none;
}
.live-conv__rate {
font-size: 0.8125rem;
font-weight: 800;
color: var(--green-700);
background: var(--green-50);
border-radius: 999px;
padding: 0.12rem 0.55rem;
font-variant-numeric: tabular-nums;
}
.live-conv__caption {
font-size: 0.75rem;
font-weight: 600;
color: var(--slate-400);
}
/* AI + Human interactions split */
.live-interactions {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0.55rem;
margin-top: 0.25rem;
}
.live-stat--mini { padding: 0.8rem 1rem; }
.live-stat--mini .live-stat__value { font-size: 1.45rem; color: var(--navy); }
.live-interactions__plus {
font-size: 1.25rem;
font-weight: 700;
color: var(--slate-400);
}
.mock-window {
background: var(--white);
border: 1px solid var(--slate-200);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
font-size: 0.875rem;
}
.mock-window-bar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: var(--slate-50);
border-bottom: 1px solid var(--slate-200);
}
.mock-dot {
width: 10px; height: 10px; border-radius: 50%;
display: inline-block;
}
.mock-dot--red { background: #fca5a5; }
.mock-dot--yellow { background: #fcd34d; }
.mock-dot--green { background: #86efac; }
.mock-window-title {
margin-left: 0.5rem;
font-size: 0.8125rem;
color: var(--slate-500);
font-weight: 500;
}
.mock-toolbar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1rem;
border-bottom: 1px solid var(--slate-100);
flex-wrap: wrap;
}
.mock-tab {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
border-radius: 999px;
font-size: 0.8125rem;
font-weight: 500;
color: var(--slate-600);
background: var(--slate-50);
border: 1px solid transparent;
}
.mock-tab--active {
background: var(--white);
color: var(--slate-900);
border-color: var(--slate-200);
box-shadow: var(--shadow-xs);
}
.mock-count {
font-size: 0.6875rem;
background: var(--slate-200);
color: var(--slate-700);
padding: 0.0625rem 0.375rem;
border-radius: 999px;
}
.mock-tab--active .mock-count { background: var(--blue-50); color: var(--blue-600); }
.mock-search {
margin-left: auto;
padding: 0.375rem 0.75rem;
font-size: 0.8125rem;
color: var(--slate-400);
background: var(--slate-50);
border-radius: var(--radius-sm);
border: 1px solid var(--slate-200);
min-width: 0;
}
.mock-table {
padding: 0.5rem 0;
}
.mock-row {
display: grid;
grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
gap: 0.75rem;
align-items: center;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--slate-100);
font-size: 0.8125rem;
}
.mock-row:last-child { border-bottom: 0; }
.mock-row--head {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--slate-400);
background: var(--slate-50);
padding-block: 0.5rem;
}
.mock-person {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--slate-800);
font-weight: 500;
}
.mock-avatar {
width: 26px; height: 26px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.6875rem;
font-weight: 600;
}
.mock-muted { color: var(--slate-500); }
.badge {
display: inline-block;
padding: 0.1875rem 0.5rem;
border-radius: 999px;
font-size: 0.6875rem;
font-weight: 600;
white-space: nowrap;
}
.badge--rose { background: var(--blue-50); color: var(--blue-700); }
.badge--green { background: var(--green-50); color: var(--green-700); }
.badge--yellow { background: var(--yellow-50); color: var(--yellow-700); }
.mock-floater {
position: absolute;
left: -1rem;
bottom: -1.5rem;
background: var(--white);
border: 1px solid var(--slate-200);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
padding: 0.875rem 1rem;
display: none;
}
@media (min-width: 540px) { .mock-floater { display: block; } }
.mock-floater-row { margin-bottom: 0.375rem; }
.mock-floater-stat {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--slate-900);
}
.mock-floater-stat span {
display: block;
font-size: 0.75rem;
font-weight: 500;
color: var(--slate-500);
letter-spacing: 0;
}
/* --------------------------------------------------------------------------
Trust marquee
-------------------------------------------------------------------------- */
/* Trusted-by marquee — now lives inside the hero section */
.hero-trust {
margin-top: 3.5rem;
padding-top: 2.5rem;
border-top: 1px solid var(--slate-200);
}
.trust-label {
text-align: center;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--slate-400);
margin-bottom: 1.75rem;
}
.trust-marquee {
overflow: hidden;
position: relative;
mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.trust-marquee__track {
display: flex;
gap: 3.5rem;
align-items: center;
width: max-content;
animation: trustScroll 32s linear infinite;
}
.trust-marquee:hover .trust-marquee__track { animation-play-state: paused; }
.trust-item {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.trust-wordmark {
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--slate-500);
white-space: nowrap;
transition: color 150ms var(--ease);
}
/* Greyscale client logo. Height-normalised with width:auto so each keeps its
true aspect ratio (no stretching); tone is baked into the PNG (--slate-400). */
.trust-logo {
height: 26px;
width: auto;
opacity: 0.8;
transition: opacity 150ms var(--ease);
}
/* Squarer marks read small at the shared height — bump them up a touch. */
.trust-logo--lg { height: 36px; }
.trust-item:hover .trust-wordmark { color: var(--slate-800); }
.trust-item:hover .trust-logo { opacity: 1; }
@media (min-width: 768px) {
.trust-logo { height: 30px; }
.trust-logo--lg { height: 42px; }
}
@keyframes trustScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.trust-marquee__track { animation: none; }
}
@media (min-width: 768px) {
.trust-wordmark { font-size: 1.25rem; }
.trust-marquee__track { gap: 4.5rem; }
}
/* --------------------------------------------------------------------------
Pillars (3 differentiators)
-------------------------------------------------------------------------- */
/* "Why Rhenti" rendered as a solid brand-red block (a single palette colour),
so its header copy flips to light and it opts out of the band pattern. */
.pillars { background: var(--red); }
.pillars .eyebrow { color: var(--red-50); }
.pillars .section-title { color: #fff; }
.pillar-grid {
display: grid;
gap: 2.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 768px) { .pillar-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.pillar {
position: relative;
display: flex;
flex-direction: column;
min-height: 37.5rem;
background: var(--white);
border: 1px solid var(--slate-200);
border-radius: var(--radius-lg);
padding: 2rem 1.75rem;
box-shadow: var(--shadow-xs);
transition: box-shadow 200ms var(--ease), transform 200ms var(--ease), border-color 200ms var(--ease);
}
.pillar:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
border-color: var(--blue-100);
}
.pillar-visual {
width: 100%;
height: 300px;
margin-bottom: 1.5rem;
}
/* Mini mock-window — shared chrome (matches hero mock-window aesthetic) */
.mini-mock {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid var(--slate-200);
border-radius: 10px;
box-shadow: var(--shadow-sm);
overflow: hidden;
font-size: 0.8125rem;
}
.mini-mock__bar {
display: flex;
align-items: center;
gap: 0.3125rem;
padding: 0.5rem 0.75rem;
background: var(--slate-50);
border-bottom: 1px solid var(--slate-100);
}
.mini-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.mini-dot--red { background: #fca5a5; }
.mini-dot--yellow { background: #fcd34d; }
.mini-dot--green { background: #86efac; }
.mini-mock__title {
margin-left: 0.375rem;
font-size: 0.6875rem;
color: var(--slate-500);
font-weight: 500;
}
.mini-mock__title sup { font-size: 0.5rem; }
.mini-mock__body {
flex: 1;
padding: 0.875rem 0.875rem 1rem;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Shared elements */
.mini-avatar {
width: 22px; height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.625rem;
font-weight: 600;
flex: 0 0 auto;
}
.mini-avatar--sm { width: 18px; height: 18px; font-size: 0.5625rem; }
.mini-badge {
display: inline-block;
padding: 0.125rem 0.4375rem;
border-radius: 999px;
font-size: 0.625rem;
font-weight: 600;
white-space: nowrap;
}
.mini-badge--rose { background: var(--blue-50); color: var(--blue-700); }
.mini-badge--green { background: var(--green-50); color: var(--green-700); }
/* Visual 1 — Lead-to-lease Sankey */
.mini-sankey {
display: block;
width: 100%;
height: 100%;
max-height: 200px;
}
/* Visual 1 cycle — 3-frame animation: channel toggles → sankey → application.
Total cycle = 12s. Each frame is visible ~3.6s with brief cross-fades at boundaries.
Frame contents (publish click, toggle flip, draft-lease click) animate concurrently
on the same 12s cycle so they line up with their parent's visibility window. */
.mini-mock__body--cycle {
position: relative;
padding: 0;
display: block;
overflow: hidden;
}
.mock-frame {
position: absolute;
inset: 0;
padding: 0.75rem 0.875rem 0.875rem;
display: flex;
flex-direction: column;
opacity: 0;
}
.mock-frame--1 { animation: mock-cycle-1 12s ease-in-out infinite; }
.mock-frame--2 { animation: mock-cycle-2 12s ease-in-out infinite; }
.mock-frame--3 { animation: mock-cycle-3 12s ease-in-out infinite; }
@keyframes mock-cycle-1 {
0%, 30% { opacity: 1; }
33%, 96% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes mock-cycle-2 {
0%, 30% { opacity: 0; }
33%, 63% { opacity: 1; }
66%, 100% { opacity: 0; }
}
@keyframes mock-cycle-3 {
0%, 63% { opacity: 0; }
66%, 96% { opacity: 1; }
100% { opacity: 0; }
}
.mock-frame__label {
font-size: 0.5625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--slate-400);
margin-bottom: 0.5rem;
}
/* Frame 1 — channel toggles + publish */
.mock-toggle-list {
display: flex;
flex-direction: column;
gap: 0.1rem;
flex: 1;
}
.mock-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.25rem 0;
}
.mock-toggle-name {
font-size: 0.75rem;
font-weight: 500;
color: var(--slate-800);
}
.mock-toggle {
display: inline-block;
position: relative;
width: 26px;
height: 14px;
background: var(--slate-300);
border-radius: 999px;
flex-shrink: 0;
}
.mock-toggle > span {
position: absolute;
top: 2px;
left: 2px;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.mock-toggle--on { background: var(--blue-600); }
.mock-toggle--on > span { transform: translateX(12px); }
/* The Facebook toggle flips OFF→ON during frame 1's visible window. */
.mock-toggle--animated {
animation: mock-toggle-bg 12s ease-in-out infinite;
}
.mock-toggle--animated > span {
animation: mock-toggle-knob 12s ease-in-out infinite;
}
@keyframes mock-toggle-bg {
0%, 8% { background: var(--slate-300); }
12%, 88% { background: var(--blue-600); } /* stays ON through frame 1 + the
entire invisible region */
92%, 100% { background: var(--slate-300); } /* reset deep inside the hidden
window so user never sees it flip off */
}
@keyframes mock-toggle-knob {
0%, 8% { transform: translateX(0); }
12%, 88% { transform: translateX(12px); }
92%, 100% { transform: translateX(0); }
}
/* CTA buttons — base style + per-frame click animations */
.mock-frame__cta {
margin-top: auto;
background: var(--blue-600);
color: white;
padding: 0.5rem 0.75rem;
border-radius: 6px;
font-size: 0.8125rem;
font-weight: 600;
text-align: center;
letter-spacing: 0.005em;
transform-origin: center;
}
.mock-frame__cta--publish {
animation: mock-publish-click 12s ease-in-out infinite;
}
@keyframes mock-publish-click {
0%, 20% { transform: scale(1); background: var(--blue-600); box-shadow: 0 0 0 0 rgba(219, 39, 119, 0); }
23%, 25% { transform: scale(0.94); background: var(--blue-700); box-shadow: 0 0 0 5px rgba(219, 39, 119, 0.18); }
28%, 30% { transform: scale(1.03); background: var(--blue-600); box-shadow: 0 0 0 0 rgba(219, 39, 119, 0); }
31%, 100% { transform: scale(1); background: var(--blue-600); box-shadow: 0 0 0 0 rgba(219, 39, 119, 0); }
}
/* Frame 2 — Facebook leads bar chart. Three bars (New leads / Viewings / Applications)
scale up from 0 to their final heights at different rates while frame 2 is visible
(33-63% of the 12s cycle). Value labels fade in once each bar lands at full height.
During the invisible portion of the cycle the bars snap back to scaleY(0) so they
re-grow cleanly on the next iteration. */
.mock-bar-chart {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
align-items: end;
flex: 1;
padding: 0.25rem 0.25rem 0;
min-height: 0;
}
.mock-bar-col {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 0.25rem;
height: 100%;
}
.mock-bar {
width: 100%;
max-width: 36px;
background: var(--blue-600);
border-radius: 3px 3px 0 0;
transform: scaleY(0);
transform-origin: bottom center;
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.18);
}
.mock-bar--leads {
height: 160px;
animation: mock-bar-leads 12s cubic-bezier(0.32, 0.72, 0, 1) infinite;
}
.mock-bar--viewings {
height: 96px;
animation: mock-bar-viewings 12s cubic-bezier(0.32, 0.72, 0, 1) infinite;
}
.mock-bar--apps {
height: 48px;
animation: mock-bar-apps 12s cubic-bezier(0.32, 0.72, 0, 1) infinite;
}
@keyframes mock-bar-leads {
0%, 32% { transform: scaleY(0); }
44%, 63% { transform: scaleY(1); }
66%, 100% { transform: scaleY(0); }
}
@keyframes mock-bar-viewings {
0%, 32% { transform: scaleY(0); }
50%, 63% { transform: scaleY(1); }
66%, 100% { transform: scaleY(0); }
}
@keyframes mock-bar-apps {
0%, 32% { transform: scaleY(0); }
58%, 63% { transform: scaleY(1); }
66%, 100% { transform: scaleY(0); }
}
.mock-bar-value {
font-size: 0.8125rem;
font-weight: 700;
color: var(--slate-900);
font-variant-numeric: tabular-nums;
opacity: 0;
}
.mock-bar-value--leads { animation: mock-value-fade-1 12s ease-in-out infinite; }
.mock-bar-value--viewings { animation: mock-value-fade-2 12s ease-in-out infinite; }
.mock-bar-value--apps { animation: mock-value-fade-3 12s ease-in-out infinite; }
@keyframes mock-value-fade-1 {
0%, 42% { opacity: 0; }
46%, 63% { opacity: 1; }
66%, 100% { opacity: 0; }
}
@keyframes mock-value-fade-2 {
0%, 48% { opacity: 0; }
52%, 63% { opacity: 1; }
66%, 100% { opacity: 0; }
}
@keyframes mock-value-fade-3 {
0%, 56% { opacity: 0; }
60%, 63% { opacity: 1; }
66%, 100% { opacity: 0; }
}
.mock-bar-name {
font-size: 0.625rem;
font-weight: 600;
color: var(--slate-600);
text-align: center;
letter-spacing: 0.01em;
white-space: nowrap;
}
/* Frame 3 — prospect application + Draft Lease button.
Use space-between so the 4 children (label / app-head / stats / CTA) distribute
evenly down the frame instead of clumping at the top with a big void above the CTA. */
.mock-frame--3 {
padding-top: 1rem;
padding-bottom: 1rem;
justify-content: space-between;
}
.mock-frame--3 .mock-frame__cta { margin-top: 0; }
.mock-app-head {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.5rem;
padding-bottom: 0.7rem;
border-bottom: 1px solid var(--slate-100);
}
.mock-app-id { min-width: 0; }
.mock-app-name {
font-size: 0.8125rem;
font-weight: 600;
color: var(--slate-900);
line-height: 1.2;
}
.mock-app-meta {
font-size: 0.625rem;
color: var(--slate-500);
margin-top: 1px;
}
.mock-app-source {
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin-top: 0.25rem;
padding: 0.1rem 0.4rem 0.1rem 0.3rem;
background: #eff6ff; /* blue-50 — Facebook-tinted */
color: #1d4ed8; /* blue-700 */
border-radius: 999px;
font-size: 0.5625rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1;
}
.mock-app-source svg { flex-shrink: 0; }
.mock-app-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.3rem;
}
.mock-app-stat {
background: var(--slate-50);
border: 1px solid var(--slate-100);
border-radius: 6px;
padding: 0.35rem 0.25rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.05rem;
}
.mock-app-stat span {
font-size: 0.5625rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--slate-500);
}
.mock-app-stat strong {
font-size: 0.8125rem;
font-weight: 700;
color: var(--slate-900);
}
.mock-app-stat--ok {
color: var(--green-700) !important;
font-size: 0.6875rem !important;
}
.mock-frame__cta--draft {
animation: mock-draft-click 12s ease-in-out infinite;
}
@keyframes mock-draft-click {
0%, 83% { transform: scale(1); background: var(--blue-600); box-shadow: 0 0 0 0 rgba(219, 39, 119, 0); }
86%, 88% { transform: scale(0.94); background: var(--blue-700); box-shadow: 0 0 0 5px rgba(219, 39, 119, 0.18); }
91%, 93% { transform: scale(1.03); background: var(--blue-600); box-shadow: 0 0 0 0 rgba(219, 39, 119, 0); }
94%, 100% { transform: scale(1); background: var(--blue-600); box-shadow: 0 0 0 0 rgba(219, 39, 119, 0); }
}
@media (prefers-reduced-motion: reduce) {
.mock-frame--1, .mock-frame--2, .mock-frame--3,
.mock-toggle--animated, .mock-toggle--animated > span,
.mock-frame__cta--publish, .mock-frame__cta--draft,
.mock-bar--leads, .mock-bar--viewings, .mock-bar--apps,
.mock-bar-value--leads, .mock-bar-value--viewings, .mock-bar-value--apps { animation: none; }
.mock-frame--1 { opacity: 1; } /* show first frame statically */
.mock-frame--2, .mock-frame--3 { opacity: 0; }
.mock-bar--leads, .mock-bar--viewings, .mock-bar--apps { transform: scaleY(1); }
.mock-bar-value--leads, .mock-bar-value--viewings, .mock-bar-value--apps { opacity: 1; }
}
/* Visual 2 — Animated Marketing Checklist.
10s cycle: items light up top-to-bottom in sequence (~12% / 27% / 42%), progress bar
fills 0 -> 33 -> 67 -> 100 alongside them, percent label counts up, then everything
resets at 95-100%. Yardi Sync indicator stays visible throughout with a pulsing dot. */
.mini-mock__body--setup {
display: flex;
flex-direction: column;
}
.mini-mock__body--setup .mock-frame__label { margin-bottom: 0.5rem; }
.mini-checklist {
list-style: none;
margin: 0;
padding: 0;
}
.checklist-item {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 0;
font-size: 0.75rem;
border-bottom: 1px solid var(--slate-100);
}
.checklist-item:last-child { border-bottom: 0; }
.checklist-text {
color: var(--slate-500);
transition: color 0.4s ease;
}
.mini-check {
width: 18px; height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--slate-100);
color: var(--slate-300);
transition: background-color 0.4s ease, color 0.4s ease;
}
.mini-check svg {
opacity: 0;
transform: scale(0.5);
transform-origin: center;
}
.mini-checklist__meta {
font-size: 0.625rem;
color: var(--slate-400);
font-variant-numeric: tabular-nums;
}
/* Cycle animations — staggered triggers per checklist row */
.checklist-item--1 .mini-check { animation: check-on-1 10s ease-out infinite; }
.checklist-item--2 .mini-check { animation: check-on-2 10s ease-out infinite; }
.checklist-item--3 .mini-check { animation: check-on-3 10s ease-out infinite; }
.checklist-item--1 .mini-check svg { animation: check-svg-1 10s ease-out infinite; }
.checklist-item--2 .mini-check svg { animation: check-svg-2 10s ease-out infinite; }
.checklist-item--3 .mini-check svg { animation: check-svg-3 10s ease-out infinite; }
.checklist-item--1 .checklist-text { animation: check-text-1 10s ease-out infinite; }
.checklist-item--2 .checklist-text { animation: check-text-2 10s ease-out infinite; }
.checklist-item--3 .checklist-text { animation: check-text-3 10s ease-out infinite; }
@keyframes check-on-1 {
0%, 10% { background: var(--slate-100); color: var(--slate-300); }
15%, 92% { background: var(--green-50); color: var(--green-700); }
97%, 100% { background: var(--slate-100); color: var(--slate-300); }
}
@keyframes check-on-2 {
0%, 25% { background: var(--slate-100); color: var(--slate-300); }
30%, 92% { background: var(--green-50); color: var(--green-700); }
97%, 100% { background: var(--slate-100); color: var(--slate-300); }
}
@keyframes check-on-3 {
0%, 40% { background: var(--slate-100); color: var(--slate-300); }
45%, 92% { background: var(--green-50); color: var(--green-700); }
97%, 100% { background: var(--slate-100); color: var(--slate-300); }
}
@keyframes check-svg-1 {
0%, 10% { opacity: 0; transform: scale(0.5); }
15%, 92% { opacity: 1; transform: scale(1); }
97%, 100% { opacity: 0; transform: scale(0.5); }
}
@keyframes check-svg-2 {
0%, 25% { opacity: 0; transform: scale(0.5); }
30%, 92% { opacity: 1; transform: scale(1); }
97%, 100% { opacity: 0; transform: scale(0.5); }
}
@keyframes check-svg-3 {
0%, 40% { opacity: 0; transform: scale(0.5); }
45%, 92% { opacity: 1; transform: scale(1); }
97%, 100% { opacity: 0; transform: scale(0.5); }
}
@keyframes check-text-1 {
0%, 10% { color: var(--slate-500); }
15%, 92% { color: var(--slate-800); }
97%, 100% { color: var(--slate-500); }
}
@keyframes check-text-2 {
0%, 25% { color: var(--slate-500); }
30%, 92% { color: var(--slate-800); }
97%, 100% { color: var(--slate-500); }
}
@keyframes check-text-3 {
0%, 40% { color: var(--slate-500); }
45%, 92% { color: var(--slate-800); }
97%, 100% { color: var(--slate-500); }
}
/* Progress bar — steps from 0 -> 33 -> 67 -> 100, then resets */
.mini-progress { margin-top: 0.9rem; }
.mini-progress__track {
height: 6px;
background: var(--slate-100);
border-radius: 999px;
overflow: hidden;
}
.mini-progress__bar {
width: 0;
height: 100%;
background: var(--blue-600);
border-radius: 999px;
animation: progress-fill 10s ease-in-out infinite;
}
@keyframes progress-fill {
0%, 10% { width: 0%; }
15%, 24% { width: 33.33%; }
30%, 39% { width: 66.67%; }
45%, 92% { width: 100%; }
97%, 100% { width: 0%; }
}
.mini-progress__row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.5rem;
min-height: 1.25rem;
}
.mini-progress__pct {
position: relative;
display: inline-block;
min-width: 2.6rem;
height: 1rem;
font-size: 0.75rem;
font-weight: 700;
color: var(--slate-900);
font-variant-numeric: tabular-nums;
}
.pct {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.pct--0 { animation: pct-fade-0 10s linear infinite; }
.pct--33 { animation: pct-fade-33 10s linear infinite; }
.pct--67 { animation: pct-fade-67 10s linear infinite; }
.pct--100 { animation: pct-fade-100 10s linear infinite; }
@keyframes pct-fade-0 {
0%, 13% { opacity: 1; }
14%, 96% { opacity: 0; }
97%, 100% { opacity: 1; }
}
@keyframes pct-fade-33 {
0%, 14% { opacity: 0; }
17%, 26% { opacity: 1; }
29%, 100% { opacity: 0; }
}
@keyframes pct-fade-67 {
0%, 29% { opacity: 0; }
32%, 41% { opacity: 1; }
44%, 100% { opacity: 0; }
}
@keyframes pct-fade-100 {
0%, 44% { opacity: 0; }
47%, 92% { opacity: 1; }
96%, 100% { opacity: 0; }
}
/* "You're live" badge appears only once 100% has been reached */
.mini-badge--reveal {
opacity: 0;
animation: live-badge 10s ease-out infinite;
}
@keyframes live-badge {
0%, 44% { opacity: 0; transform: scale(0.85); }
50%, 92% { opacity: 1; transform: scale(1); }
97%, 100% { opacity: 0; transform: scale(0.85); }
}
/* Yardi Sync — Active indicator at the bottom of the card */
.mock-sync-indicator {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: 0.85rem;
padding: 0.3rem 0.65rem;
background: var(--slate-50);
border: 1px solid var(--slate-200);
border-radius: 999px;
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--slate-700);
align-self: flex-start;
}
.mock-sync-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
animation: sync-pulse 1.8s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes sync-pulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); transform: scale(1); }
50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.08); transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
.checklist-item--1 .mini-check, .checklist-item--2 .mini-check, .checklist-item--3 .mini-check,
.checklist-item--1 .mini-check svg, .checklist-item--2 .mini-check svg, .checklist-item--3 .mini-check svg,
.checklist-item--1 .checklist-text, .checklist-item--2 .checklist-text, .checklist-item--3 .checklist-text,
.mini-progress__bar, .pct, .mini-badge--reveal, .mock-sync-dot { animation: none; }
.checklist-item .mini-check { background: var(--green-50); color: var(--green-700); }
.checklist-item .mini-check svg { opacity: 1; transform: scale(1); }
.checklist-text { color: var(--slate-800); }
.mini-progress__bar { width: 100%; }
.pct--100 { opacity: 1; }
.mini-badge--reveal { opacity: 1; transform: scale(1); }
}
/* Visual 3 — AI³ activity */
/* Pillar 3 — Action Items + Amara drill-in cycle (12s loop).
State 1 (0-26%): items list visible, handoff hidden, "New-lead reply" row pulses 22-25%
to signal a click → drill-in.
State 2 (32-65%): Amara lead overlay visible (chat preview + Take Over CTA).
Take Over button click-pulses at 58-64%.
State 3 (69-96%): items list visible again with handoff strip "Sarah took over → Amara"
fading in below.
Reset (96-100%): everything snaps back to State 1 inside the brief invisible window. */
.mini-mock__body--ai {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 1rem;
padding-bottom: 1rem;
overflow: hidden;
}
.mini-mock__body--ai .mock-frame__label { margin-bottom: 0; }
.mini-ai-list { display: block; }
.mini-mock__body--ai .mini-ai-handoff { margin-top: 0; }
/* Items (label + list) — hidden during State 2 (Amara overlay) */
.mock-ai-items {
animation: ai-items-visibility 12s ease-in-out infinite;
}
@keyframes ai-items-visibility {
0%, 26% { opacity: 1; }
32%, 65% { opacity: 0; }
71%, 100% { opacity: 1; }
}
/* Handoff strip — only visible during State 3. Two concurrent animations:
(1) reveal — fade + translate-up when it enters at 71%;
(2) highlight — sky-500 box-shadow ring that pulses out at 72% and settles to a
2px outline through the rest of State 3 to draw the eye to the handoff. */
.mini-ai-handoff--reveal {
opacity: 0;
animation: ai-handoff-reveal 12s ease-in-out infinite,
ai-handoff-highlight 12s ease-in-out infinite;
}
@keyframes ai-handoff-reveal {
0%, 65% { opacity: 0; transform: translateY(4px); }
71%, 94% { opacity: 1; transform: translateY(0); }
98%, 100% { opacity: 0; transform: translateY(4px); }
}
@keyframes ai-handoff-highlight {
0%, 69% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
72% { box-shadow: 0 0 0 6px rgba(14, 165, 233, 0.30); } /* pulse out */
77%, 92% { box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.55); } /* steady ring */
96%, 100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0); }
}
/* "New-lead reply" row — pulses near end of State 1 to show user click */
.mini-ai-row--clickable {
border-radius: 6px;
animation: ai-row-click 12s ease-in-out infinite;
transform-origin: center;
}
@keyframes ai-row-click {
0%, 19% { background-color: transparent; transform: scale(1); box-shadow: 0 0 0 0 rgba(219, 39, 119, 0); }
22%, 25% { background-color: var(--blue-50); transform: scale(0.97); box-shadow: 0 0 0 4px rgba(219, 39, 119, 0.16); }
28%, 100% { background-color: transparent; transform: scale(1); box-shadow: 0 0 0 0 rgba(219, 39, 119, 0); }
}
/* Amara overlay — absolutely positioned, fades in during State 2 */
.mock-ai-frame--amara {
position: absolute;
inset: 0;
padding: 1rem 0.875rem;
display: flex;
flex-direction: column;
justify-content: space-between;
background: var(--white);
opacity: 0;
animation: ai-amara-visibility 12s ease-in-out infinite;
}
@keyframes ai-amara-visibility {
0%, 26% { opacity: 0; }
32%, 65% { opacity: 1; }
71%, 100% { opacity: 0; }
}
.mock-amara-head {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.5rem;
align-items: center;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--slate-100);
}
.mock-amara-name {
font-size: 0.8125rem;
font-weight: 600;
color: var(--slate-900);
line-height: 1.2;
}
.mock-amara-meta {
font-size: 0.625rem;
color: var(--slate-500);
margin-top: 1px;
}
.mock-amara-thread {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.mock-amara-msg {
padding: 0.4rem 0.55rem;
border-radius: 8px;
font-size: 0.6875rem;
line-height: 1.35;
display: flex;
flex-direction: column;
gap: 0.1rem;
max-width: 88%;
}
.mock-amara-msg--ai {
background: var(--blue-50);
border: 1px solid var(--blue-100);
align-self: flex-start;
border-bottom-left-radius: 2px;
}
.mock-amara-msg--in {
background: var(--slate-50);
border: 1px solid var(--slate-200);
align-self: flex-end;
border-bottom-right-radius: 2px;
}
.mock-amara-author {
font-size: 0.5rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.mock-amara-msg--ai .mock-amara-author { color: var(--blue-700); }
.mock-amara-msg--in .mock-amara-author { color: var(--slate-500); }
.mock-amara-text { color: var(--slate-800); }
/* "Take Over" button — click pulse fires near end of State 2 */
.mock-frame__cta--takeover {
animation: takeover-click 12s ease-in-out infinite;
}
@keyframes takeover-click {
0%, 56% { transform: scale(1); background: var(--blue-600); box-shadow: 0 0 0 0 rgba(219, 39, 119, 0); }
58%, 60% { transform: scale(0.94); background: var(--blue-700); box-shadow: 0 0 0 5px rgba(219, 39, 119, 0.18); }
63%, 65% { transform: scale(1.03); background: var(--blue-600); box-shadow: 0 0 0 0 rgba(219, 39, 119, 0); }
66%, 100% { transform: scale(1); background: var(--blue-600); }
}
@media (prefers-reduced-motion: reduce) {
.mock-ai-items, .mini-ai-handoff--reveal, .mini-ai-row--clickable,
.mock-ai-frame--amara, .mock-frame__cta--takeover { animation: none; }
.mock-ai-items { opacity: 1; }
.mini-ai-handoff--reveal { opacity: 1; transform: none; }
.mock-ai-frame--amara { display: none; }
}
.mini-ai-row {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0;
border-bottom: 1px solid var(--slate-100);
}
.mini-ai-row:last-of-type { border-bottom: 0; }
.mini-ai-icon {
width: 24px; height: 24px;
border-radius: 6px;
background: var(--blue-50);
color: var(--blue-600);
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
.mini-ai-info { min-width: 0; }
.mini-ai-name {
font-size: 0.75rem;
font-weight: 600;
color: var(--slate-800);
line-height: 1.2;
}
.mini-ai-meta {
font-size: 0.625rem;
color: var(--slate-500);
margin-top: 1px;
}
.mini-ai-pulse {
width: 7px; height: 7px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
flex: 0 0 auto;
}
.mini-ai-handoff {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.5rem;
margin-top: 0.5rem;
padding: 0.4375rem 0.5rem;
background: var(--slate-50);
border-radius: 6px;
font-size: 0.6875rem;
color: var(--slate-700);
}
.mini-ai-handoff strong { color: var(--slate-900); font-weight: 600; }
.mini-ai-handoff__time {
font-size: 0.5625rem;
color: var(--slate-400);
white-space: nowrap;
}
.pillar-num {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--blue-600);
margin-bottom: 1rem;
}
.pillar-title {
font-size: 1.25rem;
margin-bottom: 0.75rem;
color: var(--slate-900);
}
.pillar p { margin-bottom: 0.5rem; }
.pillar-bonus {
margin-top: auto;
padding-top: 1rem;
border-top: 1px dashed var(--slate-200);
font-size: 0.875rem;
color: var(--slate-500);
min-height: 3.75rem;
}
.pillar-bonus strong { color: var(--blue-600); font-weight: 600; }
/* --------------------------------------------------------------------------
Stats
-------------------------------------------------------------------------- */
.stats {
background: transparent;
border-top: 1px solid var(--slate-200);
border-bottom: 1px solid var(--slate-200);
}
.stat-grid {
display: grid;
gap: 2.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.stat-grid { grid-template-columns: repeat(3, 1fr); gap: 0; }
.stat + .stat { border-left: 1px solid var(--slate-200); padding-left: 2.5rem; }
.stat { padding-right: 2.5rem; }
}
.stat-num {
font-size: clamp(3.5rem, 7vw, 6rem);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1;
color: var(--blue-600);
margin-bottom: 0.75rem;
font-variant-numeric: tabular-nums; /* fixed-width digits — no horizontal jitter as digit count grows */
font-feature-settings: "tnum";
}
.stat-unit { color: inherit; }
/* Each stat takes a different brand hue so the trio shows off the full palette. */
.stat:nth-child(1) .stat-num { color: var(--blue-600); }
.stat:nth-child(2) .stat-num { color: var(--navy); }
.stat:nth-child(3) .stat-num { color: var(--red); }
.stat-label {
color: var(--slate-700);
font-size: 1rem;
max-width: 22rem;
}
/* --------------------------------------------------------------------------
Scale (By the numbers)
-------------------------------------------------------------------------- */
/* Rendered as a solid brand-navy block (opts out of the band pattern); the
header copy flips to light. */
.scale { background: var(--green-700); }
.scale .eyebrow { color: rgba(255, 255, 255, 0.9); }
.scale .section-title { color: #fff; }
.scale .section-lead { color: rgba(255, 255, 255, 0.82); }
/* widen the head so the two-line
header doesn't wrap to three lines */
.scale .section-head { max-width: 60rem; }
/* keep the marketplace pill readable on the green block — clean white pill */
.scale .marketplace-cta,
.scale .marketplace-cta:hover { background: #fff; border-color: #fff; color: var(--green-700); }
.scale .marketplace-cta__eyebrow { background: var(--green-700); }
.scale-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.scale-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
.scale-card {
background: var(--white);
border: 1px solid var(--slate-200);
border-radius: var(--radius-lg);
padding: 2.25rem 1.75rem;
text-align: center;
box-shadow: var(--shadow-xs);
transition: box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.scale-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.scale-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px; height: 56px;
border-radius: var(--radius);
background: var(--blue-50);
color: var(--blue-600);
margin-bottom: 1.25rem;
}
.scale-num {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1;
color: var(--slate-900);
margin-bottom: 0.5rem;
}
.scale-label {
font-size: 0.9375rem;
color: var(--slate-600);
max-width: 18rem;
margin: 0 auto;
}
/* Marketplace CTA — banner-style link sitting below the scale grid. Pink-tinted
pill with an eyebrow chip so it stands out without competing with primary CTAs. */
.scale-cta {
display: flex;
justify-content: center;
margin-top: 3rem;
}
/* Full-bleed testimonial band — two solid brand blocks (each half the viewport,
edge to edge) that crossfade-cycle through testimonials, kept offset so the
two tiles always show different people. */
.testimonials-band { padding: 0; position: relative; }
/* Prev / next controls overlaid on the band edges */
.testimonial-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 44px;
height: 44px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.4);
transition: background 150ms var(--ease);
}
.testimonial-nav:hover { background: rgba(255, 255, 255, 0.3); }
.testimonial-nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.testimonial-nav--next { right: clamp(0.5rem, 2vw, 1.5rem); }
.scale-testimonials {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.scale-testimonials { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
.testimonial-tile {
position: relative;
overflow: hidden;
display: grid;
justify-items: center;
padding-block: clamp(2.5rem, 6vw, 5rem);
padding-inline: clamp(1.5rem, 5vw, 4rem);
isolation: isolate;
}
/* Filled colour tiles stay solid — no band pattern. */
.testimonial-tile--blue { background: var(--blue-600); }
.testimonial-tile--navy { background: var(--navy); }
.testimonial-tile--teal { background: var(--green-700); }
.testimonial-tile--gold { background: var(--amber-700); }
.testimonial-slide {
grid-area: 1 / 1;
width: 100%;
max-width: 33rem;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 1.5rem;
color: #fff;
opacity: 0;
pointer-events: none;
transition: opacity 600ms var(--ease);
}
.testimonial-slide.is-active { opacity: 1; pointer-events: auto; }
.testimonial-quote {
margin: 0;
font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
line-height: 1.6;
font-weight: 500;
}
.testimonial-person {
display: flex;
align-items: center;
gap: 1.125rem;
margin-top: auto;
}
.testimonial-avatar {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
border: 3px solid rgba(255, 255, 255, 0.5);
}
/* monogram fallback for people without a headshot */
.testimonial-avatar--monogram {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
font-weight: 700;
letter-spacing: 0.02em;
color: #fff;
background: rgba(255, 255, 255, 0.16);
}
.testimonial-id { display: flex; flex-direction: column; gap: 0.125rem; }
.testimonial-name { font-weight: 700; font-size: 0.9375rem; }
.testimonial-role { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.82); }
@media (prefers-reduced-motion: reduce) {
.testimonial-slide { transition: none; }
}
.marketplace-cta {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1.25rem 0.875rem 0.875rem;
background: var(--blue-50);
border: 1px solid var(--blue-200);
border-radius: 999px;
color: var(--blue-700);
font-weight: 500;
font-size: 1rem;
box-shadow: var(--shadow-xs);
transition: background-color 200ms var(--ease),
border-color 200ms var(--ease),
color 200ms var(--ease),
transform 200ms var(--ease),
box-shadow 200ms var(--ease);
}
.marketplace-cta:hover {
background: var(--white);
border-color: var(--blue-500);
color: var(--blue-700);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.marketplace-cta__eyebrow {
display: inline-block;
padding: 0.1875rem 0.5rem;
background: var(--blue-600);
color: var(--white);
border-radius: 999px;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.marketplace-cta__arrow {
transition: transform 200ms var(--ease);
}
.marketplace-cta:hover .marketplace-cta__arrow {
transform: translateX(3px);
}
/* --------------------------------------------------------------------------
Toolkit / tiers / feature cards
-------------------------------------------------------------------------- */
.toolkit { background: transparent; }
.tier { margin-top: 3rem; }
.tier:first-of-type { margin-top: 0; }
.tier-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
flex-wrap: wrap;
padding-bottom: 1.25rem;
margin-bottom: 1.75rem;
border-bottom: 1px solid var(--slate-200);
}
.tier-meta { display: flex; align-items: baseline; gap: 0.875rem; flex-wrap: wrap; }
.tier-eyebrow {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--blue-600);
}
.tier-name {
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--slate-900);
}
.tier-progress {
display: inline-flex;
gap: 6px;
align-items: center;
}
.tier-progress span {
width: 32px;
height: 6px;
border-radius: 999px;
background: var(--slate-200);
}
.tier-progress span.is-filled { background: var(--blue-600); }
.tier-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .tier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tier-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
.feature-card {
background: var(--white);
border: 1px solid var(--slate-200);
border-radius: var(--radius);
padding: 1.5rem 1.25rem;
transition: box-shadow 200ms var(--ease), transform 200ms var(--ease), border-color 200ms var(--ease);
}
.feature-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
border-color: var(--blue-100);
}
.feature-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border-radius: 8px;
background: var(--blue-50);
color: var(--blue-600);
margin-bottom: 1rem;
}
.feature-card-title {
font-size: 1rem;
font-weight: 600;
color: var(--slate-900);
margin-bottom: 0.5rem;
line-height: 1.3;
}
.feature-card-title sup { font-size: 0.7em; vertical-align: super; }
.feature-sub {
display: inline;
font-size: 0.8125rem;
font-weight: 400;
color: var(--slate-500);
}
.feature-card p {
font-size: 0.9rem;
line-height: 1.5;
color: var(--slate-600);
}
/* --------------------------------------------------------------------------
Final CTA
-------------------------------------------------------------------------- */
.final-cta {
background: var(--navy);
position: relative;
overflow: hidden;
isolation: isolate;
}
.final-cta > .container {
position: relative;
z-index: 1;
}
.final-cta-card {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.final-cta-card .section-title { margin-block: 0.75rem; }
.final-cta-card p { font-size: 1.0625rem; margin-bottom: 2rem; }
.final-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
}
/* Final CTA reads as a solid brand-navy block (a single pattern colour used as
a full-bleed background where it makes sense). Copy + buttons flip to light. */
.final-cta .eyebrow { color: var(--blue-200); }
.final-cta-card .section-title { color: #fff; }
.final-cta-card p { color: rgba(255, 255, 255, 0.82); }
.final-cta .btn-primary { background: #fff; color: var(--navy); }
.final-cta .btn-primary:hover { background: var(--blue-50); }
.final-cta .btn-secondary {
background: transparent;
color: #fff;
border-color: rgba(255, 255, 255, 0.55);
}
.final-cta .btn-secondary:hover {
background: rgba(255, 255, 255, 0.12);
border-color: #fff;
color: #fff;
}
/* --------------------------------------------------------------------------
FAQ — whole section collapses into a single brand band
-------------------------------------------------------------------------- */
.faq-band {
max-width: 880px;
margin: 0 auto;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--slate-200);
}
.faq-band__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1.5rem 1.75rem;
cursor: pointer;
list-style: none;
background: var(--red);
background-image: var(--bands);
background-size: var(--band-tile) var(--band-tile);
color: #fff;
}
.faq-band__header::-webkit-details-marker { display: none; }
.faq-band__heading { display: flex; flex-direction: column; gap: 0.5rem; }
.faq-band__header .eyebrow { color: var(--red-50); }
.faq-band__title {
font-size: clamp(1.25rem, 3vw, 1.75rem);
font-weight: 700;
line-height: 1.15;
color: #fff;
margin: 0;
}
.faq-band__chevron {
flex: 0 0 auto;
width: 14px;
height: 14px;
border-right: 2.5px solid #fff;
border-bottom: 2.5px solid #fff;
transform: rotate(45deg);
transition: transform 220ms var(--ease);
}
.faq-band[open] .faq-band__chevron { transform: rotate(-135deg); }
.faq-band__body {
background: var(--white);
padding: 1.5rem 1.75rem 1.75rem;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.faq-item {
background: var(--white);
border: 1px solid var(--slate-200);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
overflow: hidden;
}
.faq-item[open] { border-color: var(--red); }
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
font-size: 1rem;
font-weight: 600;
color: var(--slate-900);
cursor: pointer;
list-style: none;
transition: color 150ms var(--ease);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question:hover { color: var(--red); }
.faq-question::after {
content: "";
flex: 0 0 auto;
width: 11px;
height: 11px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 200ms var(--ease);
}
.faq-item[open] .faq-question::after { transform: rotate(-135deg); }
.faq-answer {
padding: 0 1.5rem 1.375rem;
}
.faq-answer p {
font-size: 0.9375rem;
line-height: 1.65;
color: var(--slate-600);
margin: 0;
}
/* --------------------------------------------------------------------------
Footer
-------------------------------------------------------------------------- */
.site-footer {
background: transparent;
border-top: 1px solid var(--slate-200);
padding-block: 3rem 1.5rem;
}
.footer-grid {
display: grid;
gap: 2.5rem;
grid-template-columns: 1fr;
padding-bottom: 2.5rem;
border-bottom: 1px solid var(--slate-100);
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; } }
.footer-brand img { height: 28px; width: auto; margin-bottom: 0.875rem; }
.footer-tagline { font-size: 0.9375rem; color: var(--slate-500); max-width: 22rem; }
.footer-col { display: flex; flex-direction: column; gap: 0.625rem; }
.footer-heading {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--slate-900);
margin-bottom: 0.375rem;
}
.footer-link {
font-size: 0.9375rem;
color: var(--slate-600);
transition: color 150ms var(--ease);
}
.footer-link:hover { color: var(--slate-900); }
.footer-social { display: flex; gap: 0.625rem; margin-top: 0.25rem; }
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--slate-100);
color: var(--slate-700);
transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.footer-social a:hover { background: var(--blue-50); color: var(--blue-600); }
.footer-base {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: space-between;
align-items: center;
padding-top: 1.5rem;
}
.footer-copy {
font-size: 0.8125rem;
color: var(--slate-500);
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
}
.footer-made {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.2rem 0.6rem;
border: 1px solid var(--blue-200);
border-radius: 999px;
font-size: 0.6875rem;
font-weight: 600;
color: var(--blue-600);
letter-spacing: 0.02em;
white-space: nowrap;
background: var(--white);
}
.footer-made__heart {
color: var(--blue-600);
font-size: 0.85rem;
line-height: 1;
display: inline-block;
transform: translateY(-1px);
}
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal .footer-link { font-size: 0.8125rem; }
/* --------------------------------------------------------------------------
Back to top
-------------------------------------------------------------------------- */
.back-to-top {
position: fixed;
right: 1.5rem;
top: clamp(5rem, 7vh, 5.5rem);
z-index: 40;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--white);
color: var(--slate-700);
border: 1px solid var(--slate-200);
box-shadow: var(--shadow-md);
display: inline-flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(-8px);
pointer-events: none;
transition: opacity 200ms var(--ease),
transform 200ms var(--ease),
background-color 150ms var(--ease),
color 150ms var(--ease);
}
.back-to-top.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.back-to-top:hover { background: var(--slate-50); color: var(--slate-900); }
.back-to-top:active { transform: translateY(0) scale(0.96); }
/* --------------------------------------------------------------------------
Chat bubble (floating)
-------------------------------------------------------------------------- */
.chat-bubble {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
z-index: 40;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--blue-600);
color: var(--white);
box-shadow: 0 12px 24px -8px rgba(219, 39, 119, 0.45),
0 4px 10px -2px rgba(15, 23, 42, 0.12);
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 200ms var(--ease),
background-color 150ms var(--ease),
box-shadow 200ms var(--ease);
}
.chat-bubble:hover {
background: var(--blue-700);
transform: translateY(-2px);
box-shadow: 0 18px 28px -10px rgba(219, 39, 119, 0.55),
0 6px 14px -3px rgba(15, 23, 42, 0.16);
}
.chat-bubble:active { transform: translateY(0) scale(0.97); }
.chat-bubble svg { stroke: currentColor; }
/* --------------------------------------------------------------------------
Chat modal
-------------------------------------------------------------------------- */
.chat-modal {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.chat-modal[hidden] { display: none; }
.chat-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
animation: fadeIn 180ms var(--ease);
}
.chat-modal__panel {
position: relative;
isolation: isolate; /* contain the band layer below the content */
background: var(--white);
border: 1px solid var(--slate-200);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
width: 100%;
max-width: 520px;
max-height: calc(100vh - 2rem);
overflow-y: auto;
padding: 2rem 1.75rem;
animation: popIn 220ms var(--ease);
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes popIn {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.chat-modal__backdrop,
.chat-modal__panel { animation: none; }
}
.chat-modal__close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 1.5rem;
line-height: 1;
color: var(--slate-500);
transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.chat-modal__close:hover { background: var(--slate-100); color: var(--slate-900); }
/* Brand criss-cross band bloom anchored at the top-right corner: full pattern
opacity at the corner, fading radially in every direction into the content. */
.chat-modal__confetti {
pointer-events: none;
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--bands);
background-size: var(--band-tile) var(--band-tile);
background-position: top right;
-webkit-mask-image: radial-gradient(circle farthest-corner at 100% 0%, #000 0%, #000 4%, transparent 42%);
mask-image: radial-gradient(circle farthest-corner at 100% 0%, #000 0%, #000 4%, transparent 42%);
}
.chat-modal__header { margin-bottom: 1.5rem; }
.chat-modal__header .eyebrow { margin-bottom: 0.5rem; }
.chat-modal__header h2 {
font-size: 1.5rem;
font-weight: 600;
color: var(--slate-900);
margin-bottom: 0.5rem;
}
.chat-modal__header p {
font-size: 0.9375rem;
color: var(--slate-600);
}
/* Chat form */
.chat-form { display: grid; gap: 1rem; }
.chat-form__row {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 480px) { .chat-form__row { grid-template-columns: 1fr 1fr; } }
.chat-form__field { display: flex; flex-direction: column; gap: 0.375rem; }
.chat-form__label {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--slate-600);
}
.chat-form input,
.chat-form select {
width: 100%;
padding: 0.625rem 0.75rem;
font-size: 0.9375rem;
color: var(--slate-900);
background: var(--white);
border: 1px solid var(--slate-300);
border-radius: var(--radius-sm);
transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.chat-form input:focus,
.chat-form select:focus {
outline: none;
border-color: var(--blue-600);
box-shadow: 0 0 0 3px rgba(219, 39, 119, 0.15);
}
.chat-form__submit { width: 100%; margin-top: 0.25rem; }
.chat-form__success {
text-align: center;
font-size: 0.9375rem;
color: var(--green-700);
background: var(--green-50);
padding: 0.75rem 1rem;
border-radius: var(--radius-sm);
margin-top: 0.5rem;
}
/* --------------------------------------------------------------------------
Legal modals (Privacy Policy + Terms of Service)
-------------------------------------------------------------------------- */
.legal-modal {
position: fixed;
inset: 0;
z-index: 110;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.legal-modal[hidden] { display: none; }
.legal-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
animation: fadeIn 180ms var(--ease);
}
.legal-modal__panel {
position: relative;
background: var(--white);
border: 1px solid var(--slate-200);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
width: 100%;
max-width: 760px;
max-height: calc(100vh - 2rem);
display: flex;
flex-direction: column;
animation: popIn 220ms var(--ease);
}
@media (prefers-reduced-motion: reduce) {
.legal-modal__backdrop,
.legal-modal__panel { animation: none; }
}
.legal-modal__header {
position: relative;
isolation: isolate; /* contain the band layer below the header content */
overflow: hidden; /* keep the pattern inside the header, not the body */
padding: 1.75rem 1.75rem 1rem;
border-bottom: 1px solid var(--slate-100);
flex: 0 0 auto;
}
/* Brand band bloom anchored at the header's top-right corner, fading inward —
scoped to the header so it never bleeds into the legal copy below. */
.legal-modal__header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--bands);
background-size: var(--band-tile) var(--band-tile);
background-position: top right;
-webkit-mask-image: radial-gradient(circle farthest-corner at 100% 0%, #000 0%, #000 4%, transparent 42%);
mask-image: radial-gradient(circle farthest-corner at 100% 0%, #000 0%, #000 4%, transparent 42%);
}
/* The legal modals lay their copy out in s — suppress the global
section band ::after so the pattern never sits behind the legal text. */
.legal-modal__body section::after { display: none; }
.legal-modal__header .eyebrow { margin-bottom: 0.5rem; }
.legal-modal__header h2 {
font-size: 1.5rem;
font-weight: 600;
color: var(--slate-900);
margin: 0;
}
.legal-modal__close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 1.5rem;
line-height: 1;
color: var(--slate-500);
background: transparent;
border: 0;
cursor: pointer;
transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.legal-modal__close:hover { background: var(--slate-100); color: var(--slate-900); }
.legal-modal__body {
padding: 1.5rem 1.75rem 2rem;
overflow-y: auto;
flex: 1 1 auto;
color: var(--slate-700);
font-size: 0.9375rem;
line-height: 1.65;
}
.legal-modal__body section + section {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--slate-100);
}
.legal-modal__body h3 {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.005em;
color: var(--slate-900);
margin: 0 0 0.875rem;
padding-left: 0.75rem;
border-left: 3px solid var(--blue-600);
}
.legal-modal__body h4 {
font-size: 1rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: 0;
color: var(--slate-900);
margin: 1.5rem 0 0.5rem;
}
.legal-modal__body h5 {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--slate-500);
margin: 1.125rem 0 0.4rem;
}
.legal-modal__body p {
margin: 0 0 0.875rem;
color: var(--slate-700);
}
.legal-modal__body p:last-child { margin-bottom: 0; }
.legal-modal__body ul,
.legal-modal__body ol {
margin: 0.25rem 0 1rem 1.5rem;
padding: 0;
color: var(--slate-700);
}
.legal-modal__body li {
margin-bottom: 0.4rem;
padding-left: 0.25rem;
}
.legal-modal__body li::marker { color: var(--blue-600); font-weight: 600; }
.legal-modal__body strong { color: var(--slate-900); font-weight: 600; }
.legal-modal__body a {
color: var(--blue-600);
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 500;
}
.legal-modal__body a:hover { color: var(--blue-700); }
.legal-modal__notice {
background: var(--blue-50);
color: var(--blue-700);
border-left: 3px solid var(--blue-600);
padding: 0.875rem 1rem;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.01em;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
margin: 0 0 1.75rem !important;
}
.legal-modal__address {
display: block;
font-style: normal;
background: var(--slate-50);
border: 1px solid var(--slate-200);
border-radius: var(--radius-sm);
padding: 0.875rem 1rem;
font-size: 0.875rem;
line-height: 1.7;
color: var(--slate-700);
margin-top: 0.875rem;
}
.legal-modal__address strong { color: var(--slate-900); }
/* --------------------------------------------------------------------------
Reveal animation
-------------------------------------------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 600ms var(--ease), transform 600ms var(--ease);
will-change: opacity, transform;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
/* Drop the compositor-layer hint once revealed; a lingering will-change keeps
the element on a GPU layer that can land on a fractional pixel (the hero uses
a 1.05fr grid column) and renders the text slightly blurry. */
will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
}
/* --------------------------------------------------------------------------
Easter egg: elegant floating pineapple
-------------------------------------------------------------------------- */
/* Wrapper: position driven by JS physics (translate via inline style).
We keep it fixed at top:0 / left:0 and let JS set the transform.
GRAVITY=0.4, DAMPING=0.65, FRICTION=0.985 (matches Rhenti KPI dashboard physics). */
.easter-egg-wrap {
/* Temporarily hidden — remove this line to bring the floating pineapple back. */
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 35;
pointer-events: none;
opacity: 0;
transition: opacity 0.5s ease;
will-change: transform;
}
.easter-egg-wrap.is-active { opacity: 1; }
/* Timing functions:
--fall: easeInQuad — slow start, accelerates (gravity pulling down)
--rise: easeOutQuad — fast start, decelerates (gravity slowing the rise)
Each bounce loses ~50% height; time per bounce shrinks by ~√0.5 (≈0.71).
Heights: 60vh (initial drop), 50vh, 25vh, 12vh, 6vh, 3vh, 1.5vh
Durations (in % of 22s cycle):
drop-in: 0% -> 4.5% (1.0s)
bounce 1: 4.5 -> 11% (1.42s up+down)
bounce 2: 11 -> 15.5% (1.0s)
bounce 3: 15.5 -> 18.7% (0.71s)
bounce 4: 18.7 -> 21% (0.5s)
bounce 5: 21 -> 22.6% (0.35s)
bounce 6: 22.6 -> 23.7% (0.25s)
rest: 23.7 -> 88% (~14s on floor)
fade out: 88 -> 95%
*/
.easter-egg {
position: relative;
display: block;
width: 64px;
height: 80px;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
pointer-events: auto;
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.22));
transition: transform 0.2s ease;
}
.easter-egg:hover { transform: scale(1.12); }
.easter-egg:focus-visible {
outline: 3px dashed var(--blue-600);
outline-offset: 4px;
border-radius: 8px;
}
.easter-egg.is-clicked {
animation: easter-jump 0.55s cubic-bezier(0.5, 0, 0.5, 1);
}
@keyframes easter-jump {
0%, 100% { transform: translateY(0) scale(1); }
45% { transform: translateY(-90px) scale(1.06); }
}
.easter-egg svg { width: 100%; height: 100%; pointer-events: none; }
/* Realm-switch state — applied when peek-mode pineapple has been double-clicked.
Phase 1: pineapple slides to viewport center (wrap translate transition) while the inner
SVG spins 720° (JS-driven Web Animations API on the SVG, starts from current
rotation so horizontal-orient peeks don't snap).
Phase 2: pineapple holds at center and pulses (scale 1 ↔ 1.18) while the loading
overlay shows "Switching realms...".
After ~2.4s total, the redirect fires. */
.easter-egg-wrap.is-realm-switch {
z-index: 1001; /* float above the loading overlay (z=1000) */
opacity: 1;
}
.easter-egg-wrap.is-realm-switch .easter-egg {
filter: drop-shadow(0 14px 28px rgba(219, 39, 119, 0.32));
}
.easter-egg-wrap.is-realm-switch .easter-egg:hover { transform: none; }
/* Loading overlay when egg is clicked */
.easter-loading {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
animation: easter-loading-fade 0.4s ease-out forwards;
}
.easter-loading[hidden] { display: none; }
.easter-loading__card {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
/* When the peek-mode egg has been double-clicked, the EGG itself spins in the center.
Hide the overlay's built-in pineapple and offset the label so it sits below the spinning egg. */
.easter-loading.is-egg-takeover .easter-loading__pineapple { display: none; }
.easter-loading.is-egg-takeover .easter-loading__card {
margin-top: 7rem;
}
.easter-loading__pineapple {
width: 96px;
height: 120px;
filter: drop-shadow(0 10px 20px rgba(219, 39, 119, 0.25));
animation: easter-loading-spin 1.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.easter-loading__label {
font-family: var(--font-sans, "Inter", sans-serif);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--blue-600);
margin: 0;
}
@keyframes easter-loading-spin {
0%, 100% { transform: rotate(-12deg) scale(1); }
25% { transform: rotate(-6deg) scale(1.08); }
50% { transform: rotate(12deg) scale(1); }
75% { transform: rotate(6deg) scale(1.08); }
}
@keyframes easter-loading-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.easter-egg-wrap { animation: none; transform: translate(2vw, 0); }
.easter-egg, .easter-loading__pineapple { animation: none; }
}
/* --------------------------------------------------------------------------
Integrations subsection (within the Platform section, below the tiers)
-------------------------------------------------------------------------- */
.integration-grid {
display: grid;
gap: 1.25rem;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.integration-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; }
}
.integration-col {
background: var(--white);
border: 1px solid var(--slate-200);
border-radius: var(--radius-lg);
padding: 1.75rem 1.5rem;
box-shadow: var(--shadow-xs);
}
.integration-col__title {
display: flex;
align-items: center;
gap: 0.625rem;
font-size: 1rem;
font-weight: 700;
color: var(--slate-900);
margin-bottom: 1.25rem;
}
.integration-col__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px; height: 36px;
flex: 0 0 auto;
border-radius: var(--radius-sm);
background: var(--blue-50);
color: var(--blue-600);
}
.integration-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.integration-list li {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--slate-600);
background: var(--slate-50);
border: 1px solid var(--slate-200);
border-radius: 999px;
padding: 0.375rem 0.75rem;
white-space: nowrap;
}
.integration-logo {
width: 16px;
height: 16px;
flex: 0 0 auto;
object-fit: contain;
border-radius: 3px;
}
.integration-list__soon {
display: inline-flex;
align-items: center;
gap: 0.4rem;
border-style: dashed !important;
border-color: var(--blue-200) !important;
color: var(--blue-700) !important;
background: var(--blue-50) !important;
}
.integration-soon-badge {
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--blue-600);
background: var(--white);
border: 1px solid var(--blue-200);
border-radius: 999px;
padding: 0.0625rem 0.4rem;
}
.integration-col__note {
margin-top: 1rem;
font-size: 0.8125rem;
font-style: italic;
color: var(--slate-500);
}
/* Integrations — expandable (details/summary), styled off .tier-head */
.integration-expand__summary {
cursor: pointer;
list-style: none;
margin-bottom: 0;
}
.integration-expand__summary::-webkit-details-marker { display: none; }
.integration-expand[open] .integration-expand__summary { margin-bottom: 1.75rem; }
.integration-expand__hint {
margin-left: auto;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--slate-500);
transition: color 150ms var(--ease);
}
.integration-expand[open] .integration-expand__hint { color: var(--blue-600); }
.integration-expand__chevron {
flex: 0 0 auto;
width: 12px;
height: 12px;
border-right: 2.5px solid var(--slate-400);
border-bottom: 2.5px solid var(--slate-400);
transform: rotate(45deg);
transition: transform 220ms var(--ease), border-color 150ms var(--ease);
}
.integration-expand[open] .integration-expand__chevron { transform: rotate(-135deg); }
.integration-expand__summary:hover .integration-expand__hint,
.integration-expand__summary:hover .integration-expand__chevron { color: var(--blue-600); border-color: var(--blue-600); }
/* ============================================================
Cookie consent banner (Code & Wander) — ported from the legacy
Webflow pages so the new pages match the rest of the site.
Webflow CSS variables resolved to concrete brand values; the
few Webflow checkbox/form primitives are listed before the
.cw-* rules to preserve the original override order.
============================================================ */
.w-checkbox { margin-bottom: 5px; padding-left: 20px; display: block; }
.w-checkbox:before { content: " "; grid-area: 1 / 1 / 2 / 2; display: table; }
.w-checkbox:after { content: " "; clear: both; grid-area: 1 / 1 / 2 / 2; display: table; }
.w-checkbox-input { float: left; margin: 4px 0 0 -20px; line-height: normal; }
.w-checkbox-input--inputType-custom { border: 1px solid #ccc; border-radius: 2px; width: 12px; height: 12px; }
.w-checkbox-input--inputType-custom.w--redirected-checked {
background-color: #000;
background-image: url('https://d3e54v103j8qbb.cloudfront.net/static/custom-checkbox-checkmark.589d534424.svg');
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
border-color: #000;
}
.cw-cookies .w-form { margin: 0; }
.w-form-label { display: inline-block; cursor: pointer; font-weight: normal; margin-bottom: 0; }
.cw-cookie_icon-img.w-embed:before, .cw-cookie_icon-img.w-embed:after { content: " "; display: table; }
.cw-cookie_icon-img.w-embed:after { clear: both; }
.cw-cookie_banner {
z-index: 3;
border: 1px solid #0d070726;
background-color: #fff;
border-radius: 1rem;
max-width: 600px;
padding: 2rem;
display: none;
position: fixed;
inset: auto 0% 20px 20px;
}
.cw-cookie_buttons {
grid-column-gap: 1rem;
grid-row-gap: 1rem;
flex-direction: row;
margin-top: 2rem;
display: flex;
}
.cw-button_secondary {
border: 1px solid #fa9483;
color: #1c2630;
text-align: center;
background-color: #0000;
border-radius: 80px;
justify-content: center;
padding: 1rem 1.5rem;
line-height: 1;
cursor: pointer;
transition: transform .3s, color .3s, background-color .3s;
}
.cw-button_secondary:hover {
border-color: #c87668;
background-color: #c87668;
color: #fff;
transform: translate(0, -2px);
}
.cw-button_primary {
border: 1px solid #fa9483;
background-color: #fa9483;
color: #fff;
text-align: center;
border-radius: 80px;
padding: 1rem 1.5rem;
font-weight: 400;
line-height: 1;
cursor: pointer;
transition: transform .3s, background-color .3s;
}
.cw-button_primary:hover {
background-color: #c87668;
color: #1c2630;
transform: translate(0, -2px);
}
.cw-cookie_selection { overflow: hidden; transition: height .35s ease; }
.cw-cookie_options {
grid-column-gap: 1.75rem;
grid-row-gap: 1.75rem;
flex-flow: column;
justify-content: flex-start;
align-items: flex-start;
margin-top: 2rem;
display: flex;
}
.cw-cookie_checkbox { grid-column-gap: 6px; grid-row-gap: 6px; align-items: center; display: flex; }
.cw-cookie_checkbox-check { border-radius: 4px; width: 20px; height: 20px; margin-top: 0; }
.cw-cookie_checkbox-check.w--redirected-checked { background-color: #000; background-size: 14px 14px; }
.cw-cookie_icon {
z-index: 2;
cursor: pointer;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
padding: 5px;
display: flex;
position: fixed;
inset: auto auto 20px 20px;
}
.cw-cookie_script { display: none; }
@media screen and (max-width: 991px) {
.cw-cookie_banner { max-width: 80%; }
}
@media screen and (max-width: 767px) {
.cw-cookie_banner { max-width: 100%; padding: 1rem; right: 20px; }
.cw-cookie_buttons { flex-direction: column; }
.cw-button_secondary, .cw-button_primary { padding-left: 40px; padding-right: 40px; }
.cw-cookie_options { grid-column-gap: 1rem; grid-row-gap: 1rem; }
}
@media screen and (max-width: 479px) {
.cw-cookie_banner { bottom: 10px; left: 10px; right: 10px; }
.cw-button_secondary, .cw-button_primary { width: 100%; padding-top: 18px; padding-bottom: 19px; }
.cw-cookie_options { flex-wrap: wrap; }
}