/* ============================================================
WispherFlow — 2026 Redesign Components
Activated when has class "r-hero-v2-active"
Tokens live in redesign-tokens.css (scope: .r2026)
============================================================ */
/* ── Hero v2 toggle: show new, hide legacy hero + flow bg ── */
html.r-hero-v2-active .hero,
html.r-hero-v2-active .hero-flow,
html.r-hero-v2-active #hero-flow {
display: none !important;
}
/* ── Hide theme toggle on landing page ── */
html.r-hero-v2-active .nav-theme-btn,
html.r-hero-v2-active .nav-mobile-theme-btn {
display: none !important;
}
/* ── Nav matches hero cream background on new landing ── */
/* At rest: fully solid cream — blends with hero seamlessly */
html.r-hero-v2-active .nav-bar.glass {
background: #FAF7F0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
}
/* Scrolled: gentle glass solidification as user moves past hero */
html.r-hero-v2-active .nav-bar.glass.nav-scrolled {
background: rgba(250, 247, 240, 0.90);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
}
/* Force dark ink on the cream landing nav regardless of system/user dark-mode.
--canvas-950 inverts to near-white in dark theme, making the logo invisible
on the cream (#FAF7F0) background. Hard-code the dark value here. */
html.r-hero-v2-active .nav-bar .logo-name,
html.r-hero-v2-active .nav-bar .logo svg,
html.r-hero-v2-active .nav-bar .nav-menu-btn,
html.r-hero-v2-active .nav-bar .btn-ghost,
html.r-hero-v2-active .nav-bar .nav-mobile-download,
html.r-hero-v2-active .nav-bar .nav-mobile-signin {
color: #131314 !important;
}
/* ============================================================
r-hero — the new hero section
============================================================ */
.r2026.r-hero {
position: relative;
background: var(--r-canvas);
color: var(--r-ink);
padding: clamp(3rem, 3vw, 3.5rem) var(--r-section-pad-x) clamp(4rem, 8vw, 7rem);
font-family: var(--r-font-sans);
font-feature-settings: 'ss01', 'cv11';
overflow: hidden;
isolation: isolate;
}
/* Subtle ambient bloom — sits behind the demo card only, very low opacity */
.r2026.r-hero::before {
content: '';
position: absolute;
top: 0;
right: -10%;
width: 70%;
height: 90%;
background: var(--r-gradient-ai-conic);
filter: blur(140px) saturate(1.05);
opacity: 0.10;
z-index: -1;
pointer-events: none;
animation: r-bloom-drift 30s linear infinite;
}
@keyframes r-bloom-drift {
0% { transform: translate3d(0, 0, 0) rotate(0deg); }
100% { transform: translate3d(0, 0, 0) rotate(360deg); }
}
/* Soft fade to canvas at section bottom — prevents harsh edge into legacy sections below */
.r2026.r-hero::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 6rem;
background: linear-gradient(to bottom, transparent, var(--r-canvas));
pointer-events: none;
z-index: 0;
}
/* 2-column asymmetric on desktop (Cursor-style): text left, demo right.
Stacks centered on mobile. */
.r-hero-inner {
position: relative;
z-index: 1;
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
align-items: flex-start;
gap: clamp(2.5rem, 5vw, 5rem);
}
.r-hero-text {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: clamp(1.1rem, 1.8vw, 1.75rem);
min-width: 0;
align-self: flex-start;
}
.r-hero-demo-wrap {
min-width: 0;
display: flex;
flex-direction: column;
align-items: stretch;
gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 900px) {
.r-hero-inner {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.r-hero-text {
align-items: center;
text-align: center;
}
}
/* ── Eyebrow chip ── */
.r-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.45rem 0.95rem 0.45rem 0.7rem;
border-radius: var(--r-radius-pill);
background: rgba(15, 76, 58, 0.06);
border: 1px solid rgba(15, 76, 58, 0.14);
color: var(--r-brand);
font-size: var(--r-fs-tiny);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.r-eyebrow-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--r-grad-3);
box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.18);
animation: r-pulse 1.6s ease-out infinite;
}
@keyframes r-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.18); }
50% { box-shadow: 0 0 0 8px rgba(236, 72, 153, 0.04); }
}
/* ============================================================
r-w-svg — Canonical WispherFlow W mark animation
Lifted directly from desktop/mocks/mock-wordmark-entrance.html
so the redesign hero matches the rest of the app/auth/studio.
2-phase entrance (2s total):
Phase 1 (0% – 65%): voice-equalizer dance, dramatic stagger
Phase 2 (65% – 100%): settle to scaleY(1) (true W silhouette)
transform-origin: 50% 50% (CENTER) so bars expand in both
directions — looks like a real audio meter, not a thermometer.
Three keyframe sets: outer / inner / center, each with wider
amplitude moving inward — center bar leads the show.
============================================================ */
.r-w-svg {
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
color: currentColor;
}
.r-w-svg rect {
transform-box: fill-box;
transform-origin: 50% 50%;
animation-duration: 2s;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation-iteration-count: 1;
animation-fill-mode: both;
}
.r-w-svg rect:nth-child(1) { animation-name: r-w-enter-outer; animation-delay: 0ms; }
.r-w-svg rect:nth-child(5) { animation-name: r-w-enter-outer; animation-delay: 60ms; }
@keyframes r-w-enter-outer {
0% { transform: scaleY(0.35); }
10% { transform: scaleY(1.2); }
22% { transform: scaleY(0.55); }
34% { transform: scaleY(1.1); }
46% { transform: scaleY(0.7); }
58% { transform: scaleY(1.05); }
72% { transform: scaleY(0.92); }
85% { transform: scaleY(1.03); }
100% { transform: scaleY(1); }
}
.r-w-svg rect:nth-child(2) { animation-name: r-w-enter-inner; animation-delay: 90ms; }
.r-w-svg rect:nth-child(4) { animation-name: r-w-enter-inner; animation-delay: 150ms; }
@keyframes r-w-enter-inner {
0% { transform: scaleY(0.3); }
10% { transform: scaleY(1.4); }
22% { transform: scaleY(0.4); }
34% { transform: scaleY(1.3); }
46% { transform: scaleY(0.55); }
58% { transform: scaleY(1.15); }
72% { transform: scaleY(0.88); }
85% { transform: scaleY(1.05); }
100% { transform: scaleY(1); }
}
.r-w-svg rect:nth-child(3) { animation-name: r-w-enter-center; animation-delay: 180ms; }
@keyframes r-w-enter-center {
0% { transform: scaleY(0.25); }
10% { transform: scaleY(1.5); }
22% { transform: scaleY(0.4); }
34% { transform: scaleY(1.4); }
46% { transform: scaleY(0.5); }
58% { transform: scaleY(1.2); }
72% { transform: scaleY(0.85); }
85% { transform: scaleY(1.08); }
100% { transform: scaleY(1); }
}
/* ── LIVE variant: continuous dance, never settles ──
Used in the answer card where the AI is actively generating.
Same per-bar amplitude shape as entrance, looped infinitely. */
.r-w-svg--live rect {
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-duration: 1.6s;
animation-timing-function: ease-in-out;
}
.r-w-svg--live rect:nth-child(1) { animation-name: r-w-live-outer; animation-delay: 0ms; }
.r-w-svg--live rect:nth-child(5) { animation-name: r-w-live-outer; animation-delay: 220ms; }
@keyframes r-w-live-outer {
0%, 100% { transform: scaleY(0.55); }
25% { transform: scaleY(1.2); }
50% { transform: scaleY(0.7); }
75% { transform: scaleY(1.05); }
}
.r-w-svg--live rect:nth-child(2) { animation-name: r-w-live-inner; animation-delay: 110ms; }
.r-w-svg--live rect:nth-child(4) { animation-name: r-w-live-inner; animation-delay: 330ms; }
@keyframes r-w-live-inner {
0%, 100% { transform: scaleY(0.4); }
25% { transform: scaleY(1.4); }
50% { transform: scaleY(0.55); }
75% { transform: scaleY(1.25); }
}
.r-w-svg--live rect:nth-child(3) { animation-name: r-w-live-center; animation-delay: 50ms; }
@keyframes r-w-live-center {
0%, 100% { transform: scaleY(0.5); }
25% { transform: scaleY(1.5); }
50% { transform: scaleY(0.4); }
75% { transform: scaleY(1.35); }
}
@media (prefers-reduced-motion: reduce) {
.r-w-svg rect { animation: none !important; transform: none !important; }
}
/* (Removed r-hero-chip — the floating-chips approach didn't work for this hero.
Pausing to research real modern AI hero patterns before next iteration.) */
/* ── Headline ── */
.r-hero-title {
font-family: var(--r-font-sans);
font-weight: 500;
font-size: clamp(1.75rem, 2.4vw + 0.5rem, 3rem);
line-height: 1.08;
letter-spacing: -0.038em;
color: var(--r-ink);
margin: 0;
max-width: 22ch;
min-height: 3.5em;
}
.r-hero-title em {
font-family: var(--r-font-serif);
font-style: italic;
font-weight: 400;
font-size: 1.08em;
letter-spacing: -0.02em;
/* The italic word picks up the AI gradient as a subtle accent */
background: var(--r-gradient-ai);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: r-grad-shift 8s ease-in-out infinite;
}
@keyframes r-grad-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* ── Subhead ── */
.r-hero-sub {
font-size: var(--r-fs-lead);
line-height: var(--r-lh-body);
letter-spacing: var(--r-tracking-body);
color: var(--r-ink-soft);
margin: 0;
max-width: 56ch;
text-wrap: pretty;
}
/* ── CTAs (left-aligned, vertical stack) ── */
.r-hero-ctas {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.65rem;
margin-top: 0.5rem;
width: 100%;
max-width: 520px;
}
.r-hero-platforms {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.r-hero-platforms .r-btn--platform {
flex: 1 1 0;
min-width: 240px;
}
.r-btn--full {
width: 100%;
justify-content: center;
}
/* ── r-btn--platform: dark squircle + emerald accents + bigger icon ── */
.r-btn--platform {
--_bg: var(--r-ink);
--_ink: var(--r-canvas);
--_border: rgba(63, 224, 168, 0.22);
--_glow: rgba(63, 224, 168, 0);
position: relative;
width: 100%;
height: 58px;
padding: 0 2rem;
background: var(--_bg);
color: var(--_ink);
border: 1px solid var(--_border);
border-radius: 14px;
box-shadow:
0 2px 6px rgba(14, 17, 22, 0.08),
0 0 0 0 var(--_glow);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
font-family: var(--r-font-sans);
font-size: 0.975rem;
font-weight: 500;
letter-spacing: -0.011em;
text-decoration: none;
cursor: pointer;
overflow: hidden;
transition:
transform 280ms var(--r-ease-out),
border-color 280ms var(--r-ease-out),
box-shadow 280ms var(--r-ease-out);
}
/* Subtle top inner highlight (premium depth cue) */
.r-btn--platform::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 100%);
pointer-events: none;
border-radius: inherit;
}
.r-btn--platform:hover {
transform: translateY(-2px);
--_border: rgba(63, 224, 168, 0.55);
--_glow: rgba(63, 224, 168, 0.28);
box-shadow:
0 12px 28px rgba(14, 17, 22, 0.18),
0 0 24px var(--_glow);
}
.r-btn--platform:active {
transform: translateY(0);
}
.r-btn--platform .r-btn-os-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
color: #3FE0A8; /* fallback — only applies if .r-btn-os-icon--color isn't set */
}
/* Apple logo SVG has more internal whitespace than the Windows grid,
so bump it slightly to match visual weight */
.r-btn--platform[data-r-os-btn="mac"] .r-btn-os-icon {
width: 22px;
height: 22px;
}
/* Brand-colored OS icons — fills are set inline on the SVG paths, so don't
force a color on the parent (otherwise it inherits down via currentColor). */
.r-btn--platform .r-btn-os-icon--color { color: initial; }
/* ─── Premium play badge (Watch demo button) ───
Small dark-on-light circle holding a white play triangle.
Visual weight similar to a YouTube thumbnail play overlay — gives the
ghost button a real focal point instead of a 11px monochrome triangle. */
.r-btn--demo {
gap: 0.7rem;
padding-left: 0.4rem;
}
.r-btn-play-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: #0e1116;
box-shadow:
0 1px 2px rgba(14, 17, 22, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
flex-shrink: 0;
padding-left: 2px; /* optical centering of triangle */
transition: transform 220ms var(--r-ease-out), background 220ms var(--r-ease-out);
}
.r-btn--demo:hover .r-btn-play-badge {
background: #d97757; /* terra brand on hover — playful, intentional */
transform: scale(1.06);
}
/* Tiny spec caption under each button (Arc / Raycast pattern) */
.r-platform-caption {
font-size: 0.75rem;
font-weight: 500;
color: var(--r-ink-muted);
letter-spacing: -0.005em;
text-align: center;
font-variant-numeric: tabular-nums;
}
.r-platform-caption strong {
color: var(--r-ink-soft);
font-weight: 600;
}
@media (max-width: 900px) {
.r-hero-ctas { align-self: center; max-width: 420px; }
}
.r-btn {
--_bg: var(--r-brand);
--_ink: var(--r-canvas);
display: inline-flex;
align-items: center;
gap: 0.55rem;
height: 3.25rem;
padding: 0 1.5rem;
border: none;
border-radius: var(--r-radius-pill);
font-family: var(--r-font-sans);
font-size: var(--r-fs-body);
font-weight: 500;
letter-spacing: -0.005em;
color: var(--_ink);
background: var(--_bg);
cursor: pointer;
text-decoration: none;
transition:
transform 220ms var(--r-ease-out),
background 220ms var(--r-ease-out),
box-shadow 220ms var(--r-ease-out);
box-shadow: var(--r-shadow-sm);
white-space: nowrap;
}
.r-btn:hover {
transform: translateY(-1px);
box-shadow: var(--r-shadow-md), var(--r-shadow-brand-glow);
}
.r-btn:active {
transform: translateY(0);
}
.r-btn--primary {
--_bg: var(--r-brand);
--_ink: var(--r-canvas);
}
.r-btn--primary:hover {
--_bg: var(--r-brand-soft);
}
.r-btn--ghost {
--_bg: transparent;
--_ink: var(--r-ink);
box-shadow: inset 0 0 0 1px rgba(14, 17, 22, 0.14);
}
.r-btn--ghost:hover {
--_bg: rgba(14, 17, 22, 0.04);
box-shadow: inset 0 0 0 1px rgba(14, 17, 22, 0.22), var(--r-shadow-sm);
}
.r-btn-icon {
display: inline-grid;
place-items: center;
width: 1.1em;
height: 1.1em;
font-size: 0.85em;
opacity: 0.9;
}
/* ============================================================
r-os-pills — small platform pills under the CTAs
Auto-detected OS gets .is-current highlight (added by JS).
Each pill is a direct download link for that platform.
============================================================ */
.r-os-pills {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
margin-top: 0.4rem;
}
.r-os-pills-label {
font-size: var(--r-fs-tiny);
font-weight: 500;
color: var(--r-ink-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-right: 0.35rem;
}
.r-os-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.75rem;
border-radius: var(--r-radius-pill);
background: rgba(14, 17, 22, 0.045);
border: 1px solid transparent;
color: var(--r-ink-soft);
font-family: var(--r-font-sans);
font-size: var(--r-fs-tiny);
font-weight: 500;
letter-spacing: -0.005em;
text-decoration: none;
transition: background 220ms var(--r-ease-out),
color 220ms var(--r-ease-out),
transform 220ms var(--r-ease-out),
border-color 220ms var(--r-ease-out);
cursor: pointer;
}
.r-os-pill:hover {
background: rgba(15, 76, 58, 0.09);
color: var(--r-brand);
transform: translateY(-1px);
}
.r-os-pill.is-current {
background: rgba(15, 76, 58, 0.12);
color: var(--r-brand);
border-color: rgba(15, 76, 58, 0.22);
font-weight: 600;
}
.r-os-pill.is-current::before {
content: '';
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--r-grad-3);
box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.18);
animation: r-pulse 1.6s ease-out infinite;
margin-right: 0.1rem;
}
.r-os-pill-icon {
width: 12px;
height: 12px;
flex-shrink: 0;
}
@media (max-width: 640px) {
.r-os-pills { justify-content: center; }
}
/* ── Demo card (steps 3-4 fill this) — reverted to min-height ── */
.r-hero-demo {
margin-top: 0;
width: 100%;
height: clamp(560px, 65vh, 680px);
border-radius: var(--r-radius-xl);
background:
linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.42)),
var(--r-canvas-soft);
box-shadow: var(--r-shadow-lg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(1rem, 2vw, 1.75rem);
padding: clamp(1.5rem, 3vw, 2.75rem);
position: relative;
overflow: hidden;
}
@media (max-width: 900px) {
.r-hero-demo {
height: clamp(480px, 80vw, 580px);
margin-top: 1rem;
}
}
.r-hero-demo::before {
content: '';
position: absolute;
inset: 0;
background: var(--r-gradient-ai);
opacity: 0.10;
filter: blur(48px);
z-index: 0;
animation: r-bloom-drift 28s linear infinite reverse;
}
/* ============================================================
r-waveform — CSS/SVG audio-reactive-style waveform
Idle "listening" loop. Replace with Rive .riv when commissioned.
Mount hook: data-r-rive-mount="waveform"
============================================================ */
.r-waveform {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(3px, 0.55vw, 7px);
width: min(100%, 640px);
height: clamp(80px, 14vw, 160px);
/* Mask edges into the card so bars fade in/out at the ends */
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.r-wave-bar {
--i: 0;
flex: 0 0 auto;
width: clamp(3px, 0.45vw, 5px);
height: 22%;
border-radius: 999px;
background: var(--r-gradient-ai);
background-size: 1200% 100%;
background-position: calc(var(--i, 0) * -4%) 50%;
transform-origin: center;
animation:
r-wave-pulse 1.55s ease-in-out infinite,
r-wave-shimmer 9s linear infinite;
animation-delay:
calc(var(--i, 0) * -83ms),
calc(var(--i, 0) * -120ms);
opacity: 0.92;
will-change: transform;
}
@keyframes r-wave-pulse {
0%, 100% { transform: scaleY(0.35); }
18% { transform: scaleY(0.85); }
34% { transform: scaleY(0.55); }
50% { transform: scaleY(1.4); }
66% { transform: scaleY(0.7); }
82% { transform: scaleY(1.1); }
}
@keyframes r-wave-shimmer {
0% { background-position: 0% 50%; }
100% { background-position: -100% 50%; }
}
/* Bars taper at the ends for the "audio envelope" look */
.r-wave-bar:nth-child(-n+3),
.r-wave-bar:nth-last-child(-n+3) { height: 14%; opacity: 0.7; }
.r-wave-bar:nth-child(n+4):nth-child(-n+6),
.r-wave-bar:nth-last-child(n+4):nth-last-child(-n+6) { height: 18%; opacity: 0.82; }
/* ── Demo status chip ── */
.r-demo-status {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.5rem 0.95rem;
border-radius: var(--r-radius-pill);
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(14, 17, 22, 0.06);
color: var(--r-ink-soft);
font-size: var(--r-fs-small);
font-weight: 500;
letter-spacing: -0.005em;
box-shadow: var(--r-shadow-xs);
}
.r-demo-status-dot {
position: relative;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--r-grad-1);
box-shadow: 0 0 0 0 rgba(77, 101, 255, 0.45);
animation: r-status-pulse 1.8s ease-out infinite;
}
@keyframes r-status-pulse {
0% { box-shadow: 0 0 0 0 rgba(77, 101, 255, 0.45); background: var(--r-grad-1); }
40% { background: var(--r-grad-2); }
70% { background: var(--r-grad-3); }
100% { box-shadow: 0 0 0 10px rgba(77, 101, 255, 0); background: var(--r-grad-1); }
}
/* Reduced motion: stop the dance, keep the static composition */
@media (prefers-reduced-motion: reduce) {
.r-wave-bar { animation: none; transform: scaleY(0.7); }
.r-demo-status-dot { animation: none; }
.r-hero-demo::before { animation: none; }
}
/* ── Trust line ── */
.r-hero-trust {
margin: 0;
font-size: var(--r-fs-small);
color: var(--r-ink-muted);
letter-spacing: -0.005em;
}
.r-hero-trust strong {
color: var(--r-ink-soft);
font-weight: 600;
}
/* ── Responsive tweaks ── */
@media (max-width: 700px) {
.r-hero-platforms { flex-direction: column; }
.r-hero-platforms .r-btn { flex: 0 0 auto; }
.r-hero-title { max-width: 14ch; }
}
/* ── Tablet small adjustments ── */
@media (min-width: 701px) and (max-width: 1023px) {
.r-hero-title { max-width: 16ch; }
}
/* ============================================================
r-cycler — JS-driven word swap (bulletproof, no positioning bugs)
JS sets textContent + toggles is-swap-out / is-swap-in
FIX: min-width sized for the LONGEST word ("system-design") so
swapping shorter words doesn't reflow the surrounding headline.
Shorter words center within the reserved width.
============================================================ */
.r-cycler {
position: relative;
display: inline-block;
vertical-align: baseline;
font-family: var(--r-font-serif);
font-style: italic;
font-weight: 400;
font-size: 1.08em;
letter-spacing: -0.02em;
min-width: 5em; /* ← reserves space for the widest word; prevents shift */
background: var(--r-gradient-ai);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-align: center;
white-space: nowrap;
transition: opacity 280ms var(--r-ease-out), transform 280ms var(--r-ease-out);
animation: r-grad-shift 8s ease-in-out infinite;
}
.r-cycler.is-swap-out {
opacity: 0;
transform: translateY(0.4em) skewY(4deg);
}
.r-cycler.is-swap-in {
opacity: 0;
transform: translateY(-0.4em) skewY(-4deg);
}
/* Hand-drawn squiggle underline — gradient shown through an SVG mask */
.r-cycler::after {
content: '';
position: absolute;
left: -3%;
right: -3%;
bottom: -0.18em;
height: 0.32em;
background: var(--r-gradient-ai);
background-size: 200% 100%;
opacity: 0.95;
-webkit-mask: url("data:image/svg+xml;utf8,") left center / 100% 100% no-repeat;
mask: url("data:image/svg+xml;utf8,") left center / 100% 100% no-repeat;
transform: scaleX(0);
transform-origin: left center;
transition: transform 480ms var(--r-ease-out);
pointer-events: none;
}
.r-cycler.is-underline-on::after { transform: scaleX(1); transform-origin: left center; }
.r-cycler.is-underline-off::after { transform: scaleX(0); transform-origin: right center; transition: transform 360ms var(--r-ease-in-out); }
/* ============================================================
r-hero-orbs — REMOVED per research (decorative "AI vibes" = 2020
anti-pattern). Selectors kept so the markup degrades silently.
============================================================ */
.r-hero-orbs { display: none; }
.r-hero-orb {
position: absolute;
width: clamp(220px, 30vw, 420px);
height: clamp(220px, 30vw, 420px);
border-radius: 50%;
filter: blur(80px);
opacity: 0.28;
will-change: transform;
animation: r-orb-drift 32s ease-in-out infinite;
}
.r-hero-orb-1 { background: #4D65FF; top: -8%; left: 3%; animation-delay: 0s; }
.r-hero-orb-2 { background: #EC4899; top: 35%; right: -6%; animation-delay: -10s; animation-duration: 36s; }
.r-hero-orb-3 { background: #FFA946; top: 70%; left: 40%; animation-delay: -20s; animation-duration: 40s; }
.r-hero-orb-4 { background: #A855F7; top: 15%; right: 22%; animation-delay: -5s; animation-duration: 28s; opacity: 0.22; }
@keyframes r-orb-drift {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(40px, -50px) scale(1.12); }
66% { transform: translate(-30px, 35px) scale(0.94); }
}
/* ============================================================
Hero entrance — fade-rise on load (subtle drama)
============================================================ */
.r2026.r-hero .r-eyebrow,
.r2026.r-hero .r-hero-title,
.r2026.r-hero .r-hero-sub,
.r2026.r-hero .r-hero-ctas,
.r2026.r-hero .r-hero-demo,
.r2026.r-hero .r-questions,
.r2026.r-hero .r-hero-trust {
opacity: 0;
transform: translateY(18px);
animation: r-rise-in 800ms var(--r-ease-out) forwards;
}
.r2026.r-hero .r-eyebrow { animation-delay: 60ms; }
.r2026.r-hero .r-hero-title { animation-delay: 140ms; }
.r2026.r-hero .r-hero-sub { animation-delay: 260ms; }
.r2026.r-hero .r-hero-ctas { animation-delay: 380ms; }
.r2026.r-hero .r-hero-demo { animation-delay: 500ms; }
.r2026.r-hero .r-questions { animation-delay: 620ms; }
.r2026.r-hero .r-hero-trust { animation-delay: 740ms; }
@keyframes r-rise-in {
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
r-avatar — geometric SVG character with cursor-tracking eyes
============================================================ */
.r-avatar {
position: relative;
z-index: 1;
width: clamp(72px, 9vw, 110px);
height: clamp(72px, 9vw, 110px);
filter: drop-shadow(0 12px 28px rgba(14, 17, 22, 0.10));
animation: r-avatar-breathe 5.5s ease-in-out infinite;
transform-origin: center;
}
@keyframes r-avatar-breathe {
0%, 100% { transform: scale(1) translateY(0); }
50% { transform: scale(1.03) translateY(-2px); }
}
/* WispBot — AI-gradient body so the character mirrors the card's own
AI-gradient bloom. Cream sticker stroke for definition, ink eyes/bars
so they read on the bright multi-stop body. Color stays consistent
across every stage — only motion changes per stage. */
.r-avatar-body {
fill: url(#r-av-ai);
stroke: var(--r-canvas);
stroke-width: 6;
stroke-linejoin: round;
paint-order: stroke fill;
}
.r-avatar-limb {
fill: url(#r-av-ai);
stroke: var(--r-canvas);
stroke-width: 6;
stroke-linejoin: round;
paint-order: stroke fill;
}
/* Ink eyes — high contrast on the colorful body */
.r-avatar-eye {
fill: var(--r-ink);
transform-origin: center;
transform-box: fill-box;
animation: r-avatar-blink 4.5s infinite;
}
.r-avatar-eye--r { animation-delay: 0.06s; }
@keyframes r-avatar-blink {
0%, 92%, 100% { transform: scaleY(1); }
95% { transform: scaleY(0.08); }
}
/* W audio bars — solid ink, always. No color flip between stages so the
avatar's palette stays consistent; only the wave/pulse motion changes. */
.r-avatar-mouth { transform-box: fill-box; }
.r-avatar-bar {
fill: var(--r-ink);
transform-origin: center;
transform-box: fill-box;
}
.r-avatar-bar:nth-child(1) { animation-delay: 0s; }
.r-avatar-bar:nth-child(2) { animation-delay: 0.10s; }
.r-avatar-bar:nth-child(3) { animation-delay: 0.20s; }
.r-avatar-bar:nth-child(4) { animation-delay: 0.30s; }
.r-avatar-bar:nth-child(5) { animation-delay: 0.40s; }
@keyframes r-avatar-bar-wave {
0%, 100% { transform: scaleY(0.55); }
50% { transform: scaleY(1); }
}
@keyframes r-avatar-bar-pulse {
0%, 100% { transform: scaleY(0.7); opacity: 0.6; }
50% { transform: scaleY(0.85); opacity: 1; }
}
/* ── WispBot happy-state elements (arch eyes, cheeks, smile) ── */
/* Smooth fill/stroke transitions on all avatar parts */
.r-avatar-body,
.r-avatar-limb { transition: fill 380ms ease; }
.r-avatar-eye { transition: fill 280ms ease, opacity 220ms ease; }
.r-avatar-bar { transition: fill 280ms ease; }
/* Happy elements hidden by default */
.r-avatar-eye-happy,
.r-avatar-cheek,
.r-avatar-smile { opacity: 0; transition: opacity 260ms ease; }
.r-avatar-eye-happy { stroke: var(--r-canvas); }
.r-avatar-cheek { fill: #EC4899; fill-opacity: 0.65; }
.r-avatar-smile { stroke: var(--r-canvas); }
/* ── Stage: listening + hearing — dark green, cream eyes, amber animated bars ── */
.r-hero-demo[data-stage="listening"] .r-avatar-body,
.r-hero-demo[data-stage="listening"] .r-avatar-limb,
.r-hero-demo[data-stage="hearing"] .r-avatar-body,
.r-hero-demo[data-stage="hearing"] .r-avatar-limb { fill: #0F4C3A; }
.r-hero-demo[data-stage="listening"] .r-avatar-eye,
.r-hero-demo[data-stage="hearing"] .r-avatar-eye { fill: #FAF7F0; }
.r-hero-demo[data-stage="listening"] .r-avatar-bar,
.r-hero-demo[data-stage="hearing"] .r-avatar-bar {
fill: #FFA946;
animation: r-avatar-bar-wave 1s ease-in-out infinite;
}
.r-hero-demo[data-stage="listening"] .r-avatar-bar:nth-child(1),
.r-hero-demo[data-stage="hearing"] .r-avatar-bar:nth-child(1) { animation-delay: 0s; }
.r-hero-demo[data-stage="listening"] .r-avatar-bar:nth-child(2),
.r-hero-demo[data-stage="hearing"] .r-avatar-bar:nth-child(2) { animation-delay: 0.10s; }
.r-hero-demo[data-stage="listening"] .r-avatar-bar:nth-child(3),
.r-hero-demo[data-stage="hearing"] .r-avatar-bar:nth-child(3) { animation-delay: 0.20s; }
.r-hero-demo[data-stage="listening"] .r-avatar-bar:nth-child(4),
.r-hero-demo[data-stage="hearing"] .r-avatar-bar:nth-child(4) { animation-delay: 0.30s; }
.r-hero-demo[data-stage="listening"] .r-avatar-bar:nth-child(5),
.r-hero-demo[data-stage="hearing"] .r-avatar-bar:nth-child(5) { animation-delay: 0.40s; }
/* ── Stage: thinking — dark green, gradient bars, slow pulse ── */
.r-hero-demo[data-stage="thinking"] .r-avatar-body,
.r-hero-demo[data-stage="thinking"] .r-avatar-limb { fill: #0F4C3A; }
.r-hero-demo[data-stage="thinking"] .r-avatar-eye { fill: #FAF7F0; }
.r-hero-demo[data-stage="thinking"] .r-avatar-bar {
fill: url(#r-av-ai);
animation: r-avatar-bar-pulse 1.6s ease-in-out infinite;
}
.r-hero-demo[data-stage="thinking"] .r-avatar-bar:nth-child(1) { animation-delay: 0s; }
.r-hero-demo[data-stage="thinking"] .r-avatar-bar:nth-child(2) { animation-delay: 0.15s; }
.r-hero-demo[data-stage="thinking"] .r-avatar-bar:nth-child(3) { animation-delay: 0.30s; }
.r-hero-demo[data-stage="thinking"] .r-avatar-bar:nth-child(4) { animation-delay: 0.45s; }
.r-hero-demo[data-stage="thinking"] .r-avatar-bar:nth-child(5) { animation-delay: 0.60s; }
/* ── Stage: answering + resting — answer arrived, show happy face ──
Body stays on the AI gradient (matches card theme); only the FACE
transforms: square eyes → arch eyes, W bars → smile, cheeks pop in. */
/* Fade out square eyes */
.r-hero-demo[data-stage="answering"] .r-avatar-eye,
.r-hero-demo[data-stage="resting"] .r-avatar-eye { opacity: 0; }
/* Fade in arch eyes */
.r-hero-demo[data-stage="answering"] .r-avatar-eye-happy,
.r-hero-demo[data-stage="resting"] .r-avatar-eye-happy { opacity: 1; }
/* Fade in cheeks */
.r-hero-demo[data-stage="answering"] .r-avatar-cheek,
.r-hero-demo[data-stage="resting"] .r-avatar-cheek { opacity: 1; }
/* Fade out bar mouth, fade in smile */
.r-hero-demo[data-stage="answering"] .r-avatar-mouth,
.r-hero-demo[data-stage="resting"] .r-avatar-mouth { opacity: 0; transition: opacity 260ms ease; }
.r-hero-demo[data-stage="answering"] .r-avatar-smile,
.r-hero-demo[data-stage="resting"] .r-avatar-smile { opacity: 1; }
/* ============================================================
r-questions — streaming interview-question marquee ribbon
============================================================ */
.r-questions {
position: relative;
z-index: 1;
width: 100%;
margin-top: clamp(1.5rem, 3vw, 2.5rem);
padding: 0.5rem 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.r-questions-label {
display: block;
text-align: center;
font-size: var(--r-fs-tiny);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--r-ink-muted);
font-weight: 500;
margin-bottom: 0.9rem;
}
.r-questions-track {
display: flex;
width: max-content;
gap: 0.6rem;
animation: r-marquee 55s linear infinite;
}
.r-questions:hover .r-questions-track { animation-play-state: paused; }
@keyframes r-marquee {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
.r-question-chip {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.95rem;
border-radius: var(--r-radius-pill);
background: rgba(15, 76, 58, 0.045);
border: 1px solid rgba(15, 76, 58, 0.08);
color: var(--r-ink-soft);
font-size: var(--r-fs-small);
font-weight: 500;
letter-spacing: -0.005em;
white-space: nowrap;
}
.r-question-chip-src {
color: var(--r-ink-muted);
font-size: 0.85em;
letter-spacing: 0.02em;
}
/* ============================================================
Cursor parallax — bloom + orbs follow mouse via --r-mx / --r-my
Set by redesign.js; defaults to 0 (no movement).
============================================================ */
.r2026.r-hero::before {
transform: translate3d(calc(var(--r-mx, 0) * 48px), calc(var(--r-my, 0) * 36px), 0);
transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* (per-orb cursor parallax removed — handled by .r-hero-orbs wrapper above
so the orb drift animation isn't fighting transform.) */
.r2026.r-hero {
--r-mx: 0;
--r-my: 0;
}
/* ============================================================
Storytelling demo loop — 4 stages cycle every ~18s
Stages: listening → hearing → thinking → answering → loop
JS toggles data-stage on .r-hero-demo
============================================================ */
/* Make the demo card position relative so absolute children anchor */
.r-hero-demo { position: relative; }
/* Question text (appears as typewriter under the waveform) */
.r-stage-question {
position: relative;
z-index: 1;
min-height: 1.5em;
max-width: 88%;
text-align: center;
font-family: var(--r-font-sans);
font-size: var(--r-fs-lead);
font-weight: 500;
color: var(--r-ink);
letter-spacing: -0.012em;
opacity: 0;
transform: translateY(8px);
transition: opacity 360ms var(--r-ease-out), transform 360ms var(--r-ease-out);
}
.r-hero-demo[data-stage="hearing"] .r-stage-question,
.r-hero-demo[data-stage="thinking"] .r-stage-question,
.r-hero-demo[data-stage="answering"] .r-stage-question {
opacity: 1;
transform: translateY(0);
}
.r-stage-question::after {
content: '';
display: inline-block;
width: 2px;
height: 1em;
background: var(--r-brand);
margin-left: 3px;
vertical-align: -2px;
animation: r-blink 1.05s steps(2) infinite;
opacity: 0;
}
.r-hero-demo[data-stage="hearing"] .r-stage-question::after { opacity: 1; }
@keyframes r-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* Answer card — slides up from below, streams text */
.r-stage-answer {
position: relative;
z-index: 2;
width: min(100%, 540px);
padding: 1rem 1.15rem 1.15rem;
border-radius: var(--r-radius-lg);
background:
linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.85));
border: 1px solid rgba(15, 76, 58, 0.10);
box-shadow: var(--r-shadow-md);
opacity: 0;
transform: translateY(18px) scale(0.985);
transition: opacity 460ms var(--r-ease-out), transform 460ms var(--r-ease-out);
pointer-events: none;
}
.r-hero-demo[data-stage="answering"] .r-stage-answer,
.r-hero-demo[data-stage="resting"] .r-stage-answer {
opacity: 1;
transform: translateY(0) scale(1);
}
.r-stage-answer::before {
/* gradient border halo when actively streaming */
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: var(--r-gradient-ai);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 260ms var(--r-ease-out);
pointer-events: none;
}
.r-hero-demo[data-stage="answering"] .r-stage-answer::before { opacity: 1; }
.r-stage-answer-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.r-stage-answer-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: var(--r-fs-tiny);
font-weight: 600;
letter-spacing: 0.04em;
color: var(--r-brand);
text-transform: uppercase;
}
.r-stage-answer-spark {
width: 11px;
height: 11px;
display: inline-block;
background: var(--r-gradient-ai);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
animation: r-spark-spin 5s linear infinite;
}
@keyframes r-spark-spin {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.15); }
100% { transform: rotate(360deg) scale(1); }
}
.r-stage-answer-time {
font-size: var(--r-fs-tiny);
color: var(--r-ink-muted);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.r-stage-answer-text {
font-size: var(--r-fs-body);
line-height: 1.55;
color: var(--r-ink-soft);
letter-spacing: -0.006em;
text-align: left;
min-height: 1.55em;
max-height: 130px;
overflow-y: auto;
scrollbar-width: none;
}
.r-stage-answer-text::-webkit-scrollbar { display: none; }
.r-hero-demo[data-stage="answering"] .r-stage-answer-text::after {
content: '';
display: inline-block;
width: 2px;
height: 1em;
background: var(--r-brand);
margin-left: 2px;
vertical-align: -2px;
animation: r-blink 1.05s steps(2) infinite;
}
/* ── Waveform per stage ── */
.r-hero-demo[data-stage="listening"] .r-wave-bar {
animation-duration: 1.35s, 9s; /* energetic */
}
.r-hero-demo[data-stage="hearing"] .r-wave-bar {
animation-duration: 1s, 9s; /* faster, "absorbing the question" */
opacity: 1;
}
.r-hero-demo[data-stage="thinking"] .r-wave-bar {
animation-duration: 3.5s, 14s; /* slow, contemplative */
opacity: 0.6;
}
.r-hero-demo[data-stage="answering"] .r-wave-bar,
.r-hero-demo[data-stage="resting"] .r-wave-bar {
animation-duration: 4.5s, 14s;
opacity: 0.32; /* recede — answer card takes focus */
}
/* ── Avatar per stage (mouth + halo shift) ── */
.r-avatar-halo {
transition: opacity 600ms var(--r-ease-out);
}
.r-hero-demo[data-stage="thinking"] .r-avatar-halo {
animation: r-avatar-think 1.8s ease-in-out infinite;
}
@keyframes r-avatar-think {
0%, 100% { opacity: 0.5; transform-origin: center; }
50% { opacity: 1; }
}
/* WispBot stage choreography — bars dance/pulse and pick up the AI
gradient when the brain is doing work. Listening + hearing = audio
EQ wave; thinking = slow pulse + gradient; answering = energetic
wave with gradient; resting = flat. */
.r-hero-demo[data-stage="listening"] .r-avatar-bar,
.r-hero-demo[data-stage="hearing"] .r-avatar-bar {
animation: r-avatar-bar-wave 1.1s ease-in-out infinite;
fill: url(#r-av-ai);
}
.r-hero-demo[data-stage="thinking"] .r-avatar-bar {
animation: r-avatar-bar-pulse 1.4s ease-in-out infinite;
fill: url(#r-av-ai);
}
.r-hero-demo[data-stage="answering"] .r-avatar-bar {
animation: r-avatar-bar-wave 0.7s ease-in-out infinite;
fill: url(#r-av-ai);
}
.r-hero-demo[data-stage="resting"] .r-avatar-bar {
animation: none;
transform: scaleY(0.7);
}
/* ════════════════════════════════════════════════════════════════
WispBot — game-character motion rig
Principles borrowed from Clash of Clans / Stardew / Toca Boca:
- Walk cycle (alternating leg squat)
- Arm sway opposite to legs (natural follow-through)
- Head bob (eyes track subtle Y offset)
- Body squash on heavy beats (squash-stretch)
- State-aware body lean (forward when answering, tilt when thinking)
════════════════════════════════════════════════════════════════ */
/* Each limb group pivots from its top-attachment point so the bottom
end is what moves — like a real shoulder/hip hinge. */
.r-avatar-arm,
.r-avatar-leg {
transform-box: fill-box;
transform-origin: center top;
will-change: transform;
}
/* Walk cycle — legs squat hard alternately, body bobs in sync.
Numbers tuned to actually be visible at ~110px display size. */
@keyframes r-avatar-leg-walk-a {
0%, 100% { transform: scaleY(1) translateY(0); }
50% { transform: scaleY(0.50) translateY(7px); }
}
@keyframes r-avatar-leg-walk-b {
0%, 100% { transform: scaleY(0.50) translateY(7px); }
50% { transform: scaleY(1) translateY(0); }
}
.r-avatar-leg--l { animation: r-avatar-leg-walk-a 1.2s ease-in-out infinite; }
.r-avatar-leg--r { animation: r-avatar-leg-walk-b 1.2s ease-in-out infinite; }
/* Arm sway — opposite phase to legs. Bigger rotation so it reads. */
.r-avatar-arm {
transform-origin: center 6px;
}
@keyframes r-avatar-arm-sway-a {
0%, 100% { transform: rotate(-14deg); }
50% { transform: rotate( 14deg); }
}
@keyframes r-avatar-arm-sway-b {
0%, 100% { transform: rotate( 14deg); }
50% { transform: rotate(-14deg); }
}
.r-avatar-arm--l { animation: r-avatar-arm-sway-a 1.2s ease-in-out infinite; }
.r-avatar-arm--r { animation: r-avatar-arm-sway-b 1.2s ease-in-out infinite; }
/* Head bob — the eyes shift up/down in opposition to the leg-squat beat
so the character feels weighted, like its head settles when a leg lands.
Subtle: only 2px to avoid uncanny floatiness. */
@keyframes r-avatar-head-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
.r-avatar-eye--l,
.r-avatar-eye--r {
transform-box: fill-box;
transform-origin: center;
/* Compose blink + bob: each eye keeps its own blink offset; bob is on
a separate wrapper-less transform via animation-composition: replace
(CSS doesn't easily chain two transforms on one element via two
animations, so we use the body as the bob carrier instead — see
.r-avatar-body bob below). */
}
/* Body bob — torso lifts and stretches in sync with the walk beat.
More pronounced so the character actually feels weighted. */
.r-avatar-body {
transform-box: fill-box;
transform-origin: center bottom;
animation: r-avatar-body-bob 1.2s ease-in-out infinite;
}
@keyframes r-avatar-body-bob {
0%, 100% { transform: translateY(0) scaleY(1) scaleX(1); }
25% { transform: translateY(-5px) scaleY(1.06) scaleX(0.97); }
50% { transform: translateY(0) scaleY(0.94) scaleX(1.04); }
75% { transform: translateY(-3px) scaleY(1.03) scaleX(0.99); }
}
/* ── Per-stage personality ─────────────────────────────────── */
/* LISTENING: lean slightly forward and quicken the walk — engaged */
.r-hero-demo[data-stage="listening"] .r-avatar-leg--l,
.r-hero-demo[data-stage="hearing"] .r-avatar-leg--l {
animation-duration: 0.9s;
}
.r-hero-demo[data-stage="listening"] .r-avatar-leg--r,
.r-hero-demo[data-stage="hearing"] .r-avatar-leg--r {
animation-duration: 0.9s;
}
.r-hero-demo[data-stage="listening"] .r-avatar-arm,
.r-hero-demo[data-stage="hearing"] .r-avatar-arm {
animation-duration: 0.9s;
}
/* THINKING: clearly tilts head -10°, eyes drift up. Body still. */
.r-hero-demo[data-stage="thinking"] .r-avatar {
transform: rotate(-10deg) translateY(-2px);
transition: transform 520ms cubic-bezier(0.34, 1.2, 0.64, 1);
}
.r-hero-demo[data-stage="thinking"] .r-avatar-leg,
.r-hero-demo[data-stage="thinking"] .r-avatar-arm,
.r-hero-demo[data-stage="thinking"] .r-avatar-body {
animation-play-state: paused;
}
.r-hero-demo[data-stage="thinking"] .r-avatar-face {
transform: translateY(-6px);
transition: transform 480ms cubic-bezier(0.34, 1.2, 0.64, 1);
}
/* ANSWERING: full hop loop — character literally jumps with each beat.
Arms cheer wide; body bounces faster than the walk tempo. */
@keyframes r-avatar-hop {
0%, 100% { transform: translateY(0) scale(1); }
35% { transform: translateY(-12px) scale(1.04); }
60% { transform: translateY(2px) scale(0.98); }
80% { transform: translateY(-3px) scale(1.01); }
}
.r-hero-demo[data-stage="answering"] .r-avatar {
animation: r-avatar-hop 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) infinite;
}
.r-hero-demo[data-stage="answering"] .r-avatar-body {
animation-duration: 0.55s;
}
.r-hero-demo[data-stage="answering"] .r-avatar-leg--l,
.r-hero-demo[data-stage="answering"] .r-avatar-leg--r {
animation-duration: 0.55s;
}
.r-hero-demo[data-stage="answering"] .r-avatar-arm {
animation-duration: 0.55s;
}
@keyframes r-avatar-arm-cheer-l {
0%, 100% { transform: rotate(-20deg); }
50% { transform: rotate(-40deg); }
}
@keyframes r-avatar-arm-cheer-r {
0%, 100% { transform: rotate( 20deg); }
50% { transform: rotate( 40deg); }
}
.r-hero-demo[data-stage="answering"] .r-avatar-arm--l {
animation-name: r-avatar-arm-cheer-l;
}
.r-hero-demo[data-stage="answering"] .r-avatar-arm--r {
animation-name: r-avatar-arm-cheer-r;
}
/* RESTING: all motion settles to a slow breath; legs grounded */
.r-hero-demo[data-stage="resting"] .r-avatar {
transform: none;
transition: transform 380ms ease;
}
.r-hero-demo[data-stage="resting"] .r-avatar-leg,
.r-hero-demo[data-stage="resting"] .r-avatar-arm {
animation-duration: 3.2s;
}
.r-hero-demo[data-stage="resting"] .r-avatar-body {
animation-duration: 3.2s;
}
/* Reduced motion: all rig animations off */
@media (prefers-reduced-motion: reduce) {
.r-avatar-leg,
.r-avatar-arm,
.r-avatar-body,
.r-avatar-face {
animation: none !important;
transform: none !important;
}
}
/* ── Status text per stage uses content() via JS, but pulsing dot color shifts ── */
.r-hero-demo[data-stage="thinking"] .r-demo-status-dot { background: var(--r-grad-2); }
.r-hero-demo[data-stage="answering"] .r-demo-status-dot { background: var(--r-grad-4); }
.r-hero-demo[data-stage="resting"] .r-demo-status-dot { background: var(--r-brand-soft); }
/* Mobile: tighten card padding so all stages fit comfortably */
@media (max-width: 640px) {
.r-hero-demo {
min-height: clamp(440px, 90vw, 560px);
padding: 1.25rem 1rem 1.5rem;
gap: 0.85rem;
}
.r-avatar { width: 92px; height: 92px; }
.r-waveform { height: 70px; }
.r-stage-question { font-size: 1.02rem; }
.r-stage-answer { padding: 0.85rem 1rem; }
.r-stage-answer-text { font-size: 0.9rem; }
}
/* Reduced motion: kill all the cycling and marquee */
@media (prefers-reduced-motion: reduce) {
.r-cycler-word { animation: none; opacity: 1; transform: none; position: static; }
.r-cycler-word:not(:first-child) { display: none; }
.r-questions-track { animation: none; }
.r-avatar { animation: none; }
.r-stage-answer { opacity: 1; transform: none; }
.r-stage-question { opacity: 1; transform: none; }
}
/* ============================================================
r-landed — "Where our candidates landed offers"
Full-width band below the hero. Logo wall + editorial asides.
Top edge has a rotated hand-drawn scrolling ribbon banner.
============================================================ */
.r2026.r-landed {
position: relative;
background: linear-gradient(180deg, var(--r-canvas) 0%, var(--r-canvas-deep) 60%, var(--r-canvas-deep) 100%);
color: var(--r-ink);
padding: clamp(4.5rem, 8vw, 8rem) var(--r-section-pad-x);
font-family: var(--r-font-sans);
overflow: hidden;
}
/* ── Celebration scene: 2 illustrated characters + confetti burst ──
Airtable-style: flat-color character silhouettes flanking the center,
one waving + one with arms up, confetti bursting between them.
Risograph off-register on each character. */
.r-landed-celebrate {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: clamp(180px, 18vw, 240px);
pointer-events: none;
z-index: 1;
}
.r-landed-celebrate svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
/* ── Simple SVG celebration decoration (replaces broken Lottie) ── */
.r-landed-celebrate svg { display: block; width: 100%; height: 100%; overflow: visible; }
.r-cele-piece {
transform-origin: center;
transform-box: fill-box;
animation: r-cele-float 4.5s ease-in-out infinite;
}
.r-cele-piece:nth-of-type(1) { animation-delay: 0s; animation-duration: 4.2s; }
.r-cele-piece:nth-of-type(2) { animation-delay: -0.5s; animation-duration: 5.1s; }
.r-cele-piece:nth-of-type(3) { animation-delay: -1.0s; animation-duration: 4.7s; }
.r-cele-piece:nth-of-type(4) { animation-delay: -1.5s; animation-duration: 4.0s; }
.r-cele-piece:nth-of-type(5) { animation-delay: -2.0s; animation-duration: 4.8s; }
.r-cele-piece:nth-of-type(6) { animation-delay: -2.5s; animation-duration: 4.4s; }
.r-cele-piece:nth-of-type(7) { animation-delay: -3.0s; animation-duration: 4.6s; }
.r-cele-piece:nth-of-type(8) { animation-delay: -0.3s; animation-duration: 4.3s; }
.r-cele-piece:nth-of-type(9) { animation-delay: -1.8s; animation-duration: 4.9s; }
.r-cele-piece:nth-of-type(10) { animation-delay: -2.7s; animation-duration: 4.1s; }
.r-cele-piece:nth-of-type(11) { animation-delay: -1.3s; animation-duration: 4.5s; }
.r-cele-piece:nth-of-type(12) { animation-delay: -3.2s; animation-duration: 4.7s; }
.r-cele-piece:nth-of-type(13) { animation-delay: -0.8s; animation-duration: 4.2s; }
.r-cele-piece:nth-of-type(14) { animation-delay: -2.2s; animation-duration: 4.4s; }
.r-cele-piece:nth-of-type(15) { animation-delay: -1.6s; animation-duration: 4.8s; }
.r-cele-piece:nth-of-type(16) { animation-delay: -2.9s; animation-duration: 4.3s; }
.r-cele-piece:nth-of-type(17) { animation-delay: -0.4s; animation-duration: 4.6s; }
@keyframes r-cele-float {
0%, 100% { transform: translateY(0) rotate(calc(var(--r,0) * 1deg)); }
50% { transform: translateY(-8px) rotate(calc(var(--r,0) * 1deg + 15deg)); }
}
@media (prefers-reduced-motion: reduce) {
.r-cele-piece { animation: none; }
}
@media (max-width: 700px) {
.r2026.r-landed .r-landed-celebrate { margin-bottom: 0.5rem; height: 80px; }
}
/* Re-layout: celebrate band sits ABOVE inner content (not absolutely overlapping).
Lottie chars flank an empty center spacer so they're pushed to the edges. */
.r2026.r-landed .r-landed-celebrate {
position: relative; /* NOT absolute — flows in normal layout */
top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(1rem, 3vw, 3rem);
padding: 0 clamp(1rem, 4vw, 4rem);
height: auto;
width: 100%;
margin-bottom: clamp(1.5rem, 3vw, 2.5rem); /* CLEAR SPACE before eyebrow */
}
.r-celebrate-spacer {
flex: 1;
min-width: 0;
}
/* Reset the inner-content padding-top now that celebration isn't overlapping */
.r2026.r-landed .r-landed-inner {
padding-top: 0;
}
/* (Legacy blob-mascot animation — unused now but kept for safety) */
.r-char {
transform-box: view-box;
animation: r-char-dance 2.4s ease-in-out infinite;
}
.r-char--left { transform-origin: 240px 225px; animation-delay: 0s; }
.r-char--right { transform-origin: 975px 225px; animation-delay: -1.2s; }
@keyframes r-char-dance {
0%, 100% { transform: rotate(-6deg) translateY(0) scale(1, 1); }
20% { transform: rotate(-2deg) translateY(-8px) scale(1.04, 0.96); }
40% { transform: rotate(3deg) translateY(0) scale(0.96, 1.04); }
60% { transform: rotate(6deg) translateY(-8px) scale(1.04, 0.96); }
80% { transform: rotate(2deg) translateY(0) scale(0.96, 1.04); }
}
/* Raised arm waves enthusiastically */
.r-char-arm-raised {
transform-box: fill-box;
transform-origin: bottom center;
animation: r-arm-wave 1.2s ease-in-out infinite;
}
@keyframes r-arm-wave {
0%, 100% { transform: rotate(-7deg); }
50% { transform: rotate(7deg); }
}
/* Hide editorial number on mobile (eyebrow + footer already show it) */
@media (max-width: 700px) {
.r-celebrate-text { display: none; }
}
/* ── Mobile-only "peeking" characters (scoping/scoping concept) ──
Two characters peek from top-left + bottom-right corners.
Hidden until section enters viewport, then peek out and bob. */
.r-landed-peeker {
display: none;
position: absolute;
z-index: 3;
pointer-events: none;
}
.r-landed-peeker svg { display: block; width: 100%; height: 100%; }
@media (max-width: 700px) {
.r-landed-peeker {
display: block;
}
.r-landed-peeker--tl {
top: 8px;
left: 0;
width: 64px;
height: 78px;
transform: translateX(-100%);
transition: transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.r-landed-peeker--tl.is-peeking {
animation: r-peek-tl 5s ease-in-out 0.8s infinite;
transform: translateX(0);
}
.r-landed-peeker--br {
bottom: 8px;
right: 0;
width: 64px;
height: 78px;
transform: translateX(100%);
transition: transform 800ms cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
}
.r-landed-peeker--br.is-peeking {
animation: r-peek-br 5.5s ease-in-out 1.1s infinite;
transform: translateX(0);
}
@keyframes r-peek-tl {
0%, 35%, 100% { transform: translateX(-55%) rotate(-8deg); }
50%, 70% { transform: translateX(0) rotate(0deg); }
80%, 90% { transform: translateX(-10%) rotate(4deg); }
}
@keyframes r-peek-br {
0%, 30%, 100% { transform: translateX(55%) rotate(8deg); }
50%, 70% { transform: translateX(0) rotate(0deg); }
80%, 90% { transform: translateX(10%) rotate(-4deg); }
}
}
@media (prefers-reduced-motion: reduce) {
.r-landed-peeker.is-peeking { animation: none; }
}
/* Confetti pieces — float with desynced rhythms */
.r-burst-piece {
transform-origin: center;
transform-box: fill-box;
animation: r-burst-float 4s ease-in-out infinite;
}
.r-burst-piece:nth-of-type(1) { animation-delay: 0s; animation-duration: 3.8s; }
.r-burst-piece:nth-of-type(2) { animation-delay: -0.4s; animation-duration: 4.5s; }
.r-burst-piece:nth-of-type(3) { animation-delay: -0.8s; animation-duration: 4.1s; }
.r-burst-piece:nth-of-type(4) { animation-delay: -1.2s; animation-duration: 4.7s; }
.r-burst-piece:nth-of-type(5) { animation-delay: -1.6s; animation-duration: 3.9s; }
.r-burst-piece:nth-of-type(6) { animation-delay: -2.0s; animation-duration: 4.3s; }
.r-burst-piece:nth-of-type(7) { animation-delay: -2.4s; animation-duration: 4.6s; }
.r-burst-piece:nth-of-type(8) { animation-delay: -2.8s; animation-duration: 4.0s; }
.r-burst-piece:nth-of-type(9) { animation-delay: -3.2s; animation-duration: 4.4s; }
.r-burst-piece:nth-of-type(10) { animation-delay: -0.6s; animation-duration: 4.2s; }
.r-burst-piece:nth-of-type(11) { animation-delay: -1.4s; animation-duration: 4.8s; }
.r-burst-piece:nth-of-type(12) { animation-delay: -2.2s; animation-duration: 3.7s; }
@keyframes r-burst-float {
0%, 100% { transform: translateY(0) rotate(var(--r,0deg)); }
50% { transform: translateY(-10px) rotate(calc(var(--r,0deg) + 18deg)); }
}
@media (prefers-reduced-motion: reduce) {
.r-char,
.r-char-arm-raised,
.r-burst-piece { animation: none; }
}
/* Hide characters on mobile (too cramped), keep confetti */
@media (max-width: 700px) {
.r-char { display: none; }
}
/* (Removed: r-confetti-piece animation — confetti scene replaced by
the editorial award seal above.) */
/* Push the inner content down to clear the celebration */
.r-landed-inner {
padding-top: clamp(2rem, 4vw, 3.5rem);
position: relative;
z-index: 2;
}
/* Subtle top border that fades into the hero above */
.r2026.r-landed::before {
content: '';
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(14,17,22,0.08), transparent);
}
.r-landed-inner {
max-width: 1240px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(2.5rem, 4vw, 4rem);
}
.r-landed-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.85rem;
border-radius: var(--r-radius-pill);
background: rgba(15, 76, 58, 0.06);
border: 1px solid rgba(15, 76, 58, 0.14);
color: var(--r-brand);
font-size: var(--r-fs-tiny);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.r-landed-eyebrow-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--r-grad-3);
box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.18);
animation: r-pulse 1.6s ease-out infinite;
}
.r-landed-title {
font-family: var(--r-font-sans);
font-weight: 500;
font-size: clamp(2.25rem, 3.5vw + 0.5rem, 4.25rem);
line-height: 1.04;
letter-spacing: -0.038em;
color: var(--r-ink);
margin: 0;
text-align: center;
max-width: 20ch;
text-wrap: balance;
}
.r-landed-title em {
font-family: var(--r-font-serif);
font-style: italic;
font-weight: 400;
font-size: 1.05em;
background: var(--r-gradient-ai);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: r-grad-shift 8s ease-in-out infinite;
}
.r-landed-sub {
font-size: var(--r-fs-lead);
color: var(--r-ink-muted);
margin: 0;
text-align: center;
max-width: 52ch;
font-weight: 400;
}
/* ── Editorial spread: pull-quote | logo wall | stat callout ──
Desktop only (≥1100px). Mobile/tablet reverts to just the centered wall. */
.r-landed-spread {
display: grid;
grid-template-columns: 1fr;
width: 100%;
align-items: center;
justify-items: center;
gap: 2rem;
}
@media (min-width: 1100px) {
.r-landed-spread {
grid-template-columns: minmax(220px, 280px) auto minmax(220px, 280px);
gap: clamp(2rem, 4vw, 4rem);
max-width: 1240px;
}
}
.r-landed-aside {
display: none;
position: relative;
padding: 1.75rem 1.5rem;
flex-direction: column;
gap: 1rem;
/* Halftone-dot grain (risograph-style) — two layers at slight offset */
background-image:
radial-gradient(rgba(14,17,22,0.05) 0.8px, transparent 0.8px),
radial-gradient(rgba(204,120,92,0.04) 0.8px, transparent 0.8px);
background-size: 5px 5px, 7px 7px;
background-position: 0 0, 2px 3px;
border-radius: var(--r-radius-lg);
border: 1px dashed rgba(14,17,22,0.08);
}
@media (min-width: 1100px) {
.r-landed-aside { display: flex; }
}
/* Riso-style decorative shape: two layers, slightly off-register */
.r-riso-deco {
position: relative;
width: 56px;
height: 56px;
align-self: flex-start;
}
.r-riso-deco svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.r-riso-deco svg:first-child {
transform: translate(2.5px, 2.5px);
opacity: 0.7;
}
/* LEFT aside: editorial pull-quote */
.r-landed-aside--left {
text-align: left;
transform: rotate(-0.6deg);
}
.r-landed-quote {
margin: 0;
font-family: var(--r-font-serif);
font-style: italic;
font-size: clamp(1.25rem, 1.4vw + 0.5rem, 1.7rem);
line-height: 1.32;
color: var(--r-ink);
letter-spacing: -0.015em;
text-wrap: balance;
}
.r-landed-quote-mark {
display: inline-block;
font-size: 1.6em;
line-height: 0;
vertical-align: -0.18em;
color: var(--r-brand);
margin-right: 0.05em;
font-family: var(--r-font-serif);
}
.r-landed-quote-attr {
margin: 0;
font-size: 0.82rem;
color: var(--r-ink-muted);
line-height: 1.5;
letter-spacing: -0.005em;
}
.r-landed-quote-attr strong {
color: var(--r-ink);
font-weight: 600;
display: block;
font-size: 0.92rem;
margin-bottom: 0.1rem;
}
/* RIGHT aside: big editorial stat */
.r-landed-aside--right {
text-align: right;
transform: rotate(0.4deg);
align-items: flex-end;
}
.r-landed-aside--right .r-riso-deco {
align-self: flex-end;
}
.r-landed-stat-label {
margin: 0;
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--r-ink-muted);
font-weight: 600;
}
.r-landed-stat-num {
margin: 0;
font-family: var(--r-font-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(4.5rem, 6.5vw, 7rem);
line-height: 0.92;
letter-spacing: -0.04em;
background: var(--r-gradient-ai);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: r-grad-shift 8s ease-in-out infinite;
}
.r-landed-stat-num sup {
font-size: 0.45em;
font-style: normal;
font-family: var(--r-font-sans);
font-weight: 500;
letter-spacing: 0;
vertical-align: 0.45em;
margin-left: 0.05em;
}
.r-landed-stat-desc {
margin: 0;
font-size: 0.92rem;
line-height: 1.5;
color: var(--r-ink-soft);
max-width: 26ch;
letter-spacing: -0.006em;
}
/* ── Logo wall: 2-column vertical marquee with opposite directions ──
Research-backed pattern from Figma / Harvey / Granola customer pages.
Each column scrolls in opposite direction at slightly different speed
(col-a up @48s, col-b down @56s) → organic parallax with no JS.
Content duplicated in HTML for seamless infinite loop. */
.r-landed-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.1rem;
width: 100%;
max-width: 540px;
height: clamp(520px, 68vh, 720px);
overflow: hidden;
position: relative;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
}
@media (min-width: 1100px) {
.r-landed-grid { max-width: 480px; }
}
/* (kept at 2 columns at all sizes; cells widen on larger screens) */
.r-landed-col {
display: flex;
flex-direction: column;
gap: 1rem;
will-change: transform;
}
.r-landed-col--up { animation: r-col-up 48s linear infinite; }
.r-landed-col--down { animation: r-col-down 56s linear infinite; }
.r-landed-col--up-fast { animation: r-col-up 38s linear infinite; }
.r-landed-col--down-fast { animation: r-col-down 64s linear infinite; }
.r-landed-grid:hover .r-landed-col,
.r-landed-grid:focus-within .r-landed-col {
animation-play-state: paused;
}
@keyframes r-col-up { to { transform: translateY(-50%); } }
@keyframes r-col-down {
from { transform: translateY(-50%); }
to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.r-landed-col { animation: none !important; }
}
/* Logo cell — white card with HD PNG logo + offer counter (substantial) */
.r-landed-cell {
flex: 0 0 auto;
background: #ffffff;
border: 1px solid rgba(14, 17, 22, 0.06);
border-radius: var(--r-radius-lg);
padding: 1.6rem 1.2rem 1.4rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.85rem;
text-align: center;
cursor: default;
min-height: 156px;
transition:
transform 240ms var(--r-ease-out),
border-color 240ms var(--r-ease-out),
box-shadow 240ms var(--r-ease-out);
}
.r-landed-cell:hover {
transform: translateY(-3px);
border-color: rgba(15, 76, 58, 0.20);
box-shadow: 0 14px 30px rgba(14, 17, 22, 0.08);
}
.r-landed-logo-img {
height: 44px;
width: auto;
max-width: 100%;
object-fit: contain;
filter: grayscale(1);
opacity: 0.82;
transition: filter 240ms var(--r-ease-out), opacity 240ms var(--r-ease-out);
}
.r-landed-cell:hover .r-landed-logo-img {
filter: grayscale(0);
opacity: 1;
}
.r-landed-cell .r-landed-count {
font-size: 0.7rem;
color: var(--r-ink-muted);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
}
.r-landed-cell .r-landed-count strong {
display: block;
font-size: 1.5rem;
font-weight: 600;
color: var(--r-ink);
font-variant-numeric: tabular-nums;
letter-spacing: -0.025em;
text-transform: none;
margin-bottom: 0.15rem;
}
/* Cell */
.r-landed-cell {
position: relative;
padding: 1.4rem 0.8rem 1.25rem;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(14, 17, 22, 0.06);
border-radius: var(--r-radius-lg);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.7rem;
text-align: center;
cursor: default;
transition:
transform 280ms var(--r-ease-out),
background 280ms var(--r-ease-out),
border-color 280ms var(--r-ease-out),
box-shadow 280ms var(--r-ease-out);
}
.r-landed-cell:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.9);
border-color: rgba(15, 76, 58, 0.18);
box-shadow: 0 12px 32px rgba(14, 17, 22, 0.08);
z-index: 5;
}
/* Wordmark = company name as the brand identity (replaces broken SVG logos).
Each company sets its own color/font/weight via inline style. */
.r-landed-wordmark {
font-family: var(--r-font-sans);
font-size: clamp(1.05rem, 1.4vw + 0.5rem, 1.45rem);
line-height: 1;
letter-spacing: -0.02em;
text-align: center;
font-weight: 600;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
}
.r-landed-count {
font-size: 0.7rem;
color: var(--r-ink-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 500;
}
.r-landed-count strong {
display: block;
font-size: 1.35rem;
font-weight: 600;
color: var(--r-ink);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
text-transform: none;
margin-bottom: 0.1rem;
}
/* Hover testimonial popup (desktop only) */
.r-landed-tip {
position: absolute;
bottom: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateY(6px) scale(0.96);
width: 260px;
padding: 0.95rem 1.05rem;
background: var(--r-ink);
color: var(--r-canvas);
border-radius: var(--r-radius-md);
box-shadow: 0 18px 40px rgba(14, 17, 22, 0.18);
opacity: 0;
pointer-events: none;
transition: opacity 240ms var(--r-ease-out), transform 240ms var(--r-ease-out);
z-index: 10;
text-align: left;
}
.r-landed-tip::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 10px;
height: 10px;
background: var(--r-ink);
}
.r-landed-cell:hover .r-landed-tip {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
}
.r-landed-tip-quote {
font-size: 0.85rem;
line-height: 1.5;
margin: 0 0 0.55rem 0;
color: var(--r-canvas);
}
.r-landed-tip-meta {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.7rem;
color: rgba(250, 247, 240, 0.62);
margin: 0;
letter-spacing: 0.02em;
}
.r-landed-tip-meta-dot {
display: inline-block;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(63, 224, 168, 0.85);
}
@media (max-width: 900px) {
.r-landed-tip { display: none; }
}
/* Bottom footer line */
.r-landed-foot {
margin-top: 1rem;
font-size: var(--r-fs-small);
color: var(--r-ink-muted);
text-align: center;
}
.r-landed-foot strong {
color: var(--r-brand);
font-weight: 600;
}
/* ============================================================
r-personas — Step 7: "Built for every kind of interview"
Horizontal scrollable persona tabs + auto-swapping showcase
============================================================ */
.r2026.r-personas {
position: relative;
background: var(--r-canvas-deep);
color: var(--r-ink);
padding: clamp(4.5rem, 8vw, 8rem) var(--r-section-pad-x);
font-family: var(--r-font-sans);
overflow: hidden;
}
.r2026.r-personas::before {
content: '';
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(14,17,22,0.10), transparent);
}
.r-personas-inner {
max-width: 1240px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(2rem, 3vw, 3rem);
}
.r-personas-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.85rem;
border-radius: var(--r-radius-pill);
background: rgba(15, 76, 58, 0.06);
border: 1px solid rgba(15, 76, 58, 0.14);
color: var(--r-brand);
font-size: var(--r-fs-tiny);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.r-personas-title {
font-family: var(--r-font-sans);
font-weight: 500;
font-size: clamp(2.25rem, 3.5vw + 0.5rem, 4.25rem);
line-height: 1.04;
letter-spacing: -0.038em;
color: var(--r-ink);
margin: 0;
text-align: center;
max-width: 22ch;
text-wrap: balance;
}
.r-personas-title em {
font-family: var(--r-font-serif);
font-style: italic;
font-weight: 400;
font-size: 1.05em;
background: var(--r-gradient-ai);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: r-grad-shift 8s ease-in-out infinite;
}
.r-personas-sub {
font-size: var(--r-fs-lead);
color: var(--r-ink-muted);
margin: 0;
text-align: center;
max-width: 56ch;
}
/* ── Tabs ── */
.r-personas-tabs-wrap {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
scrollbar-width: none;
}
.r-personas-tabs-wrap::-webkit-scrollbar { display: none; }
.r-personas-tabs {
display: inline-flex;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.5);
border-radius: var(--r-radius-pill);
border: 1px solid rgba(14, 17, 22, 0.06);
margin: 0 auto;
}
.r-persona-tab {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.1rem;
border-radius: var(--r-radius-pill);
background: transparent;
border: none;
color: var(--r-ink-soft);
font-family: var(--r-font-sans);
font-size: 0.9rem;
font-weight: 500;
letter-spacing: -0.01em;
cursor: pointer;
white-space: nowrap;
transition: all 240ms var(--r-ease-out);
}
.r-persona-tab:hover {
background: rgba(15, 76, 58, 0.06);
color: var(--r-brand);
}
.r-persona-tab.is-active {
background: var(--r-ink);
color: var(--r-canvas);
box-shadow: 0 4px 12px rgba(14, 17, 22, 0.15);
}
.r-persona-tab-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* ── Showcase card (swaps content per persona) ── */
.r-personas-showcase {
width: 100%;
max-width: 1100px;
background: #ffffff;
border: 1px solid rgba(14, 17, 22, 0.06);
border-radius: var(--r-radius-xl);
box-shadow: var(--r-shadow-lg);
overflow: hidden;
position: relative;
min-height: 520px;
}
.r-persona-panel {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: clamp(1.5rem, 3vw, 3rem);
padding: clamp(1.75rem, 3vw, 2.5rem);
opacity: 0;
transform: translateY(12px);
pointer-events: none;
transition: opacity 380ms var(--r-ease-out), transform 380ms var(--r-ease-out);
}
.r-persona-panel.is-active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
position: relative;
}
/* Mobile: drop absolute positioning so content flows naturally and the
showcase grows to fit. Hide non-active panels completely.
CRITICAL: set min-width: 0 at every grid level so a long code
block can't push the whole card past the viewport. */
@media (max-width: 800px) {
.r-personas-showcase {
overflow: visible;
min-height: 0;
width: 100%;
max-width: 100%;
min-width: 0;
}
.r-persona-panel {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 1.5rem 1.25rem;
position: static;
inset: auto;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.r-persona-info,
.r-persona-demo {
min-width: 0;
max-width: 100%;
}
.r-persona-a-card {
max-width: 100%;
width: 100%;
box-sizing: border-box;
overflow: hidden; /* clip code-block overflow inside the card */
}
.r-persona-a-code {
max-width: 100%;
width: 100%;
box-sizing: border-box;
overflow-x: auto; /* horizontal scroll for long lines */
-webkit-overflow-scrolling: touch;
}
.r-persona-panel:not(.is-active) { display: none; }
.r-persona-a-text,
.r-persona-q,
.r-persona-tagline { word-wrap: break-word; overflow-wrap: anywhere; }
}
/* Left side: persona info */
.r-persona-info {
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: flex-start;
}
.r-persona-info-head {
display: flex;
align-items: center;
gap: 0.75rem;
}
.r-persona-icon-wrap {
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(15, 76, 58, 0.08);
display: grid;
place-items: center;
color: var(--r-brand);
flex-shrink: 0;
}
.r-persona-icon-wrap svg {
width: 22px;
height: 22px;
}
.r-persona-name {
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--r-ink);
margin: 0;
line-height: 1;
}
.r-persona-tagline {
font-size: 1rem;
line-height: 1.55;
color: var(--r-ink-soft);
margin: 0;
letter-spacing: -0.005em;
}
.r-persona-stat {
display: flex;
align-items: baseline;
gap: 0.5rem;
padding: 0.85rem 1rem;
background: rgba(15, 76, 58, 0.05);
border-radius: var(--r-radius-md);
border-left: 3px solid var(--r-brand);
margin-top: 0.5rem;
}
.r-persona-stat strong {
font-size: 1.5rem;
font-weight: 600;
color: var(--r-brand);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.r-persona-stat span {
font-size: 0.85rem;
color: var(--r-ink-muted);
}
/* Right side: sample Q + AI answer */
.r-persona-demo {
display: flex;
flex-direction: column;
gap: 0.85rem;
justify-content: flex-start;
}
.r-persona-q-label {
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--r-ink-muted);
font-weight: 600;
}
.r-persona-q {
font-size: 1.05rem;
line-height: 1.5;
color: var(--r-ink);
font-weight: 500;
margin: 0;
letter-spacing: -0.011em;
}
.r-persona-a-card {
position: relative;
padding: 1rem 1.15rem;
background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
border: 1px solid rgba(15, 76, 58, 0.12);
border-radius: var(--r-radius-lg);
box-shadow: 0 6px 18px rgba(14, 17, 22, 0.05);
}
.r-persona-a-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: var(--r-gradient-ai);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.5;
pointer-events: none;
}
.r-persona-a-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.r-persona-a-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--r-brand);
text-transform: uppercase;
}
.r-persona-a-time {
font-size: 0.7rem;
color: var(--r-ink-muted);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.r-persona-a-text {
font-size: 0.92rem;
line-height: 1.55;
color: var(--r-ink-soft);
letter-spacing: -0.006em;
margin: 0;
}
/* Code block inside answer (Software Engineer, AI, Data) */
.r-persona-a-code {
margin-top: 0.65rem;
padding: 0.75rem 0.95rem;
background: rgba(14, 17, 22, 0.045);
border: 1px solid rgba(14, 17, 22, 0.05);
border-radius: 8px;
font-family: var(--r-font-mono);
font-size: 0.78rem;
line-height: 1.55;
color: var(--r-ink);
overflow-x: auto;
white-space: pre;
letter-spacing: 0;
}
.r-persona-a-code .kw { color: #A855F7; font-weight: 500; }
.r-persona-a-code .str { color: #0F4C3A; }
.r-persona-a-code .com { color: var(--r-ink-muted); font-style: italic; }
.r-persona-a-code .fn { color: #4D65FF; }
.r-persona-a-code .num { color: #EC4899; }
/* ============================================================
r-cinematic — Step 8: scroll-scrubbed Q→A demo (showpiece)
Outer wrapper is 4 viewports tall; inner stage is sticky/centered.
data-r-cin-stage on the stage drives which phase is "active".
JS sets the stage value based on scroll progress through the wrapper.
============================================================ */
.r2026.r-cinematic {
position: relative;
background:
radial-gradient(ellipse 60% 40% at 50% 30%, rgba(15,76,58,0.04), transparent 60%),
var(--r-canvas-deep);
color: var(--r-ink);
font-family: var(--r-font-sans);
overflow: visible;
}
.r-cin-wrap {
/* Total scroll height — 4 phases × ~80vh each, capped at 320vh */
height: 320vh;
position: relative;
padding: 0 var(--r-section-pad-x);
}
.r-cin-stage {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(1.25rem, 2vw, 2rem);
}
/* Eyebrow / heading sitting above the device */
.r-cin-head {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.r-cin-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.85rem;
border-radius: var(--r-radius-pill);
background: rgba(15, 76, 58, 0.06);
border: 1px solid rgba(15, 76, 58, 0.14);
color: var(--r-brand);
font-size: var(--r-fs-tiny);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.r-cin-title {
margin: 0;
font-size: clamp(1.5rem, 2vw + 0.5rem, 2.5rem);
font-weight: 500;
letter-spacing: -0.03em;
line-height: 1.1;
}
.r-cin-title em {
font-family: var(--r-font-serif);
font-style: italic;
background: var(--r-gradient-ai);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: r-grad-shift 8s ease-in-out infinite;
}
/* ── Mock device frame (the laptop window containing the demo) ── */
.r-cin-device {
position: relative;
width: min(100%, 900px);
background: #ffffff;
border-radius: 18px;
box-shadow:
0 24px 60px rgba(14, 17, 22, 0.16),
0 0 0 1px rgba(14, 17, 22, 0.06);
overflow: hidden;
}
.r-cin-device-bar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 0.95rem;
background: var(--r-canvas-soft);
border-bottom: 1px solid rgba(14, 17, 22, 0.05);
}
.r-cin-device-dots {
display: flex;
gap: 0.35rem;
}
.r-cin-device-dot {
width: 11px;
height: 11px;
border-radius: 50%;
background: rgba(14, 17, 22, 0.12);
}
.r-cin-device-dot:nth-child(1) { background: #FF5F57; }
.r-cin-device-dot:nth-child(2) { background: #FEBC2E; }
.r-cin-device-dot:nth-child(3) { background: #28C840; }
.r-cin-device-url {
flex: 1;
text-align: center;
font-family: var(--r-font-mono);
font-size: 0.72rem;
color: var(--r-ink-muted);
padding: 0.25rem 0.75rem;
background: rgba(14, 17, 22, 0.04);
border-radius: 6px;
letter-spacing: 0;
max-width: 320px;
margin: 0 auto;
}
.r-cin-device-url::before { content: '🔒 '; opacity: 0.5; }
/* Screen holds all 4 phases, only one visible at a time */
.r-cin-screen {
position: relative;
min-height: clamp(380px, 50vh, 520px);
background:
linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,247,240,0.85) 100%);
overflow: hidden;
}
.r-cin-phase {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
padding: clamp(1.25rem, 3vw, 2.5rem);
opacity: 0;
transform: translateY(20px);
transition: opacity 500ms var(--r-ease-out), transform 500ms var(--r-ease-out);
pointer-events: none;
}
.r-cin-stage[data-r-cin-stage="0"] .r-cin-phase[data-phase="0"],
.r-cin-stage[data-r-cin-stage="1"] .r-cin-phase[data-phase="1"],
.r-cin-stage[data-r-cin-stage="2"] .r-cin-phase[data-phase="2"],
.r-cin-stage[data-r-cin-stage="3"] .r-cin-phase[data-phase="3"] {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Status chip shown at the bottom of each phase */
.r-cin-status {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.95rem;
border-radius: var(--r-radius-pill);
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(14, 17, 22, 0.08);
color: var(--r-ink-soft);
font-size: 0.82rem;
font-weight: 500;
letter-spacing: -0.005em;
}
.r-cin-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--r-grad-1);
animation: r-pulse 1.6s ease-out infinite;
}
/* Phase 0: Listening (waveform) */
.r-cin-listening-bars {
display: flex;
align-items: center;
gap: 4px;
height: 100px;
margin-bottom: 0.5rem;
}
.r-cin-listening-bar {
width: 5px;
background: var(--r-gradient-ai);
background-size: 1200% 100%;
border-radius: 999px;
transform-origin: center;
animation: r-wave-pulse 1.4s ease-in-out infinite;
}
.r-cin-listening-bar:nth-child(1) { animation-delay: 0s; height: 30%; }
.r-cin-listening-bar:nth-child(2) { animation-delay: -0.1s; height: 50%; }
.r-cin-listening-bar:nth-child(3) { animation-delay: -0.2s; height: 75%; }
.r-cin-listening-bar:nth-child(4) { animation-delay: -0.3s; height: 95%; }
.r-cin-listening-bar:nth-child(5) { animation-delay: -0.4s; height: 80%; }
.r-cin-listening-bar:nth-child(6) { animation-delay: -0.5s; height: 60%; }
.r-cin-listening-bar:nth-child(7) { animation-delay: -0.6s; height: 40%; }
.r-cin-listening-bar:nth-child(8) { animation-delay: -0.7s; height: 65%; }
.r-cin-listening-bar:nth-child(9) { animation-delay: -0.8s; height: 85%; }
.r-cin-listening-bar:nth-child(10) { animation-delay: -0.9s; height: 70%; }
.r-cin-listening-bar:nth-child(11) { animation-delay: -1.0s; height: 50%; }
.r-cin-listening-bar:nth-child(12) { animation-delay: -1.1s; height: 30%; }
/* Phase 1: Hearing — question text appearing */
.r-cin-question-label {
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--r-ink-muted);
font-weight: 600;
margin-bottom: 0.25rem;
}
.r-cin-question-text {
font-family: var(--r-font-sans);
font-size: clamp(1.1rem, 1.6vw, 1.5rem);
font-weight: 500;
color: var(--r-ink);
letter-spacing: -0.015em;
line-height: 1.4;
max-width: 32ch;
text-align: center;
margin: 0;
}
.r-cin-question-text::after {
content: '';
display: inline-block;
width: 2px;
height: 1em;
background: var(--r-brand);
margin-left: 3px;
vertical-align: -2px;
animation: r-blink 1s steps(2) infinite;
}
/* Phase 2: Thinking — gradient bloom + timer */
.r-cin-think-orb {
position: relative;
width: 130px;
height: 130px;
display: grid;
place-items: center;
}
.r-cin-think-orb::before,
.r-cin-think-orb::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--r-gradient-ai);
}
.r-cin-think-orb::before {
filter: blur(28px);
opacity: 0.7;
animation: r-think-pulse 2.2s ease-in-out infinite;
}
.r-cin-think-orb::after {
filter: blur(8px);
opacity: 0.45;
animation: r-think-pulse 2.2s ease-in-out infinite reverse;
}
@keyframes r-think-pulse {
0%, 100% { transform: scale(0.92); }
50% { transform: scale(1.12); }
}
.r-cin-think-timer {
position: relative;
z-index: 1;
font-family: var(--r-font-mono);
font-size: 1.65rem;
font-weight: 600;
color: var(--r-ink);
background: rgba(255, 255, 255, 0.92);
padding: 0.35rem 0.85rem;
border-radius: 999px;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
/* Phase 3: Answering — answer card with streaming text + code */
.r-cin-answer {
width: 100%;
max-width: 640px;
background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92));
border: 1px solid rgba(15, 76, 58, 0.12);
border-radius: var(--r-radius-lg);
padding: 1rem 1.2rem 1.2rem;
position: relative;
box-shadow: 0 8px 24px rgba(14, 17, 22, 0.06);
}
.r-cin-answer::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: var(--r-gradient-ai);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.55;
}
.r-cin-answer-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.r-cin-answer-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.7rem;
font-weight: 700;
color: var(--r-brand);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.r-cin-answer-time {
font-size: 0.7rem;
color: var(--r-ink-muted);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.r-cin-answer-text {
font-size: 0.92rem;
line-height: 1.55;
color: var(--r-ink-soft);
letter-spacing: -0.006em;
margin: 0 0 0.5rem 0;
text-align: left;
}
.r-cin-answer-code {
margin: 0.5rem 0 0;
padding: 0.7rem 0.9rem;
background: rgba(14, 17, 22, 0.05);
border-radius: 8px;
font-family: var(--r-font-mono);
font-size: 0.74rem;
line-height: 1.55;
color: var(--r-ink);
white-space: pre;
overflow-x: auto;
}
.r-cin-answer-code .kw { color: #A855F7; font-weight: 500; }
.r-cin-answer-code .fn { color: #4D65FF; }
.r-cin-answer-code .num { color: #EC4899; }
.r-cin-answer-code .com { color: var(--r-ink-muted); font-style: italic; }
/* Vertical phase timeline (desktop only) */
.r-cin-timeline {
position: fixed;
top: 50%;
left: clamp(1rem, 3vw, 2.5rem);
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 1.4rem;
z-index: 10;
opacity: 0;
transition: opacity 400ms var(--r-ease-out);
}
.r-cin-timeline.is-visible { opacity: 1; }
@media (max-width: 900px) { .r-cin-timeline { display: none; } }
.r-cin-tl-item {
display: flex;
align-items: center;
gap: 0.65rem;
font-size: 0.78rem;
font-weight: 500;
color: var(--r-ink-muted);
letter-spacing: -0.005em;
transition: color 280ms var(--r-ease-out);
}
.r-cin-tl-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--r-canvas-soft);
border: 2px solid rgba(14, 17, 22, 0.18);
flex-shrink: 0;
transition: all 280ms var(--r-ease-out);
}
.r-cin-tl-item.is-current { color: var(--r-ink); font-weight: 600; }
.r-cin-tl-item.is-current .r-cin-tl-dot {
background: var(--r-brand);
border-color: var(--r-brand);
box-shadow: 0 0 0 4px rgba(15, 76, 58, 0.15);
}
.r-cin-tl-item.is-done .r-cin-tl-dot {
background: var(--r-brand);
border-color: var(--r-brand);
}
/* Mobile: skip sticky scrub — show stacked phases */
@media (max-width: 900px) {
.r-cin-wrap { height: auto; }
.r-cin-stage { position: relative; top: auto; height: auto; padding: 3rem 0; }
.r-cin-phase {
position: relative;
opacity: 1;
transform: none;
min-height: 320px;
pointer-events: auto;
}
.r-cin-screen { min-height: 0; }
/* Stack all 4 in vertical sequence */
.r-cin-screen { display: flex; flex-direction: column; }
.r-cin-phase { padding: 2rem 1.5rem; }
}
/* Reduced motion: show first phase only, no animations */
@media (prefers-reduced-motion: reduce) {
.r-cin-wrap { height: auto; }
.r-cin-stage { position: relative; height: auto; }
.r-cin-phase { position: relative; opacity: 1; transform: none; }
.r-cin-listening-bar,
.r-cin-think-orb::before,
.r-cin-think-orb::after,
.r-cin-status-dot { animation: none; }
}
/* ============================================================
r-voices — Step 9a: testimonials section
Named human candidates with quotes + initials + role + company.
Asymmetric grid with one featured large quote + 3 smaller cards.
============================================================ */
.r2026.r-voices {
position: relative;
background: var(--r-canvas);
color: var(--r-ink);
padding: clamp(4.5rem, 8vw, 8rem) var(--r-section-pad-x);
font-family: var(--r-font-sans);
overflow: hidden;
}
.r-voices-inner {
max-width: 1240px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(2.5rem, 4vw, 4rem);
}
.r-voices-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.85rem;
border-radius: var(--r-radius-pill);
background: rgba(15, 76, 58, 0.06);
border: 1px solid rgba(15, 76, 58, 0.14);
color: var(--r-brand);
font-size: var(--r-fs-tiny);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.r-voices-title {
font-family: var(--r-font-sans);
font-weight: 500;
font-size: clamp(2.25rem, 3.5vw + 0.5rem, 4.25rem);
line-height: 1.04;
letter-spacing: -0.038em;
color: var(--r-ink);
margin: 0;
text-align: center;
max-width: 22ch;
text-wrap: balance;
}
.r-voices-title em {
font-family: var(--r-font-serif);
font-style: italic;
font-weight: 400;
font-size: 1.05em;
background: var(--r-gradient-ai);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: r-grad-shift 8s ease-in-out infinite;
}
.r-voices-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 1rem;
width: 100%;
}
.r-voice-card {
background: #ffffff;
border: 1px solid rgba(14, 17, 22, 0.06);
border-radius: var(--r-radius-lg);
padding: clamp(1.25rem, 2vw, 1.75rem);
display: flex;
flex-direction: column;
gap: 1rem;
transition: transform 240ms var(--r-ease-out), border-color 240ms var(--r-ease-out), box-shadow 240ms var(--r-ease-out);
}
.r-voice-card:hover {
transform: translateY(-3px);
border-color: rgba(15, 76, 58, 0.18);
box-shadow: 0 12px 30px rgba(14, 17, 22, 0.06);
}
.r-voice-card--featured {
grid-column: 1 / 2;
grid-row: 1 / 3;
background: linear-gradient(180deg, var(--r-ink) 0%, var(--r-brand-deep) 100%);
color: var(--r-canvas);
border: none;
}
.r-voice-card--featured .r-voice-quote {
font-family: var(--r-font-serif);
font-style: italic;
font-size: clamp(1.5rem, 2vw + 0.5rem, 2.15rem);
line-height: 1.32;
letter-spacing: -0.018em;
color: var(--r-canvas);
}
.r-voice-featured-logo {
height: 28px;
width: auto;
max-width: 100px;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: 0.85;
align-self: flex-start;
margin-bottom: 0.5rem;
}
.r-voice-card--featured .r-voice-name { color: var(--r-canvas); }
.r-voice-card--featured .r-voice-meta { color: rgba(250, 247, 240, 0.65); }
.r-voice-card--featured .r-voice-avatar {
background: var(--r-grad-3);
color: var(--r-canvas);
}
.r-voice-quote {
font-size: clamp(0.95rem, 1vw + 0.3rem, 1.1rem);
line-height: 1.5;
color: var(--r-ink-soft);
letter-spacing: -0.008em;
margin: 0;
font-weight: 400;
}
.r-voice-author {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: auto;
}
.r-voice-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--r-brand);
color: var(--r-canvas);
display: grid;
place-items: center;
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.r-voice-author-meta {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.r-voice-name {
font-size: 0.9rem;
font-weight: 600;
color: var(--r-ink);
letter-spacing: -0.005em;
}
.r-voice-meta {
font-size: 0.78rem;
color: var(--r-ink-muted);
letter-spacing: 0;
}
.r-voice-company-logo {
height: 20px;
width: auto;
max-width: 80px;
object-fit: contain;
filter: grayscale(1);
opacity: 0.6;
margin-left: auto;
align-self: center;
}
@media (max-width: 900px) {
.r-voices-grid { grid-template-columns: 1fr 1fr; }
.r-voice-card--featured { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 600px) {
.r-voices-grid { grid-template-columns: 1fr; }
}
/* ============================================================
r-cta — Step 9b: pricing teaser / start practicing band
Bold dark band with the primary conversion CTA + secondary link.
============================================================ */
.r2026.r-cta {
position: relative;
background:
radial-gradient(ellipse 100% 80% at 50% 0%, rgba(15, 76, 58, 0.25), transparent 70%),
var(--r-ink);
color: var(--r-canvas);
padding: clamp(5rem, 9vw, 9rem) var(--r-section-pad-x);
font-family: var(--r-font-sans);
overflow: hidden;
text-align: center;
}
/* Subtle Gemini-gradient bloom in the background */
.r2026.r-cta::before {
content: '';
position: absolute;
inset: -10%;
background: var(--r-gradient-ai-conic);
opacity: 0.08;
filter: blur(120px);
z-index: 0;
animation: r-bloom-drift 22s linear infinite;
}
.r-cta-inner {
position: relative;
z-index: 1;
max-width: 880px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(1.25rem, 2.5vw, 2rem);
}
.r-cta-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.95rem;
border-radius: var(--r-radius-pill);
background: rgba(63, 224, 168, 0.08);
border: 1px solid rgba(63, 224, 168, 0.25);
color: #3FE0A8;
font-size: var(--r-fs-tiny);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.r-cta-eyebrow-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #3FE0A8;
box-shadow: 0 0 0 3px rgba(63, 224, 168, 0.18);
animation: r-pulse 1.6s ease-out infinite;
}
.r-cta-title {
font-family: var(--r-font-sans);
font-weight: 500;
font-size: clamp(2.5rem, 4vw + 0.5rem, 5rem);
line-height: 1.02;
letter-spacing: -0.04em;
color: var(--r-canvas);
margin: 0;
max-width: 18ch;
text-wrap: balance;
}
.r-cta-title em {
font-family: var(--r-font-serif);
font-style: italic;
font-weight: 400;
font-size: 1.06em;
background: var(--r-gradient-ai);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: r-grad-shift 8s ease-in-out infinite;
}
.r-cta-sub {
font-size: var(--r-fs-lead);
line-height: 1.55;
color: rgba(250, 247, 240, 0.72);
margin: 0;
max-width: 52ch;
letter-spacing: -0.005em;
}
.r-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
margin-top: 0.5rem;
}
.r-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.9rem 1.5rem;
border-radius: var(--r-radius-pill);
font-family: var(--r-font-sans);
font-size: 0.975rem;
font-weight: 600;
letter-spacing: -0.005em;
text-decoration: none;
transition: transform 220ms var(--r-ease-out), background 220ms var(--r-ease-out), box-shadow 220ms var(--r-ease-out);
cursor: pointer;
border: 1px solid transparent;
}
.r-cta-btn--primary {
background: #3FE0A8;
color: var(--r-ink);
box-shadow: 0 0 32px rgba(63, 224, 168, 0.25);
}
.r-cta-btn--primary:hover {
transform: translateY(-2px);
background: #5CEFB9;
box-shadow: 0 0 48px rgba(63, 224, 168, 0.4);
}
.r-cta-btn--ghost {
background: rgba(255, 255, 255, 0.06);
color: var(--r-canvas);
border-color: rgba(255, 255, 255, 0.15);
}
.r-cta-btn--ghost:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.28);
}
.r-cta-footnote {
font-size: 0.82rem;
color: rgba(250, 247, 240, 0.5);
margin: 0.5rem 0 0;
letter-spacing: -0.005em;
}
.r-cta-footnote strong { color: rgba(250, 247, 240, 0.85); font-weight: 600; }
/* ============================================================
r-integ — Wisprflow-style integrations arc (replaces legacy)
Dark band with REAL app icons curving across the top, then
title + subhead + CTA in the open space below.
============================================================ */
.r2026.r-integ {
position: relative;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(63, 224, 168, 0.10), transparent 70%),
var(--r-ink);
color: var(--r-canvas);
padding: clamp(5rem, 9vw, 9rem) var(--r-section-pad-x) clamp(4rem, 7vw, 7rem);
font-family: var(--r-font-sans);
overflow: hidden;
}
.r-integ-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
/* Arc container: holds the curved row of app icons */
.r-integ-arc {
position: relative;
width: 100%;
max-width: 920px;
height: clamp(220px, 28vw, 340px);
margin-bottom: clamp(1.5rem, 3vw, 3rem);
}
/* Each icon tile — white-rounded chip with the real PNG logo inside.
Base styles (size, look) apply everywhere; absolute positioning
+ the desktop float animation are scoped to ≥801px below. */
.r-integ-icon {
width: clamp(48px, 6vw, 72px);
height: clamp(48px, 6vw, 72px);
background: #ffffff;
border-radius: 18px;
padding: clamp(8px, 1.2vw, 14px);
box-shadow:
0 12px 28px rgba(0, 0, 0, 0.28),
0 2px 6px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
display: grid;
place-items: center;
will-change: transform;
}
@media (min-width: 801px) {
.r-integ-icon {
position: absolute;
transform: translate(-50%, -50%);
animation: r-integ-float 5s ease-in-out infinite;
}
}
.r-integ-icon img,
.r-integ-icon svg {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* Desktop arc positions — SCOPED to ≥801px so mobile media query can fully
reset position/transform without specificity conflicts. */
@media (min-width: 801px) {
.r-integ-icon:nth-child(1) { left: 5%; top: 75%; animation-delay: -0.0s; animation-duration: 4.8s; }
.r-integ-icon:nth-child(2) { left: 12%; top: 48%; animation-delay: -0.4s; animation-duration: 5.2s; }
.r-integ-icon:nth-child(3) { left: 21%; top: 25%; animation-delay: -0.8s; animation-duration: 4.6s; }
.r-integ-icon:nth-child(4) { left: 32%; top: 10%; animation-delay: -1.2s; animation-duration: 5.0s; }
.r-integ-icon:nth-child(5) { left: 43%; top: 2%; animation-delay: -1.6s; animation-duration: 4.7s; }
.r-integ-icon:nth-child(6) { left: 55%; top: 0%; animation-delay: -2.0s; animation-duration: 5.4s; }
.r-integ-icon:nth-child(7) { left: 67%; top: 6%; animation-delay: -2.4s; animation-duration: 4.4s; }
.r-integ-icon:nth-child(8) { left: 78%; top: 19%; animation-delay: -2.8s; animation-duration: 4.9s; }
.r-integ-icon:nth-child(9) { left: 87%; top: 38%; animation-delay: -3.2s; animation-duration: 5.1s; }
.r-integ-icon:nth-child(10) { left: 93%; top: 60%; animation-delay: -3.6s; animation-duration: 4.5s; }
.r-integ-icon:nth-child(11) { left: 96%; top: 82%; animation-delay: -4.0s; animation-duration: 4.7s; }
}
@keyframes r-integ-float {
0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(-2deg); }
50% { transform: translate(-50%, -50%) translateY(-8px) rotate(2deg); }
}
/* Subtle "live" pulse on a mic icon at the arc center */
.r-integ-arc-center {
position: absolute;
left: 50%;
top: 100%;
transform: translate(-50%, -50%);
width: 84px;
height: 84px;
border-radius: 50%;
background: var(--r-gradient-ai-conic);
filter: blur(8px);
opacity: 0.4;
animation: r-integ-pulse 3s ease-in-out infinite;
}
@keyframes r-integ-pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.7; }
}
/* Title block below the arc */
.r-integ-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 0.95rem;
border-radius: var(--r-radius-pill);
background: rgba(63, 224, 168, 0.10);
border: 1px solid rgba(63, 224, 168, 0.25);
color: #3FE0A8;
font-size: var(--r-fs-tiny);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 1.25rem;
}
.r-integ-title {
font-family: var(--r-font-sans);
font-weight: 500;
font-size: clamp(2.25rem, 4vw + 0.5rem, 4.25rem);
line-height: 1.04;
letter-spacing: -0.038em;
color: var(--r-canvas);
margin: 0 0 1rem 0;
text-align: center;
max-width: 22ch;
text-wrap: balance;
}
.r-integ-title em {
font-family: var(--r-font-serif);
font-style: italic;
font-weight: 400;
font-size: 1.05em;
background: var(--r-gradient-ai);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: r-grad-shift 8s ease-in-out infinite;
}
.r-integ-sub {
font-size: var(--r-fs-lead);
line-height: 1.55;
color: rgba(250, 247, 240, 0.7);
margin: 0 0 2rem 0;
text-align: center;
max-width: 52ch;
letter-spacing: -0.005em;
}
/* Desktop: track is transparent — icons flow as positioned children of arc.
Duplicate icons (Set B) hidden on desktop. */
.r-integ-track { display: contents; }
.r-integ-icon-dup { display: none; }
/* Mobile: snake-chain marquee — horizontal continuous scroll with vertical wave */
@media (max-width: 800px) {
.r-integ-arc {
height: 110px;
max-width: 100%;
overflow: hidden;
margin-bottom: 2.5rem;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.r-integ-track {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.65rem;
height: 100%;
width: max-content;
padding: 0 0.5rem;
animation: r-snake-scroll 22s linear infinite;
}
/* Fixed icon size on mobile — no clamp variation between breakpoints */
.r-integ-arc .r-integ-icon {
width: 56px;
height: 56px;
padding: 10px;
border-radius: 14px;
}
.r-integ-icon-dup { display: grid; } /* show duplicates on mobile for seamless loop */
/* Reset arc positioning + apply snake wave per icon (alternating up/down) */
.r-integ-icon {
position: relative;
left: auto;
top: auto;
transform: none;
flex-shrink: 0;
animation: r-snake-wave 2.6s ease-in-out infinite;
}
/* Wave delays: stagger by index so neighboring icons are at different wave phases */
.r-integ-icon:nth-child(1), .r-integ-icon:nth-child(12) { animation-delay: 0s; }
.r-integ-icon:nth-child(2), .r-integ-icon:nth-child(13) { animation-delay: -0.22s; }
.r-integ-icon:nth-child(3), .r-integ-icon:nth-child(14) { animation-delay: -0.44s; }
.r-integ-icon:nth-child(4), .r-integ-icon:nth-child(15) { animation-delay: -0.66s; }
.r-integ-icon:nth-child(5), .r-integ-icon:nth-child(16) { animation-delay: -0.88s; }
.r-integ-icon:nth-child(6), .r-integ-icon:nth-child(17) { animation-delay: -1.1s; }
.r-integ-icon:nth-child(7), .r-integ-icon:nth-child(18) { animation-delay: -1.32s; }
.r-integ-icon:nth-child(8), .r-integ-icon:nth-child(19) { animation-delay: -1.54s; }
.r-integ-icon:nth-child(9), .r-integ-icon:nth-child(20) { animation-delay: -1.76s; }
.r-integ-icon:nth-child(10), .r-integ-icon:nth-child(21) { animation-delay: -1.98s; }
.r-integ-icon:nth-child(11), .r-integ-icon:nth-child(22) { animation-delay: -2.2s; }
@keyframes r-snake-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); } /* one full set width — seamless loop */
}
@keyframes r-snake-wave {
0%, 100% { transform: translateY(0) rotate(-1.5deg); }
50% { transform: translateY(-6px) rotate(1.5deg); }
}
.r-integ-arc-center { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.r-integ-track { animation: none !important; }
.r-integ-icon { animation: none !important; }
}
/* Hide the legacy integrations-section (peach-themed) */
.integrations-section { display: none !important; }
/* Auto-advance progress bar */
.r-personas-progress {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background: var(--r-gradient-ai);
transform-origin: left;
transform: scaleX(0);
}
.r-personas-progress.is-running {
animation: r-persona-prog 8s linear forwards;
}
@keyframes r-persona-prog {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* ════════════════════════════════════════════════════════════════
2026 Step 8a — How It Works
════════════════════════════════════════════════════════════════ */
.r2026.r-howit{
background: var(--r-canvas);
padding: clamp(64px, 9vw, 128px) clamp(20px, 5vw, 56px);
color: var(--r-ink);
}
.r-howit-inner{ max-width: 1200px; margin: 0 auto; }
.r-howit-head{ text-align: center; max-width: 720px; margin: 0 auto clamp(40px, 6vw, 72px); }
.r-howit-eyebrow{
display: inline-block;
font: 600 12px/1 var(--r-font-sans);
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--r-brand);
background: color-mix(in srgb, var(--r-brand) 10%, transparent);
padding: 7px 12px; border-radius: 999px;
margin-bottom: 18px;
}
.r-howit-title{
font: 500 clamp(32px, 4.6vw, 56px)/1.08 var(--r-font-sans);
letter-spacing: -0.02em; margin: 0 0 14px;
}
.r-howit-accent{
font-family: var(--r-font-serif);
font-style: italic; font-weight: 400;
background: var(--r-gradient-ai);
-webkit-background-clip: text; background-clip: text; color: transparent;
padding-right: 0.04em;
}
.r-howit-sub{
font: 400 clamp(15px, 1.4vw, 17px)/1.5 var(--r-font-sans);
color: var(--r-ink-muted); margin: 0;
}
.r-howit-grid{
list-style: none; padding: 0; margin: 0;
display: grid; gap: clamp(20px, 2.4vw, 32px);
grid-template-columns: repeat(3, minmax(0, 1fr));
position: relative;
}
.r-howit-grid::before{
content: ""; position: absolute; top: 88px; left: 12%; right: 12%; height: 1px;
background-image: linear-gradient(90deg, #c9c2b0 50%, transparent 50%);
background-size: 8px 1px; background-repeat: repeat-x;
z-index: 0; pointer-events: none;
}
.r-howit-card{
position: relative; z-index: 1;
background: #fff;
border: 1px solid color-mix(in srgb, var(--r-ink) 7%, transparent);
border-radius: 18px;
padding: clamp(20px, 2vw, 28px);
box-shadow: 0 1px 2px rgba(20,20,20,.04), 0 8px 24px -12px rgba(20,20,20,.08);
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
display: flex; flex-direction: column; gap: 14px;
min-width: 0;
}
.r-howit-card:hover{
transform: translateY(-4px);
box-shadow: 0 2px 4px rgba(20,20,20,.05), 0 18px 36px -16px rgba(20,20,20,.14);
border-color: color-mix(in srgb, var(--r-brand) 18%, transparent);
}
.r-howit-card-top{ display: flex; align-items: center; justify-content: space-between; }
.r-howit-num{
font: italic 400 clamp(40px, 4vw, 52px)/1 var(--r-font-serif);
color: var(--r-brand);
letter-spacing: -0.01em;
}
.r-howit-icon{
width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 12px;
color: var(--r-brand);
background: color-mix(in srgb, var(--r-brand) 8%, #fff);
border: 1px solid color-mix(in srgb, var(--r-brand) 14%, transparent);
}
.r-howit-name{
font: 600 clamp(20px, 2vw, 24px)/1.2 var(--r-font-sans);
margin: 4px 0 0; letter-spacing: -0.01em;
}
.r-howit-desc{
font: 400 14.5px/1.55 var(--r-font-sans);
color: var(--r-ink-muted); margin: 0;
}
.r-howit-mock{
margin-top: auto;
background: var(--r-canvas);
border: 1px solid color-mix(in srgb, var(--r-ink) 6%, transparent);
border-radius: 12px;
padding: 14px;
min-height: 78px;
display: flex; align-items: center; gap: 10px;
font-family: var(--r-font-sans);
}
.r-howit-mock--wave{ justify-content: flex-start; }
.r-howit-bar{
width: 4px; border-radius: 3px;
background: var(--r-brand);
animation: r-howit-wave 1.2s ease-in-out infinite;
}
.r-howit-bar:nth-child(1){ height: 14px; animation-delay: 0s; }
.r-howit-bar:nth-child(2){ height: 24px; animation-delay: .12s; }
.r-howit-bar:nth-child(3){ height: 32px; animation-delay: .24s; }
.r-howit-bar:nth-child(4){ height: 22px; animation-delay: .36s; }
.r-howit-bar:nth-child(5){ height: 14px; animation-delay: .48s; }
.r-howit-mock-label{
margin-left: 10px; font-size: 12px; color: var(--r-ink-muted); letter-spacing: .02em;
}
@keyframes r-howit-wave{
0%, 100% { transform: scaleY(0.55); }
50% { transform: scaleY(1); }
}
.r-howit-mock--match{ flex-direction: column; align-items: stretch; gap: 8px; }
.r-howit-q{ font-size: 12.5px; color: var(--r-ink-soft); line-height: 1.4; }
.r-howit-chips{ display: flex; gap: 6px; flex-wrap: wrap; }
.r-howit-chip{
font-size: 11px; padding: 4px 9px; border-radius: 999px;
background: #fff; border: 1px solid color-mix(in srgb, var(--r-ink) 8%, transparent);
color: var(--r-ink-soft);
}
.r-howit-chip--accent{
background: color-mix(in srgb, var(--r-brand) 10%, #fff);
border-color: color-mix(in srgb, var(--r-brand) 22%, transparent);
color: var(--r-brand); font-weight: 500;
}
.r-howit-mock--stream{ font-family: var(--r-font-mono); font-size: 12.5px; color: var(--r-ink-soft); }
.r-howit-stream-text{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-howit-caret{
display: inline-block; width: 7px; height: 14px; margin-left: 2px;
background: var(--r-brand); vertical-align: -2px;
animation: r-howit-blink 1s steps(2, start) infinite;
}
@keyframes r-howit-blink{ to { opacity: 0; } }
@media (max-width: 880px){
.r-howit-grid{ grid-template-columns: 1fr; }
.r-howit-grid::before{ display: none; }
}
/* ════════════════════════════════════════════════════════════════
2026 Step 8b — Why WispherFlow
════════════════════════════════════════════════════════════════ */
.r2026.r-why {
background: var(--r-canvas-deep);
padding: clamp(72px, 10vw, 128px) clamp(20px, 5vw, 48px);
color: var(--r-ink);
font-family: var(--r-font-sans);
}
.r-why-inner { max-width: 1180px; margin: 0 auto; }
.r-why-head {
max-width: 720px;
margin: 0 auto clamp(40px, 6vw, 64px);
text-align: center;
}
.r-why-eyebrow {
display: inline-block;
padding: 6px 12px;
border-radius: 999px;
background: color-mix(in srgb, var(--r-brand) 10%, transparent);
color: var(--r-brand);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 20px;
}
.r-why-title {
font-family: var(--r-font-sans);
font-weight: 600;
font-size: clamp(32px, 4.6vw, 54px);
line-height: 1.08;
letter-spacing: -0.02em;
margin: 0 0 16px;
}
.r-why-title em {
font-family: var(--r-font-serif);
font-style: italic;
font-weight: 400;
background: var(--r-gradient-ai);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding-right: 0.05em;
}
.r-why-lede {
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.55;
color: var(--r-ink-muted);
margin: 0;
}
.r-why-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 1.6vw, 20px);
counter-reset: r-why-num;
}
.r-why-card {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 220px;
min-width: 0;
padding: clamp(22px, 2.2vw, 28px);
background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--r-canvas) 75%, #fff) 100%);
border: 1px solid color-mix(in srgb, var(--r-ink) 8%, transparent);
border-radius: 20px;
box-shadow:
0 1px 0 rgba(255,255,255,0.6) inset,
0 1px 2px rgba(20,18,12,0.04),
0 14px 32px -20px rgba(15,76,58,0.18);
transition: transform 320ms cubic-bezier(.2,.8,.2,1),
border-color 220ms ease,
box-shadow 320ms ease;
overflow: hidden;
counter-increment: r-why-num;
}
/* Italic serif number — top right corner */
.r-why-card::before {
content: "0" counter(r-why-num);
position: absolute;
top: 18px; right: 22px;
font-family: var(--r-font-serif);
font-style: italic; font-weight: 400;
font-size: clamp(28px, 2.8vw, 38px);
line-height: 1;
color: color-mix(in srgb, var(--r-brand) 22%, transparent);
letter-spacing: -0.02em;
transition: color 320ms ease, transform 320ms ease;
pointer-events: none;
}
/* AI-gradient top accent line revealed on hover */
.r-why-card::after {
content: "";
position: absolute;
top: 0; left: 12%; right: 12%;
height: 2px;
background: var(--r-gradient-ai);
border-radius: 0 0 2px 2px;
opacity: 0;
transform: translateY(-4px);
transition: opacity 320ms ease, transform 320ms ease;
}
.r-why-card:hover {
transform: translateY(-6px);
border-color: color-mix(in srgb, var(--r-brand) 35%, transparent);
box-shadow:
0 1px 0 rgba(255,255,255,0.7) inset,
0 2px 4px rgba(20,18,12,0.06),
0 28px 56px -24px rgba(15,76,58,0.32);
}
.r-why-card:hover::before {
color: color-mix(in srgb, var(--r-brand) 55%, transparent);
transform: translateY(-2px);
}
.r-why-card:hover::after {
opacity: 1;
transform: translateY(0);
}
.r-why-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: color-mix(in srgb, var(--r-brand) 8%, transparent);
color: var(--r-brand);
margin-bottom: 6px;
}
.r-why-icon svg { width: 24px; height: 24px; }
.r-why-name {
font-size: clamp(17px, 1.6vw, 19px);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
margin: 0;
}
.r-why-desc {
font-size: 14.5px;
line-height: 1.5;
color: var(--r-ink-muted);
margin: 0;
flex: 1;
}
.r-why-stat {
display: inline-flex;
align-items: center;
gap: 6px;
padding-top: 8px;
border-top: 1px dashed color-mix(in srgb, var(--r-ink) 10%, transparent);
font-size: 12.5px;
color: var(--r-ink-muted);
letter-spacing: 0.01em;
}
.r-why-stat strong {
color: var(--r-brand);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {
.r-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
.r-why-grid { grid-template-columns: 1fr; gap: 12px; }
.r-why-card { min-height: 160px; }
}
/* ════════════════════════════════════════════════════════════════
2026 Step 9c — Pricing
════════════════════════════════════════════════════════════════ */
.r2026.r-pricing {
background: var(--r-canvas);
color: var(--r-ink);
padding: clamp(72px, 10vw, 128px) 24px;
font-family: var(--r-font-sans);
}
.r-pricing-inner { max-width: 1200px; margin: 0 auto; }
.r-pricing-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.r-pricing-eyebrow {
display: inline-block;
font-size: 12px; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--r-brand);
background: color-mix(in srgb, var(--r-brand) 10%, transparent);
padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
}
.r-pricing-title {
font-family: var(--r-font-sans);
font-size: clamp(34px, 5vw, 56px); line-height: 1.06;
font-weight: 500; margin: 0 0 16px; letter-spacing: -0.02em;
}
.r-pricing-title em {
font-family: var(--r-font-serif);
font-style: italic; font-weight: 400;
background: var(--r-gradient-ai);
-webkit-background-clip: text; background-clip: text; color: transparent;
padding-right: 0.05em;
}
.r-pricing-sub { font-size: 17px; color: var(--r-ink-muted); margin: 0 0 32px; }
/* Toggle uses a 2-col grid so both buttons get the wider button's width;
the thumb then perfectly matches whichever side is active. */
.r-pricing-toggle {
position: relative; display: inline-grid;
grid-template-columns: 1fr 1fr;
background: #fff; border: 1px solid color-mix(in srgb, var(--r-ink) 10%, transparent);
padding: 4px; border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.r-pricing-toggle-btn {
position: relative; z-index: 2;
background: transparent; border: 0; cursor: pointer;
font: inherit; font-weight: 600; font-size: 14px;
color: var(--r-ink-muted);
padding: 10px 22px; border-radius: 999px;
transition: color 220ms ease;
white-space: nowrap;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.r-pricing-toggle-btn.is-active { color: #fff; }
.r-pricing-toggle-save {
font-size: 11px; font-weight: 700;
background: color-mix(in srgb, #fff 22%, transparent);
padding: 2px 8px; border-radius: 999px; letter-spacing: 0.04em;
}
.r-pricing-toggle-thumb {
position: absolute; top: 4px; bottom: 4px; left: 4px;
width: calc(50% - 4px);
background: var(--r-brand); border-radius: 999px;
transition: transform 320ms cubic-bezier(.4,.0,.2,1);
z-index: 1;
}
.r-pricing-toggle[data-period="annual"] .r-pricing-toggle-thumb { transform: translateX(100%); }
.r-pricing-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 24px; align-items: stretch;
}
.r-pricing-card {
position: relative;
background: #fff;
border: 1px solid color-mix(in srgb, var(--r-ink) 10%, transparent);
border-radius: 22px; padding: 36px 32px;
display: flex; flex-direction: column;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
transition: transform 280ms ease, box-shadow 280ms ease;
min-width: 0;
}
.r-pricing-card--featured {
transform: scale(1.03);
box-shadow: 0 28px 60px -28px color-mix(in srgb, var(--r-brand) 55%, transparent),
0 8px 24px -12px rgba(0,0,0,0.12);
background: linear-gradient(#fff, #fff) padding-box,
linear-gradient(135deg, var(--r-brand), var(--r-brand-soft)) border-box;
border: 2px solid transparent;
z-index: 2;
}
.r-pricing-featured-wrap {
position: relative;
padding-top: 18px;
display: flex;
flex-direction: column;
}
.r-pricing-badge {
position: absolute;
top: 18px;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
background: var(--r-brand); color: #fff;
font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
text-transform: uppercase;
padding: 7px 16px; border-radius: 999px;
white-space: nowrap;
box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--r-brand) 60%, transparent);
z-index: 10;
}
.r-pricing-card-head { margin-bottom: 20px; }
.r-pricing-tier {
font-family: var(--r-font-serif);
font-size: 24px; font-weight: 500; margin: 0 0 6px;
}
.r-pricing-tagline { font-size: 14px; color: var(--r-ink-muted); margin: 0; line-height: 1.5; }
.r-pricing-price {
display: flex; align-items: baseline; flex-wrap: wrap;
gap: 4px; margin-bottom: 24px; min-height: 76px;
font-variant-numeric: tabular-nums;
}
.r-pricing-currency {
font-size: 22px; font-weight: 500; color: var(--r-ink-muted);
align-self: flex-start; margin-top: 14px;
}
.r-pricing-amount {
font-family: var(--r-font-serif);
font-style: italic; font-weight: 500;
font-size: clamp(56px, 6vw, 72px); line-height: 1;
letter-spacing: -0.02em;
}
.r-pricing-amount--word { font-style: italic; font-size: clamp(40px, 4.5vw, 52px); }
.r-pricing-suffix { font-size: 15px; color: var(--r-ink-muted); margin-left: 2px; }
.r-pricing-note {
flex-basis: 100%; font-size: 12.5px;
color: var(--r-ink-muted); margin-top: 6px;
}
.r-pricing-cta {
display: inline-flex; align-items: center; justify-content: center;
font: inherit; font-weight: 600; font-size: 15px;
padding: 13px 20px; border-radius: 12px;
text-decoration: none; cursor: pointer;
transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
margin-bottom: 28px;
}
.r-pricing-cta--primary {
background: var(--r-brand); color: #fff;
border: 1px solid var(--r-brand);
}
.r-pricing-cta--primary:hover { background: color-mix(in srgb, var(--r-brand) 88%, black); transform: translateY(-1px); }
.r-pricing-cta--ghost {
background: transparent; color: var(--r-ink);
border: 1px solid color-mix(in srgb, var(--r-ink) 18%, transparent);
}
.r-pricing-cta--ghost:hover { background: color-mix(in srgb, var(--r-ink) 5%, transparent); }
.r-pricing-features {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 12px;
font-size: 14.5px; line-height: 1.45; color: var(--r-ink);
}
.r-pricing-features li { display: flex; align-items: flex-start; gap: 10px; }
.r-pricing-features strong { font-weight: 600; }
.r-pricing-check {
flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px;
color: var(--r-brand);
background: color-mix(in srgb, var(--r-brand) 12%, transparent);
border-radius: 999px; padding: 2px;
}
@media (max-width: 960px) {
.r-pricing-grid { grid-template-columns: 1fr; gap: 20px; max-width: 460px; margin: 0 auto; }
.r-pricing-card--featured { order: -1; transform: none; }
}
/* ════════════════════════════════════════════════════════════════
2026 Step 9d — FAQ
════════════════════════════════════════════════════════════════ */
.r2026.r-faq {
background: var(--r-canvas-deep);
padding: clamp(80px, 12vw, 140px) clamp(20px, 5vw, 48px);
color: var(--r-ink);
font-family: var(--r-font-sans);
}
.r-faq-inner { max-width: 800px; margin: 0 auto; }
.r-faq-head { text-align: center; margin-bottom: clamp(48px, 7vw, 72px); }
.r-faq-eyebrow {
display: inline-block;
font-size: 12px; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--r-brand);
padding: 6px 14px;
border: 1px solid color-mix(in srgb, var(--r-brand) 28%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--r-brand) 6%, transparent);
margin-bottom: 20px;
}
.r-faq-title {
font-family: var(--r-font-sans);
font-size: clamp(32px, 5vw, 52px);
line-height: 1.08;
letter-spacing: -0.02em;
font-weight: 500;
margin: 0 0 16px;
}
.r-faq-accent {
font-family: var(--r-font-serif);
font-style: italic; font-weight: 400;
background: var(--r-gradient-ai);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding-right: 0.05em;
}
.r-faq-sub {
font-size: 17px; line-height: 1.55;
color: var(--r-ink-muted);
max-width: 560px; margin: 0 auto;
}
.r-faq-list {
border-top: 1px solid color-mix(in srgb, var(--r-ink) 10%, transparent);
}
.r-faq-item {
border-bottom: 1px solid color-mix(in srgb, var(--r-ink) 10%, transparent);
transition: background-color 200ms ease;
}
.r-faq-item:hover {
background: color-mix(in srgb, var(--r-brand) 3%, transparent);
}
.r-faq-summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 22px 8px;
font-size: clamp(16px, 1.6vw, 18px);
font-weight: 500;
color: var(--r-ink);
outline: none;
-webkit-tap-highlight-color: transparent;
}
.r-faq-summary::-webkit-details-marker { display: none; }
.r-faq-summary::marker { content: ""; }
.r-faq-summary:focus-visible {
outline: 2px solid var(--r-brand);
outline-offset: 4px;
border-radius: 6px;
}
.r-faq-q { flex: 1; letter-spacing: -0.01em; }
.r-faq-chevron {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 999px;
background: color-mix(in srgb, var(--r-brand) 8%, transparent);
color: var(--r-brand);
transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 200ms ease;
}
.r-faq-item[open] .r-faq-chevron {
transform: rotate(180deg);
background: color-mix(in srgb, var(--r-brand) 14%, transparent);
}
.r-faq-answer {
padding: 0 8px 24px;
color: var(--r-ink-muted);
font-size: 16px;
line-height: 1.65;
max-width: 680px;
}
.r-faq-answer p { margin: 0; }
@media (max-width: 540px) {
.r-faq-summary { padding: 18px 4px; gap: 16px; }
.r-faq-answer { padding: 0 4px 20px; font-size: 15px; }
.r-faq-chevron { width: 28px; height: 28px; }
}
/* ════════════════════════════════════════════════════════════════
2026 Step 9e — Security & Privacy (Trust)
════════════════════════════════════════════════════════════════ */
.r2026.r-trust {
position: relative;
background: var(--r-canvas);
color: var(--r-ink);
padding: clamp(72px, 9vw, 128px) 24px clamp(88px, 10vw, 144px);
font-family: var(--r-font-sans);
border-top: 1px solid color-mix(in srgb, var(--r-ink) 8%, transparent);
}
.r-trust-inner { max-width: 1120px; margin: 0 auto; }
.r-trust-head {
max-width: 680px;
margin: 0 0 clamp(40px, 5vw, 64px);
}
.r-trust-eyebrow {
display: inline-block;
font-size: 11px; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--r-brand);
padding: 6px 10px;
border: 1px solid color-mix(in srgb, var(--r-brand) 22%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--r-brand) 5%, transparent);
margin-bottom: 20px;
}
.r-trust-title {
font-size: clamp(32px, 4.4vw, 48px);
line-height: 1.08;
letter-spacing: -0.02em;
font-weight: 600;
margin: 0 0 16px;
color: var(--r-ink);
}
.r-trust-em {
font-family: var(--r-font-serif);
font-style: italic; font-weight: 400;
background: var(--r-gradient-ai);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding-right: 0.05em;
}
.r-trust-sub {
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.55;
color: var(--r-ink-muted);
margin: 0;
max-width: 56ch;
}
.r-trust-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: color-mix(in srgb, var(--r-ink) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--r-ink) 8%, transparent);
border-radius: 16px;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
.r-trust-item {
background: var(--r-canvas);
padding: 28px 26px 30px;
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
transition: background 200ms ease;
}
.r-trust-item:hover {
background: color-mix(in srgb, var(--r-brand) 3%, var(--r-canvas));
}
.r-trust-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
background: color-mix(in srgb, var(--r-brand) 7%, transparent);
color: var(--r-brand);
margin-bottom: 4px;
}
.r-trust-icon svg { width: 20px; height: 20px; }
.r-trust-label {
font-size: 15.5px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--r-ink);
margin: 0;
line-height: 1.3;
}
.r-trust-desc {
font-size: 14px;
line-height: 1.55;
color: var(--r-ink-muted);
margin: 0;
}
.r-trust-badges {
margin-top: clamp(36px, 4vw, 52px);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 14px;
padding-top: 28px;
border-top: 1px dashed color-mix(in srgb, var(--r-ink) 12%, transparent);
}
.r-trust-badge {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--r-ink-muted);
}
.r-trust-badge small {
font-size: 11px;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: color-mix(in srgb, var(--r-ink) 42%, transparent);
margin-left: 3px;
}
.r-trust-badge-dot {
color: color-mix(in srgb, var(--r-ink) 28%, transparent);
font-size: 14px;
line-height: 1;
}
@media (max-width: 900px) {
.r-trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.r-trust-grid { grid-template-columns: 1fr; }
.r-trust-item { padding: 24px 22px; }
.r-trust-badges { justify-content: flex-start; }
}
/* ════════════════════════════════════════════════════════════════
2026 Pricing v2 — 4-tier (Free / Credits / Subscription / Model)
Hides legacy .pricing-section since this mirrors its real content.
════════════════════════════════════════════════════════════════ */
body .pricing-section { display: none !important; }
.r-pricing-grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
.r-pricing-label {
display: inline-block;
font-size: 11px; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--r-brand);
background: color-mix(in srgb, var(--r-brand) 8%, transparent);
padding: 4px 10px; border-radius: 999px;
margin-bottom: 12px;
}
.r-pricing-card { padding: 28px 24px; }
.r-pricing-card-head { margin-bottom: 16px; }
.r-pricing-tier {
font-family: var(--r-font-sans);
font-style: normal; font-weight: 600;
font-size: 18px; letter-spacing: -0.01em;
margin: 0 0 8px; color: var(--r-ink);
}
.r-pricing-tagline {
font-size: 13.5px; line-height: 1.5;
color: var(--r-ink-muted); margin: 0;
}
/* Credits pack list */
.r-pricing-packs {
display: flex; flex-direction: column;
gap: 8px; margin-bottom: 22px;
padding: 14px; border-radius: 12px;
background: color-mix(in srgb, var(--r-ink) 3%, transparent);
}
.r-pricing-pack-row {
display: flex; justify-content: space-between; align-items: center;
font-size: 13.5px;
}
.r-pricing-pack-name { color: var(--r-ink-soft); }
.r-pricing-pack-price {
font-family: var(--r-font-serif); font-style: italic;
font-size: 18px; color: var(--r-brand);
font-variant-numeric: tabular-nums;
}
/* Model card tier list */
.r-pricing-card--info { background: color-mix(in srgb, var(--r-ink) 2.5%, #fff); }
.r-pricing-tiers {
display: flex; flex-direction: column; gap: 10px;
margin-bottom: 20px; padding: 14px;
background: color-mix(in srgb, var(--r-ink) 3%, transparent);
border-radius: 12px;
}
.r-pricing-tier-row {
display: flex; justify-content: space-between; align-items: center;
font-size: 13.5px;
}
.r-pricing-tier-name { color: var(--r-ink-soft); font-weight: 500; }
.r-pricing-tier-tag {
font-size: 11px; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
padding: 3px 9px; border-radius: 999px;
}
.r-pricing-tier-tag--free {
background: color-mix(in srgb, var(--r-brand) 12%, transparent);
color: var(--r-brand);
}
.r-pricing-tier-tag--credit {
background: color-mix(in srgb, var(--r-ink) 8%, transparent);
color: var(--r-ink-soft);
}
.r-pricing-status {
margin-top: auto; padding-top: 14px;
border-top: 1px dashed color-mix(in srgb, var(--r-ink) 12%, transparent);
display: flex; align-items: center; gap: 8px;
font-size: 12px; color: var(--r-ink-muted);
}
.r-pricing-status-dot {
width: 8px; height: 8px; border-radius: 999px;
background: #22c55e;
box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 25%, transparent);
}
/* Featured (subscription) card — emphasis without breaking 4-col grid */
.r-pricing-grid--4 .r-pricing-card--featured {
transform: none;
background: linear-gradient(#fff, #fff) padding-box,
linear-gradient(135deg, var(--r-brand), var(--r-brand-soft)) border-box;
border: 2px solid transparent;
box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--r-brand) 55%, transparent),
0 4px 12px -6px rgba(0,0,0,.08);
}
/* Override generic .r-pricing-amount font for word-style (Free / Custom) */
.r-pricing-amount--word {
font-family: var(--r-font-serif);
font-style: italic; font-weight: 500;
font-size: clamp(40px, 4vw, 52px); line-height: 1;
color: var(--r-ink);
}
/* Tighten price block on the 4-col layout */
.r-pricing-grid--4 .r-pricing-price { min-height: 64px; gap: 2px; }
.r-pricing-grid--4 .r-pricing-amount { font-size: clamp(40px, 4vw, 56px); }
/* Features list compact for 4-col */
.r-pricing-grid--4 .r-pricing-features { font-size: 13.5px; gap: 10px; }
.r-pricing-grid--4 .r-pricing-cta { padding: 11px 16px; font-size: 14px; margin-bottom: 22px; }
/* Enterprise row */
.r-pricing-ent {
margin-top: 32px;
display: flex; align-items: center; justify-content: space-between;
gap: 24px;
padding: 28px 32px;
background: linear-gradient(135deg,
color-mix(in srgb, var(--r-brand) 6%, var(--r-canvas)),
color-mix(in srgb, var(--r-brand) 2%, var(--r-canvas))
);
border: 1px solid color-mix(in srgb, var(--r-brand) 16%, transparent);
border-radius: 18px;
}
.r-pricing-ent-text { flex: 1; min-width: 0; }
.r-pricing-ent-title {
font-size: 20px; font-weight: 600; margin: 0 0 4px;
letter-spacing: -0.01em;
}
.r-pricing-ent-desc {
font-size: 14px; line-height: 1.5;
color: var(--r-ink-muted); margin: 0; max-width: 70ch;
}
.r-pricing-ent .r-pricing-cta { margin: 0; flex-shrink: 0; }
@media (max-width: 1100px) {
.r-pricing-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-pricing-ent { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
.r-pricing-grid--4 { grid-template-columns: 1fr; }
.r-pricing-ent { padding: 24px 20px; }
}
/* Trust grid — 4-column variant */
.r-trust-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
.r-trust-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.r-trust-grid--4 { grid-template-columns: 1fr; }
}
.r-trust-desc a {
color: var(--r-brand);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.r-trust-desc a:hover { color: var(--r-brand-soft); }
/* ════════════════════════════════════════════════════════════════
Legacy section cleanup — hide all 2020-era sections that the 2026
redesign replaced. Activated by html.r-hero-v2-active so this only
applies on the new landing. (.integrations-section and
.pricing-section already hidden above; keep their rules for safety.)
════════════════════════════════════════════════════════════════ */
html.r-hero-v2-active body .demo-video-section,
html.r-hero-v2-active body .app-preview-section,
html.r-hero-v2-active body section.features,
html.r-hero-v2-active body .personas-section,
html.r-hero-v2-active body .integrations-section,
html.r-hero-v2-active body .how-it-works,
html.r-hero-v2-active body .proof-section,
html.r-hero-v2-active body .compare-section,
html.r-hero-v2-active body .pricing-section,
html.r-hero-v2-active body .faq-section,
html.r-hero-v2-active body .security-section,
html.r-hero-v2-active body .desktop-section,
html.r-hero-v2-active body .closing-cta-section {
display: none !important;
}
/* ════════════════════════════════════════════════════════════════
2026 Step 9f — Finale: Love letters + outcome stat cards
Dark forest band, lives between r-trust and the footer.
════════════════════════════════════════════════════════════════ */
.r2026.r-finale {
position: relative;
background:
radial-gradient(ellipse at 50% 0%,
color-mix(in srgb, var(--r-brand) 35%, var(--r-brand-deep)) 0%,
var(--r-brand-deep) 60%);
color: var(--r-canvas);
padding: clamp(96px, 11vw, 160px) clamp(20px, 5vw, 56px) clamp(72px, 8vw, 112px);
overflow: hidden;
font-family: var(--r-font-sans);
}
/* Subtle film grain via radial dots */
.r2026.r-finale::before {
content: "";
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--r-grad-1) 12%, transparent) 0%, transparent 35%),
radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--r-grad-4) 10%, transparent) 0%, transparent 40%);
pointer-events: none;
}
.r-finale-rays {
position: absolute;
top: clamp(40px, 6vw, 88px);
left: 50%;
transform: translateX(-50%);
width: clamp(320px, 50vw, 600px);
height: auto;
color: color-mix(in srgb, var(--r-canvas) 70%, transparent);
pointer-events: none;
z-index: 1;
}
.r-finale-inner {
position: relative;
max-width: 1200px;
margin: 0 auto;
z-index: 2;
}
.r-finale-head {
text-align: center;
margin-bottom: clamp(48px, 6vw, 80px);
}
.r-finale-title {
font-family: var(--r-font-sans);
font-weight: 500;
font-size: clamp(40px, 6vw, 72px);
line-height: 1.04;
letter-spacing: -0.02em;
margin: 0;
color: var(--r-canvas);
}
.r-finale-em {
font-family: var(--r-font-serif);
font-style: italic;
font-weight: 400;
font-size: 1.12em;
background: linear-gradient(110deg,
color-mix(in srgb, var(--r-canvas) 92%, transparent),
var(--r-grad-4) 50%,
color-mix(in srgb, var(--r-canvas) 92%, transparent));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding-right: 0.06em;
}
/* ── Cream testimonial letters (row of cards) ───────────────── */
.r-finale-letters {
display: grid;
grid-template-columns: repeat(6, minmax(180px, 1fr));
gap: 14px;
margin-bottom: clamp(60px, 7vw, 96px);
align-items: start;
}
.r-finale-letter {
background: var(--r-canvas);
color: var(--r-ink);
border-radius: 16px;
padding: 20px 18px 18px;
display: flex;
flex-direction: column;
gap: 12px;
min-width: 0;
box-shadow:
0 1px 0 rgba(255,255,255,0.7) inset,
0 14px 30px -16px rgba(0,0,0,0.45);
transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}
.r-finale-letter:hover { transform: translateY(-4px); }
/* Subtle alternating tilt for organic feel */
.r-finale-letter:nth-child(2) { transform: rotate(-0.6deg); }
.r-finale-letter:nth-child(4) { transform: rotate(0.6deg); }
.r-finale-letter:nth-child(6) { transform: rotate(-0.4deg); }
.r-finale-letter:nth-child(2):hover { transform: rotate(-0.6deg) translateY(-4px); }
.r-finale-letter:nth-child(4):hover { transform: rotate(0.6deg) translateY(-4px); }
.r-finale-letter:nth-child(6):hover { transform: rotate(-0.4deg) translateY(-4px); }
.r-finale-letter--tall { padding-bottom: 22px; }
.r-finale-letter-avatar {
width: 30px; height: 30px;
border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700;
color: #fff;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.r-finale-letter-quote {
font-size: 13px;
line-height: 1.5;
color: var(--r-ink-soft);
margin: 0;
font-family: var(--r-font-serif);
font-style: italic;
font-weight: 400;
}
.r-finale-letter-attr {
font-size: 11.5px;
color: var(--r-ink-muted);
margin-top: auto;
padding-top: 2px;
line-height: 1.35;
}
.r-finale-letter-attr strong {
color: var(--r-ink);
font-weight: 600;
}
/* ── Big outcome stat cards (4 dark cards in a row) ─────────── */
.r-finale-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
margin-bottom: clamp(48px, 5vw, 72px);
}
.r-finale-stat {
position: relative;
background: color-mix(in srgb, var(--r-canvas) 4%, var(--r-brand-deep));
border: 1px solid color-mix(in srgb, var(--r-canvas) 12%, transparent);
border-radius: 18px;
padding: 28px 26px 26px;
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
min-height: 220px;
transition: transform 320ms cubic-bezier(.2,.8,.2,1),
border-color 220ms ease,
background 220ms ease;
overflow: hidden;
}
.r-finale-stat::after {
content: "";
position: absolute;
inset: 0;
border-radius: 18px;
background: var(--r-gradient-ai);
opacity: 0;
transition: opacity 320ms ease;
pointer-events: none;
mix-blend-mode: overlay;
}
.r-finale-stat:hover {
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--r-canvas) 24%, transparent);
}
.r-finale-stat:hover::after { opacity: 0.08; }
.r-finale-stat-arrow {
position: absolute;
top: 22px; right: 22px;
width: 28px; height: 28px;
border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
color: color-mix(in srgb, var(--r-canvas) 70%, transparent);
border: 1px solid color-mix(in srgb, var(--r-canvas) 18%, transparent);
transition: color 220ms ease, transform 320ms ease, border-color 220ms ease;
}
.r-finale-stat:hover .r-finale-stat-arrow {
color: var(--r-grad-4);
border-color: color-mix(in srgb, var(--r-grad-4) 50%, transparent);
transform: rotate(8deg) scale(1.05);
}
.r-finale-stat-arrow svg { width: 14px; height: 14px; }
.r-finale-stat-title {
font-family: var(--r-font-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(22px, 2vw, 28px);
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--r-canvas);
margin: 0;
max-width: 85%;
}
.r-finale-stat-quote {
font-size: 14px;
line-height: 1.55;
color: color-mix(in srgb, var(--r-canvas) 78%, transparent);
margin: 0;
}
.r-finale-stat-attr {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid color-mix(in srgb, var(--r-canvas) 12%, transparent);
font-size: 12px;
color: color-mix(in srgb, var(--r-canvas) 70%, transparent);
letter-spacing: 0.01em;
}
.r-finale-stat-avatar {
width: 20px; height: 20px;
border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 9px; font-weight: 700;
color: #fff;
flex-shrink: 0;
}
.r-finale-stat-dot {
width: 6px; height: 6px;
border-radius: 999px;
background: var(--r-grad-4);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--r-grad-4) 22%, transparent);
flex-shrink: 0;
}
/* ── Final mini CTA row ─────────────────────────────────────── */
.r-finale-cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: clamp(40px, 5vw, 64px);
}
.r-finale-cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 22px;
border-radius: 999px;
background: var(--r-canvas);
color: var(--r-brand-deep);
border: 0;
font: inherit;
font-weight: 600;
font-size: 15px;
letter-spacing: -0.005em;
cursor: pointer;
box-shadow: 0 8px 24px -12px rgba(0,0,0,0.4);
transition: transform 220ms ease, box-shadow 220ms ease;
}
.r-finale-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px -14px rgba(0,0,0,0.5);
}
.r-finale-cta-note {
font-size: 12.5px;
color: color-mix(in srgb, var(--r-canvas) 60%, transparent);
letter-spacing: 0.01em;
}
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
.r-finale-letters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r-finale-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.r-finale-letters { grid-template-columns: 1fr 1fr; gap: 12px; }
.r-finale-stats { grid-template-columns: 1fr; }
.r-finale-letter:nth-child(2),
.r-finale-letter:nth-child(4),
.r-finale-letter:nth-child(6) { transform: none; }
.r-finale-letter:hover { transform: translateY(-2px) !important; }
}
/* ════════════════════════════════════════════════════════════════
2026 Step 10 — Scroll-reveal motion system
- Single IntersectionObserver in redesign.js toggles .is-revealed
- Gated by html.r-motion-ready so JS-less / reduced-motion users
see fully visible content immediately (no FOUC)
- Variants: default (fade+up), --scale, --blur, --stagger (children)
════════════════════════════════════════════════════════════════ */
html.r-motion-ready [data-r-reveal] {
opacity: 0;
transform: translate3d(0, 28px, 0);
transition:
opacity 720ms var(--r-ease-out, cubic-bezier(.23,1,.32,1)),
transform 720ms var(--r-ease-out, cubic-bezier(.23,1,.32,1)),
filter 720ms var(--r-ease-out, cubic-bezier(.23,1,.32,1));
will-change: opacity, transform;
}
html.r-motion-ready [data-r-reveal].is-revealed {
opacity: 1;
transform: none;
filter: none;
}
/* Variant: scale — for cards/images */
html.r-motion-ready [data-r-reveal="scale"] {
transform: translate3d(0, 16px, 0) scale(0.96);
}
html.r-motion-ready [data-r-reveal="scale"].is-revealed {
transform: none;
}
/* Variant: blur — for big numbers, hero hooks */
html.r-motion-ready [data-r-reveal="blur"] {
filter: blur(10px);
transform: translate3d(0, 12px, 0);
}
/* Variant: fade (no transform) */
html.r-motion-ready [data-r-reveal="fade"] {
transform: none;
}
/* Stagger — children animate sequentially. JS sets transition-delay
based on child index. Container itself doesn't need its own reveal. */
html.r-motion-ready [data-r-reveal="stagger"] > * {
opacity: 0;
transform: translate3d(0, 22px, 0);
transition:
opacity 620ms var(--r-ease-out, cubic-bezier(.23,1,.32,1)),
transform 620ms var(--r-ease-out, cubic-bezier(.23,1,.32,1));
will-change: opacity, transform;
}
html.r-motion-ready [data-r-reveal="stagger"].is-revealed > * {
opacity: 1;
transform: none;
}
/* Honor reduced motion strictly: remove the gating so content shows */
@media (prefers-reduced-motion: reduce) {
html.r-motion-ready [data-r-reveal],
html.r-motion-ready [data-r-reveal].is-revealed,
html.r-motion-ready [data-r-reveal="stagger"] > *,
html.r-motion-ready [data-r-reveal="stagger"].is-revealed > * {
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
}
}
/* Smooth-scroll for in-page anchor jumps */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* Number counter: tabular nums so width doesn't jitter while counting */
[data-r-count] {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
/* Magnetic CTA — JS sets --r-mag-x / --r-mag-y as the cursor approaches.
CSS reads them and nudges the button. Capped to ±10px. */
.r-mag {
transition: transform 220ms var(--r-ease-out, cubic-bezier(.23,1,.32,1));
transform: translate3d(
clamp(-10px, calc(var(--r-mag-x, 0) * 10px), 10px),
clamp(-10px, calc(var(--r-mag-y, 0) * 10px), 10px),
0
);
}
.r-mag:active { transform: translate3d(0, 1px, 0) scale(0.98); }
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
.r-mag { transform: none !important; }
}
/* ════════════════════════════════════════════════════════════════
2026 Step 11 — Motion overhaul
- Spotlight cursor follow on cards
- 3D tilt on cards with perspective
- Word-by-word headline stagger (blur + up)
- Scroll progress bar at top
- Animated rotating border on featured pricing card
- Aurora beams + floating particles in finale section
════════════════════════════════════════════════════════════════ */
/* ── Card spotlight (radial cursor bloom inside the card) ──── */
/* JS injects as the first child of each
.r-spot card to avoid clashing with existing ::before/::after.
--r-spot-x / --r-spot-y are % of card rect, set by JS pointermove. */
.r-spot {
position: relative;
isolation: isolate;
overflow: hidden;
}
.r-spot-layer {
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(
420px circle at var(--r-spot-x, 50%) var(--r-spot-y, 50%),
color-mix(in srgb, var(--r-brand) 22%, transparent) 0%,
transparent 55%
);
opacity: 0;
transition: opacity 380ms var(--r-ease-out);
pointer-events: none;
z-index: 0;
}
.r-spot:hover > .r-spot-layer { opacity: 1; }
/* All non-layer children sit above the spotlight */
.r-spot > *:not(.r-spot-layer) { position: relative; z-index: 1; }
/* Dark variant — for cards on dark backgrounds */
.r-spot--dark > .r-spot-layer {
background: radial-gradient(
420px circle at var(--r-spot-x, 50%) var(--r-spot-y, 50%),
color-mix(in srgb, var(--r-grad-4) 32%, transparent) 0%,
color-mix(in srgb, var(--r-grad-1) 18%, transparent) 35%,
transparent 65%
);
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
.r-spot-layer { display: none; }
}
/* ── 3D tilt ───────────────────────────────────────────────── */
/* JS sets --r-tilt-x and --r-tilt-y in deg. Apply .r-tilt to a card.
Parent ideally has perspective via .r-tilt-stage, else local. */
.r-tilt-stage { perspective: 1000px; }
.r-tilt {
transform-style: preserve-3d;
transform:
perspective(1000px)
rotateX(var(--r-tilt-x, 0deg))
rotateY(var(--r-tilt-y, 0deg))
translateZ(0);
transition: transform 320ms var(--r-ease-out), box-shadow 320ms var(--r-ease-out);
will-change: transform;
}
/* Subtle push-toward-viewer on hover so tilt feels physical */
.r-tilt:hover {
transform:
perspective(1000px)
rotateX(var(--r-tilt-x, 0deg))
rotateY(var(--r-tilt-y, 0deg))
translateZ(8px);
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
.r-tilt { transform: none !important; transition: none; }
}
/* Hover-only — when card is on .r-tilt-hover-only, tilt should only
apply during hover so resting state is flat. */
.r-tilt-hover-only:not(:hover) {
transform: perspective(1000px) rotateX(0) rotateY(0);
}
/* ── Word stagger (replaces simple fade-up on big headlines) ── */
/* JS splits headline text into per word, then
.is-revealed cascades them in with blur + translateY. */
html.r-motion-ready .r-word {
display: inline-block;
opacity: 0;
transform: translate3d(0, 0.55em, 0);
filter: blur(8px);
transition:
opacity 700ms var(--r-ease-out),
transform 700ms var(--r-ease-out),
filter 700ms var(--r-ease-out);
will-change: opacity, transform, filter;
}
html.r-motion-ready [data-r-words].is-revealed .r-word,
html.r-motion-ready .is-revealed [data-r-words] .r-word {
opacity: 1;
transform: none;
filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
html.r-motion-ready .r-word {
opacity: 1 !important; transform: none !important; filter: none !important;
}
}
/* ── Scroll progress bar (top of page) ─────────────────────── */
.r-scroll-progress {
position: fixed;
top: 0; left: 0;
height: 3px;
width: 100%;
background: transparent;
pointer-events: none;
z-index: 10000;
}
.r-scroll-progress::before {
content: "";
display: block;
height: 100%;
width: var(--r-scroll-progress, 0%);
background: var(--r-gradient-ai);
background-size: 200% 100%;
animation: r-scroll-grad 4s linear infinite;
box-shadow: 0 0 18px color-mix(in srgb, var(--r-grad-1) 60%, transparent);
transition: width 80ms linear;
}
@keyframes r-scroll-grad {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
@media (prefers-reduced-motion: reduce) {
.r-scroll-progress::before { animation: none; }
}
/* ── Featured Pricing card — rotating gradient border ─────── */
/* The card already has a static gradient border; we layer a conic
gradient ring on top that slowly rotates. Pure CSS, no JS. */
.r-pricing-card--featured {
position: relative;
isolation: isolate;
}
.r-pricing-card--featured::before {
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
padding: 2px;
background: conic-gradient(
from var(--r-conic-angle, 0deg),
var(--r-grad-1),
var(--r-grad-2),
var(--r-grad-3),
var(--r-grad-4),
var(--r-grad-1)
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: r-conic-spin 6s linear infinite;
pointer-events: none;
z-index: -1;
opacity: 0.85;
}
@property --r-conic-angle {
syntax: "";
initial-value: 0deg;
inherits: false;
}
@keyframes r-conic-spin {
to { --r-conic-angle: 360deg; }
}
/* Fallback for browsers without @property — animate background-position */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
.r-pricing-card--featured::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.r-pricing-card--featured::before { animation: none; }
}
/* ── Aurora beams in finale section ───────────────────────── */
.r-finale-aurora {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.r-finale-aurora-beam {
position: absolute;
width: 60vw;
height: 80vh;
border-radius: 50%;
filter: blur(70px);
opacity: 0.32;
mix-blend-mode: screen;
animation: r-aurora-float 14s ease-in-out infinite;
}
.r-finale-aurora-beam:nth-child(1) {
background: radial-gradient(circle, var(--r-grad-1), transparent 70%);
top: -20%; left: -10%;
animation-delay: -2s;
}
.r-finale-aurora-beam:nth-child(2) {
background: radial-gradient(circle, var(--r-grad-2), transparent 70%);
top: 30%; left: 60%;
animation-delay: -5s;
animation-duration: 18s;
}
.r-finale-aurora-beam:nth-child(3) {
background: radial-gradient(circle, var(--r-grad-4), transparent 70%);
top: 60%; left: -15%;
animation-delay: -8s;
animation-duration: 16s;
opacity: 0.22;
}
@keyframes r-aurora-float {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(8vw, -4vh) scale(1.15); }
66% { transform: translate(-6vw, 6vh) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
.r-finale-aurora-beam { animation: none; }
}
/* ── Floating particles in finale ──────────────────────────── */
.r-finale-particles {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
.r-finale-particle {
position: absolute;
width: 3px; height: 3px;
border-radius: 999px;
background: color-mix(in srgb, var(--r-canvas) 70%, transparent);
box-shadow: 0 0 8px color-mix(in srgb, var(--r-grad-4) 50%, transparent);
bottom: -10px;
animation: r-particle-rise linear infinite;
will-change: transform, opacity;
}
@keyframes r-particle-rise {
0% { transform: translateY(0) translateX(0); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(-120vh) translateX(var(--r-drift, 30px)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.r-finale-particles { display: none; }
}
/* ── Card shine sweep (light streak across card on hover) ── */
/* Optional, can be added via .r-shine class. */
.r-shine { position: relative; overflow: hidden; }
.r-shine::before {
content: "";
position: absolute;
top: 0; left: -150%;
width: 60%; height: 100%;
background: linear-gradient(
105deg,
transparent 0%,
color-mix(in srgb, #fff 28%, transparent) 50%,
transparent 100%
);
transform: skewX(-15deg);
pointer-events: none;
transition: left 750ms var(--r-ease-out);
}
.r-shine:hover::before { left: 150%; }
@media (prefers-reduced-motion: reduce) {
.r-shine::before { display: none; }
}
/* ════════════════════════════════════════════════════════════════
2026 Step 12 — Wave hover (animated underline grow-from-center)
Same feel as the header/footer nav buttons:
- 1.5px line at the bottom of the button
- transform-origin: center, scaleX(0) → scaleX(1) on hover
- bouncy cubic-bezier(0.34, 1.2, 0.64, 1) timing
- currentColor so it adapts to the button's text color
Applied to every CTA / button / tab added in the 2026 redesign.
════════════════════════════════════════════════════════════════ */
.r-pricing-cta,
.r-cta-btn,
.r-finale-cta-btn,
.r-pricing-toggle-btn,
.r-btn,
.r-faq-summary {
position: relative;
}
.r-pricing-cta::after,
.r-cta-btn::after,
.r-finale-cta-btn::after,
.r-pricing-toggle-btn::after,
.r-btn::after,
.r-faq-summary::after {
content: "";
position: absolute;
bottom: 9px;
left: 50%;
width: calc(100% - 28px);
height: 2.5px;
background: currentColor;
border-radius: 2px;
transform: translateX(-50%) scaleX(0);
transform-origin: center;
transition:
transform 340ms cubic-bezier(0.34, 1.2, 0.64, 1),
opacity 220ms ease;
opacity: 0;
pointer-events: none;
z-index: 5;
}
.r-pricing-cta:hover::after,
.r-cta-btn:hover::after,
.r-finale-cta-btn:hover::after,
.r-pricing-toggle-btn:hover::after,
.r-btn:hover::after {
transform: translateX(-50%) scaleX(1);
opacity: 1;
}
/* ── Per-variant wave colors for high contrast on every bg ──── */
/* Solid emerald primary buttons — wave in cream/canvas */
.r-pricing-cta--primary::after,
.r-cta-btn--primary::after {
background: var(--r-canvas);
box-shadow: 0 0 10px color-mix(in srgb, var(--r-canvas) 60%, transparent);
}
/* Ghost buttons on light bg — wave in brand emerald */
.r-pricing-cta--ghost::after {
background: var(--r-brand);
box-shadow: 0 0 10px color-mix(in srgb, var(--r-brand) 35%, transparent);
}
/* CTA band ghost (white text on dark green) — wave in cream */
.r-cta-btn--ghost::after {
background: var(--r-canvas);
box-shadow: 0 0 10px color-mix(in srgb, var(--r-canvas) 50%, transparent);
}
/* Finale CTA (cream pill on dark) — wave in deep emerald */
.r-finale-cta-btn::after {
background: var(--r-brand-deep);
box-shadow: 0 0 10px color-mix(in srgb, var(--r-brand-deep) 50%, transparent);
bottom: 10px;
width: calc(100% - 32px);
}
/* Dark squircle download buttons — amber wave */
.r-btn--platform::after {
bottom: 12px;
width: calc(100% - 44px);
background: var(--r-grad-4, #FFA946);
box-shadow: 0 0 10px color-mix(in srgb, var(--r-grad-4, #FFA946) 65%, transparent);
}
/* Ghost "Watch 30-second demo" button — line in brand emerald */
.r-btn--ghost::after {
background: var(--r-brand);
box-shadow: 0 0 10px color-mix(in srgb, var(--r-brand) 40%, transparent);
}
/* FAQ summary: line is wider since the row is wider; sit it on the
summary baseline rather than near the row bottom. */
.r-faq-summary::after {
bottom: 14px;
width: calc(100% - 56px);
left: 8px;
transform: scaleX(0);
}
.r-faq-summary:hover::after,
.r-faq-item[open] > .r-faq-summary::after {
transform: scaleX(1);
opacity: 0.55;
}
/* Active toggle button — line is already implied by the green thumb,
so suppress the wave on the active state to avoid visual noise. */
.r-pricing-toggle-btn.is-active::after { display: none; }
/* Disable when the active FAQ item is open — the row is already
visually emphasized by the rotated chevron and bg. */
.r-faq-item[open] > .r-faq-summary:hover::after { opacity: 0.55; }
/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
.r-pricing-cta::after,
.r-cta-btn::after,
.r-finale-cta-btn::after,
.r-pricing-toggle-btn::after,
.r-btn::after,
.r-faq-summary::after {
display: none;
}
}
/* ════════════════════════════════════════════════════════════════
2026 — Demo Video section (premium overhaul)
- Dark band with ambient AI aurora behind the frame
- Mac-browser chrome around the video
- Floating spec chips in the corners
- Stat strip below
════════════════════════════════════════════════════════════════ */
.r-demovid {
position: relative;
padding: clamp(80px, 11vw, 144px) clamp(20px, 5vw, 60px) clamp(72px, 9vw, 112px);
background:
radial-gradient(ellipse 80% 60% at 50% 0%,
color-mix(in srgb, var(--r-brand) 25%, var(--r-brand-deep)) 0%,
var(--r-brand-deep) 70%);
color: var(--r-canvas);
overflow: hidden;
isolation: isolate;
}
/* Subtle grid background pattern */
.r-demovid::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(color-mix(in srgb, var(--r-canvas) 4%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--r-canvas) 4%, transparent) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 75%);
pointer-events: none;
z-index: 0;
}
/* Ambient AI aurora — three blurred color blobs that drift */
.r-demovid-aurora {
position: absolute; inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.r-demovid-beam {
position: absolute;
width: 50vw; height: 50vh;
border-radius: 50%;
filter: blur(80px);
opacity: 0.32;
mix-blend-mode: screen;
animation: r-demovid-drift 16s ease-in-out infinite;
}
.r-demovid-beam-1 {
background: radial-gradient(circle, var(--r-grad-1), transparent 65%);
top: -10%; left: 10%;
}
.r-demovid-beam-2 {
background: radial-gradient(circle, var(--r-grad-2), transparent 65%);
top: 30%; right: -5%;
animation-delay: -4s;
animation-duration: 20s;
}
.r-demovid-beam-3 {
background: radial-gradient(circle, var(--r-grad-4), transparent 65%);
bottom: -15%; left: 30%;
animation-delay: -8s;
animation-duration: 18s;
opacity: 0.22;
}
@keyframes r-demovid-drift {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(6vw, -4vh) scale(1.1); }
66% { transform: translate(-5vw, 5vh) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
.r-demovid-beam { animation: none; }
}
.r-demovid-inner {
position: relative;
z-index: 1;
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: clamp(48px, 6vw, 72px);
}
.r-demovid-head {
display: flex;
flex-direction: column;
gap: 18px;
text-align: center;
align-items: center;
}
.r-demovid-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: color-mix(in srgb, var(--r-canvas) 85%, transparent);
padding: 6px 12px;
border: 1px solid color-mix(in srgb, var(--r-canvas) 18%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--r-canvas) 5%, transparent);
backdrop-filter: blur(8px);
}
.r-demovid-eyebrow-dot {
width: 6px; height: 6px;
border-radius: 999px;
background: var(--r-grad-4);
box-shadow: 0 0 8px var(--r-grad-4);
animation: r-pulse 1.8s ease-in-out infinite;
}
.r-demovid-title {
font-family: var(--r-font-sans);
font-size: clamp(34px, 5vw, 60px);
font-weight: 500;
line-height: 1.06;
letter-spacing: -0.02em;
color: var(--r-canvas);
margin: 0;
max-width: 720px;
}
.r-demovid-title em {
font-family: var(--r-font-serif);
font-style: italic;
font-weight: 400;
background: var(--r-gradient-ai);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
padding-right: 0.05em;
}
.r-demovid-sub {
font-size: clamp(15px, 1.4vw, 17px);
color: color-mix(in srgb, var(--r-canvas) 70%, transparent);
line-height: 1.6;
max-width: 580px;
margin: 0;
}
/* ─ Stage: frame + floating chips ───────────────────────────── */
.r-demovid-stage {
position: relative;
width: 100%;
max-width: 980px;
margin: 0 auto;
padding: 0 clamp(0px, 4vw, 60px);
}
/* Floating chips removed by request — leaving stage empty for the frame */
/* ─ Frame ────────────────────────────────────────────────────
Modern AI-product treatment:
- Rotating conic-gradient "moving border" (Aceternity/Vercel pattern)
- Cursor-following spotlight overlay
- Scroll-tied scale-up (set by JS via --r-frame-scale)
- Subtle 3D tilt on hover (set by JS via --r-frame-rx / --r-frame-ry)
──────────────────────────────────────────────────────────── */
.r-demovid-frame {
position: relative;
border-radius: 22px;
background: var(--r-ink);
z-index: 2;
isolation: isolate;
transform-style: preserve-3d;
transform:
perspective(1400px)
scale(var(--r-frame-scale, 0.94))
rotateX(var(--r-frame-rx, 0deg))
rotateY(var(--r-frame-ry, 0deg));
transition: transform 540ms cubic-bezier(0.23, 1, 0.32, 1);
will-change: transform;
box-shadow:
0 0 0 1px color-mix(in srgb, var(--r-canvas) 8%, transparent),
0 40px 120px -32px rgba(0, 0, 0, 0.75),
0 0 100px -20px color-mix(in srgb, var(--r-grad-2) 40%, transparent);
}
/* Rotating conic-gradient border removed by request — frame relies on
its native box-shadow + subtle hairline border for definition. */
/* Cursor-following spotlight overlay (sits above video, blends with screen) */
.r-demovid-spot {
position: absolute; inset: 0;
border-radius: inherit;
background: radial-gradient(
520px circle at var(--r-spot-x, 50%) var(--r-spot-y, 50%),
color-mix(in srgb, var(--r-grad-1) 18%, transparent) 0%,
color-mix(in srgb, var(--r-grad-3) 10%, transparent) 35%,
transparent 70%
);
opacity: 0;
mix-blend-mode: screen;
transition: opacity 380ms ease;
pointer-events: none;
z-index: 3;
}
.r-demovid-frame:hover .r-demovid-spot { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.r-demovid-frame {
transform: none;
transition: none;
}
}
/* Override legacy demo-video styles inside the r2026 frame — strip
the legacy frame's own border / radius / background / hover states
/ ambient-glow orbs / controls toolbar so we only see ONE frame. */
.r-demovid-frame .demo-video-container {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
background: var(--r-ink);
max-width: none;
margin: 0;
border-radius: 0;
}
.r-demovid-frame .demo-video-container::before,
.r-demovid-frame .demo-video-container::after {
display: none !important;
content: none !important;
}
.r-demovid-frame .demo-video-frame,
.r-demovid-frame .demo-video-frame:hover,
.r-demovid-frame .demo-video-frame.demo-in-view {
position: absolute; inset: 0;
width: 100%;
max-width: none;
margin: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
aspect-ratio: auto;
cursor: pointer;
overflow: hidden;
}
.r-demovid-frame .demo-video-frame video {
width: 100%; height: 100%;
object-fit: cover;
display: block;
border-radius: 0;
}
/* Hide the legacy controls toolbar entirely (black bar at bottom) */
.r-demovid-frame .demo-video-controls,
.r-demovid-frame .demo-theater-close {
display: none !important;
}
/* Branded play overlay */
.r-demovid-play {
position: absolute !important;
inset: 0;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
cursor: pointer;
background:
radial-gradient(ellipse at center,
color-mix(in srgb, var(--r-brand-deep) 30%, transparent) 0%,
color-mix(in srgb, var(--r-brand-deep) 70%, transparent) 100%);
transition: opacity 380ms ease;
}
.r-demovid-play-inner {
position: relative;
display: flex; align-items: center; justify-content: center;
width: 88px; height: 88px;
}
.r-demovid-play-ring {
position: absolute; inset: 0;
border-radius: 999px;
border: 1.5px solid color-mix(in srgb, var(--r-canvas) 40%, transparent);
animation: r-demovid-ring 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
@keyframes r-demovid-ring {
0% { transform: scale(0.85); opacity: 0.8; }
100% { transform: scale(1.8); opacity: 0; }
}
.r-demovid-play-btn {
position: relative;
width: 72px; height: 72px;
border-radius: 999px;
background: linear-gradient(135deg, var(--r-brand), var(--r-brand-soft));
display: flex; align-items: center; justify-content: center;
color: var(--r-canvas);
box-shadow:
0 0 0 2px color-mix(in srgb, var(--r-grad-4) 35%, transparent),
0 12px 32px -8px color-mix(in srgb, var(--r-brand) 65%, transparent);
transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms ease;
}
.r-demovid-play-btn svg { margin-left: 3px; } /* optical center for triangle */
.r-demovid-play:hover .r-demovid-play-btn {
transform: scale(1.08);
box-shadow:
0 0 0 3px color-mix(in srgb, var(--r-grad-4) 55%, transparent),
0 18px 42px -10px color-mix(in srgb, var(--r-brand) 80%, transparent);
}
.r-demovid-play-label {
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: color-mix(in srgb, var(--r-canvas) 78%, transparent);
}
/* Hide the play overlay once video is playing (via existing JS state) */
.demo-video-container.is-playing .r-demovid-play {
opacity: 0;
pointer-events: none;
}
/* ─ Stat strip ──────────────────────────────────────────────── */
.r-demovid-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
max-width: 880px;
margin: 0 auto;
}
.r-demovid-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
padding: 22px 18px;
border-radius: 16px;
background: color-mix(in srgb, var(--r-canvas) 4%, transparent);
border: 1px solid color-mix(in srgb, var(--r-canvas) 10%, transparent);
backdrop-filter: blur(12px);
}
.r-demovid-stat-num {
font-family: var(--r-font-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(34px, 4vw, 48px);
line-height: 1;
letter-spacing: -0.01em;
background: var(--r-gradient-ai);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-variant-numeric: tabular-nums;
}
.r-demovid-stat-unit {
font-size: 0.55em;
vertical-align: 0.4em;
margin-left: 1px;
}
.r-demovid-stat-lbl {
font-size: 12.5px;
color: color-mix(in srgb, var(--r-canvas) 65%, transparent);
letter-spacing: 0.01em;
}
/* ─ Responsive ──────────────────────────────────────────────── */
@media (max-width: 760px) {
.r-demovid-stage { padding: 0; }
.r-demovid-stats { grid-template-columns: 1fr; gap: 10px; }
.r-demovid-play-inner { width: 72px; height: 72px; }
.r-demovid-play-btn { width: 60px; height: 60px; }
}
/* ════════════════════════════════════════════════════════════════
2026 Step 13 — Letter-by-letter wave on button text
Same mechanic as the footer wordmark wave: each character is
wrapped in by JS, then
on parent hover each letter lifts with a per-index delay so the
wave ripples across the label.
════════════════════════════════════════════════════════════════ */
/* Wrapper around all letter spans inside a button. display:inline-block
makes the wrapper a single flex item, so the parent button's
flex `gap` doesn't get applied between every individual letter. */
.r-letters-wrap {
display: inline-block;
white-space: nowrap;
line-height: inherit;
}
.r-letter {
display: inline-block;
transform: translateY(0);
will-change: transform;
}
/* Spaces between words — keep their natural width inside the wrap */
.r-letter--space {
display: inline-block;
width: 0.28em;
animation: none !important;
}
/* Voice-wave keyframe — letters travel UP, briefly past baseline DOWN,
then settle. Mirrors the rise-and-fall shape of an audio waveform. */
@keyframes r-letter-voice-wave {
0% { transform: translateY(0); }
35% { transform: translateY(-7px); }
60% { transform: translateY(2px); }
85% { transform: translateY(-1px); }
100% { transform: translateY(0); }
}
.r-letter.r-letter-wave {
animation: r-letter-voice-wave 620ms cubic-bezier(0.34, 1.2, 0.64, 1) both;
animation-delay: calc(var(--i, 0) * 45ms);
}
@media (prefers-reduced-motion: reduce) {
.r-letter,
.r-letter.r-letter-wave {
animation: none !important;
transform: none !important;
}
}