/* ═══════════════════════════════════════════════════════════════════════════
PRICING REDESIGN v10 — Apple liquid-glass, full-viewport sections, motion
Loaded LAST so it wins specificity. Inspired by Rentalmatch aesthetic.
═══════════════════════════════════════════════════════════════════════════ */
/* ---- 0. Reset scroll-snap leftovers + base ---- */
body.pricing-page { scroll-snap-type: none !important; }
.pricing-page #main-content {
display: flex;
flex-direction: column;
}
/* ═══ 1. EVERY SECTION = FULL VIEWPORT, content centered ═══════════════════ */
.pricing-page .prc-hero,
.pricing-page .prc-section,
.pricing-page .rd-cta-section {
min-height: 100vh !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
/* safe center: centers when content fits, but TOP-ALIGNS when content is taller
than the viewport instead of overflowing up under the fixed navbar (which was
clipping section titles and overlapping adjacent sections). */
justify-content: safe center !important;
align-items: stretch !important;
box-sizing: border-box !important;
/* top padding clears the fixed navbar (~70px) even when content is top-aligned */
padding: clamp(96px, 12vh, 132px) 0 clamp(64px, 8vh, 96px) !important;
position: relative;
overflow: hidden;
}
.pricing-page .prc-section > .rd-container,
.pricing-page .prc-hero > .rd-container,
.pricing-page .rd-cta-section > .rd-container {
width: 100%;
max-width: var(--rd-max-content, 1320px);
margin: 0 auto;
padding: 0 clamp(20px, 4vw, 48px);
}
/* ═══ 2. SECTION BACKGROUNDS — alternating dark / light, animated mesh ═════ */
.pricing-page .prc-hero,
.pricing-page .prc-section--dark,
.pricing-page .prc-trust-section,
.pricing-page .rd-cta-section {
background:
radial-gradient(1100px 600px at 12% 0%, rgba(56,122,210,0.18), transparent 62%),
radial-gradient(900px 520px at 92% 12%, rgba(39,165,216,0.14), transparent 66%),
radial-gradient(700px 700px at 70% 100%, rgba(140,245,208,0.06), transparent 70%),
linear-gradient(180deg, #070b12 0%, #060a10 100%) !important;
color: #f0f4ff;
}
.pricing-page .prc-section--light {
background:
radial-gradient(900px 500px at 85% 8%, rgba(0,122,255,0.06), transparent 64%),
linear-gradient(180deg, #f6f8fc 0%, #eef1f7 100%) !important;
color: #11151f;
}
.pricing-page .prc-section--light-purple {
background:
radial-gradient(900px 520px at 14% 6%, rgba(168,85,247,0.10), transparent 62%),
radial-gradient(720px 460px at 90% 90%, rgba(0,122,255,0.06), transparent 68%),
linear-gradient(180deg, #f7f5fc 0%, #efeaf8 100%) !important;
color: #11151f;
}
/* Floating ambient orbs on dark sections */
.pricing-page .prc-section--dark::before,
.pricing-page .prc-trust-section::before {
content: "";
position: absolute;
width: 460px; height: 460px;
border-radius: 50%;
background: radial-gradient(circle, rgba(56,122,210,0.16), transparent 70%);
top: -160px; right: -120px;
pointer-events: none;
animation: prc-float 14s ease-in-out infinite;
}
.pricing-page .prc-section--dark::after,
.pricing-page .prc-trust-section::after {
content: "";
position: absolute;
width: 380px; height: 380px;
border-radius: 50%;
background: radial-gradient(circle, rgba(140,245,208,0.10), transparent 70%);
bottom: -150px; left: -100px;
pointer-events: none;
animation: prc-float 18s ease-in-out infinite reverse;
}
@keyframes prc-float {
0%,100% { transform: translate(0,0) scale(1); }
50% { transform: translate(40px,30px) scale(1.12); }
}
/* ═══ 3. SECTION HEADERS ═══════════════════════════════════════════════════ */
.pricing-page .prc-section-header {
margin: 0 auto clamp(28px, 4vh, 48px) !important;
max-width: 760px;
}
.pricing-page .rd-eyebrow {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 7px 16px;
border-radius: 999px;
margin-bottom: 18px;
background: rgba(56,122,210,0.12);
border: 1px solid rgba(90,200,250,0.30);
color: #7cc6ff;
backdrop-filter: blur(8px);
}
.pricing-page .prc-section--light .rd-eyebrow,
.pricing-page .prc-section--light-purple .rd-eyebrow {
background: rgba(0,122,255,0.08);
border-color: rgba(0,122,255,0.22);
color: #0a66c8;
}
.pricing-page .prc-eyebrow--tenant { background:rgba(56,122,210,0.14)!important; border-color:rgba(90,200,250,0.32)!important; color:#7cc6ff!important; }
.pricing-page .prc-eyebrow--owner { background:rgba(168,85,247,0.12)!important; border-color:rgba(168,85,247,0.30)!important; color:#9b6bd6!important; }
.pricing-page .prc-eyebrow--agency { background:rgba(255,159,67,0.12)!important; border-color:rgba(255,159,67,0.30)!important; color:#ffb057!important; }
.pricing-page .rd-h2 {
font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem) !important;
font-weight: 800 !important;
letter-spacing: -0.035em !important;
line-height: 1.04 !important;
margin: 0 0 16px !important;
}
.pricing-page .rd-lead {
font-size: clamp(0.98rem, 0.9rem + 0.4vw, 1.18rem) !important;
line-height: 1.55 !important;
margin: 0 auto !important;
max-width: 620px;
}
.pricing-page .prc-section--dark .rd-lead,
.pricing-page .prc-trust-section .rd-lead { color: rgba(220,230,245,0.82) !important; }
.pricing-page .prc-section--light .rd-lead,
.pricing-page .prc-section--light-purple .rd-lead { color: rgba(40,50,70,0.78) !important; }
/* gradient text accents */
.pricing-page .rd-g-full,
.pricing-page .rd-g-blue { background: linear-gradient(120deg,#5ac8fa,#8cf5d0) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
.pricing-page .rd-g-purple { background: linear-gradient(120deg,#a855f7,#5ac8fa) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
.pricing-page .rd-g-teal { background: linear-gradient(120deg,#8cf5d0,#5ac8fa) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; }
/* ═══ 4. HERO ══════════════════════════════════════════════════════════════ */
.pricing-page .prc-h1 {
font-size: clamp(2.8rem, 1.8rem + 4.2vw, 5.6rem) !important;
font-weight: 850 !important;
letter-spacing: -0.045em !important;
line-height: 1.0 !important;
margin: 0 0 20px !important;
}
.pricing-page .prc-hero-lead {
font-size: clamp(1.02rem, 0.94rem + 0.5vw, 1.32rem) !important;
color: rgba(220,230,245,0.84) !important;
max-width: 580px;
margin: 0 auto 34px !important;
}
.pricing-page .prc-hero-stats {
display: inline-flex;
align-items: center;
gap: clamp(14px, 2.4vw, 34px);
padding: 18px clamp(20px,3vw,38px);
border-radius: 22px;
background: linear-gradient(165deg, rgba(22,32,50,0.78), rgba(12,20,34,0.72));
border: 1px solid rgba(171,220,255,0.16);
backdrop-filter: blur(20px) saturate(140%);
box-shadow: 0 20px 50px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
margin-bottom: 30px;
}
.pricing-page .prc-hero-stat { display:flex; flex-direction:column; gap:3px; align-items:center; }
.pricing-page .prc-hero-stat strong {
font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
font-weight: 850;
background: linear-gradient(120deg,#5ac8fa,#8cf5d0);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.pricing-page .prc-hero-stat span {
font-size: 0.78rem !important;
color: rgba(220,230,245,0.7) !important;
text-transform: uppercase;
letter-spacing: 0.07em;
font-weight: 600;
}
.pricing-page .prc-hero-stat-sep { width:1px; height:38px; background:linear-gradient(180deg,transparent,rgba(171,220,255,0.28),transparent); }
.pricing-page .prc-audience-nav { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom: 8px; }
.pricing-page .prc-aud-pill {
display:inline-flex; align-items:center; gap:7px;
padding: 12px 22px;
border-radius: 999px;
font-size: 0.9rem; font-weight: 700;
text-decoration: none;
border: 1px solid transparent;
transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s;
}
.pricing-page .prc-aud-pill--tenant { background:linear-gradient(135deg,rgba(56,122,210,0.9),rgba(90,200,250,0.85)); color:#fff; box-shadow:0 8px 24px rgba(56,122,210,0.34); }
.pricing-page .prc-aud-pill--owner { background:linear-gradient(135deg,rgba(168,85,247,0.9),rgba(120,90,230,0.85)); color:#fff; box-shadow:0 8px 24px rgba(168,85,247,0.32); }
.pricing-page .prc-aud-pill--agency { background:linear-gradient(135deg,rgba(255,159,67,0.92),rgba(255,120,80,0.86)); color:#fff; box-shadow:0 8px 24px rgba(255,159,67,0.32); }
.pricing-page .prc-aud-pill:hover { transform: translateY(-3px) scale(1.03); }
.pricing-page .prc-hero-scroll {
margin: 38px auto 0; width: 26px; height: 42px;
border: 2px solid rgba(171,220,255,0.3); border-radius: 14px;
display: flex; justify-content: center; padding-top: 7px;
}
.pricing-page .prc-scroll-dot { width:4px; height:8px; border-radius:2px; background:#7cc6ff; animation: prc-scroll 1.8s ease-in-out infinite; }
@keyframes prc-scroll { 0%{opacity:0;transform:translateY(-4px);} 40%{opacity:1;} 80%,100%{opacity:0;transform:translateY(12px);} }
/* ═══ 5. LIQUID-GLASS PLAN CARDS ══════════════════════════════════════════ */
.pricing-page .prc-cards-grid--4 {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: clamp(14px, 1.5vw, 22px) !important;
align-items: stretch;
}
.pricing-page .prc-plan-card {
position: relative;
display: flex;
flex-direction: column;
padding: clamp(18px, 2vw, 26px) clamp(16px, 1.6vw, 22px) !important;
border-radius: 22px !important;
background: linear-gradient(170deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)) !important;
border: 1px solid rgba(171,220,255,0.14) !important;
backdrop-filter: blur(22px) saturate(140%);
-webkit-backdrop-filter: blur(22px) saturate(140%);
box-shadow: 0 16px 40px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.06) !important;
transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s !important;
}
/* light sections → light glass */
.pricing-page .prc-section--light-purple .prc-plan-card {
background: linear-gradient(170deg, rgba(255,255,255,0.96), rgba(248,246,255,0.9)) !important;
border: 1px solid rgba(168,85,247,0.14) !important;
box-shadow: 0 14px 36px rgba(40,30,70,0.10), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}
.pricing-page .prc-plan-card:hover {
transform: translateY(-8px) !important;
box-shadow: 0 30px 64px rgba(0,0,0,0.42), 0 0 40px rgba(90,200,250,0.14) !important;
border-color: rgba(90,200,250,0.4) !important;
}
.pricing-page .prc-section--light-purple .prc-plan-card:hover {
box-shadow: 0 26px 56px rgba(40,30,70,0.18), 0 0 36px rgba(168,85,247,0.14) !important;
border-color: rgba(168,85,247,0.4) !important;
}
/* popular card — gradient ring + lift */
.pricing-page .prc-plan-card--popular {
border: 1.5px solid transparent !important;
background:
linear-gradient(170deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03)) padding-box,
linear-gradient(135deg, #5ac8fa, #8cf5d0) border-box !important;
transform: translateY(-6px);
box-shadow: 0 24px 56px rgba(0,0,0,0.44), 0 0 46px rgba(90,200,250,0.20) !important;
}
.pricing-page .prc-section--light-purple .prc-plan-card--popular {
background:
linear-gradient(170deg, rgba(255,255,255,0.99), rgba(250,247,255,0.95)) padding-box,
linear-gradient(135deg, #a855f7, #5ac8fa) border-box !important;
box-shadow: 0 24px 52px rgba(40,30,70,0.20), 0 0 40px rgba(168,85,247,0.20) !important;
}
.pricing-page .prc-plan-card--popular:hover { transform: translateY(-12px) !important; }
.pricing-page .prc-plan-popular-tag {
position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
z-index: 4;
font-size: 0.64rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
padding: 6px 16px; border-radius: 999px;
color: #04121f;
background: linear-gradient(135deg, #8cf5d0, #5ac8fa);
box-shadow: 0 6px 18px rgba(90,200,250,0.45);
white-space: nowrap;
}
.pricing-page .prc-section--light-purple .prc-plan-popular-tag {
background: linear-gradient(135deg, #c89bf5, #a855f7); color: #fff;
}
.pricing-page .prc-plan-popular-bar { display:none !important; }
.pricing-page .prc-plan-header { text-align:center; margin-bottom: 14px; }
.pricing-page .prc-plan-badge {
display:inline-block; font-size:0.66rem; font-weight:800; letter-spacing:0.14em;
text-transform:uppercase; padding:5px 13px; border-radius:999px; margin-bottom:14px;
background: rgba(171,220,255,0.12); color:#9fb4cf; border:1px solid rgba(171,220,255,0.18);
}
.pricing-page .prc-section--light-purple .prc-plan-badge { background:rgba(40,30,70,0.06); color:#6a5a86; border-color:rgba(40,30,70,0.1); }
.pricing-page .prc-plan-badge--base { color:#7cc6ff; background:rgba(56,122,210,0.14); border-color:rgba(90,200,250,0.26); }
.pricing-page .prc-plan-badge--pro { color:#04121f; background:linear-gradient(135deg,#8cf5d0,#5ac8fa); border-color:transparent; }
.pricing-page .prc-plan-badge--plus { color:#c89bf5; background:rgba(168,85,247,0.14); border-color:rgba(168,85,247,0.28); }
.pricing-page .prc-plan-price { display:flex; align-items:flex-start; justify-content:center; gap:2px; }
.pricing-page .prc-plan-price-num {
font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.2rem); font-weight: 850; letter-spacing:-0.04em; line-height:1;
}
.pricing-page .prc-plan-price-cur { font-size:1.1rem; font-weight:800; margin-top:6px; opacity:0.7; }
.pricing-page .prc-plan-price-period { font-size:0.76rem; opacity:0.6; margin-top:6px; font-weight:600; }
.pricing-page .prc-plan-divider {
height:1px; margin: 14px 0;
background: linear-gradient(90deg, transparent, rgba(171,220,255,0.2), transparent);
}
.pricing-page .prc-section--light-purple .prc-plan-divider { background: linear-gradient(90deg,transparent,rgba(40,30,70,0.12),transparent); }
.pricing-page .prc-plan-list { list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:9px; flex:1; }
.pricing-page .prc-plan-list li { display:flex; align-items:flex-start; gap:9px; font-size:0.84rem; line-height:1.4; }
.pricing-page .prc-section--dark .prc-plan-list li { color: rgba(220,230,245,0.82); }
.pricing-page .prc-section--light-purple .prc-plan-list li { color: rgba(40,50,70,0.82); }
.pricing-page .prc-plan-check {
flex-shrink:0; width:17px; height:17px; border-radius:50%; display:inline-flex;
align-items:center; justify-content:center; font-size:0.6rem; font-weight:900;
background:linear-gradient(135deg,#5ac8fa,#8cf5d0); color:#04121f; margin-top:1px;
}
.pricing-page .prc-plan-check--pro { background:linear-gradient(135deg,#8cf5d0,#5ac8fa); }
.pricing-page .prc-plan-check--plus { background:linear-gradient(135deg,#a855f7,#5ac8fa); color:#fff; }
.pricing-page .prc-plan-btn {
width:100%; text-align:center; padding:12px 16px !important; border-radius:13px !important;
font-size:0.88rem !important; font-weight:700 !important; text-decoration:none;
transition: transform .2s, box-shadow .2s, filter .2s !important;
}
.pricing-page .prc-plan-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
/* ═══ 6. TENANT SECTION (S1) ═══════════════════════════════════════════════ */
.pricing-page .prc-tenant-layout {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: clamp(24px, 3vw, 48px);
align-items: center;
}
.pricing-page .prc-tenant-card,
.pricing-page .prc-dossier-mock {
background: linear-gradient(170deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
border: 1px solid rgba(171,220,255,0.14);
backdrop-filter: blur(22px) saturate(140%);
border-radius: 24px;
box-shadow: 0 18px 44px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.06);
}
.pricing-page .prc-tenant-card { padding: clamp(22px,2.4vw,34px); }
.pricing-page .prc-tenant-fee { display:flex; align-items:flex-start; justify-content:center; }
.pricing-page .prc-fee-num { font-size:clamp(3rem,2rem+3vw,4.6rem); font-weight:850; letter-spacing:-0.05em; background:linear-gradient(120deg,#5ac8fa,#8cf5d0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; line-height:1; }
.pricing-page .prc-fee-unit { font-size:1.6rem; font-weight:800; color:#7cc6ff; margin-top:8px; }
.pricing-page .prc-tenant-fee-label { text-align:center; font-size:0.85rem; color:rgba(220,230,245,0.66); margin-top:4px; }
.pricing-page .prc-check-list { list-style:none; margin:16px 0; padding:0; display:flex; flex-direction:column; gap:11px; }
.pricing-page .prc-check-list li { display:flex; gap:10px; font-size:0.86rem; line-height:1.45; color:rgba(220,230,245,0.82); }
.pricing-page .prc-check-icon { flex-shrink:0; width:19px; height:19px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#5ac8fa,#8cf5d0); color:#04121f; margin-top:1px; }
/* ═══ 7. AGENCY METRICS ════════════════════════════════════════════════════ */
.pricing-page .prc-agency-metrics-wrapper { width:100%; max-width:980px; margin: 0 auto clamp(24px,3vh,40px); padding:0 clamp(20px,4vw,48px); }
.pricing-page .prc-agency-metrics {
display:grid; grid-template-columns:repeat(4,1fr);
background: linear-gradient(170deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
border:1px solid rgba(171,220,255,0.14);
border-radius:20px; overflow:hidden;
backdrop-filter: blur(20px);
}
.pricing-page .prc-agency-metric { text-align:center; padding:clamp(18px,2.4vw,30px) 12px; border-right:1px solid rgba(171,220,255,0.08); }
.pricing-page .prc-agency-metric:last-child { border-right:none; }
.pricing-page .prc-agency-metric-num {
font-size:clamp(1.7rem,1.2rem+1.6vw,2.5rem); font-weight:850; letter-spacing:-0.04em;
background:linear-gradient(120deg,#ffb057,#ff7850); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.pricing-page .prc-agency-metric-label { font-size:0.78rem; color:rgba(220,230,245,0.7); margin-top:6px; }
/* ═══ 8. OWNER BENEFITS BAR ════════════════════════════════════════════════ */
.pricing-page .prc-owner-benefits {
display:flex; justify-content:center; align-items:stretch; gap:0;
margin: 0 auto clamp(22px,3vh,38px); max-width:920px;
background: linear-gradient(170deg, rgba(255,255,255,0.94), rgba(248,246,255,0.88));
border:1px solid rgba(168,85,247,0.14); border-radius:18px;
box-shadow: 0 12px 30px rgba(40,30,70,0.08);
overflow:hidden;
}
.pricing-page .prc-owner-benefit { display:flex; gap:11px; align-items:center; padding:16px 22px; flex:1; }
.pricing-page .prc-owner-benefit-icon { flex-shrink:0; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(168,85,247,0.16),rgba(90,200,250,0.12)); color:#9b6bd6; }
.pricing-page .prc-owner-benefit strong { display:block; font-size:0.85rem; color:#11151f; font-weight:700; }
.pricing-page .prc-owner-benefit span { display:block; font-size:0.76rem; color:rgba(40,50,70,0.62); margin-top:2px; }
.pricing-page .prc-owner-benefit-sep { width:1px; background:rgba(40,30,70,0.1); }
/* ═══ 9. "HOW IT WORKS" FLOW ═══════════════════════════════════════════════ */
.pricing-page .prc-how-flow {
display:flex; align-items:stretch; justify-content:center; gap:clamp(8px,1vw,16px); flex-wrap:nowrap;
}
.pricing-page .prc-how-step {
flex:1; max-width:260px;
background: linear-gradient(170deg, rgba(255,255,255,0.98), rgba(247,249,253,0.94));
border:1px solid rgba(0,122,255,0.12); border-radius:20px;
padding: clamp(20px,2.2vw,30px) clamp(16px,1.6vw,22px);
box-shadow: 0 12px 30px rgba(20,30,60,0.08);
transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
display:flex; flex-direction:column; align-items:center; text-align:center;
}
.pricing-page .prc-how-step:hover { transform:translateY(-6px); box-shadow:0 22px 44px rgba(20,30,60,0.14); }
.pricing-page .prc-how-num { font-size:0.78rem; font-weight:800; color:#0a66c8; letter-spacing:0.1em; margin-bottom:12px; }
.pricing-page .prc-how-icon {
width:52px; height:52px; border-radius:15px; display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,rgba(0,122,255,0.12),rgba(90,200,250,0.16)); color:#0a66c8; margin-bottom:14px;
}
.pricing-page .prc-how-title { font-size:1rem; font-weight:750; color:#11151f; margin:0 0 8px; }
.pricing-page .prc-how-desc { font-size:0.82rem; line-height:1.5; color:rgba(40,50,70,0.7); margin:0; }
.pricing-page .prc-how-arrow { display:flex; align-items:center; font-size:1.4rem; color:rgba(0,122,255,0.5); flex-shrink:0; }
/* ═══ 10. "ALWAYS INCLUDED" GRID ═══════════════════════════════════════════ */
.pricing-page .prc-always-cards {
display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px);
}
.pricing-page .prc-always-card {
background: linear-gradient(170deg, rgba(255,255,255,0.98), rgba(247,249,253,0.94));
border:1px solid rgba(0,122,255,0.1); border-radius:18px;
padding: clamp(18px,2vw,26px);
box-shadow: 0 10px 26px rgba(20,30,60,0.07);
transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s;
}
.pricing-page .prc-always-card:hover { transform:translateY(-5px); box-shadow:0 20px 40px rgba(20,30,60,0.13); }
.pricing-page .prc-always-card-icon {
width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:13px;
}
.pricing-page .prc-aci--blue { background:linear-gradient(135deg,rgba(0,122,255,0.14),rgba(90,200,250,0.16)); color:#0a66c8; }
.pricing-page .prc-aci--teal { background:linear-gradient(135deg,rgba(140,245,208,0.18),rgba(90,200,250,0.14)); color:#0a9b78; }
.pricing-page .prc-aci--green { background:linear-gradient(135deg,rgba(52,199,89,0.16),rgba(140,245,208,0.14)); color:#1a9b46; }
.pricing-page .prc-aci--purple { background:linear-gradient(135deg,rgba(168,85,247,0.16),rgba(120,90,230,0.12)); color:#8b4fd0; }
.pricing-page .prc-aci--gold { background:linear-gradient(135deg,rgba(255,200,80,0.18),rgba(255,159,67,0.14)); color:#c88a1a; }
.pricing-page .prc-aci--gray { background:linear-gradient(135deg,rgba(120,140,170,0.16),rgba(90,110,140,0.12)); color:#5a6a82; }
.pricing-page .prc-always-card-title { font-size:0.98rem; font-weight:750; color:#11151f; margin:0 0 7px; }
.pricing-page .prc-always-card-desc { font-size:0.82rem; line-height:1.5; color:rgba(40,50,70,0.72); margin:0; }
/* ═══ 11. TRUST SECTION ════════════════════════════════════════════════════ */
.pricing-page .prc-trust-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); }
.pricing-page .prc-trust-col {
background: linear-gradient(170deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
border:1px solid rgba(171,220,255,0.14); border-radius:22px;
padding: clamp(24px,2.6vw,38px); text-align:center;
backdrop-filter: blur(20px);
box-shadow: 0 16px 40px rgba(0,0,0,0.32);
transition: transform .3s, box-shadow .3s;
}
.pricing-page .prc-trust-col:hover { transform:translateY(-6px); box-shadow:0 28px 56px rgba(0,0,0,0.4),0 0 36px rgba(90,200,250,0.12); }
.pricing-page .prc-trust-icon { width:62px; height:62px; border-radius:18px; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.pricing-page .prc-trust-icon--green { background:linear-gradient(135deg,rgba(52,199,89,0.2),rgba(140,245,208,0.14)); color:#34c759; }
.pricing-page .prc-trust-icon--blue { background:linear-gradient(135deg,rgba(0,122,255,0.2),rgba(90,200,250,0.16)); color:#5ac8fa; }
.pricing-page .prc-trust-icon--purple{ background:linear-gradient(135deg,rgba(168,85,247,0.2),rgba(120,90,230,0.14)); color:#a855f7; }
.pricing-page .prc-trust-stat {
font-size:clamp(1.8rem,1.3rem+1.6vw,2.6rem); font-weight:850; letter-spacing:-0.03em; margin-bottom:6px;
background:linear-gradient(120deg,#5ac8fa,#8cf5d0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.pricing-page .prc-trust-col-title { font-size:1.05rem; font-weight:750; color:#f0f4ff; margin-bottom:10px; }
.pricing-page .prc-trust-col-desc { font-size:0.85rem; line-height:1.55; color:rgba(220,230,245,0.74); margin:0; }
/* ═══ 12. CTA FINAL ════════════════════════════════════════════════════════ */
.pricing-page .rd-cta-section { text-align:center; }
.pricing-page .rd-cta-eyebrow {
display:inline-block; font-size:0.72rem; font-weight:800; letter-spacing:0.18em; text-transform:uppercase;
color:#7cc6ff; margin-bottom:18px;
}
.pricing-page .rd-cta-title {
font-size:clamp(2.4rem,1.6rem+3.4vw,4.6rem) !important; font-weight:850 !important;
letter-spacing:-0.04em !important; line-height:1.02 !important; margin:0 0 18px !important; color:#f0f4ff;
}
.pricing-page .rd-cta-sub { font-size:clamp(1rem,0.92rem+0.4vw,1.2rem); color:rgba(220,230,245,0.8); max-width:560px; margin:0 auto 30px; }
.pricing-page .rd-cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
/* ═══ 13. REVEAL ANIMATIONS ════════════════════════════════════════════════ */
.pricing-page [data-rd-reveal] {
opacity:0; transform:translateY(28px);
transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
.pricing-page [data-rd-reveal].rd-visible { opacity:1; transform:translateY(0); }
.pricing-page [data-rd-reveal][data-rd-delay="1"] { transition-delay:.08s; }
.pricing-page [data-rd-reveal][data-rd-delay="2"] { transition-delay:.16s; }
.pricing-page [data-rd-reveal][data-rd-delay="3"] { transition-delay:.24s; }
.pricing-page [data-rd-reveal][data-rd-delay="4"] { transition-delay:.32s; }
/* staggered plan-card entrance */
.pricing-page .prc-cards-grid--4 .prc-plan-card[data-rd-reveal] { transform: translateY(36px) scale(0.97); }
.pricing-page .prc-cards-grid--4 .prc-plan-card[data-rd-reveal].rd-visible { transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
.pricing-page [data-rd-reveal] { opacity:1 !important; transform:none !important; }
.pricing-page .prc-section--dark::before,
.pricing-page .prc-section--dark::after,
.pricing-page .prc-trust-section::before,
.pricing-page .prc-trust-section::after { animation:none !important; }
}
/* ═══ 14. RESPONSIVE — keep sections viewport-fit on tablet/mobile ═════════ */
@media (max-width: 1024px) {
.pricing-page .prc-cards-grid--4 { grid-template-columns:repeat(2,1fr) !important; }
.pricing-page .prc-tenant-layout { grid-template-columns:1fr; }
.pricing-page .prc-always-cards { grid-template-columns:repeat(2,1fr); }
.pricing-page .prc-trust-grid { grid-template-columns:1fr; }
.pricing-page .prc-agency-metrics { grid-template-columns:repeat(2,1fr); }
.pricing-page .prc-how-flow { flex-wrap:wrap; }
.pricing-page .prc-how-arrow { display:none; }
.pricing-page .prc-owner-benefits { flex-direction:column; }
.pricing-page .prc-owner-benefit-sep { width:auto; height:1px; }
/* sections grow naturally on small screens */
.pricing-page .prc-hero,
.pricing-page .prc-section,
.pricing-page .rd-cta-section { min-height:auto !important; padding:clamp(56px,9vh,90px) 0 !important; }
}
@media (max-width: 640px) {
.pricing-page .prc-cards-grid--4 { grid-template-columns:1fr !important; }
.pricing-page .prc-always-cards { grid-template-columns:1fr; }
.pricing-page .prc-hero-stats { flex-wrap:wrap; }
}
/* ════════════════════════════════════════════════════════════════
PRICING REDESIGN PASS 2 — readability fixes + hero polish
════════════════════════════════════════════════════════════════ */
/* (a) Fix the 3% hero number being cut off — give it room + center */
.prc-mock-fee-hero,
.prc-tenant-fee-hero {
display: inline-block;
padding: 8px 24px;
line-height: 1 !important;
overflow: visible !important;
white-space: nowrap;
}
.prc-tenant-fee-hero strong {
font-size: clamp(4rem, 9vw, 7rem) !important;
font-weight: 900;
line-height: 1 !important;
display: inline-block;
letter-spacing: -0.04em;
overflow: visible !important;
}
/* (b) Highlighted PRO card readability — replace the washed light-purple with
a proper Apple-style liquid glass that pops on the section background */
.prc-pricing-card--featured,
.prc-pricing-card.is-featured,
.prc-card--popular {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%),
rgba(10, 14, 24, 0.85) !important;
border: 1.5px solid rgba(140, 245, 208, 0.45) !important;
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
color: #f0f4ff !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.1) inset,
0 20px 60px rgba(0, 0, 0, 0.5),
0 0 60px rgba(0, 122, 255, 0.25),
0 0 0 1px rgba(140, 245, 208, 0.2);
}
.prc-pricing-card--featured *,
.prc-pricing-card.is-featured *,
.prc-card--popular * {
color: inherit;
}
.prc-pricing-card--featured .prc-card-price,
.prc-pricing-card.is-featured .prc-card-price,
.prc-card--popular .prc-card-price {
color: #fff !important;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.prc-pricing-card--featured .prc-card-cta,
.prc-pricing-card.is-featured .prc-card-cta,
.prc-card--popular .prc-card-cta {
background: linear-gradient(135deg, #007AFF 0%, #5ac8fa 50%, #8cf5d0 100%) !important;
color: #fff !important;
border: none !important;
font-weight: 700;
box-shadow:
0 10px 28px rgba(0, 122, 255, 0.45),
0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}
/* (c) "LE PLUS CHOISI" pill: was green-on-green/teal — make it pop */
.prc-card-badge,
.prc-card-popular-badge,
.prc-pricing-card--featured .prc-card-badge,
.prc-pricing-card.is-featured .prc-card-badge {
background: linear-gradient(135deg, #007AFF, #5ac8fa) !important;
color: #fff !important;
border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
padding: 5px 14px !important;
border-radius: 999px !important;
font-size: 0.7rem !important;
font-weight: 800 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
box-shadow:
0 6px 18px rgba(0, 122, 255, 0.5),
0 0 0 2px rgba(140, 245, 208, 0.25) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* (d) Reduce purple madness: tone down the light-purple section to something
closer to "subtle glass" instead of saturated purple */
.prc-section--light-purple {
background:
radial-gradient(ellipse 60% 50% at 50% 0%, rgba(124, 58, 237, 0.06) 0%, transparent 60%),
#f5f5f7 !important;
}
.prc-section--light-purple .prc-pricing-card {
background: rgba(255, 255, 255, 0.9) !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.06),
0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
/* (e) TRUST section (FIABILITÉ) — was tiny + broken colors. Make it hero. */
.prc-trust-section {
background:
radial-gradient(ellipse 50% 40% at 50% 0%, rgba(0, 122, 255, 0.08) 0%, transparent 60%),
radial-gradient(ellipse 40% 30% at 50% 100%, rgba(140, 245, 208, 0.06) 0%, transparent 60%),
#05070d !important;
}
.prc-trust-section .rd-eyebrow {
font-size: 0.85rem !important;
padding: 8px 18px !important;
}
.prc-trust-section .rd-h2 {
font-size: clamp(3rem, 7vw, 6.5rem) !important;
margin-bottom: 60px;
}
.prc-trust-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
margin-top: 40px;
}
.prc-trust-col {
padding: 40px 28px !important;
border-radius: 24px !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%),
rgba(10, 14, 24, 0.6) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
text-align: center;
transition: transform .3s ease, border-color .3s ease;
position: relative;
overflow: hidden;
}
.prc-trust-col::before {
content: '';
position: absolute;
top: 0; left: 50%;
width: 60%;
height: 1px;
transform: translateX(-50%);
background: linear-gradient(90deg, transparent, rgba(140, 245, 208, 0.5), transparent);
opacity: 0.6;
}
.prc-trust-col:hover {
transform: translateY(-4px);
border-color: rgba(140, 245, 208, 0.4) !important;
}
.prc-trust-col--accent {
background:
linear-gradient(135deg, rgba(0, 122, 255, 0.15) 0%, rgba(140, 245, 208, 0.05) 100%),
rgba(8, 12, 22, 0.85) !important;
border-color: rgba(140, 245, 208, 0.35) !important;
box-shadow:
0 20px 60px rgba(0, 122, 255, 0.25),
0 0 0 1px rgba(140, 245, 208, 0.2);
}
.prc-trust-icon {
width: 72px !important;
height: 72px !important;
border-radius: 18px !important;
margin: 0 auto 24px !important;
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.4),
0 1px 0 rgba(255, 255, 255, 0.12) inset;
}
.prc-trust-icon--green { color: #8cf5d0; }
.prc-trust-icon--blue { color: #5ac8fa; }
.prc-trust-icon--purple { color: #a78bfa; }
.prc-trust-stat {
font-size: clamp(3rem, 6vw, 5rem) !important;
font-weight: 900 !important;
line-height: 1 !important;
letter-spacing: -0.04em !important;
margin-bottom: 16px !important;
background: linear-gradient(135deg, #ffffff 0%, #8cf5d0 50%, #5ac8fa 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 2px 24px rgba(140, 245, 208, 0.3);
}
.prc-trust-col-title {
font-size: 1.15rem !important;
font-weight: 700 !important;
margin-bottom: 12px !important;
color: #f0f4ff !important;
letter-spacing: -0.01em;
}
.prc-trust-col-desc {
font-size: 0.92rem !important;
line-height: 1.55 !important;
color: rgba(240, 244, 255, 0.7) !important;
margin: 0;
}
/* (f) "INCLUS DANS CHAQUE PLAN" eyebrow visibility — was green on light-green */
.prc-section--light .rd-eyebrow,
.prc-section .rd-eyebrow {
background: linear-gradient(135deg, rgba(0, 122, 255, 0.10), rgba(140, 245, 208, 0.08)) !important;
color: #0055bb !important;
border: 1px solid rgba(0, 122, 255, 0.25) !important;
padding: 8px 18px !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
border-radius: 999px !important;
}
/* (g) "Always inclus" cards — more hero, less plain */
.prc-always-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 40px;
}
.prc-always-card {
padding: 36px 28px !important;
border-radius: 22px !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 247, 250, 0.85) 100%) !important;
border: 1px solid rgba(0, 0, 0, 0.06) !important;
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.06),
0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
transition: transform .3s ease, box-shadow .3s ease;
}
.prc-always-card:hover {
transform: translateY(-4px);
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.1),
0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
}
.prc-always-card-icon {
width: 64px !important;
height: 64px !important;
border-radius: 16px !important;
margin-bottom: 22px !important;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}
.prc-aci--blue { background: linear-gradient(135deg, #e0f0ff, #c7e3ff); color: #0055bb; }
.prc-aci--teal { background: linear-gradient(135deg, #d8fbe9, #b8f0d8); color: #006b5e; }
.prc-aci--green { background: linear-gradient(135deg, #dcf7d8, #b9eeb0); color: #2d7a1f; }
.prc-aci--purple { background: linear-gradient(135deg, #ebe0ff, #d4c3ff); color: #5b2eb8; }
.prc-aci--orange { background: linear-gradient(135deg, #ffe9d4, #ffd5a8); color: #b15c08; }
.prc-aci--gray { background: linear-gradient(135deg, #ecedf2, #d8dae3); color: #424b6a; }
.prc-always-card-title {
font-size: 1.2rem !important;
font-weight: 700 !important;
color: #0a1424 !important;
margin-bottom: 10px !important;
letter-spacing: -0.01em;
}
.prc-always-card-desc {
font-size: 0.92rem !important;
line-height: 1.55 !important;
color: #424b6a !important;
}
/* ════════════════════════════════════════════════════════════════
PRICING HERO PASS 3 — fill the viewport (home-style depth)
════════════════════════════════════════════════════════════════ */
/* Hero orbs (HTML elements that were unstyled — now massive blurred glows) */
.pricing-page .prc-hero {
position: relative;
overflow: hidden;
/* distribute content top→bottom, not clustered in middle */
justify-content: space-evenly !important;
align-items: stretch !important;
}
.pricing-page .prc-hero-orb {
position: absolute;
border-radius: 50%;
filter: blur(72px);
pointer-events: none;
z-index: 0;
will-change: transform;
}
.pricing-page .prc-hero-orb--1 {
width: clamp(480px, 50vw, 760px);
height: clamp(480px, 50vw, 760px);
top: -180px;
left: -140px;
background: radial-gradient(circle, rgba(26, 140, 255, 0.38) 0%, rgba(26, 140, 255, 0.07) 55%, transparent 72%);
animation: prc-orb-float 14s ease-in-out infinite alternate;
}
.pricing-page .prc-hero-orb--2 {
width: clamp(400px, 45vw, 640px);
height: clamp(400px, 45vw, 640px);
top: 80px;
right: -100px;
background: radial-gradient(circle, rgba(140, 245, 208, 0.30) 0%, rgba(140, 245, 208, 0.05) 55%, transparent 72%);
animation: prc-orb-float 18s ease-in-out infinite alternate-reverse;
}
.pricing-page .prc-hero-orb--3 {
width: clamp(320px, 36vw, 540px);
height: clamp(320px, 36vw, 540px);
bottom: -100px;
left: 32%;
background: radial-gradient(circle, rgba(168, 85, 247, 0.22) 0%, rgba(168, 85, 247, 0.04) 55%, transparent 72%);
animation: prc-orb-float 22s ease-in-out infinite alternate;
}
@keyframes prc-orb-float {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(20px, -24px, 0) scale(1.05); }
100% { transform: translate3d(-14px, 16px, 0) scale(0.97); }
}
/* Grid pattern behind everything (subtle, like home) */
.pricing-page .prc-hero::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(26, 140, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(26, 140, 255, 0.04) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 80%);
pointer-events: none;
z-index: 0;
}
/* Hero inner — make content stretch vertically to fill the viewport */
.pricing-page .prc-hero > .rd-container {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: space-between !important;
align-items: stretch;
min-height: 75vh;
padding: clamp(20px, 4vh, 60px) 16px;
}
.pricing-page .prc-hero-content {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
flex: 1;
gap: clamp(24px, 5vh, 56px);
min-height: 0;
}
/* Bigger headline (matching home hero scale) */
.pricing-page .prc-h1 {
font-size: clamp(3.5rem, 9vw, 8rem) !important;
font-weight: 900 !important;
letter-spacing: -0.04em !important;
line-height: 0.96 !important;
margin: 0 !important;
}
.pricing-page .prc-hero-lead {
font-size: clamp(1.05rem, 1.7vw, 1.4rem) !important;
max-width: 700px;
margin: 0 auto !important;
opacity: 0.85;
line-height: 1.55;
}
/* Stats trio — bigger, more present */
.pricing-page .prc-hero-stats {
padding: clamp(20px, 3vh, 36px) clamp(28px, 5vw, 64px) !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%),
rgba(8, 12, 22, 0.55) !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
border-radius: 22px !important;
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 24px 60px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(140, 245, 208, 0.10) inset;
gap: clamp(28px, 5vw, 56px) !important;
}
.pricing-page .prc-hero-stat strong {
font-size: clamp(2.4rem, 4vw, 3.6rem) !important;
font-weight: 900 !important;
letter-spacing: -0.03em !important;
background: linear-gradient(135deg, #ffffff 0%, #8cf5d0 50%, #5ac8fa 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 2px 24px rgba(140, 245, 208, 0.25);
line-height: 1 !important;
}
.pricing-page .prc-hero-stat span {
font-size: 0.72rem !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
opacity: 0.7;
margin-top: 6px;
}
/* Audience nav pills — bigger, more clickable */
.pricing-page .prc-audience-nav {
gap: 14px !important;
flex-wrap: wrap;
justify-content: center;
}
.pricing-page .prc-aud-pill {
padding: 14px 28px !important;
font-size: 0.95rem !important;
border-radius: 999px !important;
transition: transform .2s ease, box-shadow .2s ease, filter .15s ease;
}
.pricing-page .prc-aud-pill:hover {
transform: translateY(-2px);
filter: brightness(1.08);
}
/* Decorative bottom-right corner accent line */
.pricing-page .prc-hero::after {
content: '';
position: absolute;
width: 1px;
height: 80px;
bottom: 4vh;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(180deg, transparent, rgba(140, 245, 208, 0.5), transparent);
pointer-events: none;
z-index: 1;
opacity: 0.6;
}
/* Re-position the scroll-dot indicator to bottom */
.pricing-page .prc-hero-scroll {
position: absolute !important;
bottom: clamp(16px, 3vh, 32px) !important;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
@media (max-width: 720px) {
.pricing-page .prc-hero-orb--1 { width: 360px; height: 360px; }
.pricing-page .prc-hero-orb--2 { width: 300px; height: 300px; }
.pricing-page .prc-hero-orb--3 { width: 240px; height: 240px; }
.pricing-page .prc-h1 { font-size: clamp(2.6rem, 12vw, 4.2rem) !important; }
.pricing-page .prc-hero-stats { padding: 16px 20px !important; gap: 18px !important; }
.pricing-page .prc-hero-stat strong { font-size: 2rem !important; }
}
/* ════════════════════════════════════════════════════════════════════
PRICING REDESIGN PASS 4 — Apple-style mega refinement
════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────
(1) COMMENT ÇA MARCHE — total rebuild
Wide, hero, minimal, Apple-style. 4 massive chapters with
gradient icon orbs, watermark numbers, glass cards, animated
connecting flow line.
───────────────────────────────────────────────────────────────── */
.pricing-page .prc-how-section {
position: relative;
overflow: hidden;
}
/* Background depth — same orbs treatment as hero */
.pricing-page .prc-how-section::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0, 122, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 122, 255, 0.04) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%);
pointer-events: none;
z-index: 0;
}
.pricing-page .prc-how-section .rd-container {
position: relative;
z-index: 1;
max-width: 1400px;
}
/* Title — bigger, hero-scale matching home */
.pricing-page .prc-how-section .rd-h2 {
font-size: clamp(3rem, 7vw, 6.5rem) !important;
margin-bottom: 80px !important;
line-height: 0.96 !important;
}
/* Rebuild the flow as a 4-column grid with connecting line */
.pricing-page .prc-how-flow {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
position: relative;
margin-top: 60px;
padding: 60px 0 40px;
}
/* The connecting flow line (decorative) */
.pricing-page .prc-how-flow::before {
content: '';
position: absolute;
top: 116px;
left: 12.5%;
right: 12.5%;
height: 2px;
background: linear-gradient(
90deg,
rgba(0, 122, 255, 0) 0%,
rgba(0, 122, 255, 0.4) 8%,
rgba(90, 200, 250, 0.5) 33%,
rgba(140, 245, 208, 0.5) 66%,
rgba(140, 245, 208, 0.4) 92%,
rgba(140, 245, 208, 0) 100%
);
z-index: 0;
filter: blur(0.5px);
animation: prc-flow-pulse 3s ease-in-out infinite;
}
@keyframes prc-flow-pulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
/* Hide the old arrows entirely */
.pricing-page .prc-how-arrow { display: none !important; }
/* Step container */
.pricing-page .prc-how-step {
position: relative;
padding: 0 24px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
background: transparent !important;
border: none !important;
z-index: 1;
}
/* Massive watermark number behind everything (01, 02, 03, 04) */
.pricing-page .prc-how-num {
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
font-size: clamp(7rem, 11vw, 11rem) !important;
font-weight: 900 !important;
letter-spacing: -0.06em !important;
line-height: 1 !important;
background: linear-gradient(135deg, rgba(0, 122, 255, 0.06) 0%, rgba(140, 245, 208, 0.04) 100%) !important;
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
pointer-events: none;
z-index: 0;
font-family: 'SF Pro Display', -apple-system, system-ui, sans-serif;
}
/* Each step gets its own gradient color flowing across the row */
.pricing-page .prc-how-step:nth-child(1) .prc-how-icon { --grad-1: #007AFF; --grad-2: #5ac8fa; }
.pricing-page .prc-how-step:nth-child(3) .prc-how-icon { --grad-1: #5ac8fa; --grad-2: #8cf5d0; }
.pricing-page .prc-how-step:nth-child(5) .prc-how-icon { --grad-1: #8cf5d0; --grad-2: #34d399; }
.pricing-page .prc-how-step:nth-child(7) .prc-how-icon { --grad-1: #34d399; --grad-2: #06b6d4; }
/* Icon orb — large, gradient, glass, glowing */
.pricing-page .prc-how-icon {
position: relative;
z-index: 2;
width: 96px !important;
height: 96px !important;
border-radius: 28px !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 100%),
linear-gradient(135deg, var(--grad-1, #007AFF) 0%, var(--grad-2, #5ac8fa) 100%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #fff !important;
margin: 0 auto 24px !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.18) inset,
0 0 24px rgba(0, 122, 255, 0.35),
0 16px 40px rgba(0, 0, 0, 0.4) !important;
transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.pricing-page .prc-how-icon svg {
width: 36px !important;
height: 36px !important;
stroke-width: 1.7 !important;
}
.pricing-page .prc-how-step:hover .prc-how-icon {
transform: scale(1.08) translateY(-4px);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.25) inset,
0 0 40px rgba(140, 245, 208, 0.5),
0 24px 60px rgba(0, 0, 0, 0.5) !important;
}
/* Glass card below the icon containing title + description */
.pricing-page .prc-how-step .prc-how-title,
.pricing-page .prc-how-step .prc-how-desc {
position: relative;
z-index: 2;
}
.pricing-page .prc-how-title {
font-size: clamp(1.1rem, 1.5vw, 1.4rem) !important;
font-weight: 700 !important;
color: #f0f4ff !important;
margin: 0 0 12px 0 !important;
letter-spacing: -0.01em !important;
}
.pricing-page .prc-how-desc {
font-size: 0.92rem !important;
line-height: 1.55 !important;
color: rgba(240, 244, 255, 0.65) !important;
margin: 0 !important;
max-width: 220px;
}
/* Light section variant — adjust text colors */
.pricing-page .prc-section--light .prc-how-num {
background: linear-gradient(135deg, rgba(0, 122, 255, 0.08) 0%, rgba(0, 122, 255, 0.04) 100%) !important;
-webkit-background-clip: text;
background-clip: text;
}
.pricing-page .prc-section--light .prc-how-title { color: #0a1424 !important; }
.pricing-page .prc-section--light .prc-how-desc { color: #424b6a !important; }
.pricing-page .prc-section--light .prc-how-flow::before {
background: linear-gradient(
90deg,
rgba(0, 122, 255, 0) 0%,
rgba(0, 122, 255, 0.5) 8%,
rgba(56, 178, 230, 0.6) 33%,
rgba(45, 122, 31, 0.5) 66%,
rgba(45, 122, 31, 0.4) 92%,
rgba(45, 122, 31, 0) 100%
);
}
/* Mobile: stack vertically with vertical line */
@media (max-width: 900px) {
.pricing-page .prc-how-flow {
grid-template-columns: 1fr;
gap: 56px;
padding: 40px 0;
}
.pricing-page .prc-how-flow::before {
top: 60px;
left: 50%;
right: auto;
bottom: 60px;
width: 2px;
height: auto;
background: linear-gradient(180deg,
rgba(0, 122, 255, 0) 0%,
rgba(0, 122, 255, 0.4) 8%,
rgba(140, 245, 208, 0.4) 92%,
rgba(140, 245, 208, 0) 100%);
}
.pricing-page .prc-how-num { top: -36px; font-size: 7rem !important; }
}
/* ─────────────────────────────────────────────────────────────────
(2) FIX the "3%" cut off — was overflowing parent
───────────────────────────────────────────────────────────────── */
.pricing-page .prc-tenant-card,
.pricing-page .prc-tenant-fee-wrap {
overflow: visible !important;
}
.pricing-page .prc-tenant-fee {
display: flex !important;
align-items: flex-start;
justify-content: center;
line-height: 1 !important;
padding: 16px 32px !important;
overflow: visible !important;
}
.pricing-page .prc-fee-num {
font-size: clamp(5rem, 10vw, 8rem) !important;
font-weight: 900 !important;
letter-spacing: -0.04em !important;
line-height: 1 !important;
background: linear-gradient(135deg, #ffffff 0%, #8cf5d0 50%, #5ac8fa 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: inline-block;
padding: 0 6px;
}
.pricing-page .prc-fee-unit {
font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
font-weight: 700 !important;
margin-left: 4px;
margin-top: 14px;
color: #8cf5d0;
}
/* ─────────────────────────────────────────────────────────────────
(3) Tenant CTA "Crea il tuo profilo gratis" — proper Apple button
(was rendering as bare blue text link)
───────────────────────────────────────────────────────────────── */
.pricing-page .prc-cta-btn,
.pricing-page .prc-tenant-card .rd-btn--primary {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 32px !important;
margin-top: 32px !important;
background: linear-gradient(135deg, #007AFF 0%, #5ac8fa 50%, #8cf5d0 100%) !important;
color: #fff !important;
font-size: 0.98rem !important;
font-weight: 700 !important;
letter-spacing: 0.005em !important;
border-radius: 999px !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
text-decoration: none !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.15) inset,
0 12px 32px rgba(0, 122, 255, 0.45),
0 0 0 0 rgba(140, 245, 208, 0.0) !important;
transition: transform .2s ease, box-shadow .3s ease, filter .15s ease !important;
align-self: center;
}
.pricing-page .prc-cta-btn:hover,
.pricing-page .prc-tenant-card .rd-btn--primary:hover {
transform: translateY(-2px) scale(1.02);
filter: brightness(1.08);
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.22) inset,
0 16px 42px rgba(0, 122, 255, 0.55),
0 0 0 6px rgba(140, 245, 208, 0.15) !important;
}
/* ─────────────────────────────────────────────────────────────────
(4) "LE PLUS CHOISI" badge on BUSINESS card (turquoise bg)
was invisible. Apple-style: dark glass pill with mint text.
───────────────────────────────────────────────────────────────── */
/* Override the previous PASS 2 rule which forced blue gradient
everywhere; on the turquoise BUSINESS card we need DARK glass */
.pricing-page .prc-pricing-card--featured .prc-card-badge,
.pricing-page .prc-pricing-card.is-featured .prc-card-badge,
.pricing-page .prc-card--popular .prc-card-badge,
.pricing-page .prc-card-badge,
.pricing-page .prc-card-popular-badge {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%) !important;
color: #007AFF !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
padding: 6px 16px !important;
border-radius: 999px !important;
font-size: 0.72rem !important;
font-weight: 800 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
text-shadow: none !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.6) inset,
0 4px 16px rgba(0, 0, 0, 0.25),
0 0 0 3px rgba(0, 0, 0, 0.06) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
position: relative;
z-index: 4;
}
/* Specifically on the BUSINESS (turquoise/cyan) agency card:
white pill stands out against bright green-cyan gradient */
.pricing-page .prc-pricing-card[data-tier="business"] .prc-card-badge,
.pricing-page .prc-card--business .prc-card-badge {
background: #ffffff !important;
color: #0a1424 !important;
text-shadow: none !important;
border-color: transparent !important;
box-shadow:
0 4px 18px rgba(0, 0, 0, 0.35),
0 0 0 2px rgba(255, 255, 255, 0.4) !important;
}
/* ─────────────────────────────────────────────────────────────────
(5) Pricing card refinements: consistent glass treatment,
better typography hierarchy
───────────────────────────────────────────────────────────────── */
.pricing-page .prc-pricing-card {
border-radius: 24px !important;
transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.pricing-page .prc-pricing-card:hover {
transform: translateY(-6px);
box-shadow: 0 28px 64px rgba(0, 0, 0, 0.15);
}
.pricing-page .prc-pricing-card--featured {
transform: scale(1.04);
}
.pricing-page .prc-pricing-card--featured:hover {
transform: scale(1.04) translateY(-6px);
}
/* ════════════════════════════════════════════════════════════════════
PRICING REDESIGN PASS 5 — Apple polish: trust cards, dark inclus, CTA
════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────
(A) FIX: remove the gradient line cutting through trust card tops
(PASS 2 had a ::before on .prc-trust-col that read as a horizontal
line slashing the card edges)
───────────────────────────────────────────────────────────────── */
.pricing-page .prc-trust-col::before { content: none !important; }
.pricing-page .prc-trust-col::after { content: none !important; }
/* ─────────────────────────────────────────────────────────────────
(B) "Toujours inclus" — DARK premium glass redesign
───────────────────────────────────────────────────────────────── */
.pricing-page .prc-always-section {
position: relative;
overflow: hidden;
}
/* Hero-scale headline matching home */
.pricing-page .prc-always-section .rd-h2 {
font-size: clamp(3rem, 7vw, 6.5rem) !important;
margin-bottom: 60px !important;
line-height: 0.96 !important;
}
.pricing-page .prc-always-section .rd-lead {
font-size: clamp(1.05rem, 1.6vw, 1.3rem) !important;
opacity: 0.75;
margin-bottom: 64px !important;
}
/* Subtle grid pattern + orbs */
.pricing-page .prc-always-section::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0, 122, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 122, 255, 0.04) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 30%, transparent 80%);
pointer-events: none;
z-index: 0;
}
.pricing-page .prc-always-section .rd-container { position: relative; z-index: 1; }
/* Grid: 3 cols × 2 rows on desktop, responsive */
.pricing-page .prc-always-section .prc-always-cards {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px !important;
margin-top: 40px;
}
/* Premium glass cards on the dark variant */
.pricing-page .prc-always-section .prc-always-card {
position: relative;
padding: 44px 32px !important;
border-radius: 26px !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%),
rgba(10, 14, 24, 0.55) !important;
border: 1px solid rgba(255, 255, 255, 0.10) !important;
backdrop-filter: blur(24px) saturate(140%);
-webkit-backdrop-filter: blur(24px) saturate(140%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.08) inset,
0 18px 48px rgba(0, 0, 0, 0.45) !important;
transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease;
overflow: hidden;
}
.pricing-page .prc-always-section .prc-always-card:hover {
transform: translateY(-6px);
border-color: rgba(140, 245, 208, 0.35) !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.12) inset,
0 28px 60px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(140, 245, 208, 0.2) !important;
}
/* Glow halo accent per card (color matches the icon) */
.pricing-page .prc-always-section .prc-always-card::before {
content: '';
position: absolute;
top: -80px;
right: -80px;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, var(--card-glow, rgba(0, 122, 255, 0.18)), transparent 70%);
filter: blur(40px);
pointer-events: none;
opacity: 0.7;
transition: opacity .3s ease;
}
.pricing-page .prc-always-section .prc-always-card:hover::before { opacity: 1; }
.pricing-page .prc-always-section .prc-always-card:nth-child(1) { --card-glow: rgba(0, 122, 255, 0.20); }
.pricing-page .prc-always-section .prc-always-card:nth-child(2) { --card-glow: rgba(140, 245, 208, 0.20); }
.pricing-page .prc-always-section .prc-always-card:nth-child(3) { --card-glow: rgba(52, 211, 153, 0.20); }
.pricing-page .prc-always-section .prc-always-card:nth-child(4) { --card-glow: rgba(167, 139, 250, 0.20); }
.pricing-page .prc-always-section .prc-always-card:nth-child(5) { --card-glow: rgba(251, 146, 60, 0.20); }
.pricing-page .prc-always-section .prc-always-card:nth-child(6) { --card-glow: rgba(120, 130, 160, 0.20); }
/* Bigger gradient icon orbs on dark */
.pricing-page .prc-always-section .prc-always-card-icon {
width: 76px !important;
height: 76px !important;
border-radius: 20px !important;
margin-bottom: 28px !important;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.20) inset,
0 10px 30px rgba(0, 0, 0, 0.5),
0 0 22px var(--card-glow, rgba(0, 122, 255, 0.25));
}
.pricing-page .prc-always-section .prc-always-card-icon svg { width: 30px; height: 30px; }
/* dark-mode icon colours — recolor with lighter glass variant */
.pricing-page .prc-always-section .prc-aci--blue {
background: linear-gradient(135deg, rgba(0, 122, 255, 0.95), rgba(90, 200, 250, 0.7)) !important;
color: #fff !important;
}
.pricing-page .prc-always-section .prc-aci--teal {
background: linear-gradient(135deg, rgba(20, 184, 166, 0.95), rgba(140, 245, 208, 0.75)) !important;
color: #fff !important;
}
.pricing-page .prc-always-section .prc-aci--green {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.95), rgba(140, 245, 208, 0.7)) !important;
color: #fff !important;
}
.pricing-page .prc-always-section .prc-aci--purple {
background: linear-gradient(135deg, rgba(124, 58, 237, 0.95), rgba(167, 139, 250, 0.75)) !important;
color: #fff !important;
}
.pricing-page .prc-always-section .prc-aci--orange {
background: linear-gradient(135deg, rgba(249, 115, 22, 0.95), rgba(251, 191, 36, 0.75)) !important;
color: #fff !important;
}
.pricing-page .prc-always-section .prc-aci--gray {
background: linear-gradient(135deg, rgba(100, 116, 139, 0.95), rgba(148, 163, 184, 0.75)) !important;
color: #fff !important;
}
/* Card typography on dark */
.pricing-page .prc-always-section .prc-always-card-title {
font-size: 1.35rem !important;
font-weight: 700 !important;
color: #f0f4ff !important;
margin-bottom: 12px !important;
letter-spacing: -0.01em;
position: relative;
z-index: 1;
}
.pricing-page .prc-always-section .prc-always-card-desc {
font-size: 0.95rem !important;
line-height: 1.6 !important;
color: rgba(240, 244, 255, 0.65) !important;
position: relative;
z-index: 1;
}
/* ─────────────────────────────────────────────────────────────────
(C) MEGA REDESIGN — Final CTA "Commencez aujourd'hui"
Home-scale title + Apple-style gradient buttons (no bare blue links)
───────────────────────────────────────────────────────────────── */
.pricing-page .prc-cta-final {
position: relative;
overflow: hidden !important;
text-align: center;
background:
radial-gradient(900px 600px at 50% 0%, rgba(0, 122, 255, 0.15), transparent 65%),
radial-gradient(700px 500px at 80% 100%, rgba(140, 245, 208, 0.10), transparent 70%),
radial-gradient(700px 500px at 20% 100%, rgba(168, 85, 247, 0.10), transparent 70%),
linear-gradient(180deg, #060a10 0%, #03060a 100%) !important;
}
/* Three orbs floating in background */
.pricing-page .prc-cta-orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
z-index: 0;
will-change: transform;
}
.pricing-page .prc-cta-orb--1 {
width: clamp(420px, 50vw, 680px);
height: clamp(420px, 50vw, 680px);
top: -160px;
left: -120px;
background: radial-gradient(circle, rgba(0, 122, 255, 0.35) 0%, rgba(0, 122, 255, 0.06) 55%, transparent 72%);
animation: prc-cta-float 16s ease-in-out infinite alternate;
}
.pricing-page .prc-cta-orb--2 {
width: clamp(360px, 42vw, 580px);
height: clamp(360px, 42vw, 580px);
bottom: -100px;
right: -100px;
background: radial-gradient(circle, rgba(140, 245, 208, 0.30) 0%, rgba(140, 245, 208, 0.05) 55%, transparent 72%);
animation: prc-cta-float 20s ease-in-out infinite alternate-reverse;
}
.pricing-page .prc-cta-orb--3 {
width: clamp(280px, 36vw, 460px);
height: clamp(280px, 36vw, 460px);
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(168, 85, 247, 0.20) 0%, rgba(168, 85, 247, 0.03) 55%, transparent 72%);
animation: prc-cta-float 24s ease-in-out infinite alternate;
}
@keyframes prc-cta-float {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(20px, -22px, 0) scale(1.06); }
100% { transform: translate3d(-14px, 16px, 0) scale(0.96); }
}
.pricing-page .prc-cta-orb--3 {
/* keep the centering transform — override the keyframes' translate */
animation: none !important;
}
/* Grid pattern */
.pricing-page .prc-cta-grid-pattern {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(0, 122, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 122, 255, 0.04) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, black 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, black 30%, transparent 80%);
pointer-events: none;
z-index: 0;
}
.pricing-page .prc-cta-inner {
position: relative;
z-index: 2;
padding: 40px 16px !important;
}
/* Hero-scale title (same as home) */
.pricing-page .prc-cta-final .rd-cta-eyebrow {
display: inline-block;
padding: 10px 22px;
font-size: 0.85rem !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase;
background: linear-gradient(135deg, rgba(140, 245, 208, 0.12), rgba(0, 122, 255, 0.10)) !important;
color: #8cf5d0 !important;
border: 1px solid rgba(140, 245, 208, 0.35) !important;
border-radius: 999px !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
margin-bottom: 32px;
}
.pricing-page .prc-cta-final .rd-cta-title {
font-size: clamp(3.5rem, 9vw, 8rem) !important;
font-weight: 900 !important;
letter-spacing: -0.04em !important;
line-height: 0.96 !important;
margin: 0 0 32px 0 !important;
}
.pricing-page .prc-cta-final .rd-cta-sub {
font-size: clamp(1.15rem, 1.8vw, 1.5rem) !important;
max-width: 760px;
margin: 0 auto 48px !important;
color: rgba(240, 244, 255, 0.82) !important;
line-height: 1.55;
}
/* Buttons — real Apple gradient buttons, NOT bare blue text links */
.pricing-page .prc-cta-final .rd-cta-btns {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
gap: 18px !important;
margin-top: 40px;
}
.pricing-page .prc-cta-btn--primary,
.pricing-page .prc-cta-final .rd-btn--primary {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
padding: 20px 40px !important;
background: linear-gradient(135deg, #007AFF 0%, #5ac8fa 50%, #8cf5d0 100%) !important;
color: #ffffff !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
letter-spacing: 0.005em !important;
border-radius: 999px !important;
border: 1px solid rgba(255, 255, 255, 0.20) !important;
text-decoration: none !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 16px 40px rgba(0, 122, 255, 0.55),
0 0 0 0 rgba(140, 245, 208, 0.0) !important;
transition: transform .2s ease, box-shadow .3s ease, filter .15s ease !important;
position: relative;
z-index: 3;
}
.pricing-page .prc-cta-btn--primary:hover,
.pricing-page .prc-cta-final .rd-btn--primary:hover {
transform: translateY(-3px) scale(1.03);
filter: brightness(1.08);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.25) inset,
0 22px 56px rgba(0, 122, 255, 0.65),
0 0 0 8px rgba(140, 245, 208, 0.18) !important;
}
.pricing-page .prc-cta-btn--ghost,
.pricing-page .prc-cta-final .rd-btn--ghost {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
padding: 20px 40px !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 100%),
rgba(8, 12, 22, 0.45) !important;
color: #f0f4ff !important;
font-size: 1.05rem !important;
font-weight: 600 !important;
letter-spacing: 0.005em !important;
border-radius: 999px !important;
border: 1.5px solid rgba(140, 245, 208, 0.35) !important;
text-decoration: none !important;
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.10) inset,
0 12px 28px rgba(0, 0, 0, 0.35) !important;
transition: transform .2s ease, border-color .2s ease, background .25s ease !important;
position: relative;
z-index: 3;
}
.pricing-page .prc-cta-btn--ghost:hover,
.pricing-page .prc-cta-final .rd-btn--ghost:hover {
transform: translateY(-3px) scale(1.03);
border-color: rgba(140, 245, 208, 0.7) !important;
background:
linear-gradient(135deg, rgba(140, 245, 208, 0.18) 0%, rgba(0, 122, 255, 0.10) 100%),
rgba(8, 12, 22, 0.55) !important;
}
/* ════════════════════════════════════════════════════════════════════
PRICING REDESIGN PASS 6 — kill stray accent + scroll-staggered reveal
════════════════════════════════════════════════════════════════════ */
/* (A) Belt-and-suspenders kill of the rogue blue accent line — even on
stale caches it must not render */
.pricing-page .prc-tenant-accent {
display: none !important;
}
/* (B) Scroll-triggered staggered reveal for the 4 steps cards.
Uses pure CSS scroll-driven animations where supported (Chrome 115+,
Safari 26+), with IntersectionObserver fallback wired by .is-revealed
class added via tiny inline script at the end of pricing.html
(no extra JS file needed). */
.pricing-page .prc-how-step {
opacity: 0;
transform: translateY(40px) scale(0.96);
transition:
opacity .65s cubic-bezier(.2,.7,.2,1),
transform .65s cubic-bezier(.2,.7,.2,1);
}
.pricing-page .prc-how-step.is-revealed {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Stagger each card with progressive delay */
.pricing-page .prc-how-step:nth-of-type(1).is-revealed { transition-delay: 0.05s; }
.pricing-page .prc-how-step:nth-of-type(3).is-revealed { transition-delay: 0.18s; }
.pricing-page .prc-how-step:nth-of-type(5).is-revealed { transition-delay: 0.31s; }
.pricing-page .prc-how-step:nth-of-type(7).is-revealed { transition-delay: 0.44s; }
/* The flow line also reveals after the cards */
.pricing-page .prc-how-flow {
position: relative;
}
.pricing-page .prc-how-flow::before {
transform-origin: left center;
transform: scaleX(0);
transition: transform 1.4s cubic-bezier(.6,.05,.3,1) 0.5s;
}
.pricing-page .prc-how-flow.is-revealed::before {
transform: scaleX(1);
}
/* Number watermark fade-in after card */
.pricing-page .prc-how-num {
opacity: 0;
transform: translateX(-50%) translateY(20px);
transition: opacity 0.8s ease 0.3s, transform 0.8s cubic-bezier(.2,.7,.2,1) 0.3s;
}
.pricing-page .prc-how-step.is-revealed .prc-how-num {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.pricing-page .prc-how-step:nth-of-type(1).is-revealed .prc-how-num { transition-delay: 0.35s, 0.35s; }
.pricing-page .prc-how-step:nth-of-type(3).is-revealed .prc-how-num { transition-delay: 0.48s, 0.48s; }
.pricing-page .prc-how-step:nth-of-type(5).is-revealed .prc-how-num { transition-delay: 0.61s, 0.61s; }
.pricing-page .prc-how-step:nth-of-type(7).is-revealed .prc-how-num { transition-delay: 0.74s, 0.74s; }
/* Icon orb has its own subtle bounce on reveal */
.pricing-page .prc-how-icon {
opacity: 0;
transform: scale(0.7) rotate(-8deg);
transition: opacity 0.55s ease, transform 0.7s cubic-bezier(.34,1.56,.64,1);
}
.pricing-page .prc-how-step.is-revealed .prc-how-icon {
opacity: 1;
transform: scale(1) rotate(0);
}
.pricing-page .prc-how-step:nth-of-type(1).is-revealed .prc-how-icon { transition-delay: 0.15s, 0.15s; }
.pricing-page .prc-how-step:nth-of-type(3).is-revealed .prc-how-icon { transition-delay: 0.28s, 0.28s; }
.pricing-page .prc-how-step:nth-of-type(5).is-revealed .prc-how-icon { transition-delay: 0.41s, 0.41s; }
.pricing-page .prc-how-step:nth-of-type(7).is-revealed .prc-how-icon { transition-delay: 0.54s, 0.54s; }
/* Reduce motion: bypass all the reveal complexity */
@media (prefers-reduced-motion: reduce) {
.pricing-page .prc-how-step,
.pricing-page .prc-how-flow::before,
.pricing-page .prc-how-num,
.pricing-page .prc-how-icon {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ════════════════════════════════════════════════════════════════════
PRICING REDESIGN PASS 7 — stats card sizing + scroll dot + inclus
════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────────
(A) Hero stats card: the "3%" and "6" were bleeding past the card
edges left/right because the gradient-text numbers + tight
padding + letter-spacing made them wider than the card frame.
───────────────────────────────────────────────────────────────── */
.pricing-page .prc-hero-stats {
display: inline-flex !important;
width: auto !important;
max-width: min(820px, 92%) !important;
margin: 0 auto !important;
padding: clamp(22px, 3vh, 36px) clamp(40px, 7vw, 88px) !important;
gap: clamp(36px, 6vw, 80px) !important;
align-items: center !important;
justify-content: center !important;
}
.pricing-page .prc-hero-stat {
flex: 0 1 auto !important;
padding: 0 4px !important;
min-width: 0;
}
.pricing-page .prc-hero-stat strong {
font-size: clamp(2rem, 3.4vw, 3rem) !important;
letter-spacing: -0.02em !important;
padding: 0 !important;
display: inline-block;
line-height: 1 !important;
}
/* Allow the wrap container to center the inline-flex card */
.pricing-page .prc-hero-content {
text-align: center;
}
/* ─────────────────────────────────────────────────────────────────
(B) Scroll-dot indicator: pin it to the ACTUAL bottom of the hero
(was floating mid-content). Use position:absolute with bottom
offset INSIDE the section, not inside the flex content column.
───────────────────────────────────────────────────────────────── */
.pricing-page .prc-hero {
position: relative !important;
}
.pricing-page .prc-hero-scroll {
position: absolute !important;
bottom: 24px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 5;
margin: 0 !important;
display: flex;
align-items: center;
justify-content: center;
}
/* Hide the small inner dot if it was rendering with a misalignment */
.pricing-page .prc-scroll-dot {
display: block;
width: 4px;
height: 8px;
background: rgba(255, 255, 255, 0.7);
border-radius: 2px;
animation: prc-scroll-dot-bob 1.4s ease-in-out infinite;
}
@keyframes prc-scroll-dot-bob {
0%, 100% { transform: translateY(0); opacity: 0.85; }
50% { transform: translateY(6px); opacity: 0.35; }
}
/* ─────────────────────────────────────────────────────────────────
(C) 'Toujours inclus' section was being chopped top + bottom
Right-size content and let section grow naturally
───────────────────────────────────────────────────────────────── */
.pricing-page .prc-always-section {
overflow: visible !important;
justify-content: flex-start !important;
padding-top: clamp(60px, 7vh, 90px) !important;
padding-bottom: clamp(60px, 7vh, 90px) !important;
}
.pricing-page .prc-always-section .rd-h2 {
font-size: clamp(2.4rem, 5.5vw, 5rem) !important;
margin-bottom: clamp(16px, 2.5vh, 28px) !important;
line-height: 1 !important;
}
.pricing-page .prc-always-section .rd-lead {
font-size: clamp(0.98rem, 1.4vw, 1.2rem) !important;
margin-bottom: clamp(30px, 4.5vh, 50px) !important;
line-height: 1.5 !important;
opacity: 0.78;
}
.pricing-page .prc-always-section .prc-section-header { margin-bottom: 0 !important; }
.pricing-page .prc-always-section .prc-always-cards {
gap: 18px !important;
margin-top: 0 !important;
}
.pricing-page .prc-always-section .prc-always-card {
padding: 30px 24px !important;
border-radius: 20px !important;
}
.pricing-page .prc-always-section .prc-always-card-icon {
width: 60px !important;
height: 60px !important;
margin-bottom: 18px !important;
border-radius: 16px !important;
}
.pricing-page .prc-always-section .prc-always-card-icon svg {
width: 24px !important;
height: 24px !important;
}
.pricing-page .prc-always-section .prc-always-card-title {
font-size: 1.12rem !important;
margin-bottom: 8px !important;
}
.pricing-page .prc-always-section .prc-always-card-desc {
font-size: 0.88rem !important;
line-height: 1.5 !important;
}
@media (max-height: 760px) {
.pricing-page .prc-always-section { min-height: auto !important; }
}
/* PASS 7.1 — force scroll dot to actual bottom of .prc-hero */
.pricing-page section.prc-hero > .rd-container .prc-hero-content .prc-hero-scroll,
.pricing-page section.prc-hero .prc-hero-scroll {
position: absolute !important;
bottom: 20px !important;
top: auto !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
margin: 0 !important;
z-index: 6;
}
/* PASS 7.2 — ensure scroll dot escapes to actual .prc-hero bottom */
.pricing-page .prc-hero-content,
.pricing-page .prc-hero > .rd-container {
position: static !important; /* so absolute children reference .prc-hero */
}
/* PASS 7.3 — pragmatic: hide the scroll indicator (user kept seeing it
in the wrong place; the audience pills below already invite scrolling). */
.pricing-page .prc-hero-scroll { display: none !important; }
/* ════════════════════════════════════════════════════════════════════
PASS 8 — Agency BUSINESS card: dark glass with mint accent
(was solid cyan flood — text invisible)
════════════════════════════════════════════════════════════════════ */
/* Force dark liquid-glass treatment on the agency BUSINESS card.
Featured-ness comes from the mint border + outer glow + scale,
NOT from a bright background that swallows the text. */
.pricing-page .prc-section--dark .prc-plan-card--popular,
.pricing-page .prc-section--dark .prc-plan-card--pro,
.pricing-page .prc-trust-section .prc-plan-card--popular {
background:
linear-gradient(160deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 100%),
rgba(10, 14, 24, 0.82) !important;
border: 2px solid rgba(140, 245, 208, 0.55) !important;
backdrop-filter: blur(24px) saturate(140%) !important;
-webkit-backdrop-filter: blur(24px) saturate(140%) !important;
color: #f0f4ff !important;
transform: scale(1.04);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.10) inset,
0 24px 64px rgba(0, 0, 0, 0.55),
0 0 64px rgba(140, 245, 208, 0.22),
0 0 0 1px rgba(140, 245, 208, 0.15) !important;
}
.pricing-page .prc-section--dark .prc-plan-card--popular:hover,
.pricing-page .prc-section--dark .prc-plan-card--pro:hover {
transform: scale(1.04) translateY(-8px);
border-color: rgba(140, 245, 208, 0.85) !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.15) inset,
0 32px 80px rgba(0, 0, 0, 0.65),
0 0 80px rgba(140, 245, 208, 0.35) !important;
}
/* All text inside the popular card stays white/ivory on dark glass */
.pricing-page .prc-section--dark .prc-plan-card--popular *,
.pricing-page .prc-section--dark .prc-plan-card--pro * {
color: inherit;
}
.pricing-page .prc-section--dark .prc-plan-card--popular .prc-plan-price,
.pricing-page .prc-section--dark .prc-plan-card--popular .prc-plan-price-num,
.pricing-page .prc-section--dark .prc-plan-card--popular .prc-plan-price-cur {
color: #ffffff !important;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}
.pricing-page .prc-section--dark .prc-plan-card--popular .prc-plan-price-period {
color: rgba(240, 244, 255, 0.65) !important;
}
.pricing-page .prc-section--dark .prc-plan-card--popular .prc-plan-list li {
color: rgba(240, 244, 255, 0.92) !important;
}
.pricing-page .prc-section--dark .prc-plan-card--popular .prc-plan-check {
color: #8cf5d0 !important;
background: rgba(140, 245, 208, 0.15) !important;
border-color: rgba(140, 245, 208, 0.4) !important;
}
/* Top accent bar — mint→cyan gradient */
.pricing-page .prc-section--dark .prc-plan-card--popular .prc-plan-popular-bar {
background: linear-gradient(90deg, #8cf5d0, #5ac8fa, #007AFF) !important;
height: 4px !important;
}
/* 'LE PLUS CHOISI' pill above the card */
.pricing-page .prc-section--dark .prc-plan-card--popular .prc-plan-popular-tag {
background: linear-gradient(135deg, #8cf5d0, #5ac8fa) !important;
color: #0a1424 !important;
font-weight: 800 !important;
letter-spacing: 0.12em !important;
padding: 6px 16px !important;
border-radius: 999px !important;
text-shadow: none !important;
box-shadow:
0 8px 24px rgba(140, 245, 208, 0.4),
0 0 0 2px rgba(255, 255, 255, 0.15) !important;
}
/* 'Choisir Business' CTA — gradient pill, real Apple button */
.pricing-page .prc-section--dark .prc-plan-card--popular .prc-plan-btn,
.pricing-page .prc-section--dark .prc-plan-card--popular .rd-btn--primary {
background: linear-gradient(135deg, #007AFF 0%, #5ac8fa 50%, #8cf5d0 100%) !important;
color: #fff !important;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
padding: 14px 28px !important;
font-weight: 700 !important;
border-radius: 999px !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.18) inset,
0 12px 28px rgba(0, 122, 255, 0.45) !important;
text-decoration: none !important;
}
.pricing-page .prc-section--dark .prc-plan-card--popular .prc-plan-btn:hover {
transform: translateY(-2px) scale(1.02);
filter: brightness(1.08);
}
/* Business badge inside the card header */
.pricing-page .prc-section--dark .prc-plan-card--popular .prc-plan-badge--pro {
background: rgba(140, 245, 208, 0.15) !important;
color: #8cf5d0 !important;
border: 1px solid rgba(140, 245, 208, 0.4) !important;
font-weight: 700 !important;
}
/* ════════════════════════════════════════════════════════════════════
PRICING REDESIGN PASS 8 — pen signature showcase + step micro-anims
════════════════════════════════════════════════════════════════════ */
/* ─── (A) "Pen signs" hero showcase ───────────────────────────────── */
.pricing-page .prc-how-showcase {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
margin: clamp(40px, 6vh, 72px) auto clamp(48px, 7vh, 88px);
width: 100%;
max-width: 720px;
opacity: 0;
transform: translateY(30px);
transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.pricing-page .prc-how-showcase.is-visible {
opacity: 1;
transform: translateY(0);
}
.pricing-page .prc-howcase-card {
position: relative;
width: 100%;
aspect-ratio: 520 / 240;
background:
radial-gradient(circle at 20% 30%, rgba(0,122,255,0.10), transparent 55%),
radial-gradient(circle at 80% 70%, rgba(140,245,208,0.12), transparent 55%),
linear-gradient(160deg, rgba(255,255,255,0.98), rgba(245,248,253,0.94));
border: 1px solid rgba(0, 30, 80, 0.10);
border-radius: 24px;
box-shadow:
0 1px 0 rgba(255,255,255,0.8) inset,
0 18px 48px rgba(0, 30, 80, 0.10);
overflow: hidden;
padding: 36px 44px;
}
/* faint "document" content under the signature */
.pricing-page .prc-howcase-doc {
position: absolute;
top: 32px; left: 44px; right: 44px;
display: flex; flex-direction: column; gap: 11px;
opacity: 0.45;
}
.pricing-page .prc-howcase-doc-line {
height: 6px;
background: linear-gradient(90deg, rgba(10,20,36,0.18), rgba(10,20,36,0.05));
border-radius: 4px;
width: 100%;
}
.pricing-page .prc-howcase-doc-line--short { width: 62%; }
.pricing-page .prc-howcase-doc-line--medium { width: 86%; }
.pricing-page .prc-howcase-doc-sigline {
margin-top: 28px;
height: 1px;
background: rgba(10,20,36,0.18);
width: 88%;
}
/* the signature SVG sits absolutely centered over the doc */
.pricing-page .prc-howcase-sig {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, 8%);
width: 80%;
height: auto;
z-index: 2;
pointer-events: none;
}
.pricing-page .prc-howcase-sig-path {
stroke-dasharray: 1400;
stroke-dashoffset: 1400;
filter: drop-shadow(0 2px 4px rgba(0, 122, 255, 0.18));
}
.pricing-page .prc-how-showcase.is-visible .prc-howcase-sig-path {
animation: prc-sig-draw 3.4s cubic-bezier(.6,.05,.3,1) 0.4s forwards;
}
@keyframes prc-sig-draw {
to { stroke-dashoffset: 0; }
}
/* pen icon following the path */
.pricing-page .prc-howcase-pen {
position: absolute;
left: 0; top: 0;
width: 32px;
height: 32px;
z-index: 3;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
opacity: 0;
/* Path is in viewBox coords (520x160); offset-path uses CSS path() */
offset-path: path("M 30,90 C 50,30 80,30 95,80 C 105,115 75,130 60,110 C 50,95 70,75 95,80 C 130,86 145,40 165,80 C 175,100 155,118 145,100 C 140,90 155,80 175,85 C 210,92 220,55 240,90 Q 255,115 270,90 C 290,55 305,95 315,90 Q 330,85 340,100 C 355,125 380,90 395,80 C 415,67 440,75 460,90");
offset-rotate: auto;
/* Scale and position match the SVG's actual size on screen.
Since the SVG is responsive (width:80%, aspect-ratio set), we
overlay the pen in an absolutely-sized container layer below. */
}
/* Pen overlay uses its own container scaled to viewport-matched size */
.pricing-page .prc-howcase-card::before {
content: "";
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, 8%);
width: 80%;
/* same aspect as sig SVG (520:160) */
aspect-ratio: 520 / 160;
pointer-events: none;
z-index: 3;
}
.pricing-page .prc-how-showcase.is-visible .prc-howcase-pen {
animation:
prc-pen-fade 0.3s ease 0.35s forwards,
prc-pen-write 3.4s cubic-bezier(.6,.05,.3,1) 0.4s forwards;
}
@keyframes prc-pen-fade {
to { opacity: 1; }
}
@keyframes prc-pen-write {
from { offset-distance: 0%; }
to { offset-distance: 100%; }
}
/* The .prc-howcase-pen sits at the same position as the sig SVG */
.pricing-page .prc-howcase-pen {
/* Scale to match SVG visual size */
position: absolute;
left: calc(50% - 40%);
top: calc(50% - (40% * 160 / 520) + 8%);
width: 80%;
height: calc(80% * 160 / 520);
}
.pricing-page .prc-howcase-pen svg {
/* The pen icon is sized to match the SVG's coord system */
width: calc(32 / 520 * 100%);
height: auto;
}
.pricing-page .prc-howcase-badge {
position: absolute;
bottom: 18px; right: 18px;
display: inline-flex; align-items: center; gap: 6px;
background: linear-gradient(135deg, rgba(140,245,208,0.18), rgba(52,199,89,0.14));
color: #0a7a44;
border: 1px solid rgba(52, 199, 89, 0.28);
padding: 6px 12px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0;
transform: translateY(8px);
transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
z-index: 4;
}
.pricing-page .prc-how-showcase.is-visible .prc-howcase-badge {
opacity: 1;
transform: translateY(0);
transition-delay: 3.8s;
}
.pricing-page .prc-howcase-caption {
font-size: 0.95rem;
color: #424b6a;
font-weight: 500;
text-align: center;
margin: 0;
max-width: 480px;
}
/* ─── (B) Per-step icon micro-animations on reveal ────────────────── */
/* Common: all step icons get a subtle "breath" highlight on reveal */
.pricing-page .prc-how-step.is-revealed .prc-how-icon {
animation: prc-icon-pulse 1.2s ease 0.5s 1;
}
@keyframes prc-icon-pulse {
0% { box-shadow: 0 6px 20px rgba(0,122,255,0.20); }
50% { box-shadow: 0 6px 32px rgba(0,122,255,0.45); }
100% { box-shadow: 0 6px 20px rgba(0,122,255,0.20); }
}
/* Step 3 (Signez) — pen draws an underline below the icon when revealed */
.pricing-page .prc-how-step:nth-of-type(5) .prc-how-icon {
position: relative;
}
.pricing-page .prc-how-step:nth-of-type(5) .prc-how-icon::after {
content: "";
position: absolute;
left: 12%; right: 12%;
bottom: -10px;
height: 2px;
background: linear-gradient(90deg, transparent, #34d399 30%, #06b6d4 70%, transparent);
border-radius: 2px;
transform: scaleX(0);
transform-origin: left center;
transition: transform 1.2s cubic-bezier(.6,.05,.3,1);
}
.pricing-page .prc-how-step:nth-of-type(5).is-revealed .prc-how-icon::after {
transform: scaleX(1);
transition-delay: 0.8s;
}
/* Step 2 (Postulez) — paper-plane gentle "flight" loop */
.pricing-page .prc-how-step:nth-of-type(3).is-revealed .prc-how-icon svg {
animation: prc-plane-fly 2.4s ease-in-out 0.6s infinite;
}
@keyframes prc-plane-fly {
0%, 100% { transform: translate(0, 0) rotate(0); }
50% { transform: translate(3px, -3px) rotate(-3deg); }
}
/* Step 1 (Créez) — document scan: bottom-to-top gradient sweep */
.pricing-page .prc-how-step:nth-of-type(1) .prc-how-icon {
overflow: hidden;
}
.pricing-page .prc-how-step:nth-of-type(1) .prc-how-icon::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 0%, rgba(140, 245, 208, 0.55) 50%, transparent 100%);
transform: translateY(-100%);
pointer-events: none;
}
.pricing-page .prc-how-step:nth-of-type(1).is-revealed .prc-how-icon::before {
animation: prc-scan-down 2.2s cubic-bezier(.6,.05,.3,1) 0.6s 2;
}
@keyframes prc-scan-down {
0% { transform: translateY(-100%); opacity: 0; }
10% { opacity: 0.9; }
90% { opacity: 0.9; }
100% { transform: translateY(120%); opacity: 0; }
}
/* Step 4 (Payez) — card "approved" tick pop after reveal */
.pricing-page .prc-how-step:nth-of-type(7) .prc-how-icon {
position: relative;
}
.pricing-page .prc-how-step:nth-of-type(7) .prc-how-icon::after {
content: "";
position: absolute;
right: -4px; top: -4px;
width: 22px; height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, #34d399, #06b6d4);
box-shadow: 0 4px 10px rgba(6, 182, 212, 0.4);
/* checkmark drawn via mask */
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-size: cover;
transform: scale(0);
transition: transform 0.45s cubic-bezier(.34,1.56,.64,1);
}
.pricing-page .prc-how-step:nth-of-type(7).is-revealed .prc-how-icon::after {
transform: scale(1);
transition-delay: 1.0s;
}
/* ─── (C) Showcase reduced-motion fallback ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.pricing-page .prc-howcase-sig-path { stroke-dashoffset: 0 !important; animation: none !important; }
.pricing-page .prc-howcase-pen { opacity: 1 !important; animation: none !important; offset-distance: 100% !important; }
.pricing-page .prc-howcase-badge { opacity: 1 !important; transform: none !important; }
.pricing-page .prc-how-step .prc-how-icon::before,
.pricing-page .prc-how-step .prc-how-icon svg { animation: none !important; }
}
/* ─── (D) Responsive showcase tweaks ──────────────────────────────── */
@media (max-width: 720px) {
.pricing-page .prc-how-showcase { max-width: 92%; }
.pricing-page .prc-howcase-doc { top: 22px; left: 28px; right: 28px; }
.pricing-page .prc-howcase-card { padding: 28px; }
.pricing-page .prc-howcase-badge { bottom: 10px; right: 10px; font-size: 0.65rem; }
}
/* ════════════════════════════════════════════════════════════════════
PRICING PASS 9 — kill mint hairline on trust cards + staggered reveal
════════════════════════════════════════════════════════════════════ */
/* Belt-and-suspenders: nuke the top mint line that was cutting card tops */
.pricing-page .prc-trust-col::before,
.prc-trust-col::before {
display: none !important;
content: none !important;
background: none !important;
height: 0 !important;
}
/* Staggered reveal — each card animates in sequence, premium feel */
.pricing-page .prc-trust-col {
opacity: 0;
transform: translateY(40px) scale(0.97);
transition:
opacity .75s cubic-bezier(.2,.7,.2,1),
transform .75s cubic-bezier(.2,.7,.2,1),
border-color .3s ease,
box-shadow .3s ease;
}
.pricing-page .prc-trust-grid.is-visible .prc-trust-col {
opacity: 1;
transform: translateY(0) scale(1);
}
.pricing-page .prc-trust-grid.is-visible .prc-trust-col:nth-child(1) { transition-delay: 0.1s, 0.1s, 0s, 0s; }
.pricing-page .prc-trust-grid.is-visible .prc-trust-col:nth-child(2) { transition-delay: 0.28s, 0.28s, 0s, 0s; }
.pricing-page .prc-trust-grid.is-visible .prc-trust-col:nth-child(3) { transition-delay: 0.46s, 0.46s, 0s, 0s; }
/* Number pop animation — stats grow in after card lands */
.pricing-page .prc-trust-col .prc-trust-stat {
opacity: 0;
transform: scale(0.7);
transition: opacity .6s ease, transform .7s cubic-bezier(.34,1.56,.64,1);
}
.pricing-page .prc-trust-grid.is-visible .prc-trust-col .prc-trust-stat {
opacity: 1;
transform: scale(1);
}
.pricing-page .prc-trust-grid.is-visible .prc-trust-col:nth-child(1) .prc-trust-stat { transition-delay: 0.4s, 0.4s; }
.pricing-page .prc-trust-grid.is-visible .prc-trust-col:nth-child(2) .prc-trust-stat { transition-delay: 0.58s, 0.58s; }
.pricing-page .prc-trust-grid.is-visible .prc-trust-col:nth-child(3) .prc-trust-stat { transition-delay: 0.76s, 0.76s; }
/* Icon also rotates in subtly */
.pricing-page .prc-trust-col .prc-trust-icon {
opacity: 0;
transform: scale(0.6) rotate(-12deg);
transition: opacity .55s ease, transform .65s cubic-bezier(.34,1.56,.64,1);
}
.pricing-page .prc-trust-grid.is-visible .prc-trust-col .prc-trust-icon {
opacity: 1;
transform: scale(1) rotate(0deg);
}
.pricing-page .prc-trust-grid.is-visible .prc-trust-col:nth-child(1) .prc-trust-icon { transition-delay: 0.2s, 0.2s; }
.pricing-page .prc-trust-grid.is-visible .prc-trust-col:nth-child(2) .prc-trust-icon { transition-delay: 0.38s, 0.38s; }
.pricing-page .prc-trust-grid.is-visible .prc-trust-col:nth-child(3) .prc-trust-icon { transition-delay: 0.56s, 0.56s; }
@media (prefers-reduced-motion: reduce) {
.pricing-page .prc-trust-col,
.pricing-page .prc-trust-col .prc-trust-stat,
.pricing-page .prc-trust-col .prc-trust-icon {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* === PRICING PASS 11 — dramatic per-step hero animations === */
/* ════════════════════════════════════════════════════════════════════
PASS 11 — Make each step card's icon a HERO MINI-SCENE that plays
when the step enters viewport. Builds on top of PASS 8 micro-anims
with bigger gestures, sound-of-arrival "thump" + secondary effects.
════════════════════════════════════════════════════════════════════ */
/* Make every step icon a positioning context with overflow:visible
so big secondary effects (sparkles, trails) can extend out. */
.pricing-page .prc-how-step .prc-how-icon {
position: relative !important;
overflow: visible !important;
z-index: 2;
}
/* Common "arrival thump" — every icon does a slight scale-in then settle
when its step is revealed. Combines with PASS 8's icon-pulse glow. */
.pricing-page .prc-how-step.is-revealed .prc-how-icon {
animation: prc-icon-arrive 0.9s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes prc-icon-arrive {
0% { transform: scale(0.7) rotate(-12deg); opacity: 0; }
60% { transform: scale(1.15) rotate(3deg); opacity: 1; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
/* Build the icon into a hero box (slightly bigger, with backdrop glow) */
.pricing-page .prc-how-step .prc-how-icon {
width: clamp(68px, 6vw, 92px) !important;
height: clamp(68px, 6vw, 92px) !important;
}
/* ────────────────────────────────────────────────────────────────
STEP 1 — Créez votre dossier
Document with horizontal lines drawing in + green checkmarks
bouncing in (3 lines + 3 checks).
──────────────────────────────────────────────────────────────── */
.pricing-page .prc-how-step:nth-of-type(1) .prc-how-icon {
background: linear-gradient(160deg, rgba(0,122,255,0.18), rgba(90,200,250,0.10)) !important;
}
.pricing-page .prc-how-step:nth-of-type(1) .prc-how-icon::before,
.pricing-page .prc-how-step:nth-of-type(1) .prc-how-icon::after {
content: "";
position: absolute;
background: rgba(140, 245, 208, 0.85);
border-radius: 2px;
opacity: 0;
}
/* "Scan line" sweeping down the document */
.pricing-page .prc-how-step:nth-of-type(1) .prc-how-icon::before {
inset: 8% 12%;
background: linear-gradient(180deg, transparent 0%, rgba(140,245,208,0.7) 50%, transparent 100%);
border-radius: 6px;
transform: translateY(-110%);
opacity: 0;
z-index: 3;
}
.pricing-page .prc-how-step:nth-of-type(1).is-revealed .prc-how-icon::before {
animation: prc-step1-scan 2.2s cubic-bezier(.6,.05,.3,1) 0.4s 2;
}
@keyframes prc-step1-scan {
0% { transform: translateY(-110%); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(110%); opacity: 0; }
}
/* Document lines that fill in (3 horizontal bars overlaid). */
.pricing-page .prc-how-step:nth-of-type(1) .prc-how-icon::after {
inset: auto 22% 26% 22%;
height: 3px;
background: linear-gradient(90deg, #8cf5d0 0%, transparent 100%);
border-radius: 2px;
opacity: 0;
transform: scaleX(0);
transform-origin: left;
}
.pricing-page .prc-how-step:nth-of-type(1).is-revealed .prc-how-icon::after {
animation: prc-step1-fill 1.0s cubic-bezier(.2,.7,.2,1) 1.1s forwards;
}
@keyframes prc-step1-fill {
to { opacity: 1; transform: scaleX(1); }
}
/* ────────────────────────────────────────────────────────────────
STEP 2 — Postulez (paper plane flies in an arc trail)
──────────────────────────────────────────────────────────────── */
.pricing-page .prc-how-step:nth-of-type(3) .prc-how-icon {
background: linear-gradient(160deg, rgba(90,200,250,0.20), rgba(140,245,208,0.14)) !important;
}
/* Plane jolts in a flight arc using infinite gentle loop AFTER initial arrival */
.pricing-page .prc-how-step:nth-of-type(3).is-revealed .prc-how-icon svg {
animation:
prc-step2-launch 1.4s cubic-bezier(.34,1.56,.64,1) 0.6s both,
prc-step2-glide 3.6s ease-in-out 2s infinite;
transform-origin: 50% 60%;
}
@keyframes prc-step2-launch {
0% { transform: translate(-30px, 18px) rotate(-25deg) scale(0.6); opacity: 0; }
60% { transform: translate(6px, -6px) rotate(8deg) scale(1.12); opacity: 1; }
100% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; }
}
@keyframes prc-step2-glide {
0%, 100% { transform: translate(0, 0) rotate(0); }
25% { transform: translate(4px, -2px) rotate(-3deg); }
50% { transform: translate(6px, -5px) rotate(-5deg); }
75% { transform: translate(2px, -2px) rotate(-2deg); }
}
/* Subtle vapour trail behind the plane */
.pricing-page .prc-how-step:nth-of-type(3) .prc-how-icon::after {
content: "";
position: absolute;
left: 12%;
top: 58%;
width: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(140,245,208,0.6) 30%, rgba(90,200,250,0.5) 70%, transparent);
border-radius: 1px;
filter: blur(0.4px);
opacity: 0;
}
.pricing-page .prc-how-step:nth-of-type(3).is-revealed .prc-how-icon::after {
animation: prc-step2-trail 1.6s ease-out 0.8s forwards;
}
@keyframes prc-step2-trail {
0% { width: 0; opacity: 0; }
30% { opacity: 1; }
100% { width: 60%; opacity: 0; }
}
/* ────────────────────────────────────────────────────────────────
STEP 3 — Signez: mini pen draws an underline THEN signature flourish
──────────────────────────────────────────────────────────────── */
.pricing-page .prc-how-step:nth-of-type(5) .prc-how-icon {
background: linear-gradient(160deg, rgba(140,245,208,0.22), rgba(52,199,89,0.14)) !important;
}
/* Wider, more visible underline (was already in PASS 8 — make it dramatic) */
.pricing-page .prc-how-step:nth-of-type(5) .prc-how-icon::before {
content: "";
position: absolute;
left: 12%; right: 12%;
bottom: -12px;
height: 3px;
background: linear-gradient(90deg, transparent, #34d399 30%, #06b6d4 70%, transparent);
border-radius: 2px;
transform: scaleX(0);
transform-origin: left center;
box-shadow: 0 0 12px rgba(52, 211, 153, 0.5);
}
.pricing-page .prc-how-step:nth-of-type(5).is-revealed .prc-how-icon::before {
animation: prc-step3-sign 1.6s cubic-bezier(.6,.05,.3,1) 0.7s forwards;
}
@keyframes prc-step3-sign {
0% { transform: scaleX(0); }
100% { transform: scaleX(1); }
}
/* Sparkle dot at the end of the signature stroke */
.pricing-page .prc-how-step:nth-of-type(5) .prc-how-icon::after {
content: "✓";
position: absolute;
right: 6%;
bottom: -22px;
font-size: 0.85rem;
font-weight: 900;
color: #06b6d4;
text-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
opacity: 0;
transform: scale(0);
}
.pricing-page .prc-how-step:nth-of-type(5).is-revealed .prc-how-icon::after {
animation: prc-step3-check 0.5s cubic-bezier(.34,1.56,.64,1) 2.3s forwards;
}
@keyframes prc-step3-check {
to { opacity: 1; transform: scale(1); }
}
/* ────────────────────────────────────────────────────────────────
STEP 4 — Payez: card swipes left-right, then green approved badge
pops on top-right
──────────────────────────────────────────────────────────────── */
.pricing-page .prc-how-step:nth-of-type(7) .prc-how-icon {
background: linear-gradient(160deg, rgba(52,211,153,0.20), rgba(6,182,212,0.14)) !important;
}
.pricing-page .prc-how-step:nth-of-type(7).is-revealed .prc-how-icon svg {
animation: prc-step4-swipe 1.8s cubic-bezier(.6,.05,.3,1) 0.6s both;
}
@keyframes prc-step4-swipe {
0% { transform: translateX(-22px) rotate(-6deg); opacity: 0.4; }
35% { transform: translateX(8px) rotate(2deg); opacity: 1; }
70% { transform: translateX(-3px) rotate(-1deg); }
100% { transform: translateX(0) rotate(0); }
}
/* Approved tick badge (already in PASS 8 — strengthen) */
.pricing-page .prc-how-step:nth-of-type(7) .prc-how-icon::after {
content: "";
position: absolute;
right: -8px; top: -8px;
width: 26px; height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, #34d399, #06b6d4);
box-shadow: 0 6px 14px rgba(6, 182, 212, 0.5), 0 0 0 3px rgba(255,255,255,0.06);
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-size: cover;
transform: scale(0) rotate(-30deg);
opacity: 0;
}
.pricing-page .prc-how-step:nth-of-type(7).is-revealed .prc-how-icon::after {
animation: prc-step4-approved 0.7s cubic-bezier(.34,1.56,.64,1) 1.8s forwards;
}
@keyframes prc-step4-approved {
to { transform: scale(1) rotate(0); opacity: 1; }
}
/* Ring pulse around the approved badge */
.pricing-page .prc-how-step:nth-of-type(7) .prc-how-icon::before {
content: "";
position: absolute;
right: -8px; top: -8px;
width: 26px; height: 26px;
border-radius: 50%;
border: 2px solid rgba(52, 211, 153, 0.7);
pointer-events: none;
opacity: 0;
}
.pricing-page .prc-how-step:nth-of-type(7).is-revealed .prc-how-icon::before {
animation: prc-step4-ring 1.4s ease-out 2.0s 2 forwards;
}
@keyframes prc-step4-ring {
0% { transform: scale(0.6); opacity: 0.9; }
100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.pricing-page .prc-how-step .prc-how-icon,
.pricing-page .prc-how-step .prc-how-icon::before,
.pricing-page .prc-how-step .prc-how-icon::after,
.pricing-page .prc-how-step .prc-how-icon svg {
animation: none !important;
}
}
/* === PRICING PASS 12 — uniform CTA pills + bullet baseline align === */
/* ════════════════════════════════════════════════════════════════════
PASS 12 — Selector PASS 11 hit .prc-plan-cta but real DOM is
.prc-plan-btn. This pass targets the actual class with high
specificity. Also fixes bullet check alignment when text wraps to
2 lines (first bullet in Free card was visually off).
════════════════════════════════════════════════════════════════════ */
/* ─── (A) Uniform CTA pills across all 4 pricing card buttons ─────── */
.pricing-page .prc-plan-card .prc-plan-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 52px !important; /* FIXED height so all 4 buttons match */
min-height: 52px !important;
max-height: 52px !important;
padding: 0 18px !important; /* horizontal only — height is fixed */
border-radius: 999px !important;
font-size: clamp(0.78rem, 0.7rem + 0.3vw, 0.94rem) !important; /* shrink if needed */
font-weight: 700 !important;
letter-spacing: -0.005em !important;
text-align: center !important;
text-decoration: none !important;
white-space: nowrap !important; /* never wrap to 2 lines */
overflow: hidden !important;
text-overflow: ellipsis !important;
/* Default = outlined glass pill (Free / Starter) */
background: linear-gradient(135deg, rgba(0,122,255,0.12), rgba(140,245,208,0.10)) !important;
color: #7cc6ff !important;
border: 1px solid rgba(0,122,255,0.32) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.10) inset,
0 8px 22px rgba(0, 60, 140, 0.14) !important;
transition: transform .22s ease, box-shadow .25s ease, filter .15s ease, background .25s ease !important;
margin-top: auto !important;
}
.pricing-page .prc-plan-card .prc-plan-btn:hover {
transform: translateY(-2px);
filter: brightness(1.10);
box-shadow:
0 1px 0 rgba(255,255,255,0.14) inset,
0 12px 30px rgba(0, 60, 140, 0.24) !important;
}
/* Popular plan (Business) — filled gradient hero pill */
.pricing-page .prc-plan-card--popular .prc-plan-btn,
.pricing-page .prc-plan-card .prc-plan-btn.rd-btn--primary {
background: linear-gradient(135deg, #007AFF 0%, #5ac8fa 50%, #8cf5d0 100%) !important;
color: #fff !important;
border: none !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.22) inset,
0 14px 32px rgba(0, 122, 255, 0.40) !important;
}
/* Enterprise / Plus — purple-tinted glass pill */
.pricing-page .prc-plan-card .prc-plan-btn--plus,
.pricing-page .prc-plan-card--enterprise .prc-plan-btn {
background: linear-gradient(135deg, rgba(191, 90, 242, 0.18), rgba(168,85,247,0.10)) !important;
color: #d8b4fe !important;
border: 1px solid rgba(191, 90, 242, 0.36) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.10) inset,
0 8px 22px rgba(120, 50, 220, 0.16) !important;
}
/* ─── (B) Bullet baseline alignment — check sits beside first line ── */
.pricing-page .prc-plan-card ul li {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
line-height: 1.45 !important;
padding: 4px 0 !important;
font-size: 0.92rem !important;
}
.pricing-page .prc-plan-card ul li .prc-plan-check {
flex-shrink: 0 !important;
width: 18px !important;
height: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
/* Push down ~3px so the check baseline matches the first text line */
margin-top: 3px !important;
/* Distinctive mint glow */
color: #8cf5d0 !important;
font-weight: 900 !important;
font-size: 0.85rem !important;
background: rgba(140, 245, 208, 0.14);
border: 1px solid rgba(140, 245, 208, 0.32);
border-radius: 50%;
line-height: 1 !important;
}
/* The text span — give it consistent flex sizing */
.pricing-page .prc-plan-card ul li > span:not(.prc-plan-check) {
flex: 1 1 auto;
min-width: 0;
}
/* ─── (C) Ensure all 4 CTA buttons sit at the same vertical line by
making the ul fill remaining space ──────────────────────────── */
.pricing-page .prc-plan-card {
display: flex !important;
flex-direction: column !important;
}
.pricing-page .prc-plan-card ul {
flex: 1 1 auto !important;
margin-bottom: 18px !important;
}
@media (prefers-reduced-motion: reduce) {
.pricing-page .prc-plan-card .prc-plan-btn { transition: none !important; }
}
/* === PRICING PASS 13 — storyboard redesign 4 stages + SVG anims === */
/* ══════════════════════════════════════════════════════════════════════
PASS 13 — Complete redesign of "Simple. Tout de suite." section.
- 4-stage storyboard (alternating left/right for visual rhythm)
- Each stage has its own SVG hero animation
- Animations trigger on stage scroll into view (IntersectionObserver)
- Pure SVG + CSS keyframes, no external libraries
══════════════════════════════════════════════════════════════════════ */
/* Override / supersede earlier PASS 6/8/11 step rules cleanly */
.pricing-page .prc-how-section {
padding: clamp(80px, 12vh, 140px) 0 !important;
}
.pricing-page .prc-how-section .prc-section-lead {
max-width: 640px;
margin: 18px auto 0;
font-size: clamp(1rem, 1.15vw, 1.18rem);
line-height: 1.55;
color: rgba(220, 230, 245, 0.78);
}
/* Hide the old flow/steps/showcase if they still exist on the page */
.pricing-page .prc-how-flow,
.pricing-page .prc-how-showcase {
display: none !important;
}
/* ─── Storyboard container ─────────────────────────────────────────── */
.pricing-page .prc-how-storyboard {
margin-top: clamp(48px, 8vh, 88px);
display: flex;
flex-direction: column;
gap: clamp(48px, 8vh, 120px);
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
/* ─── Single stage (text + visual, alternating) ────────────────────── */
.pricing-page .prc-how-stage {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 6vw, 80px);
align-items: center;
opacity: 0;
transform: translateY(40px);
transition:
opacity .8s cubic-bezier(.2, .7, .2, 1),
transform .8s cubic-bezier(.2, .7, .2, 1);
}
.pricing-page .prc-how-stage.is-active {
opacity: 1;
transform: translateY(0);
}
/* Content side */
.pricing-page .prc-how-stage-content {
display: flex;
flex-direction: column;
gap: 16px;
}
.pricing-page .prc-how-stage-num {
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.20em;
color: #5ac8fa;
background: linear-gradient(135deg, rgba(0,122,255,0.12), rgba(140,245,208,0.10));
border: 1px solid rgba(0,122,255,0.32);
width: fit-content;
padding: 6px 14px;
border-radius: 999px;
text-transform: uppercase;
}
.pricing-page .prc-how-stage-title {
font-size: clamp(1.6rem, 2.4vw, 2.4rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
color: #f0f4ff;
margin: 0;
background: linear-gradient(180deg, #ffffff 0%, #d4e9ff 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.pricing-page .prc-how-stage-desc {
font-size: 1rem;
line-height: 1.6;
color: rgba(220, 230, 245, 0.78);
max-width: 46ch;
margin: 0;
}
/* Visual side */
.pricing-page .prc-how-stage-visual {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.pricing-page .prc-how-stage-visual svg.prc-how-anim {
width: 100%;
max-width: 380px;
height: auto;
filter: drop-shadow(0 18px 48px rgba(0, 30, 80, 0.45));
background:
radial-gradient(circle at 50% 50%, rgba(0,122,255,0.06), transparent 70%);
border-radius: 24px;
}
/* Reverse layout for even stages */
.pricing-page .prc-how-stage--reverse .prc-how-stage-content { order: 2; }
.pricing-page .prc-how-stage--reverse .prc-how-stage-visual { order: 1; }
@media (max-width: 760px) {
.pricing-page .prc-how-stage,
.pricing-page .prc-how-stage--reverse {
grid-template-columns: 1fr;
gap: 32px;
}
.pricing-page .prc-how-stage--reverse .prc-how-stage-content { order: 2; }
.pricing-page .prc-how-stage--reverse .prc-how-stage-visual { order: 1; }
.pricing-page .prc-how-stage-visual svg.prc-how-anim { max-width: 320px; }
.pricing-page .prc-how-stage-title { font-size: 1.5rem; }
}
/* ══════════════════════════════════════════════════════════════════════
ANIMATION 01 — Document scan: 5 lines fill in, shield appears
══════════════════════════════════════════════════════════════════════ */
.pricing-page .prc-how-anim--scan .prc-anim-doc,
.pricing-page .prc-how-anim--scan .prc-anim-doc-fold {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0.95);
transition: opacity .5s ease, transform .6s cubic-bezier(.34,1.56,.64,1);
}
.pricing-page .prc-how-stage.is-active .prc-how-anim--scan .prc-anim-doc,
.pricing-page .prc-how-stage.is-active .prc-how-anim--scan .prc-anim-doc-fold {
opacity: 1;
transform: scale(1);
}
.pricing-page .prc-how-anim--scan .prc-anim-line {
transform-origin: 100px 0;
transform: scaleX(0);
transition: transform .55s cubic-bezier(.6,.05,.3,1);
}
.pricing-page .prc-how-stage.is-active .prc-how-anim--scan .prc-anim-line {
transform: scaleX(1);
}
.pricing-page .prc-how-stage.is-active .prc-how-anim--scan .prc-anim-line--1 { transition-delay: 0.5s; }
.pricing-page .prc-how-stage.is-active .prc-how-anim--scan .prc-anim-line--2 { transition-delay: 0.65s; }
.pricing-page .prc-how-stage.is-active .prc-how-anim--scan .prc-anim-line--3 { transition-delay: 0.80s; }
.pricing-page .prc-how-stage.is-active .prc-how-anim--scan .prc-anim-line--4 { transition-delay: 0.95s; }
.pricing-page .prc-how-stage.is-active .prc-how-anim--scan .prc-anim-line--5 { transition-delay: 1.10s; }
.pricing-page .prc-how-anim--scan .prc-anim-shield {
opacity: 0;
transform-origin: 160px 180px;
transform: scale(0.4) translateY(14px);
transition: opacity .5s ease, transform .65s cubic-bezier(.34,1.56,.64,1);
}
.pricing-page .prc-how-stage.is-active .prc-how-anim--scan .prc-anim-shield {
opacity: 1;
transform: scale(1) translateY(0);
transition-delay: 1.55s;
}
/* ══════════════════════════════════════════════════════════════════════
ANIMATION 02 — Envelope fold + wax stamp + fly up-right
══════════════════════════════════════════════════════════════════════ */
.pricing-page .prc-how-anim--envelope .prc-anim-envelope-group {
transform-origin: 160px 120px;
transform: translateX(-60px) scale(0.92);
opacity: 0;
transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
}
.pricing-page .prc-how-stage.is-active .prc-how-anim--envelope .prc-anim-envelope-group {
transform: translateX(0) scale(1);
opacity: 1;
}
.pricing-page .prc-how-anim--envelope .prc-anim-env-flap {
transform-origin: 160px 80px;
transform: scaleY(-1);
transition: transform .6s cubic-bezier(.2,.7,.2,1) 0.6s;
}
.pricing-page .prc-how-stage.is-active .prc-how-anim--envelope .prc-anim-env-flap {
transform: scaleY(1);
}
.pricing-page .prc-how-anim--envelope .prc-anim-env-stamp {
transform-origin: 160px 130px;
transform: scale(0) rotate(-30deg);
opacity: 0;
transition: transform .5s cubic-bezier(.34,1.56,.64,1) 1.3s, opacity .3s ease 1.3s;
}
.pricing-page .prc-how-stage.is-active .prc-how-anim--envelope .prc-anim-env-stamp {
transform: scale(1) rotate(0);
opacity: 1;
}
.pricing-page .prc-how-anim--envelope .prc-anim-env-trail {
stroke-dasharray: 200;
stroke-dashoffset: 200;
opacity: 0;
transition: stroke-dashoffset 1.0s cubic-bezier(.6,.05,.3,1) 1.9s, opacity .3s ease 1.9s;
}
.pricing-page .prc-how-stage.is-active .prc-how-anim--envelope .prc-anim-env-trail {
stroke-dashoffset: 0;
opacity: 1;
}
.pricing-page .prc-how-anim--envelope .prc-anim-env-sent {
opacity: 0;
transform: translate(258px, 32px) scale(0.7);
transform-origin: 258px 22px;
transition: opacity .4s ease 2.6s, transform .5s cubic-bezier(.34,1.56,.64,1) 2.6s;
}
.pricing-page .prc-how-stage.is-active .prc-how-anim--envelope .prc-anim-env-sent {
opacity: 1;
transform: translate(258px, 22px) scale(1);
}
/* ══════════════════════════════════════════════════════════════════════
ANIMATION 03 — Tablet + signature draws itself + EIDAS badge
══════════════════════════════════════════════════════════════════════ */
.pricing-page .prc-how-anim--tablet .prc-anim-tablet,
.pricing-page .prc-how-anim--tablet .prc-anim-tablet-screen {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0.9);
transition: opacity .5s ease, transform .6s cubic-bezier(.34,1.56,.64,1);
}
.pricing-page .prc-how-stage.is-active .prc-how-anim--tablet .prc-anim-tablet,
.pricing-page .prc-how-stage.is-active .prc-how-anim--tablet .prc-anim-tablet-screen {
opacity: 1;
transform: scale(1);
}
.pricing-page .prc-how-stage.is-active .prc-how-anim--tablet .prc-anim-tablet-screen {
transition-delay: 0.2s;
}
.pricing-page .prc-how-anim--tablet .prc-anim-tablet-line {
opacity: 0;
transition: opacity .4s ease;
}
.pricing-page .prc-how-stage.is-active .prc-how-anim--tablet .prc-anim-tablet-line {
opacity: 1;
transition-delay: 0.5s;
}
.pricing-page .prc-how-anim--tablet .prc-anim-tablet-sig {
stroke-dasharray: 420;
stroke-dashoffset: 420;
filter: drop-shadow(0 2px 4px rgba(0,122,255,0.25));
transition: stroke-dashoffset 1.8s cubic-bezier(.6,.05,.3,1);
}
.pricing-page .prc-how-stage.is-active .prc-how-anim--tablet .prc-anim-tablet-sig {
stroke-dashoffset: 0;
transition-delay: 0.9s;
}
.pricing-page .prc-how-anim--tablet .prc-anim-tablet-badge {
opacity: 0;
transform: translate(160px, 178px);
transition: opacity .45s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
}
.pricing-page .prc-how-stage.is-active .prc-how-anim--tablet .prc-anim-tablet-badge {
opacity: 1;
transform: translate(160px, 168px);
transition-delay: 2.6s;
}
/* ══════════════════════════════════════════════════════════════════════
ANIMATION 04 — Bank card slides + amount + notification
══════════════════════════════════════════════════════════════════════ */
.pricing-page .prc-how-anim--sepa .prc-anim-card {
transform: translateX(160px) rotate(8deg);
opacity: 0;
transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
}
.pricing-page .prc-how-stage.is-active .prc-how-anim--sepa .prc-anim-card {
transform: translateX(0) rotate(0);
opacity: 1;
}
.pricing-page .prc-how-anim--sepa .prc-anim-sepa-amount {
opacity: 0;
transform: translateY(-12px);
transition: opacity .5s ease, transform .6s cubic-bezier(.34,1.56,.64,1);
}
.pricing-page .prc-how-stage.is-active .prc-how-anim--sepa .prc-anim-sepa-amount {
opacity: 1;
transform: translateY(0);
transition-delay: 0.7s;
}
/* Subtle pulse on the amount text */
.pricing-page .prc-how-stage.is-active .prc-how-anim--sepa .prc-anim-amount-text {
animation: prc-sepa-amount-pulse 1.6s ease-in-out 1.3s 1;
}
@keyframes prc-sepa-amount-pulse {
0% { filter: drop-shadow(0 0 0 rgba(140,245,208,0)); }
50% { filter: drop-shadow(0 0 12px rgba(140,245,208,0.7)); }
100% { filter: drop-shadow(0 0 0 rgba(140,245,208,0)); }
}
.pricing-page .prc-how-anim--sepa .prc-anim-sepa-notif {
opacity: 0;
transform: translate(160px, 220px);
transition: opacity .5s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
}
.pricing-page .prc-how-stage.is-active .prc-how-anim--sepa .prc-anim-sepa-notif {
opacity: 1;
transform: translate(160px, 200px);
transition-delay: 1.5s;
}
/* ══════════════════════════════════════════════════════════════════════
Reduced motion: snap everything in instantly, no transitions
══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.pricing-page .prc-how-stage,
.pricing-page .prc-how-anim *,
.pricing-page [class*="prc-anim-"] {
transition: none !important;
animation: none !important;
opacity: 1 !important;
transform: none !important;
stroke-dashoffset: 0 !important;
}
}
/* === PRICING PASS 14 — fix PASS 13 for light theme + remove overflow clip === */
/* ════════════════════════════════════════════════════════════════════
PASS 14 — Critical fixes to PASS 13:
1. Section overflow:hidden + min-height:100vh was clipping the
storyboard (1044px content in 900px viewport). RELAX to auto.
2. PASS 13 used DARK theme colors (white text, blue desc) but the
section is .prc-section--light → all text was invisible.
Switch ALL storyboard text to DARK navy on light bg.
3. SVG anims used dark-bg glow/colors — adapt to light bg.
4. Stage visual cards need light glass styling.
════════════════════════════════════════════════════════════════════ */
/* 1. Unlock the section: let it grow with its content */
.pricing-page .prc-how-section {
min-height: auto !important;
height: auto !important;
overflow: visible !important;
padding: clamp(80px, 12vh, 140px) 0 clamp(80px, 10vh, 120px) !important;
}
/* 2. Header text on light bg */
.pricing-page .prc-how-section .rd-h2 {
background: linear-gradient(180deg, #0a0e1a 0%, #1e3560 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
.pricing-page .prc-how-section .rd-h2 .rd-g-blue {
background: linear-gradient(135deg, #007AFF 0%, #5ac8fa 50%, #0a8b4e 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.pricing-page .prc-how-section .prc-section-lead {
color: #424b6a !important;
}
/* 3. Stage card content — DARK text on light bg */
.pricing-page .prc-how-stage-num {
color: #0055bb !important;
background: linear-gradient(135deg, rgba(0,122,255,0.10), rgba(140,245,208,0.10)) !important;
border: 1px solid rgba(0,122,255,0.28) !important;
}
.pricing-page .prc-how-stage-title {
background: linear-gradient(180deg, #0a0e1a 0%, #1e3560 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
.pricing-page .prc-how-stage-desc {
color: #424b6a !important;
font-size: 1.02rem !important;
}
/* 4. Stage visual area — light glass card for SVG anims */
.pricing-page .prc-how-stage-visual svg.prc-how-anim {
background:
radial-gradient(circle at 50% 50%, rgba(0,122,255,0.08), transparent 70%),
linear-gradient(160deg, rgba(255,255,255,0.96), rgba(245,248,253,0.88)) !important;
border: 1px solid rgba(0, 30, 80, 0.10);
box-shadow:
0 1px 0 rgba(255,255,255,0.8) inset,
0 18px 48px rgba(0, 30, 80, 0.10) !important;
filter: none !important;
}
/* 5. Re-color SVG strokes/fills for LIGHT bg readability */
/* Stage 01 — doc/lines/shield */
.pricing-page .prc-how-anim--scan .prc-anim-doc {
fill: rgba(0, 122, 255, 0.05) !important;
stroke: #0055bb !important;
}
.pricing-page .prc-how-anim--scan .prc-anim-doc-fold {
fill: rgba(0, 122, 255, 0.10) !important;
stroke: #0055bb !important;
}
.pricing-page .prc-how-anim--scan .prc-anim-line {
fill: #0a8b4e !important;
}
.pricing-page .prc-how-anim--scan .prc-anim-shield circle {
fill: rgba(52,211,153,0.18) !important;
stroke: #0a8b4e !important;
}
.pricing-page .prc-how-anim--scan .prc-anim-shield polyline {
stroke: #0a8b4e !important;
}
/* Stage 02 — envelope */
.pricing-page .prc-how-anim--envelope .prc-anim-env-base {
fill: rgba(0, 122, 255, 0.10) !important;
stroke: #0055bb !important;
}
.pricing-page .prc-how-anim--envelope .prc-anim-env-flap {
fill: rgba(90, 200, 250, 0.18) !important;
stroke: #0055bb !important;
}
.pricing-page .prc-how-anim--envelope .prc-anim-env-trail {
stroke: #0a8b4e !important;
}
.pricing-page .prc-how-anim--envelope .prc-anim-env-sent rect {
fill: rgba(52,211,153,0.20) !important;
stroke: #0a8b4e !important;
}
.pricing-page .prc-how-anim--envelope .prc-anim-env-sent text {
fill: #0a8b4e !important;
}
/* Stage 03 — tablet */
.pricing-page .prc-how-anim--tablet .prc-anim-tablet {
fill: rgba(0, 122, 255, 0.04) !important;
stroke: rgba(0, 30, 80, 0.30) !important;
}
.pricing-page .prc-how-anim--tablet .prc-anim-tablet-screen {
fill: #ffffff !important;
}
.pricing-page .prc-how-anim--tablet .prc-anim-tablet-line {
fill: rgba(10, 20, 36, 0.18) !important;
}
.pricing-page .prc-how-anim--tablet .prc-anim-tablet-badge rect {
fill: rgba(52,211,153,0.20) !important;
stroke: #0a8b4e !important;
}
.pricing-page .prc-how-anim--tablet .prc-anim-tablet-badge text {
fill: #0a8b4e !important;
}
/* Stage 04 — SEPA */
.pricing-page .prc-how-anim--sepa .prc-anim-amount-text {
fill: #0a8b4e !important;
}
.pricing-page .prc-how-anim--sepa .prc-anim-sepa-amount text:last-child {
fill: #6b7593 !important;
}
.pricing-page .prc-how-anim--sepa .prc-anim-sepa-notif rect {
fill: rgba(52,211,153,0.22) !important;
stroke: #0a8b4e !important;
}
.pricing-page .prc-how-anim--sepa .prc-anim-sepa-notif text {
fill: #0a8b4e !important;
}
.pricing-page .prc-how-anim--sepa .prc-anim-sepa-amount-pulse {
animation-name: prc-sepa-amount-pulse-light !important;
}
@keyframes prc-sepa-amount-pulse-light {
0% { filter: drop-shadow(0 0 0 rgba(10,139,78,0)); }
50% { filter: drop-shadow(0 0 12px rgba(10,139,78,0.55)); }
100% { filter: drop-shadow(0 0 0 rgba(10,139,78,0)); }
}
/* 6. Mobile fixes: ensure visual height adapts, gap shrinks */
@media (max-width: 760px) {
.pricing-page .prc-how-section {
padding: 64px 0 64px !important;
}
.pricing-page .prc-how-storyboard {
gap: 56px !important;
}
.pricing-page .prc-how-stage,
.pricing-page .prc-how-stage--reverse {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.pricing-page .prc-how-stage-content {
text-align: center;
align-items: center;
}
.pricing-page .prc-how-stage-desc {
max-width: 100%;
font-size: 0.96rem !important;
}
.pricing-page .prc-how-stage-visual svg.prc-how-anim {
max-width: 100%;
}
/* On mobile, force original visual order (text top, visual bottom) for ALL stages */
.pricing-page .prc-how-stage-content { order: 1 !important; }
.pricing-page .prc-how-stage-visual { order: 2 !important; }
}
/* 7. STAGE FALLBACK: if IO observer fails (older browsers / preview),
stages should still be VISIBLE after 4s grace period. */
.pricing-page .prc-how-stage {
/* Ensure even non-active stages don't stay totally hidden forever */
animation: prc-stage-fallback-show 0.1s ease 4s forwards;
}
@keyframes prc-stage-fallback-show {
to { opacity: 1; transform: translateY(0); }
}
/* When .is-active applied normally, animation finishes immediately via class */
.pricing-page .prc-how-stage.is-active {
animation: none !important;
}
/* === PASS 14b — kill flex centering on prc-how-section, allow natural grow === */
.pricing-page .prc-how-section {
display: block !important; /* not flex */
height: auto !important;
min-height: auto !important;
max-height: none !important;
justify-content: initial !important;
align-items: initial !important;
}
.pricing-page .prc-how-section > .rd-container {
display: block !important;
height: auto !important;
min-height: auto !important;
}
/* === DESIGN QUICK WINS C — popular tier glow + global hover lift === */
/* ════════════════════════════════════════════════════════════════════
Audit quick-win #5: popular pricing tier — scale 1.06 + rotating conic
border glow + stronger drop shadow (was static gradient border).
════════════════════════════════════════════════════════════════════ */
.pricing-page .prc-plan-card--popular {
transform: translateY(-6px) scale(1.045) !important;
z-index: 3;
position: relative;
}
.pricing-page .prc-plan-card--popular:hover {
transform: translateY(-12px) scale(1.05) !important;
}
/* Animated conic-gradient halo behind the popular card */
.pricing-page .prc-plan-card--popular::after {
content: ;
position: absolute;
inset: -2px;
border-radius: inherit;
padding: 2px;
background: conic-gradient(from 0deg,
rgba(0,122,255,0.0) 0deg,
#007AFF 70deg,
#5ac8fa 140deg,
#8cf5d0 210deg,
rgba(140,245,208,0.0) 300deg,
rgba(0,122,255,0.0) 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
animation: prc-popular-halo 6s linear infinite;
pointer-events: none;
opacity: 0.85;
z-index: 1;
}
@keyframes prc-popular-halo {
to { transform: rotate(360deg); }
}
/* ════════════════════════════════════════════════════════════════════
Audit quick-win #7: systematic hover lift on glass/content cards.
════════════════════════════════════════════════════════════════════ */
.pricing-page .prc-plan-card:not(.prc-plan-card--popular) {
transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .25s ease !important;
}
.pricing-page .prc-plan-card:not(.prc-plan-card--popular):hover {
transform: translateY(-6px) !important;
box-shadow: 0 24px 52px rgba(0,0,0,0.34) !important;
}
@media (prefers-reduced-motion: reduce) {
.pricing-page .prc-plan-card--popular::after { animation: none !important; }
}