/* Site refresh 2026-10-12 – app brand tokens (spokes-ds.css): teal #0E7490, deep #0D4A57→#0B2A4A, ink #1C1C1C, tint #E6F6F9, Jost + Poppins */
:root{--rf-acc:#0E7490;--rf-g1:#0E7490;--rf-g2:#0D4A57;--rf-g3:#0B2A4A;--rf-ink:#1C1C1C;--rf-mut:#4F4F4F;--rf-line:#E3E6E6;--rf-tint:#E6F6F9;--rf-sky:#A5E8FD}
body{font-family:Poppins,system-ui,sans-serif;color:var(--rf-ink)}
.rf-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.rf-k{font:600 13px/1 Jost,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--rf-acc);margin:0 0 14px}
.rf-h1,.rf-h2,.rf-h3,.rf-sec h3{font-family:Jost,sans-serif;font-weight:600;letter-spacing:-.01em;margin:0}
.rf-h1{font-size:clamp(40px,6vw,68px);line-height:1.04}.rf-h1 em{font-style:normal;color:var(--rf-sky)}
.rf-h2{font-size:clamp(30px,4vw,46px);line-height:1.1}.rf-h3{font-size:26px}
.rf-p,.rf-lead{color:var(--rf-mut);font-size:18px;line-height:1.6;max-width:640px;margin:14px 0 0}
.rf-hero{background:linear-gradient(135deg,var(--rf-g1),var(--rf-g2) 55%,var(--rf-g3));color:#fff;padding:72px 0 88px;overflow:hidden}
.rf-hero .rf-k{color:var(--rf-sky)}.rf-hero .rf-lead{color:#DCECF0}
.rf-hero-g{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
.rf-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.rf-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:12px;background:var(--rf-sky);color:#0B1F26;font:600 16px Jost,sans-serif;text-decoration:none}
.rf-btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
.rf-ticks{display:flex;gap:20px;flex-wrap:wrap;list-style:none;padding:0;margin:24px 0 0;font-size:14px;color:#DCECF0}.rf-ticks li:before{content:"✓ ";color:var(--rf-sky)}
.rf-hero-v{position:relative}
.rf-dev{margin:0;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -20px rgba(4,20,30,.45),0 0 0 1px rgba(12,40,50,.08)}
.rf-dev img{display:block;width:100%;height:auto}
.rf-phone{border-radius:28px;border:6px solid #1C1C1C;max-width:260px}
.rf-hero-ph{position:absolute;right:-12px;bottom:-48px;width:30%;max-width:190px}
.rf-jump{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding-top:28px!important}
.rf-jump a{padding:9px 16px;border-radius:999px;background:var(--rf-tint);color:var(--rf-g2);font:500 14px Jost,sans-serif;text-decoration:none}
.rf-sec{padding:88px 0}.rf-head{margin-bottom:44px}
.rf-split{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center;margin-top:48px}
.rf-split.rev{grid-template-columns:1fr 1.3fr}.rf-split.rev>figure{order:2}
.rf-split h3{font-size:28px}.rf-split p{color:var(--rf-mut);line-height:1.6}
.rf-list{list-style:none;padding:0;margin:18px 0 0}.rf-list li{padding:8px 0 8px 28px;position:relative;border-top:1px solid var(--rf-line)}.rf-list li:before{content:"";position:absolute;left:4px;top:15px;width:10px;height:10px;border-radius:3px;background:var(--rf-acc)}
.rf-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.rf-card{margin:0;border:1px solid var(--rf-line);border-radius:16px;overflow:hidden;background:#fff}.rf-card img{display:block;width:100%;height:auto;border-bottom:1px solid var(--rf-line)}
.rf-card figcaption,.rf-phones figcaption{padding:16px 18px;display:flex;flex-direction:column;gap:4px;font-size:15px;color:var(--rf-mut)}
.rf-card b,.rf-phones b{font:600 17px Jost,sans-serif;color:var(--rf-ink)}
.rf-dark{background:linear-gradient(160deg,var(--rf-g2),var(--rf-g3));color:#fff}.rf-dark .rf-k{color:var(--rf-sky)}.rf-dark .rf-p{color:#DCECF0}
.rf-phones{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}.rf-phones figure{margin:0}
.rf-phones .rf-phone{max-width:none}.rf-phones figcaption{padding:16px 2px;color:#C9DDE2}.rf-phones b{color:#fff}
.rf-video{border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(4,20,30,.4);background:#0B2A4A}.rf-video video{display:block;width:100%;aspect-ratio:16/9}
.rf-tint{background:var(--rf-tint)}
.rf-feat{background:#fff;border-radius:16px;padding:28px;border:1px solid #D3E9EE}.rf-feat h3{font-size:21px;margin:16px 0 8px}.rf-feat p{color:var(--rf-mut);margin:0;line-height:1.55}
.rf-badge{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--rf-acc);color:#fff;font:600 17px Jost,sans-serif}
@media(max-width:1023px){.rf-phones{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.rf-hero-g,.rf-split,.rf-split.rev{grid-template-columns:1fr}.rf-split.rev>figure{order:0}.rf-grid3{grid-template-columns:1fr}.rf-hero{padding:48px 0 72px}.rf-hero-ph{right:6px}}
@media(max-width:600px){.rf-phones{grid-template-columns:repeat(2,1fr);gap:14px}.rf-sec{padding:64px 0}}
.rf-mt{margin-top:56px}
/* qv1013 hero: board + phone booking, gentle motion */
.rf-hero-v{padding:0 0 40px}
.rf-hero-v .rf-desk{box-shadow:0 30px 60px -20px rgba(14,116,144,.35),0 0 0 1px #e3eaee;border-radius:16px;overflow:hidden}
.rf-hero-v .rf-desk img,.rf-hero-ph img{display:block;width:100%;height:auto}
.rf-hero-ph{right:0;bottom:0;width:28%;max-width:200px;box-shadow:0 24px 50px -12px rgba(15,42,51,.45);overflow:hidden}
@media (prefers-reduced-motion:no-preference){
 .rf-hero-ph{animation:rfFloat 6s 1.2s ease-in-out infinite}
}
@keyframes rfIn{from{opacity:0;transform:translateY(24px)}}
@keyframes rfFloat{50%{transform:translateY(-10px)}}
@media(max-width:860px){.rf-hero-ph{right:8px;width:30%}.rf-hero-v{padding-bottom:30px}}
.rf-board-live{margin:0;border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(14,116,144,.3),0 0 0 1px #e3eaee}.rf-board-live img{display:block;width:100%;height:auto}
.rf-hero-v{padding-right:17%;padding-top:30px}.rf-hero-ph{width:25%;top:0;bottom:auto}@media(max-width:860px){.rf-hero-v{padding-right:20%}.rf-hero-ph{width:27%;right:0}}
/* qv1013 contrast: headings on dark/teal sections white, light text ≥4.5:1 */
.rf-hero .rf-h1,.rf-hero h1,.rf-dark .rf-h2,.rf-dark h2,.rf-dark h3,.rf-dark .rf-h3{color:#fff}
.rf-hero .rf-h1 em{color:#BDEBFA}
.rf-hero .rf-k,.rf-dark .rf-k{color:#CFF3FF}
.rf-hero .rf-lead,.rf-dark .rf-p,.rf-ticks{color:#EEF7F9}
/* boardbig 2026-10-13: larger board in hero */
@media(min-width:861px){.rf-hero-g{grid-template-columns:minmax(0,.78fr) minmax(0,1.5fr);gap:32px}.rf-hero-v{padding-right:12%;padding-top:36px}.rf-hero-ph{width:21%;max-width:210px}.rf-hero-v .rf-desk{transform:scale(1.04);transform-origin:left center}}
@media(min-width:1200px){.rf-hero .rf-wrap.rf-hero-g{max-width:min(1400px,96vw)}}
@media(max-width:860px){.rf-hero-v{padding-right:15%}.rf-hero-ph{width:24%}}
/* hero2 2026-10-13: two-column hero, devices above the fold */
@media(min-width:861px){.rf-hero{padding:40px 0 56px}.rf-hero .rf-wrap.rf-hero-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:center;max-width:min(1440px,96vw)}
.rf-hero .rf-h1{font-size:clamp(38px,4.2vw,64px);line-height:1.04}.rf-hero .rf-lead{font-size:clamp(15px,1.25vw,18px)}
.rf-hero-v{padding:20px 11% 40px 0;margin:0}.rf-hero-v .rf-desk{transform:none;border:8px solid #10202a;border-radius:16px}
.rf-hero-ph{width:22%;max-width:220px;top:auto;bottom:0;right:0}}
@media(max-width:860px){.rf-hero-v{padding-right:0;padding-bottom:70px}.rf-hero-ph{width:26%;top:auto;bottom:0;right:8px}}
html,body{overflow-x:clip}
