:root{ --embers:1; }
footer{ position:relative; }
.ftr-embers{ position:absolute; inset:0; width:100%; height:100%;
pointer-events:none; z-index:0; }
footer > *:not(.ftr-embers){ position:relative; z-index:1; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
background: var(--surface-0);
color: var(--text-2);
line-height: 1.55;
overflow-x: hidden;
letter-spacing: -0.005em;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
letter-spacing: -0.022em; font-weight: 600; line-height: 1.15;
}
h1, h2 {
font-family: 'Outfit', 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 700; letter-spacing: -0.04em;
}
h1 { font-weight: 700; }
.section-title { color: var(--text-1); background: none; -webkit-text-fill-color: currentColor; }
.section-title .em, .section-title em {
font-style: normal;
color: var(--head-grad-end);
-webkit-text-fill-color: var(--head-grad-end);
background: none;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }
:root {
--inc-stage:#0B0A0E; --inc-stage-top:#050D0C;
--inc-glass:rgba(10,27,24,.60);
--inc-ac:#3FE0C0; --inc-lit:#79FFFA; --inc-ac-rgb:63,224,192;
--inc-fg:#F6F4FA; --inc-body:#DCD7E6;
--inc-subfg:#A49DB6; --inc-dim:#A79FB4;
--sage-bg:#DBF5EC; --sage-br:#84DEC2; --sage-tx:#0A6E55; --sage-ic:#12A07C; --sage-ic-rgb:18,160,124; --sage-dc:#0C7358; --sage-bg2:#CBF0E1; --sage-br2:#5FD2AE;
color-scheme: light;
--surface-0: #FAF9F5;
--surface-1: #F0EEE6;
--surface-2: #FFFFFF;
--surface-3: #F5F2EA;
--surface-card: rgba(255,255,255,0.72);
--fg-rgb: 0,0,0;
--accent-rgb: 192,78,38;
--fill-1: #FD8D68;
--fill-2: #FF5F6D;
--glow-rgb: 190,120,95;
--shadow-rgb: 60,40,30;
--bg-0: var(--surface-0);
--bg-1: var(--surface-1);
--bg-2: var(--surface-2);
--bg-3: var(--surface-3);
--bg-card: var(--surface-card);
--surface: var(--surface-2);
--purple: var(--ic-2);
--purple-light: var(--ic-2);
--text-1: #1F1714;
--head-grad-end: #C2410C; --em-a:#C4400A; --em-b:#E2551F; --chip-tx:#9A3412; --head-grad-end2: #D2542A;
--text-2: #40403E;
--text-3: #6B6B69;
--on-accent: #2B1509;
--accent: #C04E26;
--accent-light: #C2410C;
--accent-dark: #A64B2A;
--accent-soft: #CC785C;
--accent-glow: rgba(166,75,42,0.10);
--accent-glow-md: rgba(166,75,42,0.16);
--accent-glow-strong: rgba(166,75,42,0.26);
--head-end: #FD8D68;
--shim-1: #C04E26;
--border: rgba(var(--shadow-rgb),0.10);
--border-light: rgba(0,0,0,0.16);
--success: #047857;
--success-light: #03694F;
--success-glow: rgba(4,120,87,0.14);
--danger: #B91C1C;
--warning: #92400E;
--ic-1: #1D4ED8; --ic-2: #6D28D9; --ic-3: #A64B2A;
--ic-4: #92400E; --ic-5: #0F766E; --ic-6: #047857;
--surface0-rgb: 250,249,245; --surface2-rgb: 255,255,255;
--ic1-rgb: 29,78,216; --ic2-rgb: 109,40,217;
--warn-rgb: 146,64,14; --danger-rgb: 185,28,28; --success-rgb: 4,120,87;
}
[data-theme="dark"] {
--sage-bg:rgba(18,160,124,0.15); --sage-br:rgba(18,160,124,0.34); --sage-tx:#7FE3C2; --sage-ic:#5FD2AE; --sage-ic-rgb:95,210,174; --sage-dc:#79DDBC; --sage-bg2:rgba(18,160,124,0.23); --sage-br2:rgba(18,160,124,0.48);
--head-grad-end: #FD8D68; --em-a:#FD8D68; --em-b:#FF5F6D; --chip-tx:#FD8D68; --head-grad-end2: #FF5F6D;
color-scheme: dark;
--surface-0: #16120F;
--surface-1: #1C1714;
--surface-2: #241D19;
--surface-3: #2E2621;
--surface-card: rgba(36,29,25,0.7);
--fg-rgb: 255,255,255;
--accent-rgb: 253,141,104;
--fill-1: #FD8D68;
--fill-2: #FF5F6D;
--glow-rgb: 253,141,104;
--shadow-rgb: 0,0,0;
--text-1: #F7F1EC;
--text-2: #DACCC2;
--text-3: #A99284;
--on-accent: #2B1509;
--accent: #FD8D68;
--accent-light: #FF5F6D;
--accent-dark: #CA7153;
--accent-soft: #FFB59B;
--accent-glow: rgba(253,141,104,0.14);
--accent-glow-md: rgba(253,141,104,0.22);
--accent-glow-strong: rgba(253,141,104,0.38);
--head-end: #FFD2C2;
--shim-1: #FFD9C9;
--border: rgba(var(--fg-rgb),0.08);
--border-light: rgba(255,255,255,0.12);
--success: #34D399;
--success-light: #6EE7B7;
--success-glow: rgba(52,211,153,0.18);
--danger: #F87171;
--warning: #FBBF24;
--ic-1: #60A5FA; --ic-2: #A78BFA; --ic-3: #FD8D68;
--ic-4: #FBBF24; --ic-5: #2DD4BF; --ic-6: #34D399;
--surface0-rgb: 22,18,15; --surface2-rgb: 36,29,25;
--ic1-rgb: 59,130,246; --ic2-rgb: 139,92,246;
--warn-rgb: 251,191,36; --danger-rgb: 239,68,68; --success-rgb: 52,211,153;
}
html, body { background: var(--surface-0); color: var(--text-2); max-width: 100%; overflow-x: hidden; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.page-bg {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(ellipse 80% 60% at 50% -20%, rgba(var(--accent-rgb),0.07), transparent),
radial-gradient(ellipse 60% 40% at 80% 60%, rgba(var(--accent-rgb),0.04), transparent);
}
.grid-overlay {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(rgba(var(--fg-rgb),0.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--fg-rgb),0.015) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, black 20%, transparent 80%);
}
.navbar {
position: fixed; top: 0; width: 100%; z-index: 100;
padding: 18px 0; transition: all 0.4s;
}
.navbar.scrolled {
padding: 12px 0;
background: rgba(var(--surface0-rgb),0.85);
backdrop-filter: blur(20px) saturate(1.2);
border-bottom: 1px solid var(--border);
}
.navbar .container { display: flex; justify-content: space-between; align-items: center; }
.navbar > .container > .theme-toggle { order: 2; margin-left: 18px; z-index: 102; }
.navbar > .container > .nav-links { order: 1; }
.navbar > .container > .mobile-menu-btn { order: 3; }
@media (max-width: 768px){
.navbar > .container > .theme-toggle { margin-left: auto; margin-right: 16px; }
.navbar > .container > .mobile-menu-btn { margin-left: 0; }}
@media (max-width: 768px){
.navbar > .container { padding-left:18px; padding-right:18px; flex-wrap:nowrap; }
.navbar > .container > .logo { min-width:0; flex:0 1 auto; }
.navbar > .container > .theme-toggle { margin-left:auto; margin-right:14px; flex:0 0 52px; }
.navbar > .container > .mobile-menu-btn { flex:0 0 28px; z-index:103; }
.nav-links.active { z-index:99; }}
.nav-cta { display: inline-flex; align-items: center; gap: 14px; }
.logo-mark.logo-mark-img { background:none; box-shadow:none; border-radius:0; width:34px; height:34px; display:inline-flex; }
.logo-mark.logo-mark-img img { width:100%; height:100%; object-fit:contain; display:block; }
.logo-word { display:inline-flex; align-items:center; gap:3px; }
.logo-word img { height:19px; width:auto; display:block; }
.logo-word .lw-dark { display:none; }
[data-theme="dark"] .logo-word .lw-light { display:none; }
[data-theme="dark"] .logo-word .lw-dark { display:block; }
.logo {
display: inline-flex; align-items: center; gap: 10px;
font-size: 1.2rem; font-weight: 600; color: var(--text-1);
letter-spacing: -0.022em;
font-family: 'Inter', sans-serif;
}
.logo-mark {
width: 30px; height: 30px; border-radius: 9px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-dark) 100%);
box-shadow: 0 0 0 1px rgba(var(--glow-rgb),0.4), 0 6px 18px rgba(var(--glow-rgb),0.28), inset 0 1px 0 rgba(var(--fg-rgb),0.5);
flex-shrink: 0;
}
.logo-mark svg { display: block; }
.nav-links { display: flex; align-items: center; gap: 36px; }
.nav-links a {
font-size: 0.854rem; font-weight: 500; color: var(--text-3);
transition: color 0.25s; position: relative;
}
.nav-links a:hover { color: var(--text-1); }
.nav-links a::after {
content: ''; position: absolute; bottom: -4px; left: 0;
width: 0; height: 1.5px; background: var(--accent); transition: width 0.3s;
}
.nav-links a:hover::after { width: 100%; }
.nav-cta .btn {
padding: 10px 22px; font-size: 0.815rem; font-weight: 600;
background: linear-gradient(135deg, var(--fill-2), var(--fill-1));
color: var(--on-accent); border: none;
}
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 10px; padding: 14px 30px; border-radius: 14px;
font-weight: 600; font-size: 0.892rem; border: none;
cursor: pointer; transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
position: relative; overflow: hidden;
}
.btn-primary {
background: linear-gradient(135deg, var(--fill-2), var(--fill-1));
color: var(--on-accent); font-weight: 600;
box-shadow: 0 0 20px rgba(var(--glow-rgb),0.3), 0 4px 16px rgba(var(--shadow-rgb),0.4);
}
.btn-primary::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, var(--fill-2), var(--fill-1));
opacity: 0; transition: opacity 0.35s;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 0 40px rgba(var(--glow-rgb),0.35), 0 8px 32px rgba(var(--shadow-rgb),0.5);
}
.btn-primary span, .btn-primary svg { position: relative; z-index: 1; }
.btn-primary::after {
content: ''; position: absolute;
top: 0; left: -100%; width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(var(--fg-rgb),0.15), transparent);
animation: btn-shimmer 3s ease-in-out infinite;
}
@keyframes btn-shimmer {
0% { left: -100%; }
50% { left: 150%; }
100% { left: 150%; }
}
.btn-glass {
background: rgba(var(--accent-rgb),0.08);
border: 1px solid rgba(var(--accent-rgb),0.25);
backdrop-filter: blur(16px) saturate(1.4);
color: var(--accent-light);
position: relative; overflow: hidden;
}
.btn-glass::before {
content: ''; position: absolute;
top: -50%; left: -50%; width: 200%; height: 200%;
background: linear-gradient(135deg, transparent 40%, rgba(var(--fg-rgb),0.06) 50%, transparent 60%);
animation: glass-shine 4s ease-in-out infinite;
}
@keyframes glass-shine {
0% { transform: translateX(-100%) translateY(-100%) rotate(35deg); }
50% { transform: translateX(100%) translateY(100%) rotate(35deg); }
100% { transform: translateX(100%) translateY(100%) rotate(35deg); }
}
.btn-glass:hover {
background: rgba(var(--accent-rgb),0.15);
border-color: rgba(var(--accent-rgb),0.4);
box-shadow: 0 0 30px rgba(var(--glow-rgb),0.15), inset 0 1px 0 rgba(var(--fg-rgb),0.06);
transform: translateY(-2px);
}
.arrow-icon { transition: transform 0.3s; }
.btn:hover .arrow-icon { transform: translateX(3px); }
.section-label {
display: inline-flex; align-items: center; gap: 10px;
font-size: 0.728rem; font-weight: 700; letter-spacing: 0.15em;
text-transform: uppercase; color: var(--accent);
margin-bottom: 20px;
}
.pricing-hero {
padding: 160px 0 70px;
text-align: center;
position: relative; z-index: 1;
}
.pricing-hero .badge { margin-bottom: 32px; }
.pricing-hero h1 {
font-size: clamp(2.4rem, 5vw, 3.6rem);
color: var(--text-1);
line-height: 1.1;
margin-bottom: 20px;
min-height: 1.2em;
}
.typing-cursor {
display: inline-block;
width: 3px; height: 0.85em;
background: var(--accent-light);
margin-left: 4px;
vertical-align: text-bottom;
animation: cursor-blink 0.8s steps(1) infinite;
border-radius: 2px;
box-shadow: 0 0 8px rgba(var(--glow-rgb),0.5);
}
@keyframes cursor-blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
.typed-gradient {
background: linear-gradient(120deg, var(--text-1) 0%, var(--text-1) 34%, var(--head-grad-end) 100%);
background-size: 300% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: typed-gradient-flow 6s ease-in-out infinite;
}
@keyframes typed-gradient-flow {
0% { background-position: 0% center; }
50% { background-position: 100% center; }
100% { background-position: 0% center; }
}
.pricing-hero .hero-sub {
font-size: 1.018rem;
color: var(--text-3);
max-width: 580px;
margin: 0 auto;
line-height: 1.7;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.6s 0.3s, transform 0.6s 0.3s;
}
.pricing-hero .hero-sub.visible { opacity: 1; transform: translateY(0); }
.p-card .btn { width: 100%; justify-content: center; }
.p-card.dfy {
border: 1px solid rgba(251,191,36,0.25) !important;
overflow: visible;
box-shadow: none;
}
.setup-section {
position: relative; z-index: 1;
padding: 60px 0 20px;
}
.setup-mid {
flex: 1; padding: 28px 30px;
display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.pricing-faq {
position: relative; z-index: 1;
padding: 80px 0;
}
.pricing-faq-header { text-align: center; margin-bottom: 40px; }
.pricing-faq-header h2 {
font-size: clamp(1.8rem, 3.5vw, 2.4rem); color: var(--text-1); margin-bottom: 12px;
}
.pricing-faq-header p { font-size: 0.921rem; color: var(--text-3); }
.faq-list {
max-width: 720px; margin: 0 auto;
display: flex; flex-direction: column; gap: 8px;
}
.faq-item {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: 14px; overflow: hidden; transition: border-color 0.3s;
}
.faq-item.active { border-color: rgba(var(--accent-rgb),0.2); }
.faq-q {
display: flex; justify-content: space-between; align-items: center;
width: 100%; padding: 18px 22px;
background: none; border: none; cursor: pointer;
font-size: 0.892rem; font-weight: 600; color: var(--text-1);
text-align: left; line-height: 1.4; transition: color 0.3s;
}
.faq-q:hover { color: var(--accent-light); }
.faq-q svg {
flex-shrink: 0; color: var(--text-3);
transition: transform 0.3s, color 0.3s;
}
.faq-item.active .faq-q svg { transform: rotate(45deg); color: var(--accent); }
.faq-a {
max-height: 0; overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s;
padding: 0 22px;
}
.faq-item.active .faq-a { max-height: 1400px; padding: 0 22px 18px; }
.faq-a p { font-size: 0.854rem; color: var(--text-3); line-height: 1.7; }
.cta-section {
position: relative; z-index: 1;
padding: 80px 0 100px; text-align: center;
}
.cta-glow {
position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
width: min(600px, 92vw); height: 300px;
background: radial-gradient(ellipse, rgba(var(--accent-rgb),0.08), transparent 70%);
pointer-events: none;
}
.cta-section h2 {
font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 16px;
background: linear-gradient(120deg, var(--text-1) 0%, var(--text-1) 34%, var(--head-grad-end) 100%);
background-size: 300% auto;
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
animation: cta-gradient-flow 5s ease-in-out infinite;
}
@keyframes cta-gradient-flow {
0% { background-position: 0% center; }
50% { background-position: 100% center; }
100% { background-position: 0% center; }
}
.cta-section p {
font-size: 0.951rem; color: var(--text-3); max-width: 520px;
margin: 0 auto 36px; line-height: 1.7;
}
.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.footer {
position: relative; z-index: 1;
padding: 60px 0 30px; border-top: 1px solid var(--border);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.footer-brand p {
font-size: 0.795rem; color: var(--text-3); margin-top: 16px; line-height: 1.7; max-width: 320px;
}
.footer-col h3 {
font-size: 0.776rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.1em; color: var(--text-1); margin-bottom: 16px;
}
.footer-col a {
display: block; font-size: 0.815rem; color: var(--text-3);
padding: 5px 0; transition: color 0.2s;
}
.footer-col a:hover { color: var(--accent-light); }
.footer-bottom {
margin-top: 40px; padding-top: 20px;
border-top: 1px solid var(--border);
display: flex; justify-content: center;
}
.footer-bottom p { font-size: 0.737rem; color: var(--text-3); }
.mobile-menu-btn {
display: none; background: none; border: none; cursor: pointer;
width: 28px; height: 20px; position: relative; z-index: 101;
}
.mobile-menu-btn span {
display: block; width: 100%; height: 2px; background: var(--text-2);
border-radius: 2px; transition: all 0.3s; position: absolute; left: 0;
}
.mobile-menu-btn span:nth-child(1) { top: 0; }
.mobile-menu-btn span:nth-child(2) { top: 9px; }
.mobile-menu-btn span:nth-child(3) { top: 18px; }
.mobile-menu-btn.active span:nth-child(1) { transform: rotate(45deg); top: 9px; }
.mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active span:nth-child(3) { transform: rotate(-45deg); top: 9px; }
.reveal {
opacity: 0; transform: translateY(30px);
transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.typed-gradient .li-inline-h1,
.fb-feat {
position: relative;
}
@media (max-width: 768px) {
.nav-links{ display: none; }
.nav-links.active{
display: flex; flex-direction: column; gap: 0;
position: absolute; top: 100%; left: 0; width: 100%;
background: var(--surface-0);
border-bottom: 1px solid var(--border);
box-shadow: 0 18px 40px rgba(var(--shadow-rgb),0.18);
padding: 16px 24px 20px; z-index: 99;
}
.nav-links.active { display: flex; }
.nav-links.active a{ font-size: 0.97rem; padding: 12px 0; }
.mobile-menu-btn { display: block; }
.pricing-hero { padding: 130px 0 40px; }
.pricing-hero h1 { font-size: 2rem; }
.footer-grid { grid-template-columns: 1fr; gap: 28px; }}
@media (max-width: 480px) {
.pricing-hero { padding: 120px 0 32px; }
.pricing-hero h1 { font-size: 1.7rem; }
.pricing-hero .hero-sub { font-size: 0.873rem; }}
.theme-toggle{
position:relative; width:52px; height:28px; flex:0 0 auto;
border-radius:100px; cursor:pointer; padding:0;
background:var(--surface-3); border:1px solid var(--border-light);
transition:background .3s ease, border-color .3s ease;
display:inline-flex; align-items:center;
}
.theme-toggle:hover{ border-color:var(--accent); }
.theme-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.theme-toggle .tt-knob{
position:absolute; top:2px; left:2px; width:22px; height:22px;
border-radius:50%; background:var(--fill-1);
display:flex; align-items:center; justify-content:center;
transition:transform .32s cubic-bezier(.16,1,.3,1), background .3s ease;
}
[data-theme="dark"] .theme-toggle .tt-knob{ transform:translateX(24px); }
.theme-toggle svg{ width:13px; height:13px; color:var(--on-accent); display:block; }
.theme-toggle .tt-moon{ display:none; }
[data-theme="dark"] .theme-toggle .tt-sun{ display:none; }
[data-theme="dark"] .theme-toggle .tt-moon{ display:block; }
@media (prefers-reduced-motion: reduce){
.theme-toggle .tt-knob{ transition:none; }}
.nav-cta .btn{ line-height:1.2; white-space:nowrap; }
@media (max-width: 768px){
.nav-links.active{ padding-bottom: 20px; }
.nav-links.active .nav-cta{
display:block; width:100%; margin-top:8px; padding-top:14px;
border-top:1px solid var(--border);
}
.nav-links.active .nav-cta .btn{
display:flex; box-sizing:border-box; width:100%;
min-height:46px; height:auto; padding:12px 20px;
line-height:1.2; font-size:0.9rem; border-radius:12px;
align-items:center; justify-content:center; text-align:center;
}}
@media (max-width: 768px){
.footer-grid{ grid-template-columns: 1fr 1fr !important; gap: 26px 18px !important; }
.footer-brand{ grid-column: 1 / -1; }
.footer-col a{ padding: 5px 0; }}
.section-title em,
.section-title .em{
font-style: normal;
background: linear-gradient(120deg, var(--text-1) 0%, var(--text-1) 30%, var(--head-grad-end) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
#typingH1 .li-inline-h1{
display:inline-block; width:0.82em; height:0.82em; vertical-align:middle;
margin:0 0.08em; position:relative; top:-0.04em;
filter:drop-shadow(0 0 8px rgba(var(--glow-rgb),0.4));
}
.pricing-hero{ padding:70px 0 20px; }
.ph-head .section-desc{ margin:0 auto; }
.pp-toggle{ display:inline-flex; gap:4px; margin-top:24px; padding:4px; border-radius:100px;
background:rgba(var(--fg-rgb),0.05); border:1px solid var(--border); }
.pp-tg{ font:inherit; font-size:0.8rem; font-weight:600; color:var(--text-3); background:none;
border:0; cursor:pointer; padding:8px 18px; border-radius:100px; display:inline-flex;
align-items:center; gap:7px; transition:background .25s ease, color .25s ease; }
.pp-tg i{ font-style:normal; font-size:0.66rem; font-weight:700; color:var(--sage-tx);
background:var(--sage-bg); border:1px solid var(--sage-br); padding:2px 7px; border-radius:100px; }
.pp-tg.on{ background:var(--surface-2); color:var(--text-1); box-shadow:0 1px 4px rgba(var(--shadow-rgb),0.10); }
.pp-tag{ position:absolute; top:-11px; left:50%; transform:translateX(-50%); white-space:nowrap;
font-size:0.62rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
color:var(--sage-tx); background:var(--sage-bg); border:1px solid var(--sage-br);
padding:4px 12px; border-radius:100px; }
.pp-name{ font-size:0.72rem; font-weight:700; letter-spacing:0.10em; text-transform:uppercase;
color:var(--text-3); margin-bottom:12px; }
.pp-cur{ font-size:1.15rem; font-weight:700; color:var(--text-1); }
.pp-amt{ font-size:2.35rem; font-weight:800; letter-spacing:-0.03em; color:var(--text-1); line-height:1; }
.pp-per{ font-size:0.78rem; color:var(--text-3); margin-left:3px; }
.pp-bill{ font-size:0.7rem; color:var(--text-3); margin-top:6px; min-height:1.3em; }
.pp-bill-y{ color:var(--sage-tx); font-weight:600; }
.pp-setup{ margin-top:12px; font-size:0.73rem; color:var(--text-2);
background:rgba(var(--fg-rgb),0.04); border:1px solid var(--border);
border-radius:9px; padding:8px 10px; }
.pp-setup b{ color:var(--text-1); }
.pp-setup span{ display:block; font-size:0.66rem; color:var(--text-3); margin-top:1px; }
.pp-cta{ width:100%; justify-content:center; }
.pp-feats{ list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--border);
display:flex; flex-direction:column; gap:9px; }
.pp-feats li{ position:relative; padding-left:22px; font-size:0.78rem; line-height:1.5; color:var(--text-2); }
.pp-feats li::before{ content:'\2713'; position:absolute; left:0; top:0; font-weight:800;
font-size:0.75rem; color:var(--sage-ic); }
.pp-feats li b{ color:var(--text-1); font-weight:700; }
.pp-feats li.pp-no{ color:var(--text-3); }
.pp-feats li.pp-no::before{ content:'\2014'; color:var(--text-3); font-weight:600; }
.setup-section{ padding:66px 0; }
.ps-copy .section-desc{ margin-bottom:20px; }
.compare-section{ padding:10px 0 66px; }
@media (max-width:1024px){
.pp-tag{ top:-10px; }}
@media (max-width:768px){
.pricing-hero{ padding:46px 0 14px; }
.setup-section{ padding:46px 0; }
.compare-section{ padding:6px 0 46px; }
.pp-amt{ font-size:2rem; }
.pp-toggle{ width:100%; justify-content:center; }}
@media (max-width:560px){
.pp-tg{ font-size:0.75rem; padding:8px 13px; }
.pp-tg i{ font-size:0.6rem; }}
.footer-wordmark-wrap{ overflow:hidden;
width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
margin-top:44px;
height:clamp(2.88rem, 12.8vw, 10.4rem);
display:flex; align-items:flex-start; justify-content:center;
pointer-events:none; user-select:none; -webkit-user-select:none;
-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 46%, rgba(0,0,0,0.55) 74%, rgba(0,0,0,0) 100%);
mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 46%, rgba(0,0,0,0.55) 74%, rgba(0,0,0,0) 100%); }
.footer-wordmark{ font-family:'Outfit', 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight:700;
font-size:clamp(3.6rem, 16vw, 13rem); line-height:0.8;
letter-spacing:-0.045em; color:var(--text-1); opacity:0.055;
white-space:nowrap; }
[data-theme="dark"] .footer-wordmark{ opacity:0.085; }
@media (max-width:600px){ .footer-wordmark-wrap{ margin-top:30px; }}
footer a:not(.logo), .footer a:not(.logo){
color:var(--text-3); text-decoration:none; transition:color .2s ease; }
footer a:not(.logo):hover, .footer a:not(.logo):hover{ color:var(--accent); }
footer a:focus-visible, .footer a:focus-visible{
outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }
footer [aria-current="page"], .footer [aria-current="page"]{
color:var(--text-2); font-weight:600; }
[data-billgroup] .pp-bill-m{ display:inline; }
[data-billgroup] .pp-bill-y{ display:none; }
[data-billgroup].bill-c .pp-bill-m{ display:none; }
[data-billgroup].bill-c .pp-bill-y{ display:inline; }
.pp-toggle{ display:inline-flex; gap:2px; padding:3px; border-radius:999px;
background:rgba(var(--fg-rgb),.05); border:1px solid var(--border); }
.pp-tg{ font:inherit; font-size:.8rem; font-weight:600; cursor:pointer;
border:0; background:transparent; color:var(--text-3);
padding:7px 15px; border-radius:999px; transition:color .18s, background-color .18s; }
.pp-tg:hover{ color:var(--text-1); }
.pp-tg.on{ background:var(--surface-2); color:var(--text-1);
box-shadow:0 1px 3px rgba(var(--shadow-rgb),.14); }
.pp-tg:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.pricing-hero{ padding:118px 0 54px; text-align:center; }
.ph-h1{ font-size:clamp(2.05rem, 5.2vw, 3.45rem); line-height:1.06;
letter-spacing:-.028em; margin:14px 0 0; }
.ph-sub{ max-width:660px; margin:18px auto 0; color:var(--text-2);
font-size:clamp(.98rem, 1.5vw, 1.075rem); line-height:1.62; }
.ag-price .pp-cur{ font-size:1.25rem; font-weight:700; color:var(--text-2);
align-self:flex-start; margin-top:.45em; }
.ag-price .pp-amt{ font-family:'Outfit','Space Grotesk',-apple-system,sans-serif;
font-weight:700; font-size:3.15rem; line-height:1; letter-spacing:-.035em;
color:var(--text-1); }
.ag-price .pp-per{ font-size:.9rem; color:var(--text-3); margin-left:3px; }
.hinge{ padding:0; }
.hinge-inner{ position:relative; left:50%; margin-left:-50vw; width:100vw;
padding:74px 0 78px; text-align:center;
background:
radial-gradient(ellipse 62% 100% at 50% 50%, rgba(var(--accent-rgb),.11), transparent 72%),
var(--surface-3);
border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
[data-theme="dark"] .hinge-inner{
background:
radial-gradient(ellipse 62% 100% at 50% 50%, rgba(var(--accent-rgb),.16), transparent 72%),
var(--surface-2); }
.hinge-kicker{ margin:0; font-size:.74rem; font-weight:700; letter-spacing:.16em;
text-transform:uppercase; color:var(--accent); }
.hinge-h2{ margin:9px 0 0; font-size:clamp(1.85rem, 4.4vw, 3rem);
line-height:1.08; letter-spacing:-.03em; color:var(--text-1); }
.hinge-sub{ max-width:640px; margin:18px auto 0; color:var(--text-2);
font-size:1rem; line-height:1.62; }
.vs-section .pp-toggle{ margin:26px 0 0; }
.vs-card .pp-tag{ position:absolute; top:-11px; left:28px;
font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
color:var(--on-accent); background:var(--accent);
padding:4px 11px; border-radius:999px; }
.vs-card .pp-name{ margin:0; font-size:1.2rem; font-weight:700;
letter-spacing:-.01em; color:var(--text-1); }
.vs-price{ margin:12px 0 0; display:flex; align-items:baseline; gap:1px; }
.vs-price .pp-cur{ font-size:1.2rem; font-weight:700; color:var(--text-2);
align-self:flex-start; margin-top:.42em; }
.vs-price .pp-amt{ font-family:'Outfit','Space Grotesk',-apple-system,sans-serif;
font-weight:700; font-size:3rem; line-height:1; letter-spacing:-.035em;
color:var(--text-1); }
.vs-price .pp-per{ font-size:.88rem; color:var(--text-3); margin-left:3px; }
.vs-card .pp-bill{ margin:5px 0 0; font-size:.8rem; color:var(--text-3); min-height:1.2em; }
.vs-card .pp-setup{ margin:14px 0 0; font-size:.85rem; color:var(--text-2);
padding:9px 12px; border-radius:9px; background:rgba(var(--fg-rgb),.045); }
.vs-card .pp-setup b{ color:var(--text-1); font-weight:700; }
.vs-card .pp-setup span{ display:block; font-size:.75rem; color:var(--text-3); margin-top:1px; }
.vs-line{ margin:16px 0 0; font-size:.95rem; line-height:1.5; color:var(--text-1);
font-weight:500; }
.vs-card .pp-cta{ display:block; width:100%; text-align:center; margin:18px 0 0; }
.vs-card .pp-feats{ list-style:none; padding:0; margin:20px 0 0;
border-top:1px solid var(--border); padding-top:18px; }
.vs-card .pp-feats li{ position:relative; padding-left:23px; margin-bottom:9px;
font-size:.9rem; color:var(--text-2); line-height:1.45; }
.vs-card .pp-feats li:last-child{ margin-bottom:0; }
.vs-card .pp-feats li::before{ content:''; position:absolute; left:2px; top:.44em;
width:9px; height:9px; border-radius:50%; border:2px solid var(--accent); opacity:.75; }
.vs-card .pp-feats li b{ color:var(--text-1); font-weight:700; }
.ao-section{ padding:44px 0 10px; }
.ao-band{ border:1px dashed var(--border); border-radius:16px; padding:26px 28px;
background:rgba(var(--fg-rgb),.022); }
.ao-head{ text-align:center; }
.ao-h2{ margin:0; font-size:1.15rem; font-weight:700; letter-spacing:-.012em;
color:var(--text-1); }
.ao-sub{ margin:5px 0 0; font-size:.9rem; color:var(--text-3); }
.ao-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:22px 0 0; }
.ao-item{ border:1px solid var(--border); border-radius:11px; padding:15px 16px;
background:var(--surface-2); font-size:.86rem; color:var(--text-2); line-height:1.45; }
.ao-item b{ display:block; font-family:'Outfit','Space Grotesk',-apple-system,sans-serif;
font-size:1.3rem; font-weight:700; letter-spacing:-.02em; color:var(--text-1);
margin-bottom:5px; }
.ao-item b span{ font-family:inherit; font-size:.72rem; font-weight:600;
letter-spacing:0; color:var(--text-3); }
.cz-cmp-wrap{ margin:30px 0 0; }
.cz-cmp{ width:100%; border-collapse:collapse; font-size:.9rem; }
.cz-cmp th, .cz-cmp td{ padding:13px 16px; text-align:left;
border-bottom:1px solid var(--border); vertical-align:middle; }
.cz-cmp thead th{ font-size:.72rem; font-weight:700; letter-spacing:.1em;
text-transform:uppercase; color:var(--text-3); border-bottom:1px solid var(--border); }
.cz-cmp thead th:not(:first-child){ text-align:center; color:var(--text-1); font-size:.95rem;
letter-spacing:-.01em; text-transform:none; }
.cz-cmp tbody th{ font-weight:500; color:var(--text-2); }
.cz-cmp tbody td{ text-align:center; color:var(--text-1); }
.cz-cmp tbody td i{ display:block; font-style:normal; font-size:.72rem; color:var(--text-3); }
.cz-cmp tbody tr:last-child th, .cz-cmp tbody tr:last-child td{ border-bottom:0; }
.cz-y{ display:inline-flex; width:19px; height:19px; align-items:center;
justify-content:center; border-radius:50%; color:var(--accent);
background:rgba(var(--accent-rgb),.13); }
.cz-y svg{ width:11px; height:11px; }
.cz-n{ color:var(--text-3); }
.cz-sr{ position:absolute; width:1px; height:1px; overflow:hidden;
clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:768px){
.pricing-hero{ padding:96px 0 40px; }
.hinge-inner{ padding:56px 0 58px; }
.ao-grid{ grid-template-columns:1fr; gap:10px; }
.ao-band{ padding:22px 18px; }
.cz-cmp thead{ display:none; }
.cz-cmp, .cz-cmp tbody, .cz-cmp th, .cz-cmp td{ display:block; }
.cz-cmp tbody tr{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;
border:1px solid var(--border); border-radius:12px;
padding:12px 14px 13px; margin-bottom:9px; }
.cz-cmp tbody th{ grid-column:1 / -1; padding:0 0 9px; border:0;
font-size:.85rem; font-weight:600; color:var(--text-1); }
.cz-cmp tbody td{ padding:0; border:0; text-align:center; font-size:.85rem; }
.cz-cmp tbody td::before{ content:attr(data-h); display:block; font-size:.6rem;
font-weight:700; letter-spacing:.09em; text-transform:uppercase;
color:var(--text-3); margin-bottom:3px; }
.cz-cmp tbody tr:last-child th, .cz-cmp tbody tr:last-child td{ border-bottom:0; }}
@media (max-width:560px){
.pp-tg{ padding:7px 11px; font-size:.75rem; }
.ag-price .pp-amt, .vs-price .pp-amt{ font-size:2.65rem; }}
@media (max-width:480px){
.pp-toggle{ width:100%; }
.pp-tg{ flex:1; }
.cz-cmp tbody td{ font-size:.8rem; }}
.pl-section{ padding:20px 0 8px; }
.pl-grid{ display:grid; grid-template-columns:1fr 2.08fr; gap:30px; align-items:start; }
.pl-col{ min-width:0; }
.pl-col-a{ min-width:0; }
.pl-lab{ display:flex; align-items:center; justify-content:space-between;
gap:14px; flex-wrap:wrap; min-height:44px; margin-bottom:14px;
padding-bottom:12px; border-bottom:1px solid var(--border); }
.pl-lab-t{ font-size:.82rem; font-weight:700; letter-spacing:.03em;
color:var(--text-3); }
.pl-lab-v .pl-lab-t{ color:var(--accent); }
.pl-lab .pp-toggle{ flex:none; }
.pl-col-v{ position:relative; }
.pl-col-v::before{ content:''; position:absolute; left:-15px; top:6px; bottom:6px;
width:1px; background:var(--border); }
.pl-vgrid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.pl-card{ position:relative; border:1px solid var(--border); border-radius:18px;
padding:28px 24px 26px; background:var(--surface-2);
display:flex; flex-direction:column; height:100%; }
.pl-card.pl-hi{ border-color:rgba(var(--accent-rgb),.42);
box-shadow:0 10px 34px rgba(var(--shadow-rgb),.10); }
.pl-card .pp-tag{ position:absolute; top:-11px; left:24px;
font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
color:var(--on-accent); background:var(--accent);
padding:4px 11px; border-radius:999px; }
.pl-card .pp-name{ margin:0; font-size:1.15rem; font-weight:700;
letter-spacing:-.01em; color:var(--text-1); }
.pl-card .vs-price{ margin:10px 0 0; }
.pl-card .pp-bill{ margin:5px 0 0; font-size:.78rem; color:var(--text-3); min-height:1.2em; }
.pl-card .pp-setup{ margin:13px 0 0; font-size:.83rem; color:var(--text-2);
padding:9px 11px; border-radius:9px; background:rgba(var(--fg-rgb),.045); }
.pl-card .pp-setup b{ color:var(--text-1); font-weight:700; }
.pl-card .pp-setup span{ display:block; font-size:.73rem; color:var(--text-3); margin-top:1px; }
.pl-nosetup{ font-weight:600; }
.pl-card .vs-line{ margin:15px 0 0; font-size:.86rem; line-height:1.55; }
.pl-card .pp-cta{ display:block; width:100%; text-align:center; margin:16px 0 0; }
.pl-card .pp-feats{ list-style:none; padding:18px 0 0; margin:18px 0 0;
border-top:1px solid var(--border); }
.pl-card .pp-feats li{ position:relative; padding-left:22px; margin-bottom:8px;
font-size:.86rem; color:var(--text-2); line-height:1.45; }
.pl-card .pp-feats li:last-child{ margin-bottom:0; }
.pl-card .pp-feats li::before{ content:''; position:absolute; left:2px; top:.44em;
width:9px; height:9px; border-radius:50%; border:2px solid var(--accent); opacity:.75; }
.pl-card .pp-feats li b{ color:var(--text-1); font-weight:700; }
.pl-card .pp-feats li.pl-no{ color:var(--text-3); }
.pl-card .pp-feats li.pl-no::before{ border-color:rgba(var(--fg-rgb),.26); }
.compare-section + .hinge .hinge-inner{ margin-top:48px; }
@media (max-width:1100px){
.pl-grid{ grid-template-columns:1fr; gap:34px; }
.pl-col-v::before{ display:none; }
.pl-col-v{ padding-top:6px; border-top:1px solid var(--border); }}
@media (max-width:820px){
.pl-vgrid{ grid-template-columns:1fr; gap:26px; }}
@media (max-width:560px){
.pl-lab{ flex-direction:column; align-items:flex-start; gap:10px; }
.pl-lab .pp-toggle{ width:100%; }
.pl-lab .pp-tg{ flex:1; }
.pl-card{ padding:26px 20px 24px; }}
:root{ --pp-gap:76px; }
.pl-grid{ align-items:stretch; }
.pl-col{ display:flex; flex-direction:column; }
.pl-col-a > .pl-card{ flex:1 1 auto; }
.pl-vgrid{ align-items:stretch; flex:1 1 auto; }
.pl-card{ height:auto; }
.pl-card .vs-line{ min-height:7.8em; }
.pl-card .pp-feats li::before{
border-color:rgba(var(--fg-rgb),.30); opacity:1; }
.pl-card .pp-feats li.pl-no::before{
border-color:rgba(var(--fg-rgb),.16); }
.ao-band{ border:1px solid var(--border); border-style:solid;
background:var(--surface-3); }
[data-theme="dark"] .ao-band{ background:rgba(var(--fg-rgb),.035); }
.pl-lab{ align-items:center; gap:18px; }
.pl-lab-t{ flex:1 1 auto; min-width:0; font-size:.8rem; font-weight:700;
letter-spacing:.02em; line-height:1.35; }
.pl-lab .pp-toggle{ flex:0 0 auto; margin-left:auto; }
.pl-section{ padding:26px 0 0; }
.compare-section + .hinge .hinge-inner{ margin-top:var(--pp-gap); padding:58px 0 60px; }
.ao-section{ padding:var(--pp-gap) 0 0; }
.setup-section{ padding:var(--pp-gap) 0 0; }
.compare-section{ padding:var(--pp-gap) 0 0; }
.pricing-faq{ padding:var(--pp-gap) 0 0; }
@media (max-width:768px){
:root{ --pp-gap:52px; }
.pl-card .vs-line{ min-height:0; }
.compare-section + .hinge .hinge-inner{ padding:46px 0 48px; }}
@media (max-width:560px){
.pl-lab-t{ flex:1 1 100%; }
.pl-lab .pp-toggle{ margin-left:0; }}
.pl-card .pp-tag{ color:#fff; }
@media (min-width:1101px){
.pl-grid{ grid-template-columns:1fr 2.08fr; grid-template-rows:auto 1fr;
column-gap:30px; row-gap:0; }
.pl-col{ display:contents; }
.pl-col-a > .pl-lab { grid-column:1; grid-row:1; }
.pl-col-a > .pl-card{ grid-column:1; grid-row:2; }
.pl-col-v > .pl-lab { grid-column:2; grid-row:1; }
.pl-col-v > .pl-vgrid{ grid-column:2; grid-row:2; }
.pl-col-v > .pl-lab,
.pl-col-v > .pl-vgrid{ border-left:1px solid var(--border); padding-left:30px; }
.pl-col-v > .pl-lab{ border-left-color:transparent; }
.pl-col-v::before{ display:none; }
.pl-grid > .pl-lab{ align-self:stretch; margin-bottom:0; }}
:root{ }
[data-theme="dark"]{ }
:root{ --constellation:1.20; --grid:1.70; --gridcell:20px; }
body{ background:var(--surface-1); }
.page-bg{ background:none; animation:none; }
.grid-overlay{
background-image:
linear-gradient(rgba(var(--fg-rgb), calc(0.015 * var(--grid))) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--fg-rgb), calc(0.015 * var(--grid))) 1px, transparent 1px);
background-size:var(--gridcell) var(--gridcell); }
section.amb, .footer.amb{ background:transparent; }
section.flat, .footer.flat{ background:var(--surface-1); }
.flat::before{ display:none; }
.footer.amb > .container{ position:relative; z-index:1; }
.footer.amb > .container::before{
content:''; position:absolute; z-index:-1; pointer-events:none;
top:-60px;
bottom:-44px;
left:50%; margin-left:-50vw; width:100vw;
background:var(--surface-1);
-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 40px),transparent 100%);
mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 40px),transparent 100%); }
@media (max-width:600px){
.footer.amb > .container::before{ bottom:-30px; }}
@media (prefers-reduced-motion: reduce){
.grid-overlay{ animation:none; }}
:root{ --constellation:1.20; --grid:1.70; --gridcell:20px; }
.hinge-inner{ border-top:0; border-bottom:0;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 74px,
#000 calc(100% - 74px),transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 74px,
#000 calc(100% - 74px),transparent 100%); }
.compare-section{ padding:72px 0 0; }
.cz-cmp-wrap{ background:var(--surface-2); border:1px solid var(--border);
border-radius:18px; padding:8px 10px 10px; overflow:hidden;
box-shadow:0 6px 26px rgba(var(--shadow-rgb),.07); }
.cz-cmp{ table-layout:fixed; }
.cz-cmp thead th:first-child{ width:34%; }
.cz-cmp thead th{ padding-top:18px; padding-bottom:14px; }
.cz-cmp thead th:not(:first-child){ font-size:1rem; font-weight:700; }
.cz-cmp tbody th[scope="row"]{ background:rgba(var(--fg-rgb),.028);
font-weight:500; color:var(--text-1); font-size:.875rem;
border-right:1px solid var(--border); }
.cz-cmp tbody tr:hover th[scope="row"]{ background:rgba(var(--accent-rgb),.06); }
.cz-cmp tbody tr:hover td{ background:rgba(var(--accent-rgb),.03); }
.cz-grp th{ background:var(--surface-3) !important; border-right:0 !important;
padding:11px 16px !important; font-size:.68rem !important; font-weight:800 !important;
letter-spacing:.13em; text-transform:uppercase; color:var(--accent) !important; }
.cz-cmp tbody td i{ display:block; font-style:normal; font-size:.7rem;
color:var(--text-3); margin-top:1px; }
.cz-y{ width:21px; height:21px; color:var(--sage-ic);
background:rgba(var(--sage-ic-rgb),.16); }
.cz-y svg{ width:12px; height:12px; }
@media (max-width:768px){
.cz-cmp-wrap{ padding:6px; }
.cz-cmp thead th:first-child{ width:auto; }
.cz-grp th{ border-radius:8px; margin:10px 0 4px; }
.cz-cmp tbody th[scope="row"]{ background:transparent; border-right:0; }}
.sb-panel{ background:var(--surface-2); border:1px solid var(--border);
border-radius:20px; padding:40px 34px 34px;
box-shadow:0 6px 26px rgba(var(--shadow-rgb),.06); }
.sb-h2{ margin:10px 0 0; }
.sb-desc{ max-width:64ch; margin:12px 0 0; }
.sb-i14{ width:14px; height:14px; }
.sb-i16{ width:16px; height:16px; }
.sb-i18{ width:18px; height:18px; }
.sb-i14, .sb-i16, .sb-i18{ stroke:currentColor; fill:none; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round; }
.sb-board{ display:grid; align-items:stretch; margin:30px 0 0;
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)
auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
row-gap:14px; }
.sb-col{ display:flex; flex-direction:column; min-width:0; margin:0 4px;
background:var(--surface-3); border:1px solid var(--border);
border-radius:14px; padding:10px; }
.sb-ch{ display:flex; align-items:center; gap:8px; min-height:24px; margin-bottom:9px; }
.sb-chip{ display:inline-flex; align-items:center; font-size:.6rem; font-weight:800;
letter-spacing:.09em; text-transform:uppercase; padding:4px 8px; border-radius:99px;
background:rgba(var(--accent-rgb),.12); color:var(--accent);
max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-pipe{ display:flex; align-items:center; justify-content:center; flex:none;
color:var(--accent); opacity:.55; width:20px; }
.sb-card{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0;
background:var(--surface-2); border:1px solid var(--border); border-radius:11px;
padding:12px; box-shadow:0 2px 7px rgba(var(--shadow-rgb),.05); }
.sb-body{ flex:1 1 auto; }
.sb-card b{ display:block; font-size:.84rem; line-height:1.3; margin-bottom:5px;
color:var(--text-1); }
.sb-card p{ margin:0; font-size:.76rem; line-height:1.45; color:var(--text-2); }
.sb-vis{ flex:none; height:58px; margin-top:11px; border-radius:9px;
border:1px solid var(--border); background:var(--surface-3);
display:flex; align-items:center; justify-content:center; gap:8px;
padding:0 9px; overflow:hidden; position:relative; }
.sb-v-mail{ gap:9px; }
.sb-lines{ display:flex; flex-direction:column; gap:5px; flex:1 1 auto; min-width:0; }
.sb-lines i{ display:block; height:6px; border-radius:4px;
background:rgba(var(--fg-rgb),.09); }
.sb-lines i.sb-short{ width:58%; }
.sb-v-brand{ gap:10px; }
.sb-logo{ width:32px; height:32px; border-radius:50%; display:block; flex:none; }
.sb-sw{ display:flex; gap:4px; }
.sb-sw i{ width:15px; height:15px; border-radius:5px; display:block;
border:1px solid rgba(var(--fg-rgb),.08); }
.sb-v-dom{ gap:6px; justify-content:flex-start; padding:0 10px; }
.sb-v-dom .sb-lock{ display:flex; flex:none; color:var(--text-3); }
.sb-url{ font-size:10.5px; color:var(--text-2); overflow:hidden;
text-overflow:ellipsis; white-space:nowrap; }
.sb-v-cam{ background:var(--surface-3); }
.sb-play{ width:32px; height:32px; border-radius:50%; flex:none;
background:var(--accent); color:#fff;
display:flex; align-items:center; justify-content:center; }
:root{ --rec:#C4371F; }
[data-theme="dark"]{ --rec:#E56E5A; }
.sb-rec{ position:absolute; left:8px; top:7px; display:flex; gap:4px; align-items:center;
font-size:8px; font-weight:800; letter-spacing:.09em; color:var(--rec); }
.sb-rec::before{ content:''; width:5px; height:5px; border-radius:50%;
background:var(--rec); display:block; flex:none; }
.sb-v-flow{ gap:0; justify-content:space-between; padding:0 9px; }
.sb-fn{ width:26px; height:26px; border-radius:8px; flex:none;
display:flex; align-items:center; justify-content:center;
background:var(--surface-2); border:1px solid var(--border); color:var(--accent); }
.sb-fd{ flex:1 1 auto; height:1px; min-width:4px; background:var(--border); }
.sb-spin svg{ animation:sbCog 5.5s linear infinite; transform-origin:50% 50%; }
@keyframes sbCog{ to{ transform:rotate(360deg); } }
.sb-panel.al-c .sb-head{ text-align:center; }
.sb-panel.al-c .sb-desc{ margin-left:auto; margin-right:auto; }
.sb-panel.al-c .sb-foot{ margin-left:auto; margin-right:auto; text-align:center; }
.sb-num{ flex:none; width:20px; height:20px; border-radius:6px; font-size:10.5px;
font-weight:800; display:flex; align-items:center; justify-content:center; }
.r-we .sb-chip{ background:rgba(192,78,38,.13); color:#A14220; }
.r-we .sb-num{ background:#C04E26; color:#fff; }
.r-you .sb-chip{ background:rgba(14,116,144,.13); color:#0C677F; }
.r-you .sb-num{ background:#0E7490; color:#fff; }
.r-done .sb-chip{ background:rgba(21,128,61,.13); color:#127035; }
.r-done .sb-num{ background:#15803D; color:#fff; }
[data-theme="dark"] .r-we .sb-chip{ background:rgba(225,148,121,.20); color:#E4A088; }
[data-theme="dark"] .r-we .sb-num{ background:#E19479; color:#1F1714; }
[data-theme="dark"] .r-you .sb-chip{ background:rgba(110,210,237,.20); color:#6ED2ED; }
[data-theme="dark"] .r-you .sb-num{ background:#6ED2ED; color:#1F1714; }
[data-theme="dark"] .r-done .sb-chip{ background:rgba(118,229,159,.20); color:#76E59F; }
[data-theme="dark"] .r-done .sb-num{ background:#76E59F; color:#1F1714; }
.sb-end{ background:linear-gradient(rgba(21,128,61,.08),rgba(21,128,61,.08)), var(--surface-3);
border-color:rgba(21,128,61,.28); }
.sb-card-live{ align-items:center; justify-content:center; text-align:center; gap:8px;
border-color:rgba(21,128,61,.30);
background:linear-gradient(rgba(21,128,61,.06),rgba(21,128,61,.06)), var(--surface-2); }
.sb-livedot{ width:38px; height:38px; border-radius:50%; flex:none;
background:rgba(21,128,61,.14); color:#15803D;
display:flex; align-items:center; justify-content:center; }
.sb-card-live b{ font-size:.9rem; margin:0; }
.sb-card-live p{ font-size:.76rem; color:var(--text-3); }
.sb-foot{ margin:26px 0 0; max-width:78ch; font-size:.85rem; line-height:1.55;
color:var(--text-3); }
.sb-foot b{ color:var(--text-1); }
@media (max-width:4000px){
.sb-board{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
gap:14px 0; }
.sb-board > .sb-pipe:nth-of-type(3){ display:none; }}
@media (max-width:1024px){
.sb-panel{ padding:32px 22px 26px; }
.sb-board{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.sb-col{ margin:0; padding:12px; }
.sb-pipe{ display:none; }
.sb-card b{ font-size:.88rem; }
.sb-card p{ font-size:.8rem; }}
@media (max-width:640px){
.sb-panel{ padding:26px 16px 22px; border-radius:16px; }
.sb-board{ grid-template-columns:1fr; gap:11px; }
.sb-vis{ height:64px; }
.sb-desc, .sb-foot{ max-width:none; }}
@container setupbar (max-width:4000px){
.sb-board{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
gap:14px 0; }
.sb-board > .sb-pipe:nth-of-type(3){ display:none; }}
@container setupbar (max-width:1024px){
.sb-panel{ padding:32px 22px 26px; }
.sb-board{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.sb-col{ margin:0; padding:12px; }
.sb-pipe{ display:none; }
.sb-card b{ font-size:.88rem; }
.sb-card p{ font-size:.8rem; }}
@container setupbar (max-width:640px){
.sb-panel{ padding:26px 16px 22px; border-radius:16px; }
.sb-board{ grid-template-columns:1fr; gap:11px; }
.sb-vis{ height:64px; }
.sb-desc, .sb-foot{ max-width:none; }}
.setup-section{ container-type:inline-size; container-name:setupbar; }
@media (prefers-reduced-motion: reduce){ .sb-spin svg{ animation:none; }}
.sb-pipe{ opacity:1; }
.sb-pipe svg{ opacity:.42; will-change:transform,opacity;
animation:sbFlow 2.8s cubic-bezier(.45,0,.35,1) infinite; }
@keyframes sbFlow{
0% { transform:translateX(-4px); opacity:.28; }
38% { transform:translateX(3px); opacity:1; }
62% { transform:translateX(3px); opacity:.9; }
100% { transform:translateX(-4px); opacity:.28; } }
.sb-board > .sb-pipe:nth-of-type(1){ }
.sb-board > .sb-pipe:nth-of-type(2) svg{ animation-delay:.22s; }
.sb-board > .sb-pipe:nth-of-type(4) svg{ animation-delay:.44s; }
.sb-board > .sb-pipe:nth-of-type(5) svg{ animation-delay:.66s; }
@media (prefers-reduced-motion: reduce){
.sb-pipe svg{ animation:none; opacity:.55; transform:none; } }
.compare-section > .container{ text-align:center; }
.compare-section .cz-cmp-wrap{ text-align:start; }
@media (max-width:1100px){ .pl-card .vs-line{ min-height:0; }}
.pl-card .pp-feats li i{ display:block; font-style:normal; margin-top:3px;
font-size:.76rem; line-height:1.4; color:var(--text-3); }
.cz-cmp tbody td.cz-trig i{ font-size:.83rem; color:var(--text-2); margin-top:2px; }
.cz-cmp tbody td.cz-trig i:first-child{ margin-top:0; }
.pl-card .pp-feats li.pl-inh{ padding-left:0; margin-bottom:13px; padding-bottom:11px;
border-bottom:1px solid var(--border); font-size:.78rem; font-weight:800;
letter-spacing:.07em; text-transform:uppercase; color:var(--text-1); }
.pl-card .pp-feats li.pl-inh::before{ display:none; }
.pl-card .pp-feats li.pl-inh b{ color:var(--accent); font-weight:800; font-size:.95rem;
line-height:0; }
.pl-card .c-inh{ margin:18px 0 0; padding-bottom:11px;
border-bottom:1px solid var(--border); font-size:.78rem; font-weight:800;
letter-spacing:.07em; text-transform:uppercase; color:var(--text-1); }
.pl-card .c-inh b{ color:var(--accent); font-size:.95rem; line-height:0; }
.pl-card .c-mx{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px;
margin:14px 0 0; padding:13px 4px; border-radius:12px;
border:1px solid var(--border); background:rgba(var(--fg-rgb),.03); }
.pl-col-a .pl-card .c-mx{ margin-top:18px; }
.pl-card .c-mx > div{ text-align:center; min-width:0; }
.pl-card .c-mx b{ display:block; font-size:1.2rem; font-weight:800;
letter-spacing:-.02em; color:var(--text-1); line-height:1.15; }
.pl-card .c-mx b.c-mx-t{ font-size:1.02rem; line-height:1.35; }
.pl-card .c-mx span{ display:block; margin-top:4px; min-height:2.6em;
font-size:.63rem; line-height:1.3; letter-spacing:.04em; text-transform:uppercase;
color:var(--text-3); }
.pl-card .c-hi{ margin:13px 0 0; padding:13px 14px 12px; border-radius:12px;
border:1px solid rgba(var(--accent-rgb),.28);
background:rgba(var(--accent-rgb),.045); }
.pl-card .c-hi.c-hi-hero{ border-color:rgba(var(--accent-rgb),.40);
background:rgba(var(--accent-rgb),.07); padding:14px 14px 13px; }
.pl-card .c-hi-h{ margin:0 0 7px; font-size:.66rem; font-weight:800;
letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.pl-card .c-hi-b{ margin:0; font-size:.87rem; line-height:1.5; font-weight:600;
color:var(--text-1); }
.pl-card .c-hi-c{ margin:11px 0 7px; font-size:.71rem; font-weight:700;
letter-spacing:.05em; color:var(--text-2); }
.pl-card .c-hi-chips{ display:flex; flex-wrap:wrap; gap:5px; }
.pl-card .c-chip{ padding:4px 9px; border-radius:999px; font-size:.72rem;
font-weight:600; color:var(--text-1); background:var(--surface-2);
border:1px solid var(--border); }
.pl-card .pp-feats.c-tail{ margin-top:14px; padding-top:14px; }
.inc-section{ padding:72px 0 0; }
.inc-stage{ position:relative; isolation:isolate; border-radius:26px;
overflow:hidden; padding:64px 42px 70px; background:var(--inc-stage); }
.inc-bg{ position:absolute; inset:0; z-index:0; pointer-events:none;
overflow:hidden; background:linear-gradient(180deg,
var(--inc-stage-top) 0%, var(--inc-stage) 78%); }
.inc-cv{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.inc-panel{ position:relative; z-index:2; border-radius:22px;
background:var(--inc-glass);
backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
border:1px solid rgba(var(--inc-ac-rgb),.14);
box-shadow:0 34px 90px -34px rgba(0,0,0,.92); }
.inc-pin{ padding:44px 40px 40px; }
.inc-h2{ margin:0; text-align:center; color:var(--inc-fg); line-height:1.22;
font-size:clamp(1.35rem,2.5vw,1.95rem); letter-spacing:-.022em; }
.inc-sub{ margin:13px auto 0; max-width:660px; text-align:center;
font-size:.95rem; line-height:1.6; color:var(--inc-subfg); }
.inc-groups{ margin-top:38px; display:grid; grid-template-columns:repeat(4,1fr);
gap:26px; }
.inc-g{ min-width:0; position:relative; padding:18px 15px 16px;
border-radius:13px; overflow:hidden; background:rgba(255,255,255,.024);
transition:background .35s; }
.inc-g::after{ content:''; position:absolute; left:0; right:0; top:0; height:1px;
background:linear-gradient(90deg,transparent,
rgba(var(--inc-ac-rgb),.9),transparent);
background-size:60% 100%; background-repeat:no-repeat;
animation:incEdge 3.4s linear infinite; opacity:.5; }
.inc-g:nth-child(2)::after,
.inc-g:nth-child(3)::after,
.inc-g:nth-child(4)::after{ animation-delay:0s; }
@keyframes incEdge{ 0%{ background-position:-70% 0; }
100%{ background-position:170% 0; } }
.inc-g:hover{ background:rgba(var(--inc-ac-rgb),.055); }
.inc-g:hover::after{ opacity:1; }
.inc-gh{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0 9px;
margin:0 0 15px; padding-bottom:12px;
border-bottom:1px solid rgba(255,255,255,.10); }
.inc-gn{ flex:0 0 auto; font-size:.71rem; font-weight:800; letter-spacing:.07em;
color:var(--inc-ac); opacity:.85; font-variant-numeric:tabular-nums; }
.inc-gw{ font-size:.92rem; font-weight:800; letter-spacing:.11em;
text-transform:uppercase; color:var(--inc-fg); }
.inc-gd{ flex:1 0 100%; margin-top:4px; font-size:.76rem; line-height:1.4;
color:var(--inc-dim); }
.inc-gl{ list-style:none; margin:0; padding:0; display:flex;
flex-direction:column; gap:11px; }
.inc-gl li{ position:relative; padding-left:28px; font-size:.875rem;
line-height:1.42; color:var(--inc-body); }
.inc-gl li::before{ content:''; position:absolute; left:0; top:1px;
width:17px; height:17px; border-radius:50%;
background:rgba(var(--inc-ac-rgb),.20);
box-shadow:inset 0 0 0 1px rgba(var(--inc-ac-rgb),.34);
transition:background .3s, box-shadow .3s; }
.inc-gl li::after{ content:''; position:absolute; left:4.7px; top:6.4px;
width:7px; height:3.7px; border-left:1.7px solid var(--inc-ac);
border-bottom:1.7px solid var(--inc-ac); transform:rotate(-45deg);
border-radius:1px; }
.inc-g:hover .inc-gl li::before{ background:rgba(var(--inc-ac-rgb),.34);
box-shadow:inset 0 0 0 1px rgba(var(--inc-ac-rgb),.60),
0 0 14px rgba(var(--inc-ac-rgb),.30); }
@media (max-width:1040px){
.inc-groups{ grid-template-columns:repeat(2,1fr); gap:30px 26px; }}
@media (max-width:620px){
.inc-groups{ grid-template-columns:1fr; }
.inc-pin{ padding:32px 22px 30px; }
.inc-stage{ padding:40px 16px 46px; border-radius:18px; }}
@media (prefers-reduced-motion: reduce){
.inc-g::after{ animation:none; }
.inc-g, .inc-gl li::before{ transition:none; }}
[data-theme="dark"] .pp-toggle{
background:rgba(0,0,0,.32);
border-color:rgba(255,255,255,.10);
}
[data-theme="dark"] .pp-tg{ color:#B7A093; }
[data-theme="dark"] .pp-tg.on{
background:#4A423D;
color:#FBF3EE;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),
0 1px 3px rgba(0,0,0,.45);
}
[data-theme="dark"] .pp-tg:hover:not(.on){ color:#EFE2D9; }
.pl-lab{
flex-direction:column;
align-items:flex-start;
justify-content:flex-end;
flex-wrap:nowrap;
gap:10px;
}
.pl-lab-t{
flex:0 0 auto;
width:100%;
margin:0;
}
.pl-lab .pp-toggle{ margin-left:0; }
.pl-lab-v .pl-lab-t{
font-size:.82rem;
font-weight:700;
line-height:1.4;
}
@media (max-width:560px){
.pl-lab{ flex-direction:column; flex-wrap:nowrap; align-items:flex-start; }
.pl-lab-t{ flex:0 0 auto; width:100%; }
.pl-lab .pp-toggle{ width:auto; margin-left:0; }
.pl-lab .pp-tg{ flex:0 0 auto; }}
@media (max-width:768px){
.pp-tg{ min-height:44px; }
.mobile-menu-btn::after{ content:''; position:absolute;
left:-11px; right:-11px; top:-12px; bottom:-12px; }
.theme-toggle::after{ content:''; position:absolute;
left:-4px; right:-4px; top:-9px; bottom:-9px; }
.navbar .logo{ padding:5px 0; }
footer .logo, .footer .logo{ padding:5px 0; }
.footer-col a{ padding:10px 0; }}
@media (max-width:560px){
.pl-card .pp-tag{ font-size:.72rem; }
.pl-card .c-hi-h{ font-size:.72rem; }
.pl-card .c-hi-c{ font-size:.76rem; }
.pl-card .c-chip{ font-size:.76rem; }
.pl-card .c-mx span{ font-size:.68rem; }
.inc-gn{ font-size:.78rem; }
.sb-num{ font-size:11.5px; }}
.pl-card .pp-tag,
.vs-card .pp-tag{ transform:none; }
.section-label{
padding:6px 14px 6px 11px;
border-radius:999px;
font-size:.7rem;
letter-spacing:.14em;
color:var(--accent);
background:linear-gradient(135deg,
rgba(var(--accent-rgb),.15), rgba(var(--accent-rgb),.06));
border:1px solid rgba(var(--accent-rgb),.32);
box-shadow:0 1px 2px rgba(var(--shadow-rgb),.06),
inset 0 1px 0 rgba(255,255,255,.40);
gap:8px;
margin-bottom:18px;
}
.section-label::before{
content:'';
flex:none;
width:6px; height:6px;
border-radius:50%;
background:var(--accent);
box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16);
}
[data-theme="dark"] .section-label{
box-shadow:0 1px 2px rgba(0,0,0,.30),
inset 0 1px 0 rgba(255,255,255,.07);
}
.pl-lab-t:empty{ display:none; }
.pl-lab-v .pl-lab-t{
display:inline-flex;
align-items:center;
gap:7px;
width:auto;
max-width:100%;
padding:5px 13px 5px 11px;
border-radius:999px;
font-size:.76rem;
font-weight:700;
letter-spacing:.005em;
line-height:1.4;
color:var(--accent);
background:rgba(var(--accent-rgb),.07);
border:1px solid rgba(var(--accent-rgb),.22);
}
.pl-lab-v .pl-lab-t::before{
content:'';
flex:none;
width:6px; height:6px;
border-radius:50%;
border:1.5px solid var(--accent);
}
.ph-h1 em,
.ph-h1 .em{
font-style:normal;
background:linear-gradient(120deg,
var(--text-1) 0%, var(--text-1) 30%, var(--head-grad-end) 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
}
.ph-h1 .em-anim{
font-style:normal;
background:linear-gradient(100deg,
var(--em-a) 0%, var(--em-b) 60%, var(--em-a) 100%);
background-size:200% 100%;
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
animation:emSweep 6s linear infinite;
}
@keyframes emSweep{ 0%{ background-position:0% center }
100%{ background-position:-200% center } }
@media (prefers-reduced-motion: reduce){
.ph-h1 .em-anim{ animation:none; }}
.section-label{ color:var(--chip-tx); }
.pl-lab-v .pl-lab-t{ color:var(--chip-tx); }
@media (max-width:620px){
.pl-lab-v .pl-lab-t{ border-radius:13px; padding:7px 12px 7px 11px; }}
.inc-gl{ gap:14px; }
.inc-gl li{ font-size:.9rem; line-height:1.55; }
.inc-gl li::before{ top:calc((1.55em - 17px) / 2); }
.inc-gl li::after{ top:calc((1.55em - 17px) / 2 + 5.4px); }
.pl-card .pp-cad{
margin-left:2px;
font-size:.78rem;
font-weight:600;
color:var(--text-2);
white-space:nowrap;
}
[data-billgroup] .pp-cad{ display:none; }
[data-billgroup].bill-c .pp-cad{ display:inline; }
@media (max-width:400px){
.pl-card .pp-cad{ display:inline; margin-left:0; }
[data-billgroup].bill-c .pp-cad{ display:block; margin-top:2px; }}
.cta-pills{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
margin:0 auto 30px; }
.cta-pill{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px;
border-radius:999px; background:var(--surface-2); border:1px solid var(--border);
font-size:.83rem; color:var(--text-2); }
.cta-pill b{ color:var(--text-1); font-weight:800; }
.cta-dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.cta-d1{ background:#7C3AED; }
.cta-d2{ background:#EA580C; }
.cta-d3{ background:#059669; }
[data-theme="dark"] .cta-d1{ background:#A78BFA; }
[data-theme="dark"] .cta-d2{ background:#FB923C; }
[data-theme="dark"] .cta-d3{ background:#34D399; }
@keyframes ctaDotPulse{
0%,100%{ transform:scale(1); opacity:1; }
50% { transform:scale(.84); opacity:.55; } }
.cta-dot{ animation:ctaDotPulse 2.6s ease-in-out infinite; will-change:transform,opacity; }
.cta-pill:nth-of-type(2) .cta-dot{ animation-delay:.43s; }
.cta-pill:nth-of-type(3) .cta-dot{ animation-delay:.86s; }
@media (prefers-reduced-motion: reduce){ .cta-dot{ animation:none; } }
.inc-g::after{ height:2px; opacity:.8; }
.inc-gl li{ transition:color .3s; }
.inc-g:hover{ background:rgba(var(--inc-ac-rgb),.10); }
.inc-g:hover::after{ opacity:1; }
.inc-g:hover .inc-gl li{ color:#EAFFF9; }
.inc-g:hover .inc-gw{ color:#FFFFFF; }
.inc-g:hover .inc-gl li::before{
background:rgba(var(--inc-ac-rgb),.46);
box-shadow:inset 0 0 0 1px rgba(var(--inc-ac-rgb),.85),
0 0 16px rgba(var(--inc-ac-rgb),.45); }
.inc-sub{ margin-top:20px; }
.inc-section{ position:relative; z-index:1; background:var(--surface-1); }
.pl-card .pp-cad{ font-weight:400; }
.section-label{ padding:6px calc(13px - .14em) 6px 16px; }
.pl-lab-v .pl-lab-t{ padding:5px calc(12px - .005em) 5px 12px; }
.pl-lab-v{ align-items:center; }
.pl-col-v > .pl-lab{ align-items:center; }
.pl-col-v > .pl-lab .pp-toggle{ align-self:center; }
@media (max-width:1100px){
.pl-col-v > .pl-lab{ align-items:center; }}
.inc-section{ position:relative; z-index:auto; background:transparent; }
.inc-g:hover{ background:rgba(var(--inc-ac-rgb),.055); }
.inc-g:hover .inc-gl li{ color:var(--inc-fg); }
.inc-gl li::before{ transition:background .3s, box-shadow .3s; }
.inc-gl li::after{ transition:border-color .3s; }
.inc-g:hover .inc-gl li::before{
background:rgba(var(--inc-ac-rgb),.38);
box-shadow:inset 0 0 0 1px rgba(var(--inc-ac-rgb),1),
0 0 18px rgba(var(--inc-ac-rgb),.50);
}
.inc-g:hover .inc-gl li::after{ border-color:#F6F4FA; }
.inc-gn{ transition:opacity .3s, color .3s, text-shadow .3s; }
.inc-g:hover .inc-gn{
opacity:1;
color:var(--inc-lit);
text-shadow:0 0 14px rgba(var(--inc-ac-rgb),.55);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.inc-gw{
background-image:linear-gradient(100deg,
var(--inc-fg) 0%, var(--inc-fg) 50%, var(--inc-fg) 100%);
background-size:200% 100%;
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
transition:none;
}
.inc-g:hover .inc-gw{
background-image:linear-gradient(100deg,
#FFFFFF 0%, var(--inc-lit) 45%, #FFFFFF 100%);
animation:incFlash 1.5s linear;
}}
@keyframes incFlash{
from{ background-position:0% center }
to{ background-position:-200% center }
}
@media (prefers-reduced-motion: reduce){
.inc-g:hover .inc-gw{ animation:none; }}
.inc-h2{
font-size:clamp(1.6rem,3vw,2.4rem);
letter-spacing:-.03em;
line-height:1.14;
}
.inc-h2 b{ font-weight:inherit; color:var(--inc-ac); }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.inc-h2 .inc-em{
font-style:normal;
background-image:linear-gradient(120deg,
var(--inc-fg) 0%, var(--inc-fg) 34%, #FD8D68 100%);
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
}}
.inc-h2 .inc-em{ font-style:normal; }
.pl-card .c-mx{
padding:13px 10px;
gap:0;
}
.pl-card .c-mx > div{ padding:0 7px; }
.pl-card .c-mx > div + div{
border-left:1px solid var(--border);
}
.pl-card .c-mx span{ text-wrap:balance; }
@media (max-width:560px){
.pl-card .c-mx{ padding:13px 6px; }
.pl-card .c-mx > div{ padding:0 4px; }}
.btn-glass span,
.btn-glass svg{ position:relative; z-index:1; }
.btn-glass:hover{ color:#9A3412; }
[data-theme="dark"] .btn-glass{ color:#FD8D68; }
[data-theme="dark"] .btn-glass:hover{ color:#FD8D68; }
.pl-card .c-mx{
grid-template-columns:auto auto auto;
justify-content:space-between;
padding:13px 10px;
}
.pl-card .c-mx > div{ padding:0 3px; text-align:center; }
.pl-card .c-mx > div + div{ border-left:0; }
.pl-card .c-mx > div:first-child span{ max-width:66px; margin-left:auto; margin-right:auto; }
@media (max-width:560px){
.pl-card .c-mx{ padding:13px 8px; grid-template-columns:auto auto auto; }
.pl-card .c-mx > div{ padding:0 3px; text-align:center; }
.pl-card .c-mx > div:first-child span{ max-width:72px; }}
.inc-h2{ font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }
.inc-g:hover .inc-gl li{ color:var(--inc-ac); }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.inc-h2 .inc-em{
background-image:linear-gradient(105deg, #8FBE95 0%, #6FC3B6 100%);
background-size:100% 100%;
animation:none;
}
.inc-h2 b{
background-image:linear-gradient(115deg,
#FD8D68 0%, #FF5F6D 50%, #FD8D68 100%);
background-size:200% 100%;
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
animation:incBrandDrift 12s ease-in-out infinite alternate;
}}
@keyframes incBrandDrift{
from{ background-position:0% center }
to{ background-position:100% center }
}
@media (prefers-reduced-motion: reduce){
.inc-h2 b{ animation:none; }}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.inc-h2 .inc-em{
background-image:linear-gradient(105deg,
#8FBE95 0%, #6FC3B6 45%, #8FBE95 100%);
background-size:200% 100%;
animation:incGreenDrift 12s ease-in-out infinite alternate;
}}
@keyframes incGreenDrift{
from{ background-position:0% center }
to{ background-position:100% center }
}
@media (prefers-reduced-motion: reduce){
.inc-h2 .inc-em{ animation:none; }}
.inc-h2{ font-size:clamp(1.45rem, 2.6vw, 2.1rem); }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.inc-h2 .inc-em{
background-image:linear-gradient(115deg,
#FD8D68 0%, #FF5F6D 50%, #FD8D68 100%);
background-size:200% 100%;
animation:incBrandDrift 12s ease-in-out infinite alternate;
}
.inc-h2 b{
background-image:linear-gradient(105deg,
#8FBE95 0%, #6FC3B6 45%, #8FBE95 100%);
background-size:200% 100%;
animation:incGreenDrift 12s ease-in-out infinite alternate;
}}
@media (prefers-reduced-motion: reduce){
.inc-h2 .inc-em, .inc-h2 b{ animation:none; }}
@media (min-width:1041px){
.inc-groups{ grid-template-columns:repeat(2,1fr); }}
.uline{ position:relative; display:inline-block; padding:0 0.08em;
background-image:linear-gradient(180deg,
transparent 58%,
rgba(var(--accent-rgb),0.30) 58%,
rgba(var(--accent-rgb),0.30) 92%,
transparent 92%); }
.hinge-h2 .em-anim{
font-style:normal;
background:linear-gradient(100deg,
var(--em-a) 0%, var(--em-b) 60%, var(--em-a) 100%);
background-size:200% 100%;
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
animation:emSweep 6s linear infinite;
}
@media (prefers-reduced-motion: reduce){
.hinge-h2 .em-anim{ animation:none; }}
:root{
}
.pl-card .pp-setup-v{ display:flex; align-items:center; gap:11px; }
.pl-card .pp-setup-v > .ps-t{ display:block; flex:1 1 auto; min-width:0;
font-size:inherit; color:inherit; margin-top:0; }
.pl-card .pp-setup-v > .ps-g{ display:block; position:relative; overflow:hidden;
flex:0 0 72px; width:72px; aspect-ratio:16/9; margin-top:0;
border-radius:8px; background:var(--surface-3);
box-shadow:0 1px 3px rgba(var(--shadow-rgb),.10),
0 0 0 1px rgba(var(--accent-rgb),.18) inset; }
.pl-card .pp-setup-v .ps-g video{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; display:block; opacity:0; border:0;
animation:gswap 13.5s linear infinite; }
.pl-card .pp-setup-v .ps-g video.g2{ animation-delay:4.5s; }
.pl-card .pp-setup-v .ps-g video.g3{ animation-delay:9s; }
@keyframes gswap{ 0%{opacity:0} 2%{opacity:1} 31%{opacity:1}
33.3%{opacity:0} 100%{opacity:0} }
@media (max-width:560px){
.pl-card .pp-setup-v{ gap:9px; }
.pl-card .pp-setup-v > .ps-g{ flex-basis:64px; width:64px; }}
@media (max-width:379px){
.pl-card .pp-setup-v > .ps-g{ display:none; }}
@media (prefers-reduced-motion: reduce){
.pl-card .pp-setup-v .ps-g video{ animation:none; }
.pl-card .pp-setup-v .ps-g video.g1{ opacity:1; }}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.inc-h2 .inc-em{
background-image:linear-gradient(115deg,
#FFD2C2 0%, #FD8D68 50%, #FFD2C2 100%);
background-size:200% 100%;
animation:incBrandDrift 12s ease-in-out infinite alternate;
}
.inc-h2 b{
background-image:linear-gradient(105deg,
#6FC3B6 0%, #79FFFA 50%, #6FC3B6 100%);
background-size:200% 100%;
animation:incGreenDrift 12s ease-in-out infinite alternate;
}}
@media (prefers-reduced-motion: reduce){
.inc-h2 .inc-em, .inc-h2 b{ animation:none; }}
.cz-cmp tbody td.cz-trig i{
display:block; width:-moz-fit-content; width:fit-content;
margin:5px auto 0; padding:4px 10px;
font-style:normal; font-size:.72rem; font-weight:600; line-height:1.35;
letter-spacing:0; white-space:nowrap;
color:var(--text-1); background:var(--surface-3);
border:1px solid var(--border); border-radius:999px; }
.cz-cmp tbody td.cz-trig i:first-child{ margin-top:0; }
[data-theme="dark"] .pl-card .vs-line{ color:var(--text-2); }
[data-theme="dark"] .pl-card .vs-line b{ color:var(--text-1); }
.pl-card .pp-setup-v > .ps-g{ border-radius:10px; }
[data-theme="dark"] .uline{
background-image:linear-gradient(180deg,
transparent 58%,
rgba(var(--accent-rgb),0.68) 58%,
rgba(var(--accent-rgb),0.68) 92%,
transparent 92%); }
.cz-cmp tbody td.cz-trig i.t-reply{ color:#0C677F; background:rgba(14,116,144,.13);
border-color:rgba(14,116,144,.30); }
.cz-cmp tbody td.cz-trig i.t-conn { color:#127035; background:rgba(21,128,61,.13);
border-color:rgba(21,128,61,.30); }
.cz-cmp tbody td.cz-trig i.t-tag { color:#A14220; background:rgba(192,78,38,.13);
border-color:rgba(192,78,38,.30); }
[data-theme="dark"] .cz-cmp tbody td.cz-trig i.t-reply{ color:#6ED2ED;
background:rgba(110,210,237,.20); border-color:rgba(110,210,237,.34); }
[data-theme="dark"] .cz-cmp tbody td.cz-trig i.t-conn { color:#76E59F;
background:rgba(118,229,159,.20); border-color:rgba(118,229,159,.34); }
[data-theme="dark"] .cz-cmp tbody td.cz-trig i.t-tag { color:#E4A088;
background:rgba(225,148,121,.20); border-color:rgba(225,148,121,.34); }
.compare-section .section-title.cmp-h2{
display:block;
line-height:1.2;
margin-top:14px;
}
.cmp-in{
display:inline-block; position:relative;
padding:20px 44px 22px;
}
.cmp-in::before{
content:''; position:absolute; inset:0; z-index:-1; border-radius:14px;
background:
linear-gradient(90deg, transparent 5%,
rgba(var(--fg-rgb),.045) 5%, rgba(var(--fg-rgb),.045) 32%, transparent 32%),
linear-gradient(90deg, transparent 37%,
rgba(var(--accent-rgb),.10) 37%, rgba(var(--accent-rgb),.10) 63%, transparent 63%),
linear-gradient(90deg, transparent 68%,
rgba(var(--fg-rgb),.045) 68%, rgba(var(--fg-rgb),.045) 95%, transparent 95%);
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%);
}
[data-theme="dark"] .cmp-in::before{
background:
linear-gradient(90deg, transparent 5%,
rgba(var(--fg-rgb),.06) 5%, rgba(var(--fg-rgb),.06) 32%, transparent 32%),
linear-gradient(90deg, transparent 37%,
rgba(var(--accent-rgb),.14) 37%, rgba(var(--accent-rgb),.14) 63%, transparent 63%),
linear-gradient(90deg, transparent 68%,
rgba(var(--fg-rgb),.06) 68%, rgba(var(--fg-rgb),.06) 95%, transparent 95%);
}
.cmp-in::after{
content:''; position:absolute; left:50%; bottom:4px;
width:64px; height:2px; margin-left:-32px; border-radius:2px;
background:rgba(var(--accent-rgb),.55);
}
.compare-section .cmp-h2 em{
font-style:normal;
background:linear-gradient(100deg,
var(--em-a) 0%, var(--em-b) 60%, var(--em-a) 100%);
background-size:200% 100%;
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent;
animation:emSweep 6s linear infinite;
}
@media (max-width:620px){
.cmp-in{ padding:16px 20px 20px; }}
@media (prefers-reduced-motion: reduce){
.compare-section .cmp-h2 em{ animation:none; }}
.cmp-in{ isolation:isolate; }
.compare-section{ padding-top:calc(var(--pp-gap) + 24px); }
.compare-section .section-title.cmp-h2{ margin-top:0; }
.cmp-in{ padding-top:10px; }
.compare-section .section-title.cmp-h2{ font-size:clamp(1.65rem, 2.5vw, 2.1rem); }
.cz-cmp thead th:not(:first-child){
font-size:.78rem; font-weight:700; letter-spacing:.06em;
text-transform:uppercase; color:var(--text-3); }
[data-theme="dark"] .pl-card .pp-tag{ color:var(--on-accent); }
.cz-cmp .cz-grp th{ color:var(--chip-tx) !important; }
.skip-link{ position:absolute; left:-9999px; top:0; z-index:9999;
padding:12px 18px; border-radius:0 0 10px 0;
background:var(--accent); color:#fff;
font-size:.9rem; font-weight:700; text-decoration:none; }
.skip-link:focus{ left:0; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
border:0; }
[data-theme="dark"] .skip-link{ color:var(--on-accent); }
.btn-glass{ color:var(--chip-tx); }
:root{
--gridfade-w:70%;
--gridfade-h:50%;
--gridfade-y:30%;
--gridfade-in:20%;
--gridfade-out:80%;
}
.grid-overlay{
-webkit-mask-image:radial-gradient(ellipse var(--gridfade-w) var(--gridfade-h) at 50% var(--gridfade-y), #000 var(--gridfade-in), transparent var(--gridfade-out));
mask-image:radial-gradient(ellipse var(--gridfade-w) var(--gridfade-h) at 50% var(--gridfade-y), #000 var(--gridfade-in), transparent var(--gridfade-out)); }
html[data-gridfade="off"] .grid-overlay{ -webkit-mask-image:none; mask-image:none; }
html[data-grid="off"] { --grid:0; }
html[data-grid="subtle"] { --grid:0.90; }
html[data-grid="strong"] { --grid:2.60; }
html[data-grid="off"] .grid-overlay{ background-image:none; }
.czg{ position:fixed; z-index:10000; right:18px; bottom:18px; width:260px;
padding:15px 16px 14px; border-radius:14px;
background:var(--surface-2); color:var(--text-1);
border:1px solid var(--border); box-shadow:0 14px 40px rgba(var(--shadow-rgb),.20);
font-size:.8rem; line-height:1.4; }
.czg h6{ margin:0 0 12px; font-size:.62rem; font-weight:800; letter-spacing:.13em;
text-transform:uppercase; color:var(--text-3);
display:flex; align-items:center; justify-content:space-between; }
.czg h6 button{ all:unset; cursor:pointer; font-size:.9rem; line-height:1; color:var(--text-3); padding:0 2px; }
.czg label{ display:block; margin:0 0 4px; font-size:.7rem; font-weight:700; color:var(--text-2); }
.czg .czg-row{ margin:0 0 13px; }
.czg input[type=range]{ width:100%; accent-color:var(--accent); margin:0; }
.czg .czg-val{ float:right; font-weight:800; color:var(--accent); font-variant-numeric:tabular-nums; }
.czg .czg-btns{ display:flex; gap:6px; }
.czg .czg-btns button{ flex:1; cursor:pointer; font:inherit; font-size:.7rem; font-weight:700;
padding:7px 0; border-radius:8px; border:1px solid var(--border);
background:var(--surface-3); color:var(--text-2); }
.czg .czg-btns button.on{ background:rgba(var(--accent-rgb),.12);
border-color:rgba(var(--accent-rgb),.35); color:var(--accent); }
.czg code{ display:block; margin:11px 0 0; padding:8px 9px; border-radius:8px;
background:rgba(var(--fg-rgb),.05); font-size:.63rem; line-height:1.5;
color:var(--text-2); word-break:break-all; }
@media (max-width:420px){
.pl-card .c-mx{
grid-template-columns:repeat(3,minmax(0,1fr));
justify-content:stretch;
gap:8px; padding:12px 8px;
}
.pl-card .c-mx > div{ padding:0; min-width:0; text-align:center; }
.pl-card .c-mx > div + div{ border-left:1px solid var(--border); padding-left:8px; }
.pl-card .c-mx > div:first-child span{ max-width:none; }
.pl-card .c-mx span{
font-size:.58rem; letter-spacing:.01em; line-height:1.25;
min-height:0; word-break:keep-all; overflow-wrap:normal; hyphens:none;
}
.pl-card .c-mx b{ font-size:1.05rem; }
.pl-card .c-mx b.c-mx-t{ font-size:.86rem; line-height:1.25; }
}
:root{ --grid:6.00; --seam-fade:160px;
--seam-stops: #000 0, rgba(0,0,0,.9) calc(var(--seam-fade) * .2), rgba(0,0,0,.65) calc(var(--seam-fade) * .4),
rgba(0,0,0,.35) calc(var(--seam-fade) * .6), rgba(0,0,0,.1) calc(var(--seam-fade) * .8), transparent var(--seam-fade); }
@media (max-width:767px){ :root{ --seam-fade:110px; } }
section.pl-section, section.inc-section, section.compare-section{ position:relative; z-index:1; background:transparent; }
section.ao-section{ position:relative; z-index:1; }
section.hinge{ position:relative; z-index:1; background:var(--surface-1); }
.compare-section + .hinge{ padding-top:var(--pp-gap); }
.compare-section + .hinge .hinge-inner{ margin-top:0; }
section.hinge .hinge-inner{ background:none; -webkit-mask-image:none; mask-image:none; }
section.hinge .hinge-inner::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:radial-gradient(ellipse 62% 100% at 50% 50%, rgba(var(--accent-rgb),.11), transparent 72%), var(--surface-3);
-webkit-mask-image:linear-gradient(180deg, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%);
mask-image:linear-gradient(180deg, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%); }
[data-theme="dark"] section.hinge .hinge-inner::before{
background:radial-gradient(ellipse 62% 100% at 50% 50%, rgba(var(--accent-rgb),.16), transparent 72%), var(--surface-2); }
section.pl-section::after, section.compare-section::after, section.cta-section::after{
content:''; position:absolute; inset:-1px 0; z-index:-1; pointer-events:none; background:var(--surface-1); }
section.pl-section::after{
-webkit-mask-image:linear-gradient(180deg, var(--seam-stops));
mask-image:linear-gradient(180deg, var(--seam-stops)); }
section.compare-section::after{
-webkit-mask-image:linear-gradient(0deg, var(--seam-stops));
mask-image:linear-gradient(0deg, var(--seam-stops)); }
section.cta-section::after{
-webkit-mask-image:linear-gradient(180deg, var(--seam-stops)), linear-gradient(0deg, var(--seam-stops));
mask-image:linear-gradient(180deg, var(--seam-stops)), linear-gradient(0deg, var(--seam-stops)); }
html:not([data-theme="dark"]) .hinge-kicker{ color:#A94421; }
html:not([data-theme="dark"]) .pl-card .c-hi-h{ color:#B44924; }
html:not([data-theme="dark"]) .pp-tg:not(.on){ color:#626261; }
html:not([data-theme="dark"]) .pp-tg:not(.on):hover{ color:var(--text-1); }
.footer-mail{ display:inline-flex; align-items:center; gap:8px; margin-top:14px;
font-size:0.854rem; line-height:1.6; }
.footer-mail svg{ width:15px; height:15px; flex:none; }
.footer a.cz-mail{ position:relative; }
.footer a.cz-mail::after{ content:''; position:absolute; left:0; right:0; top:50%;
height:44px; transform:translateY(-50%); }
.footer{ padding:60px 0 28px; border-top:0; }
.footer-grid{ gap:48px; margin-bottom:48px; }
.footer-brand p{ font-size:0.854rem; line-height:1.6; max-width:280px; margin-top:14px;
letter-spacing:-0.003em; }
.footer-col h3{ font-size:0.757rem; color:var(--text-2); }
.footer-col a{ font-size:0.854rem; padding:3px 0; }
.footer-bottom{ margin-top:0; padding-top:24px; align-items:center; }
.footer-bottom p{ font-size:0.757rem; letter-spacing:-0.003em; }
@media (max-width:1024px){
.footer-grid{ grid-template-columns:1fr 1fr !important; }}
@media (max-width:768px){
.footer-grid{ grid-template-columns:1fr 1fr !important; gap:26px 18px !important; }
.footer-brand p{ max-width:100%; }
.footer-bottom{ flex-direction:column; gap:16px; text-align:center; }
.footer-col a{ padding:9px 0; }
footer .logo, .footer .logo{ padding:0; position:relative; }
.footer .logo::after{ content:''; position:absolute; left:0; right:0; top:50%;
height:44px; transform:translateY(-50%); }}
@media (max-width:540px){
.logo-word img{ height:16px; }
.logo-mark.logo-mark-img{ width:28px; height:28px; }}
@media (max-width:768px){
.navbar .logo{ padding:0; position:relative; }
.navbar .logo::after{ content:''; position:absolute; left:0; right:0; top:50%;
height:44px; transform:translateY(-50%); }}
@media (max-width:480px){
.footer-col h3{ font-size:0.698rem; }
.footer-col a{ font-size:0.795rem; }
.footer-bottom p{ font-size:0.72rem; }}
.pl-card .c-mx span{ font-size:.6875rem; }
.pl-card .c-mx > div + div span{ max-width:52px; margin-left:auto; margin-right:auto; }
@media (min-width:421px){
.pl-card .c-mx > div:first-child span{ max-width:72px; }}
@media (max-width:340px){
.pl-card .c-mx span{ letter-spacing:0; }}
.pl-card .pp-tag{ font-size:.72rem; }
.pl-card .c-hi-h{ font-size:.72rem; }
.cz-grp th{ font-size:.6875rem !important; }
.sb-chip{ font-size:.6875rem; }
.sb-url{ font-size:11px; }
.sb-rec{ font-size:11px; }
.sb-num{ font-size:11.5px; }
.uline{ position:relative; isolation:isolate; padding:0 0.12em; background-image:none; }
[data-theme="dark"] .uline{ background-image:none; }
.uline::before{ content:''; position:absolute; left:0; right:0; z-index:-1;
top:calc(0.55em - 0.0238em); bottom:calc(0.55em - 0.575em);
top:calc(0.5lh - 0.0238em); bottom:calc(0.5lh - 0.575em);
background:linear-gradient(100deg, rgba(253,141,104,0.62), rgba(255,95,109,0.62));
border-radius:0.06em; }
@media (min-width:769px){ .footer-brand p{ max-width:440px; } }