/* Public expression of the same Randevunolsun design system used by the workspace. */
:root { --ro-paper:var(--brand-paper,#f7f8f2); --ro-ink:var(--brand-forest,#163b32); --ro-lime:var(--brand-lime,#ceef83); font-family:var(--brand-font,"Segoe UI",sans-serif); }
.ro-site { background:var(--ro-paper); }
.ro-header { background:rgba(247,248,242,.96); backdrop-filter:blur(16px); }
.ro-header-inner { min-height:82px; }
.ro-nav a { position:relative; }
.ro-nav a::after { content:""; position:absolute; left:0; right:0; bottom:5px; height:2px; background:var(--ro-ink); transform:scaleX(0); transition:transform .2s; }
.ro-nav a:hover::after,.ro-nav a[aria-current="location"]::after { transform:scaleX(1); }
.ro-button { border-radius:12px; min-height:48px; transition:background .18s,transform .18s,box-shadow .18s; }
.ro-button-dark:hover { box-shadow:0 6px 18px #163b3220; }
.ro-hero { grid-template-columns:.95fr 1.1fr; gap:52px; padding-block:72px 78px; min-height:690px; }
.ro-hero h1 { letter-spacing:-2.8px; font-size:clamp(42px,4.25vw,65px); }
.ro-hero h1>span { color:#527647; }
.ro-eyebrow { font-size:11px; letter-spacing:.08em; }
.ro-lead { max-width:450px; line-height:1.85; }
.ro-hero-art { padding-block:22px 58px; }
.ro-art-orbit { border-radius:40% 44% 42% 38%; background:#e7eddc; top:12%; height:80%; width:92%; left:4%; }
.ro-art-spark { top:-14px; right:10px; }
.ro-preview-label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; color:#5f7558; font-size:9px; }
.ro-preview-label>span:first-child { display:flex; align-items:center; gap:7px; font-weight:700; letter-spacing:.1em; }
.ro-preview-label .ro-icon { width:17px; height:17px; }
.ro-demo-window { transform:none; border-radius:18px; box-shadow:0 25px 60px -25px #163b3240,0 2px 5px #163b3208; }
.ro-demo-top { height:50px; padding-inline:18px; }
.ro-demo-tabs { display:flex; gap:5px; padding:9px 13px; border-bottom:1px solid #e3e8dc; background:#f9fbf6; }
.ro-demo-tabs button { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; color:#687762; background:transparent; min-height:36px; padding:8px 14px; font-size:10px; font-weight:650; border-radius:8px; }
.ro-demo-tabs button[aria-selected="true"] { color:var(--ro-ink); background:#e4edda; box-shadow:inset 0 0 0 1px #d6e3ca; }
.ro-demo-tabs button .ro-icon { width:14px; height:14px; }
.ro-demo-body { min-height:340px; }
.ro-demo-sidebar { background:#173c33; border-right:0; width:43px; }
.ro-demo-sidebar>span { color:#b6c5ba; }
.ro-demo-sidebar>span.active { background:var(--ro-lime); color:var(--ro-ink); }
.ro-demo-sidebar .ro-demo-profile { background:#426456; color:#e0efcf; }
.ro-demo-content:focus-visible { outline:2px solid #6a904e; outline-offset:-3px; }
.ro-floating-request { left:24px; bottom:33px; transform:none; border-radius:13px; box-shadow:0 9px 30px #163b3214; }
.ro-art-footnote { bottom:3px; right:0; font-size:10px; }
.ro-preview-list { padding:24px 20px 18px; }
.ro-preview-description { color:#6c7a67; font-size:10px; line-height:1.7; margin:12px 0 20px; }
.ro-preview-customer { display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid #edf0e8; }
.ro-preview-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; flex-shrink:0; font-size:10px; }
.ro-preview-avatar.purple { background:#eee7f8; color:#6f578f; }.ro-preview-avatar.peach { background:#faeee2; color:#9c6940; }.ro-preview-avatar.green { background:#e7f1df; color:#527342; }
.ro-preview-customer>div { display:flex; flex-direction:column; gap:5px; min-width:0; }.ro-preview-customer strong { font-size:11px; }.ro-preview-customer>div>span { font-size:9px; color:#6c7a67; }
.ro-preview-tag { margin-left:auto; font-size:8px; background:#f1f5eb; color:#49663a; border-radius:5px; padding:5px 7px; white-space:nowrap; }
.ro-preview-tip { display:flex; align-items:center; gap:8px; padding-top:17px; color:#6c7a67; font-size:9px; }.ro-preview-tip .ro-icon { width:17px; height:17px; }
.ro-capabilities { background:#eef2e8; }.ro-capabilities>.ro-container { padding-block:24px; }
.ro-feature { transition:border-color .2s,box-shadow .2s; border-radius:20px; }.ro-feature:hover { border-color:#b7c7a9; box-shadow:0 8px 24px #163b3206; }
.ro-feature-0 { background:#eaf0e1; }.ro-feature-1 { background:#f1eee5; }
.ro-everywhere { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:50px; padding:60px 64px; border:1px solid #dce4d2; background:#eef2e7; border-radius:28px; margin-bottom:100px; overflow:hidden; }
.ro-everywhere h2 { font-size:clamp(32px,3.3vw,46px); line-height:1.12; letter-spacing:-1.8px; font-weight:600; text-wrap:balance; }.ro-everywhere h2>span { color:#5d7d48; }
.ro-everywhere-copy>p:not(.ro-kicker) { color:var(--ro-muted); line-height:1.85; font-size:14px; margin-top:22px; max-width:400px; }
.ro-everywhere ul { list-style:none; padding:0; margin:25px 0 22px; display:grid; gap:15px; }.ro-everywhere li { display:flex; gap:10px; align-items:center; font-size:12px; line-height:1.65; }.ro-everywhere li .ro-icon { width:18px; height:18px; color:#5f7e43; }
.ro-mobile-scene { position:relative; display:flex; align-items:center; justify-content:flex-end; padding:0 0 25px; }
.ro-phone { width:294px; background:#f8faf5; border:6px solid #24483b; border-radius:31px; box-shadow:14px 25px 45px -24px #163b3255; overflow:hidden; position:relative; }
.ro-phone-top { display:flex; align-items:center; gap:7px; padding:17px 13px 12px; border-bottom:1px solid #e0e6d8; background:white; }.ro-phone-top strong { font-size:12px; letter-spacing:-.4px; }.ro-phone-top strong>span { color:#719b4d; }.ro-phone-top img { width:25px; height:25px; }.ro-phone-avatar { margin-left:auto; background:#e8eddc; border-radius:50%; width:25px; height:25px; display:grid; place-items:center; font-size:8px; }
.ro-phone-content { padding:20px 13px; }.ro-phone-label { font-size:7px; letter-spacing:1.1px; color:#607756; font-weight:700; }.ro-phone-content h3 { font-size:20px; font-weight:650; letter-spacing:-.7px; margin:7px 0; }.ro-phone-content h3>span { color:#76994d; }.ro-phone-content>p { font-size:9px; color:#6f7b68; }
.ro-phone-stats { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid #dfe5d6; background:#fff; border-radius:10px; margin-top:20px; padding:13px 0; }.ro-phone-stats>div { display:grid; gap:8px; padding-left:14px; }.ro-phone-stats>div+div { border-left:1px solid #e4e9dd; }.ro-phone-stats span { font-size:8px; color:#6b7a60; }.ro-phone-stats strong { font-size:24px; font-weight:600; letter-spacing:-1px; }
.ro-phone-agenda-title { display:flex; justify-content:space-between; margin:22px 0 12px; font-size:9px; }.ro-phone-agenda-title>span { color:#6c7c61; }
.ro-phone-appointment { display:flex; align-items:center; gap:9px; background:#ede8f2; border-left:3px solid #b29dc7; border-radius:6px; padding:11px 8px; margin-top:8px; }.ro-phone-appointment time { font-size:9px; font-weight:700; }.ro-phone-appointment>div { display:grid; gap:5px; }.ro-phone-appointment strong { font-size:9px; }.ro-phone-appointment>div>span { font-size:8px; color:#6b7567; }.ro-phone-appointment i { font-size:6px; margin-left:auto; font-style:normal; color:#5e6c53; }.ro-phone-appointment.peach { background:#f7eee1; border-color:#d8b185; }.ro-phone-appointment.green { background:#e6efdf; border-color:#a2bf87; }
.ro-phone-new { display:flex; align-items:center; gap:8px; padding:11px; color:#f7f8f2; background:var(--ro-ink); border-radius:8px; margin-top:16px; font-size:9px; }.ro-phone-new>.ro-icon { width:14px; height:14px; }.ro-phone-new>span { margin-left:auto; font-size:15px; }
.ro-phone-nav { display:grid; grid-template-columns:repeat(3,1fr); background:white; border-top:1px solid #e1e7d9; padding:11px 10px 14px; }.ro-phone-nav>span { display:grid; justify-items:center; gap:5px; font-size:7px; color:#829075; }.ro-phone-nav .ro-icon { width:16px; height:16px; }.ro-phone-nav>span.active { color:#3b602e; }
.ro-mobile-note { position:absolute; left:0; top:110px; z-index:1; border:1px solid #dce4d2; border-radius:15px; background:#fff; padding:19px; width:161px; box-shadow:0 10px 25px #163b320a; }.ro-mobile-note>span { width:33px; height:33px; background:var(--ro-lime); border-radius:9px; display:grid; place-items:center; margin-bottom:15px; }.ro-mobile-note .ro-icon { width:18px; height:18px; }.ro-mobile-note strong { font-size:17px; line-height:1.35; letter-spacing:-.5px; }.ro-mobile-note p { color:#718164; font-size:9px; line-height:1.7; margin-top:9px; }.ro-mobile-scene-label { position:absolute; bottom:0; right:28px; font-size:9px; color:#77896c; }
.ro-how { padding-block:84px; }.ro-how h2 { max-width:620px; }.ro-plan { border-radius:20px; }.ro-plan-featured { box-shadow:0 14px 35px #163b3213; }.ro-faq-list summary { min-height:65px; }
.ro-help { display:flex; align-items:center; gap:25px; padding:30px 0 48px; border-top:1px solid var(--ro-line); margin-top:10px; }.ro-help-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:17px; background:#e7eedb; flex-shrink:0; }.ro-help .ro-kicker { margin:0 0 7px; font-size:9px; }.ro-help h2 { font-size:23px; font-weight:600; letter-spacing:-.65px; }.ro-help p:not(.ro-kicker) { margin-top:8px; font-size:12px; color:var(--ro-muted); line-height:1.7; }.ro-help>.ro-button { margin-left:auto; flex-shrink:0; }
.ro-footer-bottom { padding-bottom:40px; }
@media(min-width:1500px) { .ro-hero { min-height:725px; } }
@media(max-width:1100px) { .ro-container { width:calc(100% - 64px); }.ro-hero { gap:30px; }.ro-hero h1 { font-size:48px; }.ro-everywhere { padding:42px 35px; gap:25px; }.ro-mobile-note { left:-5px; width:135px; padding:15px; }.ro-phone { width:270px; }.ro-preview-label>span:last-child { display:none; }.ro-nav { gap:19px; } }
@media(max-width:900px) { .ro-hero { grid-template-columns:1fr; max-width:700px; padding-block:48px 52px; gap:35px; }.ro-hero-copy { text-align:center; }.ro-eyebrow,.ro-hero-actions,.ro-hero-note,.ro-audience>div { justify-content:center; }.ro-hero h1 { font-size:58px; }.ro-lead { margin-inline:auto; max-width:540px; }.ro-audience { margin-top:26px; }.ro-hero-art { max-width:570px; width:100%; margin-inline:auto; }.ro-demo-body { min-height:345px; }.ro-preview-label>span:last-child { display:inline; }.ro-everywhere { gap:25px; padding:40px 28px; }.ro-everywhere h2 { font-size:34px; }.ro-mobile-note { display:none; }.ro-mobile-scene { justify-content:center; }.ro-mobile-scene-label { right:auto; }.ro-help { flex-wrap:wrap; }.ro-help>.ro-button { margin-left:83px; }.ro-header-inner { min-height:76px; } }
@media(max-width:700px) { html { scroll-padding-top:85px; }.ro-container { width:calc(100% - 36px); }.ro-header-inner { min-height:70px; gap:12px; }.ro-brand img { width:168px; }.ro-header-login { display:inline-flex; min-height:38px; padding:9px 12px; font-size:10px; gap:6px; border-radius:9px; }.ro-header-login .ro-icon { display:none; }.ro-mobile-menu summary { min-width:40px; min-height:40px; }.ro-mobile-menu nav { border-radius:15px; box-shadow:0 15px 35px #163b321c; padding:10px; }.ro-mobile-menu nav a { min-height:44px; display:flex; align-items:center; border-radius:8px; padding:12px; }.ro-mobile-menu nav a:hover { background:#eef2e7; }.ro-mobile-register { background:var(--ro-lime); font-weight:700; }.ro-hero { padding-block:37px 35px; gap:26px; }.ro-eyebrow { font-size:9px; letter-spacing:.06em; }.ro-hero h1 { font-size:clamp(36px,9.2vw,52px); line-height:1.13; letter-spacing:-1.9px; margin:22px 0 19px; }.ro-lead { font-size:14px; line-height:1.85; }.ro-hero-actions { gap:10px 20px; margin-top:24px; }.ro-hero-actions>.ro-button { width:100%; min-height:54px; font-size:14px; }.ro-text-link { min-height:44px; }.ro-hero-note { margin-top:10px; font-size:10px; }.ro-audience { padding-top:18px; margin-top:20px; }.ro-audience>div { gap:25px; }.ro-hero-art { padding:18px 0 47px; }.ro-preview-label { font-size:8px; gap:6px; margin-bottom:11px; }.ro-preview-label>span:last-child { display:none; }.ro-art-spark { top:-10px; right:6px; }.ro-art-spark .ro-icon { width:28px; height:28px; }.ro-demo-window { margin:0; border-radius:13px; }.ro-demo-body { min-height:310px; }.ro-demo-top { padding-inline:12px; height:43px; }.ro-demo-caption { font-size:6px; }.ro-demo-tabs { padding:7px; gap:4px; }.ro-demo-tabs button { flex:1; padding:7px 5px; font-size:9px; min-height:37px; }.ro-demo-sidebar { width:30px; }.ro-demo-sidebar>span { width:24px; height:24px; }.ro-demo-content { padding:17px 11px 16px; }.ro-demo-heading h2 { font-size:17px; }.ro-demo-heading>div>span { font-size:6px; }.ro-demo-summary { margin-top:15px; }.ro-demo-summary>div { padding:0 7px; }.ro-demo-summary strong { font-size:21px; }.ro-demo-summary .ro-summary-status { font-size:7px; }.ro-demo-summary>div>span { font-size:7px; }.ro-summary-status>span { display:none; }.ro-agenda-grid { min-height:118px; }.ro-appointment i { display:none; }.ro-floating-request { padding:11px 13px; bottom:23px; left:12px; max-width:calc(100% - 24px); }.ro-floating-request strong { font-size:10px; }.ro-floating-request>div>span { font-size:8px; }.ro-floating-icon { width:31px; height:31px; }.ro-art-footnote { font-size:8px; bottom:0; }.ro-preview-list { padding:18px 12px; }.ro-preview-description { font-size:9px; margin-bottom:12px; }.ro-preview-customer { gap:7px; padding:12px 0; }.ro-preview-avatar { width:27px; height:27px; font-size:8px; }.ro-preview-customer strong { font-size:10px; }.ro-preview-customer>div>span { font-size:8px; }.ro-preview-tag { font-size:7px; padding:4px; }.ro-preview-tip { font-size:8px; }.ro-capabilities>.ro-container { gap:18px 10px; padding-block:22px; }.ro-capabilities span { font-size:10px; justify-content:flex-start; gap:9px; }.ro-capabilities .ro-icon { width:18px; height:18px; }.ro-section { padding-block:62px; }.ro-section-heading { gap:17px; margin-bottom:26px; }.ro-section h2,.ro-how h2,.ro-faq-intro h2,.ro-final-cta h2 { font-size:32px; letter-spacing:-1.2px; }.ro-section-heading>p { font-size:13px; }.ro-feature { border-radius:17px; padding:25px; }.ro-feature h3 { font-size:18px; }.ro-feature p { font-size:13px; }.ro-feature-customer { margin-top:25px; }.ro-everywhere { grid-template-columns:1fr; padding:32px 24px; border-radius:22px; margin-bottom:62px; gap:32px; }.ro-everywhere h2 { font-size:34px; }.ro-everywhere-copy>p:not(.ro-kicker) { font-size:13px; }.ro-everywhere ul { gap:13px; margin:22px 0 14px; }.ro-everywhere li { font-size:11px; }.ro-mobile-scene { padding-top:5px; }.ro-phone { width:282px; }.ro-mobile-scene-label { font-size:8px; }.ro-how { padding-block:55px; }.ro-how h2 { max-width:420px; }.ro-steps { gap:26px; margin-top:28px; }.ro-step-number { font-size:27px; }.ro-help { gap:16px; padding-block:28px; margin-top:0; }.ro-help-icon { width:43px; height:43px; border-radius:12px; }.ro-help>div { flex:1; min-width:0; }.ro-help h2 { font-size:20px; }.ro-help p:not(.ro-kicker) { font-size:12px; }.ro-help>.ro-button { margin-left:59px; min-height:46px; }.ro-final-cta { margin-top:28px; }.ro-footer-bottom { padding-bottom:95px; } }
@media(max-width:374px) { .ro-brand img { width:140px; }.ro-header-inner { gap:7px; }.ro-header-login { font-size:9px; padding-inline:9px; }.ro-preview-tag { display:none; }.ro-everywhere { padding-inline:18px; }.ro-phone { width:100%; }.ro-help>.ro-button { margin-left:0; width:100%; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.ro-button,.ro-feature,.ro-nav a::after { transition:none; }.ro-button:hover { transform:none; } }
@media(max-width:700px) { .ro-header-login { min-height:44px; }.ro-mobile-menu summary { min-width:44px; min-height:44px; }.ro-demo-tabs button { min-height:44px; font-size:11px; } }