.rsite .brand{align-items:revert;display:revert;flex:revert;gap:revert;justify-content:revert;min-height:revert;padding:revert;padding-left:revert;padding-right:revert}.rsite .btn{-webkit-tap-highlight-color:revert;-webkit-touch-callout:revert;-webkit-user-select:revert;align-items:revert;align-self:revert;background:revert;border:revert;border-color:revert;border-radius:revert;border-top:revert;box-shadow:revert;color:revert;content:revert;cursor:revert;display:revert;filter:revert;flex:revert;font-size:revert;font-weight:revert;gap:revert;height:revert;justify-content:revert;left:revert;line-height:revert;margin-left:revert;margin-top:revert;max-width:revert;min-height:revert;min-width:revert;opacity:revert;outline:revert;overflow:revert;overflow-wrap:revert;padding:revert;padding-bottom:revert;padding-top:revert;pointer-events:revert;position:revert;right:revert;text-align:revert;text-decoration:revert;text-overflow:revert;top:revert;transform:revert;transition:revert;user-select:revert;white-space:revert;width:revert}.rsite .hd{max-width:revert;padding-bottom:revert}.rsite .is-on{background:revert;box-shadow:revert;color:revert;font-weight:revert}.rsite .seg{-webkit-mask-image:revert;background:revert;border-radius:revert;display:revert;gap:revert;margin:revert;margin-bottom:revert;mask-image:revert;max-width:revert;overflow-x:revert;padding:revert;padding-right:revert;scroll-snap-type:revert;scrollbar-width:revert}.rsite .smsConsent{align-items:revert;color:revert;cursor:revert;display:revert;font-size:revert;gap:revert;line-height:revert;text-align:revert}.rsite .wrap{white-space:revert}.rsite{-webkit-font-smoothing:initial;-webkit-tap-highlight-color:initial;-webkit-text-size-adjust:initial;background:revert;color:initial;display:revert;font-family:initial;font-size:initial;height:revert;line-height:initial;margin:revert;max-width:revert;overflow-x:revert;overscroll-behavior-y:revert;padding:revert;scroll-padding-top:revert;width:revert}.rsite a{-webkit-tap-highlight-color:revert;align-items:revert;background:revert;border:revert;border-bottom:revert;border-bottom-color:revert;border-radius:revert;border-top:revert;box-shadow:revert;color:revert;cursor:revert;display:revert;font:revert;font-size:revert;font-weight:revert;gap:revert;justify-content:revert;line-height:revert;margin:revert;margin-bottom:revert;min-height:revert;opacity:revert;outline:revert;overflow-wrap:revert;padding:revert;padding-block:revert;padding-bottom:revert;text-align:revert;text-decoration:revert;touch-action:revert;transform:revert;transition:revert;transition-delay:revert;white-space:revert;width:revert}.rsite button{-webkit-tap-highlight-color:revert;align-items:revert;background:revert;border:revert;border-bottom:revert;border-color:revert;border-radius:revert;border-top:revert;box-shadow:revert;color:revert;cursor:revert;display:revert;flex:revert;font:revert;font-family:revert;font-size:revert;font-weight:revert;gap:revert;height:revert;justify-content:revert;line-height:revert;min-height:revert;min-width:revert;opacity:revert;outline:revert;overflow-wrap:revert;padding:revert;place-items:revert;pointer-events:revert;position:revert;text-align:revert;text-decoration:revert;touch-action:revert;transform:revert;transition:revert;transition-delay:revert;white-space:revert;width:revert}.rsite h3{color:revert;font-size:revert;font-weight:revert;letter-spacing:revert;line-height:revert;margin:revert;margin-bottom:revert;margin-top:revert}.rsite h4{font-size:revert;font-weight:revert;line-height:revert;margin:revert}.rsite h5{font-size:revert;font-weight:revert;line-height:revert;margin:revert}.rsite input{-webkit-user-select:revert;accent-color:revert;background:revert;border:revert;border-color:revert;border-radius:revert;border-width:revert;box-shadow:revert;box-sizing:revert;color:revert;flex:revert;font:revert;font-family:revert;font-size:revert;font-weight:revert;height:revert;margin:revert;margin-top:revert;max-width:revert;min-height:revert;min-width:revert;outline:revert;outline-offset:revert;padding:revert;padding-left:revert;text-align:revert;transition:revert;user-select:revert;width:revert}.rsite label{align-items:revert;color:revert;cursor:revert;display:revert;flex:revert;flex-direction:revert;font-size:revert;font-weight:revert;gap:revert}.rsite li{align-items:revert;background:revert;border:revert;border-bottom:revert;border-radius:revert;border-top:revert;break-inside:revert;color:revert;display:revert;flex-wrap:revert;font-size:revert;font-style:revert;gap:revert;grid-template-columns:revert;justify-content:revert;line-height:revert;margin:revert;margin-bottom:revert;min-height:revert;overflow-wrap:revert;padding:revert;padding-left:revert;padding-top:revert;position:revert}.rsite p{-webkit-user-select:revert;color:revert;font-size:revert;font-style:revert;grid-column:revert;line-height:revert;margin:revert;max-width:revert;padding-right:revert;padding-top:revert;user-select:revert}.rsite select{accent-color:revert;background:revert;border:revert;border-color:revert;border-radius:revert;border-width:revert;box-shadow:revert;box-sizing:revert;color:revert;flex:revert;font:revert;font-family:revert;font-size:revert;height:revert;max-width:revert;min-height:revert;min-width:revert;outline:revert;padding:revert;transition:revert;width:revert}.rsite small{color:revert;display:revert;font-size:revert;font-weight:revert;grid-area:revert;grid-column:revert;line-height:revert;margin-left:revert;margin-top:revert;overflow:revert;overflow-wrap:revert;text-overflow:revert;white-space:revert}.rsite summary{align-items:revert;background:revert;border:revert;border-radius:revert;box-shadow:revert;color:revert;cursor:revert;display:revert;flex-wrap:revert;font-size:revert;font-weight:revert;gap:revert;justify-content:revert;list-style:revert;margin:revert;margin-bottom:revert;min-height:revert;min-width:revert;outline:revert;outline-offset:revert;padding:revert;pointer-events:revert;position:revert}.rsite textarea{-webkit-user-select:revert;background:revert;border:revert;border-color:revert;border-radius:revert;border-width:revert;box-shadow:revert;box-sizing:revert;font-family:revert;font-size:revert;max-width:revert;min-height:revert;outline:revert;transition:revert;user-select:revert}.rsite ul{column-gap:revert;columns:revert;display:revert;flex-direction:revert;gap:revert;list-style:revert;margin:revert;padding:revert;padding-left:revert}@font-face{font-family:"Geist";font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/geist-latin-v5.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/geistmono-latin-v6.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* THE ONE PAGE SYSTEM (RILLO SITE PAGES V1, app/lib/site/pagekit.js) */ /* a trade page stays inside seven phone screens (doors17 R11): the box a little tighter, the gap above it 8px */ .rsite{--secY:88px;--secY-sm:56px;color-scheme:only light; --paper:#FBFCFE;--ink:#0A0B0D;--ink2:#5B616E;--ink3:#666D7C; --hair:#E5E8EE;--fill:rgba(14,17,22,.04); --blue:#0052FF;--card:#15171a;--surf:#fff; --mono:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --col:1120px;--ease:cubic-bezier(.2,.7,.2,1)} .rsite *{box-sizing:border-box} .rsite{background:var(--paper);-webkit-text-size-adjust:100%;scroll-behavior:smooth} .rsite{margin:0;background:var(--paper);color:var(--ink);font-family:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; letter-spacing:-.008em;-webkit-font-smoothing:antialiased;overflow-x:hidden} .rsite .wrap{max-width:var(--col);margin:0 auto;padding:0 28px} @media (max-width:640px){.rsite .wrap{padding:0 18px}} .rsite a{color:inherit} /* ===== header: shared component ===== */ .rsite .hd{position:sticky;top:0;z-index:40;background:rgba(251,252,254,.86);backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2);border-bottom:1px solid var(--hair)} .rsite .hd__in{display:flex;align-items:center;gap:26px;height:68px} .rsite .brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;font-size:18px;letter-spacing:-.02em;flex:none} @media (max-width:820px){.rsite .brand{gap:8px;font-size:17px}} .rsite .brand i{width:32px;height:32px;border-radius:10px;background:var(--blue);display:grid;place-items:center} .rsite .brand svg{width:18px;height:18px;color:#fff} .rsite .brand em{font-style:normal;font-weight:500;color:var(--ink3);margin-left:-3px} .rsite .hd nav{display:flex;gap:22px;margin-left:8px} .rsite .hd nav a{text-decoration:none;font-size:15px;color:var(--ink2);padding:6px 0} .rsite .hd nav a:hover{color:var(--ink)} .rsite .hd__end{margin-left:auto;display:flex;align-items:center;gap:14px} .rsite .login{text-decoration:none;font-size:15px;color:var(--ink2)} .rsite .btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:12px;border:1px solid var(--hair); background:var(--surf);color:var(--ink);font:inherit;font-size:15px;font-weight:500;text-decoration:none;cursor:pointer; transition:transform .12s var(--ease),background .12s var(--ease)} .rsite .btn:active{transform:scale(.98)} .rsite .btn--p{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600} .rsite .hd .btn{height:40px} /* the three doors, always visible, as pills */ .rsite .seg{display:flex;gap:4px;background:var(--fill);border-radius:12px;padding:3px;margin-left:2px} .rsite .seg a{display:flex;align-items:center;gap:7px;padding:5px 10px 5px 6px;border-radius:9px;text-decoration:none;font-size:13.5px;font-weight:500;color:var(--ink2);white-space:nowrap} .rsite .seg a:hover{color:var(--ink)} .rsite .seg a.is-here{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(14,17,22,.08),0 0 0 1px var(--hair)} .rsite .seg i{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:var(--blue);flex:none} .rsite .seg i svg{width:13px;height:13px;color:#fff} .rsite .seg i.w{background:#fff;border:1px solid var(--hair)}.rsite .seg i.w svg{color:var(--blue)} .rsite .seg i.k{background:var(--card)} @media (max-width:820px){ .rsite .hd__in{gap:10px} .rsite .seg{margin-left:auto} .rsite .seg a{padding:5px 8px 5px 5px;font-size:12.5px} } @media (max-width:420px){ .rsite .seg a span{display:none} .rsite .seg a{padding:5px} .rsite .seg a.is-here span{display:inline} } /* mobile menu */ .rsite .burger{all:unset;display:none;width:40px;height:40px;border-radius:10px;place-items:center;cursor:pointer;color:var(--ink)} .rsite .burger svg{width:22px;height:22px} .rsite .mm{display:none;position:fixed;inset:68px 0 0;background:var(--paper);z-index:39;padding:18px;overflow:auto} .rsite .mm.is-open{display:block} .rsite .mm h5{font-family:var(--mono);font-size:12px;letter-spacing:0;text-transform:none;color:var(--ink3);margin:18px 0 8px} .rsite .mm a{display:block;padding:14px 4px;border-bottom:1px solid var(--hair);font-size:18px;font-weight:600;letter-spacing:-.02em;text-decoration:none} .rsite .mm a small{display:block;font-size:13px;font-weight:400;color:var(--ink3);margin-top:2px} .rsite .mm .btn{width:100%;margin-top:18px;height:48px;font-size:16px} @media (max-width:820px){.rsite .hd nav{display:none}.rsite .login{display:none}.rsite .hd .btn--p{display:none}.rsite .burger{display:grid}} /* ===== screen 1: hero + the window ===== */ /* the talk-to-record demo, four frames on a phone (app/lib/site/talk.js). The finished frames are what shows without the script and under reduced motion (a still strip you can swipe); the script arms the reveal. */ /* .tk__phone: the one phone (app/lib/site/phone.js and shell.css, ONE PHONE); the track is its screen (RILLO DOORS V12) */ /* ADDENDUM 2, ITEM 2: before a frame plays (and before the demo reaches the screen) its words and rows are there, faint, and brighten as they are said: the phone is never empty between the status line and Hold to talk. */ /* ADDENDUM 2, ITEM 2, THE SECOND LOOK (self-review, 2026-09-29): with the words said, step 1 still stood empty between them and Hold to talk. The recording's wave fills that band now, as a voice note shows it, and it breathes by transform only. */ /* DOORS V10: the hero used to stagger five elements into view at once, on top of the header ring's own beam; POLISH rule 8 allows one animated element per screen, so the ring keeps that and the hero holds still. The rise--N classes stay in the markup (render.js matches them by exact string); they carry no motion now. */ .rsite .rise{opacity:1;transform:none} /* the window. A real app frame, the same rail the rest of Rillo uses, drawn at desktop size. */ /* Ask Rillo: the lines write themselves in, once, when the view opens */ /* the app's own look: the real rail, the real Home */ /* RILLO BUG SWEEP V4 (D58 class N): a feature that is not live yet is a quiet, disabled button with its coming-soon line, the same on every page that shows it. The home page draws the Shops window from this page's styles, which never carried this rule, so "Send to 318" drew there as a live button with its line run into it. The two rules are Shops' own (site-src/pages/shops.html). */ /* ===== screen 2: three things, then price ===== */ /* RILLO DOORS V15 (job 6): the app v10 bottom bar, at the foot: two places, the Rillo mark in the centre wearing the one waiting count, one place and More */ /* ===== screen 3: the doors, then the footer. Shared across every Rillo page. ===== Connect is the free door, so it is the only thing on the page that moves: a thin grey ring with a blue beam travelling around it. */ @property --beam{syntax:'';inherits:false;initial-value:0deg} /* the glass ring: a crisp 1.5px ring with a blue arc, and a soft blurred copy of it behind so the arc glows */ .rsite .ft{background:var(--card);color:#f5f6f7;padding:56px 0 32px} .rsite .ft__top{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;flex-wrap:wrap;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.12)} .rsite .ft .brand{color:#fff} .rsite .ft__say{font-size:14.5px;line-height:1.5;margin:12px 0 0;max-width:30ch;color:rgba(245,246,247,.62)} .rsite .ft__doors{display:flex;gap:8px;flex-wrap:wrap} .rsite .ft__doors a{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);text-decoration:none;color:#fff} .rsite .ft__doors a:hover{background:rgba(255,255,255,.1)} .rsite .ft__doors a.is-here{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)} .rsite .ft__doors i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--blue);flex:none} .rsite .ft__doors i svg{width:15px;height:15px;color:#fff} .rsite .ft__doors i.w{background:#fff}.rsite .ft__doors i.w svg{color:var(--blue)} .rsite .ft__doors i.k{background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.22)} .rsite .ft__doors b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em} .rsite .ft__doors small{display:block;font-size:12px;color:rgba(245,246,247,.55);font-family:var(--mono)} .rsite .ft__g{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:32px 0 0} .rsite .ft h4{font-size:13px;font-weight:600;margin:0 0 12px;color:#fff} .rsite .ft ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} .rsite .ft ul a{font-size:14px;color:rgba(245,246,247,.66);text-decoration:none} .rsite .ft ul a:hover{color:#fff} .rsite .ft__b{margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);display:flex;gap:14px;align-items:center;flex-wrap:wrap; font-family:var(--mono);font-size:12px;color:rgba(245,246,247,.5)} .rsite .ft__legal{margin-left:auto;display:flex;gap:14px} .rsite .ft__legal a{color:rgba(245,246,247,.5);text-decoration:none}.rsite .ft__legal a:hover{color:#fff} /* RILLO DOORS V14: the footer's phone rules are shell.css's alone (THE FOOTER ON A PHONE). */ @media (prefers-reduced-motion:reduce){.rsite *,.rsite *::before,.rsite *::after{animation:none!important;transition:none!important}.rsite .rise{opacity:1;transform:none}} @media (max-width:700px){.rsite{--secY:var(--secY-sm)}} /* the CRM pill opens a panel on hover or tap: industries and features. The pill itself is still a link. */ .rsite .seg .has{position:relative} .rsite .seg .has>a{position:relative} .rsite .seg .has>a::after{content:'';display:inline-block;width:0;height:0;border:4px solid transparent;border-top-color:currentColor;border-bottom:0;margin-left:6px;opacity:.6;vertical-align:middle} @media (max-width:820px){.rsite .seg .has>a::after{display:none}} /* features grid on /crm */ /* DOORS V10, QA-005: this tag was white text on a white or near-white border always, which the plain (non-beta) cards render on a white card: invisible. The plain reading is blue on a light blue chip; a beta card (blue background) keeps the white reading, which was already legible there. */ /* RILLO DOORS V17 (founder job 7: one solid blue element per section): a beta feature is a white card like the rest, with its small Beta tag. */ /* ===== SHELL (one copy, identical on every page) ===== */ /* EVERY LABEL IN GEIST (RILLO DOORS V14, founder job 6, asked twice). The site's small labels (eyebrows, chips, price lines, tags, the footer's bottom line, the demos' own labels) all read var(--mono); it is the Geist stack now, so they are set in Geist whatever their size, case or spacing. The one exception is a demo window's address bar (.win__url), which keeps the monospace face as --code. */ .rsite{--mono:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--code:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace} /* ===== header: shared component ===== */ .rsite .hd{position:sticky;top:0;z-index:40;background:rgba(251,252,254,.86);backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2);border-bottom:0;box-shadow:inset 0 -1px 0 var(--hair)} .rsite .hd__in{display:flex;align-items:center;gap:26px;height:68px} .rsite .brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;font-size:18px;letter-spacing:-.02em;flex:none} @media (max-width:820px){.rsite .brand{gap:8px;font-size:17px}} .rsite .brand i{width:32px;height:32px;border-radius:10px;background:var(--blue);display:grid;place-items:center} .rsite .brand svg{width:18px;height:18px;color:#fff} .rsite .brand em{font-style:normal;font-weight:500;color:var(--ink3);margin-left:-3px} .rsite .hd nav{display:flex;gap:22px;margin-left:8px} .rsite .hd nav a{text-decoration:none;font-size:15px;color:var(--ink2);padding:6px 0} .rsite .hd nav a:hover{color:var(--ink)} .rsite .hd__end{margin-left:auto;display:flex;align-items:center;gap:14px} .rsite .login{text-decoration:none;font-size:15px;color:var(--ink2)} .rsite .btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:12px;border:1px solid var(--hair); background:var(--surf);color:var(--ink);font:inherit;font-size:15px;font-weight:500;text-decoration:none;cursor:pointer; transition:transform .12s var(--ease),background .12s var(--ease)} .rsite .btn:active{transform:scale(.98)} .rsite .btn--p{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600} .rsite .hd .btn{height:40px} /* the three doors, always visible, as pills */ .rsite .seg{display:flex;gap:4px;background:var(--fill);border-radius:12px;padding:3px;margin-left:2px} .rsite .seg a{display:flex;align-items:center;gap:7px;padding:5px 10px 5px 6px;border-radius:9px;text-decoration:none;font-size:13.5px;font-weight:500;color:var(--ink2);white-space:nowrap} .rsite .seg a:hover{color:var(--ink)} .rsite .seg a.is-here{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(14,17,22,.08),0 0 0 1px var(--hair)} .rsite .seg i{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:var(--blue);flex:none} .rsite .seg i svg{width:13px;height:13px;color:#fff} .rsite .seg i.w{background:#fff;border:1px solid var(--hair)}.rsite .seg i.w svg{color:var(--blue)} .rsite .seg i.k{background:var(--card)} @media (max-width:820px){ .rsite .hd__in{gap:10px} .rsite .seg{margin-left:auto} .rsite .seg a{padding:5px 8px 5px 5px;font-size:12.5px} } @media (max-width:420px){ .rsite .seg a span{display:none} .rsite .seg a{padding:5px} .rsite .seg a.is-here span{display:inline} } .rsite .ft{background:var(--card);color:#f5f6f7;padding:56px 0 32px} .rsite .ft__top{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;flex-wrap:wrap;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.12)} .rsite .ft .brand{color:#fff} .rsite .ft__say{font-size:14.5px;line-height:1.5;margin:12px 0 0;max-width:30ch;color:rgba(245,246,247,.62)} .rsite .ft__doors{display:flex;gap:8px;flex-wrap:wrap} .rsite .ft__doors a{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);text-decoration:none;color:#fff} .rsite .ft__doors a:hover{background:rgba(255,255,255,.1)} .rsite .ft__doors a.is-here{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)} .rsite .ft__doors i{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--blue);flex:none} .rsite .ft__doors i svg{width:15px;height:15px;color:#fff} .rsite .ft__doors i.w{background:#fff}.rsite .ft__doors i.w svg{color:var(--blue)} .rsite .ft__doors i.k{background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.22)} .rsite .ft__doors b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em} .rsite .ft__doors small{display:block;font-size:12px;color:rgba(245,246,247,.55);font-family:var(--mono)} .rsite .ft__g{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:32px 0 0} .rsite .ft h4{font-size:13px;font-weight:600;margin:0 0 12px;color:#fff} .rsite .ftG>summary{list-style:none;display:block;cursor:default;pointer-events:none} .rsite .ftG>summary::-webkit-details-marker{display:none} .rsite .ftG>summary h4{margin:0 0 12px} .rsite .ft ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} .rsite .ft ul a{font-size:14px;color:rgba(245,246,247,.66);text-decoration:none} .rsite .ft ul a:hover{color:#fff} .rsite .ft__b{margin-top:36px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);display:flex;gap:14px;align-items:center;flex-wrap:wrap; font-family:var(--mono);font-size:12px;color:rgba(245,246,247,.5)} .rsite .ft__legal{margin-left:auto;display:flex;gap:14px} .rsite .ft__legal a{color:rgba(245,246,247,.5);text-decoration:none}.rsite .ft__legal a:hover{color:#fff} @media (max-width:640px){ .rsite .ft__top{flex-direction:column;gap:22px} .rsite .ft__legal{margin-left:0;width:100%} } /* every scrollbar on the site: thin and blue */ .rsite{--scroll:rgba(0,82,255,.55)} .rsite *{scrollbar-width:thin;scrollbar-color:var(--scroll) transparent} /* doors: identical everywhere, a picture in each, nothing moves */ /* THE SITE'S SHARED KEYFRAMES, NAMED ONCE (RILLO SITE PAGES V2, 2026-10-22). A keyframe two pages use lives here and nowhere else: /shops' moving row named `slide`, which only crm.html and connect.html defined, so on /shops it never moved (Seth, Oct 22: "The rail of the fake shops isn't moving"). sitemove-tests.js fails a page that names a keyframe it does not carry, a shared keyframe defined in a page, and an element on screen that names an animation and does not move. */ /* THE CARD: the v83 renderer, verbatim. See rillo-card.css / rillo-card.js */ /* the beam: a ring around the card host, one per page */ @property --beam{syntax:'';inherits:false;initial-value:0deg} /* ONE LOGO SCALE: header 32, pills and eyebrow 24, doors 40, footer 28. nothing else. */ .rsite .seg i{width:24px;height:24px;border-radius:7px}.rsite .seg i svg{width:14px;height:14px} /* ONE PRE-FOOTER BAND, on every page, right before the doors */ @media (max-width:820px){.rsite .hd .login{display:inline-block;font-size:14px;margin-right:2px}.rsite .hd .btn--p{display:inline-flex;height:44px;padding:0 12px;font-size:13.5px;border-radius:10px;white-space:nowrap}.rsite .hd__end{gap:8px}.rsite .seg{margin-left:6px}} @media (max-width:520px){.rsite .hd .login{display:inline-block;font-size:13px;margin:0;white-space:nowrap}.rsite .seg a span{display:none}.rsite .seg a.is-here span{display:inline}.rsite .hd .btn--p{padding:0 9px}.rsite .hd__in{gap:4px}.rsite .hd__end{gap:5px}.rsite .burger{width:36px}.rsite .seg{margin-left:auto;padding:2px}.rsite .seg a{padding:4px 6px 4px 4px}.rsite .brand{gap:6px}} /* a phone has room for the mark, three product pills, Log in, Start and the menu, or for the wordmark; the wordmark goes (the mark and aria-label stay) so a person with an account can find the way in */ @media (max-width:420px){.rsite .brand span{display:none}} @media (max-width:380px){.rsite .hd .login{font-size:12.5px}.rsite .hd .btn--p{padding:0 7px}.rsite .seg a{padding:4px 5px 4px 3px}} @media (max-width:360px){.rsite .brand span{display:none}} /* GATES: one per product, the marker around the team's address, a drafted email behind it */ /* RILLO SITE PAGES V2: the address is a plain text link (no ring), underlined in the one blue; 44px tall to tap. */ /* THE MARKER CLEARS ITS TEXT (RILLO DOORS FIX1, 2026-09-30): the hand-drawn ring passed 2px from the address's first letter (the upper left arc meets the corner of a wide line of text), so on an iPhone, where the line is a little taller, it crossed it. The ring is a lens, wide at its middle; it is now 254 x 74px around the address (154 x 22, its letters 154 x 16), so no point of either stroke is nearer than 6px to a letter at any width, and the ring is never inside the line. It stays 4px inside the gate's box (under 640px the address sits 6px further in for that) and under the label above it. devices-check.js measures every marker on the four pages that have one, at eleven widths. */ /* Self-review, 2026-09-29: in a narrow column (the hero's right one at 1100px) the line beside the address was squeezed to six short lines; the box is its own container, and under 480px wide the line goes under the address. */ /* START: email first, then the door, then one or two fields. Posts to the site's lead endpoint. */ .rsite .start{position:fixed;inset:0;z-index:80}.rsite .start[hidden]{display:none} /* RILLO JOURNEYS V1: Ask us (public/storefront/ask.js) steps aside while Start or Request a demo is open: on a phone it sat on Start's foot. */ .rsite .start__scrim{position:absolute;inset:0;background:rgba(14,17,22,.45)} .rsite .start__sheet{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(520px,100%);max-height:92dvh;overflow:auto;background:var(--paper);border-radius:22px 22px 0 0;padding:10px 20px 32px;box-shadow:0 -30px 80px -40px rgba(14,17,22,.5)} .rsite .start__close{position:absolute;right:16px;top:12px;height:44px;padding:0 16px;font-size:13.5px;font-weight:500;z-index:2;width:auto;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:1px solid var(--hair);background:var(--surf);color:var(--ink);cursor:pointer} @media (min-width:640px){.rsite .start__sheet{bottom:auto;top:50%;transform:translate(-50%,-50%);border-radius:22px;padding:22px 24px 26px}} .rsite .start__h{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:8px 0 4px}.rsite .start__p{margin:0 0 16px;font-size:14.5px;color:var(--ink2);line-height:1.5} /* RILLO TEXTING READY V1: the texting consent box under a phone field (app/lib/textconsent.js), small print, never ticked */ .rsite .smsConsent{display:flex;gap:10px;align-items:flex-start;margin:-4px 0 12px;font-size:12.5px;line-height:1.45;color:var(--ink2);cursor:pointer;text-align:left}.rsite .smsConsent input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--blue,#0052ff)}.rsite .smsConsent a{color:inherit;text-decoration:underline} /* RILLO BUG SWEEP V2 (job 4): a link inside a sentence gets a 44px-tall target without moving its line (app/globals.css, the same rule; not a table cell's link here: the site's tables stack their cells as blocks on a phone, where the padding would add height). RILLO BUG SWEEP V4 P13 (D55): a span only when it is a run of text (no class). A classed span is a styled row (the footer's Privacy, Terms and Trust is a flex span), where the -6px margins pulled each link 12px over the next at 320 to 430. */ .rsite .smsConsent a{padding:calc((46px - 1em) / 2) 6px;margin:0 -6px} .rsite .start__f{display:block;margin:0 0 12px}.rsite .start__f span{display:block;font-size:12.5px;color:var(--ink3);margin-bottom:6px} .rsite .start__f input,.rsite .start__f select{width:100%;height:46px;border:1px solid var(--hair);border-radius:12px;padding:0 14px;font:inherit;font-size:16px;background:#fff;color:var(--ink);box-sizing:border-box}.rsite .start__f input:focus,.rsite .start__f select:focus{outline:none;box-shadow:0 0 0 3px rgba(0,82,255,.28);border-color:rgba(0,82,255,.4)} .rsite .start__f input:-webkit-autofill,.rsite .start__f input:-webkit-autofill:hover,.rsite .start__f input:-webkit-autofill:focus{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px #fff inset;box-shadow:0 0 0 1000px #fff inset;transition:background-color 600000s ease-in-out 0s} .rsite .start__f input:invalid:not(:placeholder-shown){border-color:#c92a2a} .rsite .start__err{margin:12px 0 0;font-size:12.5px;color:#c92a2a;background:rgba(201,42,42,.06);border:1px solid rgba(201,42,42,.25);border-radius:10px;padding:10px 12px;line-height:1.45}.rsite .start__err a{color:inherit;text-decoration:underline} .rsite .start__doors{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 14px} .rsite .start__doors label{position:relative;border:1px solid var(--hair);border-radius:14px;padding:12px 10px;background:#fff;cursor:pointer;display:flex;flex-direction:column;gap:6px} .rsite .start__doors input{position:absolute;opacity:0;inset:0}.rsite .start__doors label:has(input:checked){border-color:rgba(0,82,255,.45);box-shadow:0 0 0 1px rgba(0,82,255,.45);background:rgba(0,82,255,.04)} .rsite .start__doors i{width:28px;height:28px;border-radius:8px;background:var(--blue);display:grid;place-items:center}.rsite .start__doors i svg{width:16px;height:16px;color:#fff}.rsite .start__doors i.w{background:#fff;border:1px solid var(--hair)}.rsite .start__doors i.w svg{color:var(--blue)}.rsite .start__doors i.k{background:var(--card)} .rsite .start__doors b{font-size:14px}.rsite .start__doors small{font-size:12px;color:var(--ink3);line-height:1.35} .rsite .start__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .rsite .start__go{width:100%;height:48px;border-radius:999px;border:0;background:var(--blue);color:#fff;font:inherit;font-size:15.5px;font-weight:600;cursor:pointer;margin-top:4px} .rsite .start__soc{display:block;height:46px;line-height:44px;border:1px solid var(--hair);border-radius:999px;text-align:center;font-size:15px;font-weight:600;color:var(--ink);background:#fff;text-decoration:none;margin-top:8px;box-sizing:border-box}.rsite .start__soc:hover{border-color:var(--ink3)} .rsite .start__note{margin:12px 0 0;font-size:12.5px;color:var(--ink3);text-align:center}.rsite .start__note a{color:var(--ink2)} .rsite .start__done{display:none;align-items:flex-start;gap:12px;border:1px solid rgba(0,82,255,.3);background:rgba(0,82,255,.05);border-radius:14px;padding:14px;margin-top:14px}.rsite .start__done:not([hidden]){display:flex} .rsite .start__done i{width:28px;height:28px;border-radius:8px;background:var(--blue);display:grid;place-items:center;flex:none}.rsite .start__done i svg{width:16px;height:16px;color:#fff}.rsite .start__done b{display:block}.rsite .start__done small{display:block;font-size:12.5px;color:var(--ink2);margin-top:2px} /* RILLO CONNECT V5 (job 2): one form for every product. First and last side by side; the shop kind is a type-to-search list (never a system dropdown); the CRM's industry is a set of chips. Same hairline, radius and blue as the doors. */ .rsite .start__names{display:grid;grid-template-columns:1fr 1fr;gap:10px}.rsite .start__names .start__f{margin-bottom:12px} .rsite .start__kind{position:relative}.rsite .start__kind>label{display:block} .rsite .start__kinds{list-style:none;margin:6px 0 0;padding:4px;border:1px solid var(--hair);border-radius:12px;background:#fff;max-height:228px;overflow:auto;box-shadow:0 16px 40px -24px rgba(14,17,22,.35)} .rsite .start__kinds[hidden]{display:none} .rsite .start__kinds li{min-height:44px;display:flex;align-items:center;gap:4px;padding:0 12px;border-radius:9px;font-size:15px;color:var(--ink);cursor:pointer} .rsite .start__kinds li[hidden]{display:none} .rsite .start__kinds li:hover{background:rgba(0,82,255,.07)} .rsite .start__kinds li[data-kind=other]{color:var(--ink2)}.rsite .start__kinds li[data-kind=other] b{color:var(--ink);font-weight:600} .rsite .start__help{display:block;font-size:12.5px;color:var(--ink3);line-height:1.45;margin-top:6px} .rsite .start__ind{border:0;margin:0 0 12px;padding:0;min-width:0;display:flex;flex-wrap:wrap;gap:8px} .rsite .start__ind[hidden]{display:none} .rsite .start__ind legend{display:block;width:100%;padding:0;font-size:12.5px;color:var(--ink3);margin-bottom:6px} .rsite .start__ind label{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--hair);border-radius:999px;background:#fff;font-size:14.5px;cursor:pointer} .rsite .start__ind input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer} .rsite .start__ind label:has(input:checked){border-color:rgba(0,82,255,.45);box-shadow:0 0 0 1px rgba(0,82,255,.45);background:rgba(0,82,255,.04);color:var(--blue)} .rsite .start__ind label:has(input:focus-visible){box-shadow:0 0 0 3px rgba(0,82,255,.28)} .rsite .start__ind .start__ind-else{color:var(--ink2)} /* THE PAIR's switch (Phone / Desktop), shown under 641px; the pair itself is stated once, in THE PAIR below */ /* the desktop window is a fixed box: views scroll inside it, the page never jumps when it walks */ /* one radius scale: cards 16, tiles 14, controls 12, pills 999 */ .rsite .btn,.rsite .seg{border-radius:12px} /* the footer door pills never wrap their price */ .rsite .ft__doors b,.rsite .ft__doors small{white-space:nowrap} @media (max-width:640px){.rsite .ft__doors a{padding:8px 8px 8px 8px}.rsite .ft__doors small{font-size:12px}} /* keyboard focus on every control */ /* every hero lede and section sub sits on the same measure */ /* THE WINDOW IN ITS PHONE LAYOUT, as the one phone's screen (ONE PHONE, below, draws the phone): a status bar, a pane that scrolls, a bottom bar with the main tabs and More. It lays out at 390, like the app, and is scaled to the 270 screen. */ /* the window is its own container, so its phone layout and its desktop layout answer to its own width */ /* the card needs at least 340px to lay out; on a phone the doors let it bleed past the padding */ /* WIDE DESKTOP: the column and type grow with it. Header height and section rhythm do NOT: the house rule is a flat 68px header and 88/56 rhythm at every width, and a --secY:104px / .hd__in:72px override lived here for one commit (38419959) fully dead, always clobbered by the unconditional rules below it in the cascade. Removed rather than "fixed live" per RILLO-DOORS-O1: nothing asked for a wider header or rhythm, and verify.js already asserts 68 at every width it checks. */ /* NO h2 RULE HERE (RILLO DOORS V9, 2026-09-24). This block used to end with `h2{font-size:clamp(30px,2.8vw,46px)!important}`. An !important type selector beats every class a page sets for its own heading, so from 1440px up every h2 on the site, the 20px legal headings and the small headings inside cards included, became a 40 to 46px display title ("Keep this score", "The three fixes" on production). A heading keeps the size its own page gives it at every width; tools/site-checks/heading-check.js fails a heading that grows at 1440 or passes 48px at 1440 or 1920. The h1 stays a display clamp on purpose: it is the one type that grows with the viewport. */ .rsite{--col:1320px} @media (min-width:1440px){.rsite{--col:1440px}.rsite{font-size:17px}} /* THE MARK: drawn bigger inside every tile */ .rsite .brand svg{width:22px;height:22px}.rsite .seg i svg{width:16px;height:16px}.rsite .ft__doors i svg{width:18px;height:18px} /* window: kpis always fill the pane; sub-views take the full width */ /* DOOR MINIS: tap a tab and the four numbers change */ /* ONE SENTENCE A LINE (RILLO DOORS V14, founder job 4). A headline of phrases is one block of text (.hl, the page's largest paint) with a line break after each phrase, ink then grey then blue, at every width. Its size is its own width over the longest phrase (--hem, written by app/lib/site/render.js oneSentenceALine), never above the page's size: a phrase never wraps inside itself. A page whose phrases are too long for that (hfit--wrap) keeps its size and balances them. */ .rsite .brand{font-size:18px!important} .rsite{--secY:88px;--secY-sm:56px;--sab:env(safe-area-inset-bottom,0px)} @media (max-width:700px){.rsite{--secY:var(--secY-sm)}} /* 44PX TAP TARGETS ON THE SHARED CHROME (RILLO DOORS V8, job 6). Measured in real Chrome on every public page at 390 and 1440 (tools/site-checks/sweep-hidden-tap.js): the header's brand, Log in, menu button, nav links and product switcher, and every footer link, were 18 to 40px tall on all 38 pages. Each now has a 44px box; the visible type is unchanged. The product switcher keeps its compact look and gets its height from padding. */ .rsite .hd .brand{min-height:44px;min-width:44px;display:inline-flex;align-items:center} .rsite .hd .login{min-height:44px;display:inline-flex;align-items:center} .rsite .hd .burger{width:44px!important;height:44px} .rsite .hd nav a{display:inline-flex;align-items:center;min-height:44px} .rsite .hd .seg a{min-height:44px;min-width:44px;justify-content:center} .rsite .ft__g li a,.rsite .ft__legal a,.rsite .ft .brand{display:inline-flex;align-items:center;min-height:44px;min-width:44px} .rsite .hd nav a{min-width:44px;justify-content:center} .rsite .ft__doors a{min-height:44px} .rsite .mgList a{min-height:44px;display:flex;align-items:center} @media (max-width:420px){.rsite .hd .hd__in{padding-left:12px;padding-right:12px;gap:4px}.rsite .hd .hd__end{gap:4px}.rsite .hd .seg a{min-width:0}} @media (max-width:340px){.rsite .hd .hd__in{padding-left:8px;padding-right:8px;gap:2px}.rsite .hd .login{padding:0 7px}.rsite .hd .brand{min-width:36px}.rsite .hd .seg{padding:1px;gap:2px}} /* ===== HEADER V4 (RILLO DOORS V11, 2026-09-25, founder job 1). The last word on the header at every width. ===== The founder, on production: full desktop had no dropdown and felt empty; Connect, Shops and CRM sat low; the CRM mega-menu was heavy, its small lines ran into each other ("service intervals" into "HVAC, plumbing", "(Beta)" into "Debriefs"); one menu said "nine industries" and "22 presets" both; the menu's Close pill sat over content; and at phone width the switcher shrank Connect, Shops and CRM to bare icons. This states the whole header once: 1101+ logo left; the switcher and the three links centred as one group; Log in and Start right. CRM opens a glass dropdown: a rounded bubble, a plain list, no cards, no second lines that can collide. 721-1100 logo, the switcher (always with names), Log in, Start, the menu button. The links live in the menu. <=720 logo, Log in, Start, the menu button. The products are in the menu, with their names; a product is never shown as a bare icon. The menu button opens the same glass bubble on every width that has it, anchored under the header on the right. The button turns into its own close (an X, in the header), so nothing ever sits over the menu's content. Nothing wraps, and the header is 68px on every page at every width. */ .rsite .hd .hd__in{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);align-items:center;flex-wrap:nowrap;gap:16px;height:68px!important;transition:none} .rsite .hd .brand{flex:none;white-space:nowrap;justify-self:start} .rsite .hd .hd__mid{display:flex;align-items:center;gap:22px;justify-self:center;min-width:0} .rsite .hd .seg{display:flex;align-items:center;flex:none;gap:2px;margin:0;padding:3px;position:relative;align-self:center} .rsite .hd .seg>a,.rsite .hd .seg .has>a{display:flex;align-items:center;gap:7px;height:44px;min-height:44px;padding:0 11px 0 7px;border-radius:9px;line-height:1;font-size:13.5px;font-weight:500;white-space:nowrap;color:var(--ink2);text-decoration:none;position:relative} .rsite .hd .seg a span{display:inline} .rsite .hd .seg a.is-here{color:var(--ink);font-weight:600;background:#fff;box-shadow:0 1px 2px rgba(14,17,22,.08),0 0 0 1px var(--hair)} .rsite .hd .seg .has{position:relative;display:flex;align-items:center} .rsite .hd .seg .has>a::after{content:'';display:inline-block;width:0;height:0;border:4px solid transparent;border-top-color:currentColor;border-bottom:0;margin-left:1px;opacity:.6;position:static} .rsite .hd nav{display:flex;align-items:center;flex:none;gap:6px;margin:0;white-space:nowrap} .rsite .hd nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 9px;border-radius:10px;white-space:nowrap;font-size:15px;color:var(--ink2);text-decoration:none} .rsite .hd nav a:hover{color:var(--ink);background:var(--fill)} .rsite .hd .hd__end{justify-self:end;margin:0;display:flex;align-items:center;flex:none;gap:12px} .rsite .hd .login{display:inline-flex;align-items:center;justify-content:center;flex:none;height:44px;min-height:44px;padding:0 16px;margin:0;border:1px solid rgba(14,17,22,.3);border-radius:12px;background:transparent;color:var(--ink);font-size:14.5px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none} .rsite .hd .login:hover{border-color:var(--ink);background:var(--fill)} .rsite .hd .btn--p,.rsite .mm .btnPrimary{display:inline-flex;align-items:center;justify-content:center;flex:none;height:44px;padding:0 18px;font-size:14.5px;white-space:nowrap;outline:none} .rsite .hd .btn--p{border-radius:12px} .rsite .hd .btn--p:focus-visible,.rsite .mm .btnPrimary:focus-visible{outline:3px solid #0052FF;outline-offset:3px} /* THE START RING (RILLO DOORS V8, founder 2026-09-23; final pick 2026-09-25). Start free is the ONE animated element in the header: a frosted glass ring just outside the solid blue button and a soft pale-blue beam orbiting it, on a wrapper (.startRing), never on Start's own pseudo-elements (.hd .btn--p::after is reserved for the narrow-width "Start" text). --rw is the ring's thickness (4.5px) and --rt one lap (2.5s). Reduced motion stops the beam; the glass stays. RILLO DOORS V12 (job 5, speed): the beam used to turn by animating a registered angle (--sbeam) inside a conic gradient, which made the browser recompute style on every frame of every page (measured: about 450 style recalculations and 850ms in six seconds on /crm, 40 and 134ms without it). It is now the same gradient on a layer that ROTATES (.startRing__b::before, a transform the compositor runs), clipped to the ring by its parent's mask: the same beam, no style work per frame. */ .rsite .hd .startRing{--rw:4.5px;--rt:2.5s;--r:12px;position:relative;display:inline-flex;isolation:isolate;flex:none; margin:0 var(--rw);border-radius:calc(var(--r) + var(--rw))} .rsite .hd .startRing::before,.rsite .hd .startRing__b{content:'';position:absolute;inset:calc(-1 * var(--rw)); border-radius:calc(var(--r) + var(--rw));pointer-events:none;z-index:-1} .rsite .hd .startRing::before{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(219,229,255,.62)); backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15); box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(0,82,255,.28),0 0 0 1px rgba(255,255,255,.9),0 3px 12px rgba(0,82,255,.22)} .rsite .hd .startRing__b{display:block;overflow:hidden;padding:calc(var(--rw) / 2);filter:blur(.7px); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .rsite .hd .startRing__b::before{content:'';position:absolute;left:50%;top:50%;width:240px;height:240px;margin:-120px 0 0 -120px; background:conic-gradient(transparent 0 52%,rgba(0,82,255,.10) 66%,rgba(0,82,255,.34) 84%,rgba(96,140,255,.5) 93%,rgba(0,82,255,.3) 97%,transparent 100%); animation:sbeam var(--rt) linear infinite} @media (prefers-reduced-motion:reduce){.rsite .hd .startRing__b::before{animation:none;transform:rotate(300deg)}} @media (max-width:820px){.rsite .hd .startRing{--r:10px}} .rsite .hd .seg>a:first-child:focus-visible{outline:3px solid #0052FF;outline-offset:3px} /* the menu button, which becomes its own close */ .rsite .hd .burger{all:unset;box-sizing:border-box;display:none;flex:none;width:44px;height:44px;border-radius:12px;place-items:center;cursor:pointer;color:var(--ink)} .rsite .hd .burger svg{width:22px;height:22px;overflow:visible} .rsite .hd .burger path{transform-origin:12px 12px;transition:transform .2s var(--ease),opacity .2s var(--ease)} .rsite .hd .burger[aria-expanded="true"] .burger__a{transform:translateY(5px) rotate(45deg)} .rsite .hd .burger[aria-expanded="true"] .burger__b{opacity:0} .rsite .hd .burger[aria-expanded="true"] .burger__c{transform:translateY(-5px) rotate(-45deg)} .rsite .hd .burger[aria-expanded="true"]{background:var(--fill)} .rsite .hd .burger:focus-visible{outline:2px solid var(--blue);outline-offset:2px} @media (prefers-reduced-motion:reduce){.rsite .hd .burger path{transition:none}} /* THE GLASS LIST: the CRM dropdown on desktop and the menu everywhere else are one pattern */ .rsite .drop,.rsite .mm .mm__in{background:rgba(255,255,255,.8);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4); border:1px solid rgba(14,17,22,.09);border-radius:22px;box-shadow:0 28px 64px -28px rgba(14,17,22,.38),0 2px 8px rgba(14,17,22,.06),inset 0 1px 0 rgba(255,255,255,.9);text-align:left} .rsite .drop{display:none;position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);width:340px;padding:10px;z-index:50;box-sizing:border-box} .rsite .drop::before{content:'';position:absolute;left:0;right:0;top:-18px;height:18px} .rsite .hd .seg .has.is-open .drop{display:block} .rsite .drop__top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 12px;border-radius:12px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none} .rsite .drop__top small{font-size:12.5px;font-weight:500;color:var(--ink3);white-space:nowrap} .rsite .drop__k{margin:10px 12px 4px;font-family:var(--mono);font-size:12px;letter-spacing:0;text-transform:none;color:var(--ink3)} .rsite .drop__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 4px} .rsite .drop__list--one{grid-template-columns:1fr 1fr} .rsite .drop__list a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:12px;font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap} .rsite .drop__top:hover,.rsite .drop__list a:hover{background:rgba(0,82,255,.07);color:var(--blue)} .rsite .drop a:focus-visible,.rsite .mm .mm__in a:focus-visible{outline:2px solid var(--blue);outline-offset:-2px;box-shadow:none} /* the menu: the same glass bubble, under the header, on the right */ .rsite .mm{display:none;position:fixed;inset:0;top:68px;z-index:39;background:transparent;padding:0;overflow:visible} .rsite .mm.is-open{display:block} .rsite .mm .mm__in{position:absolute;top:8px;right:12px;left:auto;width:min(380px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 68px - 20px);overflow:auto;overscroll-behavior:contain;margin:0;padding:12px;box-sizing:border-box} .rsite .mm__cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px} .rsite .mm .btnPrimary,.rsite .mm .btnSecondary{width:100%;height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font:inherit;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;box-sizing:border-box} .rsite .mm .btnPrimary{background:var(--blue);color:#fff;border:0} .rsite .mm .btnSecondary{background:#fff;color:var(--ink);border:1px solid rgba(14,17,22,.3)} .rsite .mm .mgList{margin:0;border:0;background:transparent;border-radius:0;overflow:visible;display:grid;gap:2px} .rsite .mm .mgNav{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 10px;border:0;border-radius:12px;box-sizing:border-box;font-size:15.5px;font-weight:600;color:var(--ink);text-decoration:none;background:transparent} .rsite .mm .mgNav:hover{background:rgba(0,82,255,.07)} .rsite .mm .mgNav>span{flex:1;min-width:0} .rsite .mm .mgNav small{display:block;font-size:12.5px;font-weight:400;color:var(--ink3);margin-top:2px;white-space:normal} .rsite .mm .mgNav i{width:32px;height:32px;border-radius:9px;background:var(--blue);display:grid;place-items:center;flex:none}.rsite .mm .mgNav i svg{width:18px;height:18px;color:#fff} .rsite .mm .mgNav i.w{background:#fff;border:1px solid var(--hair)}.rsite .mm .mgNav i.w svg{color:var(--blue)}.rsite .mm .mgNav i.k{background:var(--card)} .rsite .mm .mgNav em{width:7px;height:7px;border-right:1.5px solid var(--ink3);border-top:1.5px solid var(--ink3);transform:rotate(45deg);flex:none;margin-right:4px} .rsite .mm .drop__k{margin:12px 10px 2px} .rsite .mm .drop__list--row{grid-template-columns:repeat(3,auto);justify-content:start;margin-top:8px;padding-top:8px;border-top:1px solid var(--hair)} .rsite .mm .drop__list--row a{font-size:14.5px;color:var(--ink2)} @media (min-width:1101px){.rsite .hd .burger{display:none}.rsite .mm{display:none!important}} @media (max-width:1100px){ .rsite .hd .hd__in{display:flex;gap:12px} .rsite .hd .hd__mid{margin:0 auto} .rsite .hd nav{display:none} .rsite .hd .burger{display:grid} .rsite .hd .seg .has>a::after{display:none} .rsite .hd .drop,.rsite .hd .seg .has.is-open .drop{display:none!important} } @media (max-width:860px){.rsite .hd .brand span{display:none}} @media (max-width:720px){ .rsite .hd .hd__mid{display:none} .rsite .hd .hd__end{margin-left:auto;gap:8px} .rsite .hd .brand span{display:inline} } @media (max-width:420px){ .rsite .hd .hd__in{padding-left:12px;padding-right:12px;gap:6px} .rsite .hd .hd__end{gap:6px} .rsite .hd .login{height:44px;padding:0 12px;font-size:13.5px;border-radius:10px} .rsite .hd .btn--p{height:44px;padding:0 13px;border-radius:10px} } @media (max-width:360px){.rsite .hd .brand span{display:none}.rsite .hd .login{padding:0 9px;font-size:12.5px}.rsite .hd .btn--p{padding:0 10px}} /* the page templates still carry the old header's rules for their links (.seg a, .mm a); the glass list states its own */ .rsite .hd .seg .drop a{display:flex;justify-content:space-between;min-width:0;height:auto;gap:10px;padding:0 12px;border:0;border-radius:12px;background:transparent;box-shadow:none;font-size:15px;font-weight:500;letter-spacing:normal;color:var(--ink)} .rsite .hd .seg .drop a.drop__top{font-weight:600} .rsite .hd .seg .drop a:hover{background:rgba(0,82,255,.07);color:var(--blue)} .rsite .mm .mm__in a{border:0;letter-spacing:normal} .rsite .mm .drop__list a{min-height:44px;padding:0 10px;font-size:15px;font-weight:500} .rsite .mm .mm__in a.btnSecondary{border:1px solid rgba(14,17,22,.3)} /* ===== THE PILL ON PHONES, ONE HEADER (RILLO DOORS V12, 2026-09-28, founder job 3) ===== The founder reversed V11's phone header: the centred three-door pill (Connect, Shops, CRM, each with its mark and its name) is back on phones, with its desktop look. Three named doors, Log in, Start and the menu cannot share one 320px row, so up to 720px the pill has its own centred row directly under the bar: logo, Log in, Start and the menu on the first row (68px, as at every width), the pill on the second. It is 44px tall and fits at 320 without clipping or wrapping. The CRM dropdown is one behaviour at every width: hover opens it where there is hover, a tap on CRM opens it anywhere, and it hangs centred under the whole pill (never off the screen's edge). --hdH is the header's height, for the menu and for anchors. */ .rsite{--hdH:68px} .rsite .drop{top:calc(100% + 10px);width:min(340px,calc(100vw - 24px))} /* The dropdown hangs inside the header, which has its own blur, and a blur inside a blur sees only its parent: the page's headline showed through the dropdown's glass, legible and in the way (on main at 1440, and worse on a phone). Its surface is nearly solid so the list reads over anything; the menu, outside the header, keeps its real glass. */ .rsite .drop{background:#fff} .rsite .hd .seg .has{position:static} .rsite .hd .seg{position:relative} @media (max-width:1100px){.rsite .hd .seg .has.is-open .drop{display:block!important}.rsite .hd .seg .has>a::after{display:inline-block}} .rsite .mm{top:var(--hdH)}.rsite .mm .mm__in{max-height:calc(100dvh - var(--hdH) - 20px)} /* RILLO SITE PAGES V2: every jump target, not only a section (a nav, a form, a card), stops below the sticky header. */ @media (max-width:720px){ .rsite{--hdH:124px} .rsite .hd .hd__in{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:68px 56px;height:auto!important;row-gap:0;column-gap:8px} .rsite .hd .brand{grid-area:1/1} .rsite .hd .hd__end{grid-area:1/2;margin-left:0} .rsite .hd .hd__mid{display:flex!important;grid-area:2/1/3/3;justify-self:center;align-self:center;margin:0} .rsite .hd .seg{gap:1px;padding:3px} .rsite .hd .seg>a,.rsite .hd .seg .has>a{gap:6px;padding:0 10px 0 6px;font-size:13.5px} .rsite .hd .seg a span{display:inline} .rsite .hd .seg i{width:22px;height:22px} } @media (max-width:340px){.rsite .hd .seg>a,.rsite .hd .seg .has>a{gap:5px;padding:0 8px 0 5px;font-size:13px}} /* ===== REQUEST A DEMO (RILLO DOORS V12, 2026-09-28, the founder's addition) ===== The item is one look in the CRM dropdown and in the menu, at every width: a full-width row outlined in blue, 48px tall, under the lists. The sheet is the Start sheet's look (app/lib/site/demo.js draws it; shell.client.js runs it). */ .rsite .demoItem,.rsite .hd .seg .drop a.demoItem,.rsite .mm .mm__in a.demoItem{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;margin:10px 0 0;padding:0 14px;border:1px solid rgba(0,82,255,.35);border-radius:12px;background:rgba(0,82,255,.06);color:var(--blue);font-size:15px;font-weight:600;text-decoration:none;box-sizing:border-box} .rsite .demoItem small{font-size:12.5px;font-weight:500;color:var(--ink3);text-align:right;line-height:1.3;padding:4px 0} /* the dropdown's links are one line each (the header's rules); at 320 this one's second part takes its own line */ .rsite .demoItem,.rsite .hd .seg .drop a.demoItem,.rsite .mm .mm__in a.demoItem{white-space:normal;flex-wrap:wrap;row-gap:0}.rsite .demoItem small{min-width:0;white-space:normal} .rsite .demoItem:hover,.rsite .hd .seg .drop a.demoItem:hover,.rsite .mm .mm__in a.demoItem:hover{background:rgba(0,82,255,.11);color:var(--blue)} .rsite .demo .start__close{height:44px} .rsite .demo__fields[hidden]{display:none} /* RILLO BOOKING V2 (job 4): the demo sheet's open times (Rillo's own demo page): one tap picks, blue when picked. */ .rsite .demo__times[hidden]{display:none}.rsite .demo__times{display:flex;flex-direction:column;gap:8px;margin:4px 0 12px} .rsite .demo__tl{font-size:13px;font-weight:600;color:var(--ink2)} .rsite .demo__slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .rsite .demo__zone{font-size:12.5px;color:var(--ink3)} /* ===== THE ONE PHONE (RILLO DOORS V12, 2026-09-28, founder job 1) ===== Every phone on the site is app/lib/site/phone.js's markup and these rules: the product pair's phone, the talk demo's, How it works' and Connect's live one. There is no other phone. The V11 phones were aspect-ratio boxes that their content could push taller (the founder's frameless strip five screens tall) and were zoomed by script after load. Now: .ph the box on the page: --phw wide, one clamp from 220 to 260px that only grows with the window, and exactly 633/292 of that tall. CSS only, so it has its shape before any script runs and nothing can stretch it. .ph__dev the device, drawn once at 292 x 633 (body, camera island, side buttons, screen), scaled as one piece. .ph__scr the screen, 270 x 611; what it shows lays out at that size and scrolls inside it. THE SCALE (RILLO DOORS FIX1, 2026-09-30). V12 computed it in CSS with trigonometry (a tangent of an arctangent: the one way CSS divides two lengths). Safari on the iPhone resolved that to a negative number, and a negative scale is a 180 degree turn: every phone on the site drew upside down, up and to the left of its box. There is no CSS trigonometry on the site now (devices-tests.js fails on any). --phs comes from two places: a default here, a ladder of literal numbers stepped by the window (its lower bound, so the device is never larger than its box; the box itself is the same exact --phw as before, so nothing shifts), and the exact value, box width / 292, that shell.client.js (fitScales) measures and writes on load and on every size change. A scale that is zero, negative or not a number is never written; the measured one replaces it. tools/site-checks/scale-ladder.js makes the ladder; do not edit it by hand. */ .rsite{--phw:clamp(220px,calc(5vw + 196px),260px)} /* LADDER:phone BEGIN (generated by tools/site-checks/scale-ladder.js; do not edit by hand) */ /* LADDER:phone END */ /* ===== THE DESKTOP BOX (RILLO DOORS V12, founder job 2). The desktop window is always its 1080 x 666 layout, scaled whole to the width its place gives it, so it shows whole or not at all: never cut, never covered, never reflowed. ===== */ /* THE DESKTOP'S SCALE (DOORS FIX1): the same two sources as the phone's, stepped by the box's own width (each step its lower bound) */ /* LADDER:desk BEGIN (generated by tools/site-checks/scale-ladder.js; do not edit by hand) */ /* LADDER:desk END */ /* ===== THE PAIR (RILLO DOORS V12, founder job 2): the desktop and the phone side by side with a real gap from 641px up, the phone on the desktop's middle; under 641px one or the other, with the Phone / Desktop switch. Never touching, never covering, neither ever cut. The same on /shops, in the home and CRM heroes and on the nine industry pages. ===== */ @media (max-width:640px){ /* RILLO DESIGN V4 (O4): the Phone / Desktop switch rides just under the sticky bar while its pair is on screen, so the bar never covers it; and Ask us is the mark alone at a phone width (its words stay its name), so it covers no sentence. */ } /* THE HERO (home, CRM, the nine industries): the text and the pair side by side from 1180px, the pair under the text below */ /* the talk demo's screen is its track */ /* How it works: the one phone, the band's three steps on its screen */ /* 44PX, EVERY CONTROL (RILLO DOORS V11, job 5, QA-006). The QA walk measured controls under 44px on 19 public pages at 390: the talk demo's step dots (8 by 8) and its send button (33), the Phone/Desktop and Monthly/Yearly toggles (34 to 36), the presets page's trade links (36), the Reach Score's choices (40) and its open rows (42). Each gets a 44px box; what it looks like does not change (the dots stay dots, drawn inside a 44px button). */ /* the Shops location picker was 334px wide on a 320 screen (found by onephone-check, already on main): its label takes its own line there */ /* Enterprise has no price: its word sits at a heading size, not the price size (RILLO DOORS V11) */ /* DOORS V14, job 13: a price never breaks ("Talk to us" read "Talk to / us" beside its line at 768px); where the line does not fit beside it, the line goes under. */ /* DEMO MOTION (RILLO DOORS V9, job 7). Short, quiet loops of real screens (app/lib/site/motion.js): the Reach Score filling in line by line, the call queue building, a note turning into a follow-up, and the card turning to its back. CSS only, no script. Slow and soft: nothing moves faster than a 0.6s ease. One animated group per frame. Under reduced motion every frame is finished and still. --mo-t is a frame's loop, --i a row's place in it (a row enters .55s after the one above). */ /* THE CARD, TURNING: the card's own CSS now (app/lib/card/style.js CARD_TURN_CSS, carried by the site's card stylesheet; RILLO BUG SWEEP V2 job 3). It turns only in a space this script marks as playing, and never once touched, hovered, paused or reduced. */ /* RILLO CONNECT PREMIUM V1 (founder's brief, job 1): the prefooter card's four .door turn rules moved, word for word and in their order, into the card's own CSS (app/lib/card/style.js CARD_TURN_CSS). FOUNDER APPROVED in the brief. */ /* RILLO DOORS V12 (founder job 2): nothing moves unless the visitor does something. The demo frames (the Reach Score, the call queue, How it works) stand finished and still for everyone, as they already did under reduced motion. The card keeps its turn (the founder: keep the card animation) and the Start ring its beam; nothing else loops. */ /* ===== RILLO DOORS V13 (2026-09-29): round two of the founder's review. The last word, like each block before it. ===== */ /* ONE ROW ON A PHONE (founder answer 2). V12 gave the pill its own second row up to 720px; the founder wants the original: one row, the current product's pill named with its mark, the other two as their marks (each keeps its accessible name), tap or swipe to switch. Log in moves into the menu (it is the menu's first row, beside Start free) to make room. The row is the mark, the pill, Start and the menu. Three 44px marks, a named product, Start and the menu do not all fit the narrowest phones, so where they cannot (Connect under 379px, Shops under 363, the CRM under 355) Start leaves the row for the menu's first row, and the logo stays. On a page of no one product (home, pricing, the rest) all three are marks and everything fits down to 320. */ @media (max-width:720px){ .rsite{--hdH:68px} .rsite .hd .hd__in{display:flex!important;grid-template-columns:none;grid-template-rows:none;height:68px!important;gap:6px;padding-left:12px;padding-right:12px} .rsite .hd .brand{flex:none;grid-area:auto}.rsite .hd .brand span{display:none} .rsite .hd .hd__mid{display:flex!important;grid-area:auto;margin:0 auto;justify-self:auto} .rsite .hd .hd__end{grid-area:auto;margin-left:0;gap:6px} .rsite .hd .seg{gap:1px;padding:2px} .rsite .hd .seg>a,.rsite .hd .seg .has>a{gap:6px;padding:0 10px 0 6px;font-size:13.5px} .rsite .hd .seg a:not(.is-here) span{display:none} .rsite .hd .seg>a:not(.is-here),.rsite .hd .seg .has>a:not(.is-here){width:44px;min-width:44px;padding:0;gap:0;justify-content:center} .rsite .hd .seg .has>a::after{display:none} .rsite .hd .seg i{width:22px;height:22px} .rsite .hd .btn--p{padding:0 12px} } @media (max-width:390px){.rsite .hd .hd__in{padding-left:8px;padding-right:8px;gap:4px}.rsite .hd .hd__end{gap:4px}} /* ONE LABEL PER BUTTON AT EVERY WIDTH. Start free printed "Start freeStart" from 421 to 520px: its short label was an ::after on a button whose font-size:0 a later rule undid. Now the long label is its own element and the short one is shown in its place at one breakpoint, never both. */ .rsite .hd .btn--p::after{content:none} @media (max-width:720px){.rsite .hd .btn--p .lbl{display:none}.rsite .hd .btn--p::after{content:attr(data-short);font-size:14px}} /* THE START RING STAYS INSIDE ITS BUTTON (founder: its glow bled light blue across the header behind "Who uses it" and Log in on /connect). The rotating beam is a 240px square; where the browser composited it outside its parent's mask (Safari does, with a filter on the parent) the square showed. The ring now clips its own painting to its rounded box, the blur and the outer blue shadow are gone, and nothing it draws reaches past the button's ring. */ .rsite .hd .startRing{clip-path:inset(calc(-1 * var(--rw)) round calc(var(--r) + var(--rw)))} .rsite .hd .startRing__b{filter:none;clip-path:inset(0 round calc(var(--r) + var(--rw)))} .rsite .hd .startRing::before{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(0,82,255,.28)} .rsite .hd .startRing__b::before{width:180px;height:180px;margin:-90px 0 0 -90px} /* ONE RHYTHM AND ONE COLUMN FOR THE WHOLE SITE (coordinator's addendum: no empty run over 160px on a desk or 96px on a phone between one section's last content and the next heading; one section padding scale; no section sets its own). Every section of the main column is --secY top and bottom: 64px on a desk, 40px on a phone, so two sections put at most 128 or 80px between them. One content width, 1360px, at every desk width. */ .rsite{--col:1360px;--secY:64px;--secY-sm:40px;--gut:28px} @media (min-width:1440px){.rsite{--col:1360px}} @media (max-width:700px){.rsite{--secY:40px}} @media (max-width:640px){.rsite{--gut:18px}} .rsite .wrap{max-width:var(--col);padding-left:var(--gut);padding-right:var(--gut)} .rsite main>section>.wrap>:last-child,.rsite main>section>.wrap>:last-child>:last-child{margin-bottom:0} /* ONE SECTION HEADING: the same size, weight and spacing on every page (it was four near-copies, 40 to 46px) */ /* THE PRODUCT HERO (home, the CRM and its nine industries): the words on top, two columns on a desk; then the laptop, full width, the phone beside it (founder job 4: "the laptop is the hero, large enough to read, like the /shops dashboard"). */ /* DOORS V14, job 12: /crm/presets keeps the pair alone (render.js turns its .duo into a plain .heroPair), and under 1100px the pair sat flush under the Talk to the team box; it keeps the slot's step. */ /* EVERY DEMO PHONE AT MOST ABOUT 70% OF THE SCREEN'S HEIGHT (founder job 2); its screen scrolls inside it */ .rsite{--phw:min(clamp(220px,calc(5vw + 196px),260px),calc(70vh * 292 / 633))} @supports (height:1svh){.rsite{--phw:min(clamp(220px,calc(5vw + 196px),260px),calc(70svh * 292 / 633))}} /* THE TALK DEMO: the phone and its four steps side by side on a desk, the steps a list you can press; on a phone, the words, the phone, then the one step it shows. Every frame fills its screen. */ /* Self-review, 2026-09-29: a section heading that wraps wraps evenly, never one word alone on its last line. */ /* Self-review, 2026-09-29: the steps stop at 620px, so on a wide desk the block sat left with a bare strip on the right; the phone and its steps are one block, centred in the column. */ /* ADDENDUM 2: the loop's reset dips, it never blanks */ /* A DEMO WINDOW'S VIEWS CHANGE BY OPACITY ONLY (founder job 4: "a tab slides out of place"), and a line that writes itself in is simply there under reduced motion (it stayed invisible: the page turned every animation off, and those lines only become visible by animating). */ /* MOTION, ONLY ON SCREEN (founder answer 1). The demo frames play while they are in view and pause when they are not; the script marks each one (data-play="on" or "paused") after the page has loaded. With no mark, and always under reduced motion, every frame stands finished. Transform and opacity only. */ /* ADDENDUM 2, ITEM 2 (no blank demos, ever): a frame is full at every moment, playing, paused off screen or not reached yet. Its rows never leave (they dip to 72% and settle as they refresh, one after another) and its bars never empty (they breathe between 60% and their value). The two loops keep their names; these are the last word on their frames. */ /* RILLO SITE PAGES V2: a frame refreshes its rows (and fills its bars) one after another evenly across the whole loop (--n rows, set by app/lib/site/motion.js), in the same order, so it is never still for two seconds: bunched at the start, the queue stood still for 4.6 of its 7 seconds and the Reach Score for 2.4 of its 8, and a visitor read them as pictures. sitemove-tests.js R2b holds it. */ /* MARQUEES: each item once per loop, no faded copy at the start, no jump (founder job 5). Each copy of the list is wider than the marquee by more than its widest item (320px), so the item leaving on the left is gone before its twin comes in on the right; the track moves by exactly one copy. Two copies at most; under reduced motion, one, standing still. */ @media (prefers-reduced-motion:reduce){.rsite{scroll-behavior:auto!important}} /* THE TRIO: three things of one kind (three people, three doors, three presets). Three equal columns on a desk; on a phone a row of tabs, one card at a time that a finger can swipe, and dots (founder job 2: "build two layouts on purpose"). */ /* WHICH ONE ARE YOU? (founder: "one of the best parts, keep it"; its three columns ended at different heights). Three equal doors: the same width, the same height, the picture in a box of one height, the words of about one length, the link on one line at the foot. On a phone they are the trio's tabs, one door at a time. */ /* RILLO DOORS FIX2 (the company card in a door, on a phone): the same size and the same room on every page. Every door has 16px at its sides (home's doors had 22px, so its card was 12px narrower and drawn smaller than the same card on /crm), the picture's box is 240px on every page (home's own was 240, the others' 236), and the card is centred in it with 14px above and 14px under the box (it had 18 under it and none above), so the room above the card and the room under it are the same and the same on every page. The rest of the door is 8px shorter, so no page gets longer. */ /* THE REGULARS FRAME (app/lib/site/motion.js regularsFrame): the three texts that run on their own, and this month's text */ /* ALREADY BUILT: everything under the heading is live today (founder job 5). What is on its way is one small line, no dates. */ /* THE FOOTER ON A PHONE, FOUNDER-LOCKED (docs/site/LOCKED.md; RILLO DOORS V17 restored it from 1a4272a5, RILLO DOORS V14 founder job 5: the phone's footer matches the desk's, which is the reference). The logo and its line, then the three door tiles, compact (the mark above the name and the price, three across; one per row under 360px, where three would cut "From $49 a seat"), then the three groups as plain columns, each as wide as its longest link, all open, then the bottom line, the desk's, Trust included. It clears the iPhone's home bar (--sab). */ @media (max-width:640px){ .rsite .ft{padding:36px 0 calc(24px + var(--sab,0px))!important} .rsite .ft__top{padding-bottom:22px} .rsite .ft__doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%} .rsite .ft__doors a{flex-direction:column;align-items:flex-start;gap:8px;padding:10px 8px 10px 10px;min-height:0} .rsite .ft__doors i{width:26px;height:26px} .rsite .ft__g{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:0 12px;padding-top:22px} .rsite .ft h4,.rsite .ft .ftG h4{margin:0 0 6px} .rsite .ft ul{gap:0}.rsite .ft ul a{font-size:13.5px;min-height:44px} /* 1a4272a5's rows were 40px; 44, a finger's target (V11 QA-006, FIX2) */ .rsite .ft__b{margin-top:18px} /* the bottom links one distance apart, Privacy's first letter on the gutter (RILLO DOORS FIX2's spacing, kept) */ .rsite .ft__legal{margin-left:-10px;gap:0}.rsite .ft__legal a{min-width:0;padding:0 10px} } @media (max-width:359px){.rsite .ft__doors{grid-template-columns:minmax(0,1fr)}.rsite .ft__doors a{flex-direction:row;align-items:center}.rsite .ft__g{gap:0 8px}.rsite .ft ul a,.rsite .ft h4{font-size:13px}} .rsite .ft .brand span{display:inline} /* A FOLD: a long list that stands open on a desk and folds to one line each on a phone (the footer's groups, the Coach playbook on each industry page). A tap opens it. RILLO DOORS V15 (founder job 3): fine print and long lists fold below 1024px and stand open from 1024 up. */ @media (max-width:1023px){ /* home: on a phone the card alone carries the Keep customers story; the Regulars frame is for the desk's wider band */ } /* the demo window's small parts added in V13 (every view fills its screen) */ /* SWITCHING DOORS: on a phone the header stays put and the page crossfades (founder job 1). Cross-document view transitions, where the browser has them; elsewhere the page loads as it always did. No white flash: the old page holds until the new one can paint. Nothing moves under reduced motion. RILLO DOORS V14 (founder job 8): on a desk a switch is instant. The fade made the new page's first paint wait for the transition, 150 to 250ms slower than a plain load (DOORS V13, tools/site-checks/switch-timing.js), so above 720px there is no view transition at all: the browser holds the old page and paints the new one the moment it can. */ @media (max-width:720px){@view-transition{navigation:auto}} /* one whole-page fade: the header is the same on both pages, so it stays put while the page under it changes (a header of its own in the transition cost the new page about 50ms more to show, measured with tools/site-checks/switch-timing.js) */ /* ASK RILLO IN THE LAPTOP: the app's split view, Home on the left, Ask Rillo on the right, each pane headed by its picker and Ask Rillo's chats in a dropdown beside its title. The phone shows the chat alone. */ /* A SECTION'S LINE UNDER ITS HEADING IS SHOWN ON EVERY PAGE: the demo window's `.sub{display:none}` (its sub-views, which are divs) was hiding every section's p.sub on the CRM-built pages, "Which one are you?"'s line and "Already built"'s among them. */ /* The CRM's two options (one piece on /crm and /pricing): each card a column, its button on the card's floor, so the two buttons line up and neither card has an empty lower half. */ /* ADDENDUM 2: each door has one button into its door (the title is not a second link). */ /* RILLO DOORS V16: the V14 and addendum-2 hero grids (the headline beside its buttons, the pair under them) were here; the hero is now one layout on every door page (THE HERO, V16, at the end of this file). */ /* With a mouse, the footer's links do not need a finger's 44px rows (they keep them on touch screens). DOORS V14, job 13: every width over a phone's gets the desk's 36px rows with a mouse (from 641 to 1099px they were 53px, a 44px row and a 9px gap), and a touch screen's 44px rows need no gap on top. */ @media (min-width:641px){.rsite .ft ul{gap:0}} @media (hover:hover) and (pointer:fine) and (min-width:641px){.rsite .ft__g li a{min-height:30px}.rsite .ft ul{gap:6px}} /* ADDENDUM 2, ITEM 2: the Ask view's lines that write themselves in start faint, never empty. */ /* ===== ADDENDUM 2, ITEMS 3 TO 6: THE HEADER. ===== */ /* 3. The pill is a slider: one highlight (.seg__hl) sits under the door you are on and slides to the door you pick (the page change is a view transition: the header stays, the highlight moves, the page crossfades). At every width the door you are on is named and the other two are marks, each with its name for a screen reader and a title for a mouse. On a page of no door (home, pricing) nothing is highlighted and the three read as one control: marks on a phone, named on a desktop. */ .rsite .hd .seg{display:grid!important;grid-auto-flow:column;grid-template-rows:auto;align-items:center;position:relative} .rsite .hd .seg>a[href="/connect"]{grid-row:1;grid-column:1} .rsite .hd .seg>a[href="/shops"]{grid-row:1;grid-column:2} .rsite .hd .seg>.has{grid-row:1;grid-column:3} .rsite .hd .seg>a,.rsite .hd .seg>.has>a{position:relative;z-index:1} .rsite .hd .seg a.is-here{background:transparent!important;box-shadow:none!important} .rsite .hd .seg__hl{display:none;grid-row:1;align-self:stretch;justify-self:stretch;border-radius:9px;background:#fff;box-shadow:0 1px 2px rgba(14,17,22,.08),0 0 0 1px var(--hair);pointer-events:none;z-index:0} .rsite .hd__in[data-here="connect"] .seg__hl{display:block;grid-column:1} .rsite .hd__in[data-here="shops"] .seg__hl{display:block;grid-column:2} .rsite .hd__in[data-here="crm"] .seg__hl{display:block;grid-column:3} .rsite .hd .seg a:not(.is-here) span{display:none} .rsite .hd .seg a.is-here span{display:inline} .rsite .hd .seg>a:not(.is-here),.rsite .hd .seg>.has>a:not(.is-here){width:44px;min-width:44px;padding:0;gap:0;justify-content:center} .rsite .hd .seg .has>a:not(.is-here)::after{display:none} @media (min-width:721px){ .rsite .hd__in[data-here=""] .seg a span{display:inline} .rsite .hd__in[data-here=""] .seg>a,.rsite .hd__in[data-here=""] .seg>.has>a{width:auto;min-width:0;padding:0 12px 0 8px;gap:8px} } @supports (view-transition-name:a){ .rsite .hd{view-transition-name:hd} .rsite .hd .seg__hl{view-transition-name:seg-hl} .rsite .hd .seg>a[href="/connect"]{view-transition-name:seg-c} .rsite .hd .seg>a[href="/shops"]{view-transition-name:seg-s} .rsite .hd .seg>.has>a[href="/crm"]{view-transition-name:seg-r} } /* 4. The menu button shows at every width, desktop included; its list carries Log in, the three doors, Request a demo, Pricing, How it works and Who uses it. Log in also stays in the bar itself at every width, phones included. */ .rsite .hd .burger{display:grid!important} .rsite .hd .login{display:inline-flex!important} @media (min-width:1101px){ .rsite .mm.is-open{display:block!important} .rsite .mm .mm__in{right:max(12px,calc((100vw - var(--col)) / 2 + var(--gut) - 6px))} } /* On a phone the row is the logo, the pill, Log in and the menu; Start joins where it fits (it is always the menu's first row and the hero's first button). */ @media (max-width:720px){ .rsite .hd .hd__in{gap:4px!important;padding-left:10px!important;padding-right:10px!important} .rsite .hd .hd__end{gap:4px!important} .rsite .hd .login{height:40px;min-height:40px;padding:0 10px!important;font-size:13.5px;border-radius:10px} .rsite .hd .burger{width:40px!important;height:44px} .rsite .hd .brand{min-width:0} } @media (max-width:360px){ .rsite .hd .hd__in{gap:3px!important;padding-left:8px!important;padding-right:8px!important} .rsite .hd .seg>a:not(.is-here),.rsite .hd .seg>.has>a:not(.is-here){width:36px;min-width:36px} .rsite .hd .login{padding:0 6px!important;border-color:transparent!important;background:transparent!important} .rsite .hd .seg a.is-here span{font-size:13px} } .rsite .hd .startRing{display:inline-flex} /* 5. The three marks read as the same tile: the same size, weight and inset (the Shops tile is white on a light pill, so its edge is drawn inside the same 24px box instead of a border that took a pixel off its face). */ .rsite .hd .seg i.w,.rsite .mm .mgNav i.w,.rsite .ft__doors i.w{border:0!important;box-shadow:inset 0 0 0 1px rgba(14,17,22,.2)} /* 6. Start free: one clean ring inside the button, a little smaller (no glass frame outside it). */ .rsite .hd .startRing{--rw:0px;margin:0;border-radius:var(--r);clip-path:none} .rsite .hd .startRing::before{display:none} .rsite .hd .startRing__b{inset:0;padding:1.5px;border-radius:var(--r);z-index:1;filter:none;clip-path:inset(0 round var(--r))} .rsite .hd .startRing__b::before{width:150px;height:150px;margin:-75px 0 0 -75px;background:conic-gradient(transparent 0 55%,rgba(255,255,255,.18) 70%,rgba(255,255,255,.8) 90%,rgba(255,255,255,.3) 96%,transparent 100%)} /* The pill keeps one width on the three doors' pages, so switching doors moves only the highlight: the named door takes the free column, the other two are 44px marks (36px at 360 and under, where the row holds Log in too). */ .rsite .hd__in[data-here="connect"] .seg,.rsite .hd__in[data-here="shops"] .seg,.rsite .hd__in[data-here="crm"] .seg{width:240px} .rsite .hd__in[data-here="connect"] .seg{grid-template-columns:minmax(0,1fr) 44px 44px} .rsite .hd__in[data-here="shops"] .seg{grid-template-columns:44px minmax(0,1fr) 44px} .rsite .hd__in[data-here="crm"] .seg{grid-template-columns:44px 44px minmax(0,1fr)} .rsite .hd .seg>.has{display:flex;min-width:0}.rsite .hd .seg>.has>a{flex:1 1 auto} .rsite .hd .seg a.is-here{justify-content:center} @media (max-width:720px){.rsite .hd__in[data-here="connect"] .seg,.rsite .hd__in[data-here="shops"] .seg,.rsite .hd__in[data-here="crm"] .seg{width:190px}} /* ADDENDUM 2, ITEM 8: nothing hangs off inside the demos. A demo table's names and companies wrap inside their cells (the cast's real names are longer than the old ones) instead of running past the cell or ending in an ellipsis; numbers and pills stay on one line. The laptop's Home screen ends with the Today list (its "More on your day" line sat under the screen's edge; the phone, which scrolls, keeps it). */ @media (max-width:340px){ .rsite .hd .seg>a:not(.is-here),.rsite .hd .seg>.has>a:not(.is-here){width:34px;min-width:34px} .rsite .hd .login{padding:0 4px!important} .rsite .hd .burger{width:38px!important} } /* ===== RILLO DOORS V14, JOB 13: EVERY WIDTH IN BETWEEN. Layouts step, never squeeze. ===== */ /* THE DOORS: three across only where each card has room for its whole content (a door's inside is 300px or more: the Reach Score panel's head on one line, the company card at 90% or more of its size, "Rillo Connect" and its chip on one line). From 761 to 1149px they are one column, each door a wide card: its title, line and button on the left, its picture on the right. Under 761px they are the swipe they were. Never two and an orphan. */ /* THE WORDMARK (measured, tools/site-checks/between-check.js W): the "Rillo" beside the mark shows from 600px up, where the bar always has 105px or more to spare, and below 600px wherever it fits beside the pill, Log in, Start and the menu with room left (it needs about 45px): every page from 472px up; a page of no one product (three marks in the pill) at 360px and under, and from 420px, where Start has joined the bar; /connect from 408 to 423px, before its Start joins. */ @media (min-width:472px){.rsite .hd .brand span{display:inline!important}} /* A TRIO'S TABS NEVER WRAP A LABEL ("Regional manager", "Tooling Sales & Calibration" broke in two at 390): each tab is as wide as its label or wider, and where three do not fit on one row the bar takes a second row, the way the hero's preset switch does (job 12's walk: a bar that scrolled sideways cut "Equipment Rental" at the screen's edge). A chip row (.trio--chips) is a swipe from edge to edge and keeps scrolling. */ /* "THREE PEOPLE USE IT" steps like the doors: three across only from 1150px, where each person's screen has its room; from 761 to 1149px one column, each person a wide card, their words on the left and their screen on the right. */ /* The company card in a door keeps the door picture's height: its space is its shape (1.75 to 1), so it is never wider than the 236 to 250px picture allows (it filled a 600px phone's door, 304px tall, over the line under it). */ /* THE PRESETS (each industry page's "What Rillo holds") step the same way: three or two across only from 1150px, one column below it (at 768 each preset's facts were a word wide). */ /* ===== RILLO DOORS V15, FOUNDER JOB 2: THE FIRST PHONE SCREEN, THE SAME ON EVERY PAGE. Under the stacked headline, one promise, two buttons and the proof line as chips (app/lib/site/first.js); no Talk to the team box on a hero. The chips are quiet: hairline pills, the first one in ink, no blue (the one blue is the primary button). ===== */ /* a reading page's first screen ends at its chips: the page's own words start a step below them */ /* ===== RILLO DOORS V15, FOUNDER JOB 3: SAY IT ONCE. /pricing is the one full price list; /crm and /shops show their one price card and See full pricing; the websites are a 2 by 2 grid with one line of add-ons and one of rules, the rest folded. ===== */ /* the heading and what the plan includes on the left, the card on the right; on a phone the card, then the list folded */ /* the websites block */ /* ===== RILLO DOORS V15, FOUNDER JOB 6: THE DEMO DEVICES WEAR APP V10'S SHELL (interim, until the design system's SiteDemo cards). The top bar on every screen: the product by name on its tile, search, the one waiting count beside the bell (on a phone the count is on the bar's centre mark), and you. Home: the greeting and today's date by the visitor's clock, the brief as one line with its one blue button, the trade's three numbers in one row. The phone's bar: two places, the Rillo mark in the centre wearing the waiting count, one place, More. No Home and Review switch. ===== */ /* ===== RILLO DOORS V16 (2026-09-30): FINISH THE PUBLIC PAGES. The last word, like each block before it. Full desktop is the standard; a smaller width keeps the same content in the same order, rearranged, never dropped or crammed. ===== */ /* THE FRAME (founder item 6): a wider frame on a desk, and one gutter for the header, the page, the menu and the footer. */ .rsite{--col:1360px} @media (min-width:1024px){.rsite{--gut:40px}} @media (min-width:1280px){.rsite{--col:1520px}} @media (min-width:1680px){.rsite{--col:1680px}} .rsite .hd>.wrap,.rsite .ft>.wrap,.rsite main .wrap{max-width:var(--col);padding-left:var(--gut)!important;padding-right:var(--gut)!important;box-sizing:border-box} /* THE HERO (founder item 1). Every door page: the eyebrow, the headline on three lines, the promise, the two buttons and the price line, one stack in the left half; the page's own piece in the right half (home the three doors, /shops the day at Shelton BBQ, /crm the three queued calls, /connect the card). Below 1024px the same stack, then the piece. */ /* the price line: one line of plain words, a dot between them (it was a row of chips) */ /* RILLO BUG SWEEP V4 (D61): a flex row, so the line break between two items (app/lib/site/seams.js, which makes the list read "Connect is free 30 days free" rather than "Connect is free30 days free") draws nothing; the dot between them is the ::before below. */ /* the pieces */ /* THE DEVICE SWITCH (founder items 2 and 7; app/lib/site/phone.js dvHtml): Desktop and Phone over a track that swipes. Each device stands upright in the middle of its slide; the track is as tall as the slide that is showing (CSS only, from the two devices' fixed shapes, so nothing jumps when the script arrives). */ /* THREE ACROSS ON A FULL DESK, ONE COLUMN BELOW IT, NEVER TWO AND ONE (founder item 6). Every grid of cards on the public pages. */ /* the cards that hold a whole screen (the three people, the presets, the doors) need 1150px for three across (V14's step): one wide card a row below it, never crushed */ /* THE NINE INDUSTRIES, one list everywhere, ending with More industries and "Not on the list?" (founder item 8) */ .rsite .drop__else{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;margin:0 0 6px;padding:0 10px;font-size:14px;color:var(--ink2)}.rsite .drop__else a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--blue);text-decoration:none} .rsite .drop__list a.drop__more{color:var(--ink2)} /* the menu keeps the page's gutter and loses its extra padding */ .rsite .mm .mm__in{padding-left:var(--gut)!important;padding-right:var(--gut)!important} /* THE FOOTER ON A DESK (RILLO DOORS V16, kept by V17): the frame's gutter, clear of the iPhone's home bar. The phone's is the locked block above (THE FOOTER ON A PHONE). */ .rsite .ft{padding:48px 0 calc(28px + var(--sab,0px))} @media (min-width:641px){.rsite .ft .ftG h4{margin:0 0 12px}} @media (max-width:389px){.rsite .ft__doors small{font-size:12px;white-space:normal!important;line-height:1.3}} /* a tile's price takes two lines between its words under 390px (a third of 360 leaves 83px inside) */ /* THE LOOK (founder item 9): no spaced capitals and no monospace labels; monospace only for codes and card numbers. No purple or gradient initials: a person's initials are ink on a quiet fill. */ .rsite .k,.rsite .drop__k,.rsite .ft__doors small{font-family:inherit!important;text-transform:none!important;letter-spacing:0!important} /* NOTHING BROKEN (founder item 7): a word, a price, an address or a phone number never breaks across lines. */ /* HOME'S CONNECT DEMO (app/lib/site/doors16.js): the demo owner's card beside her Rillodex, on the desktop box and on the phone. */ /* one column on a phone, kept tight: the Already built cards are one short line each (RILLO DOORS V16, founder item 6) */ /* ===== RILLO DOORS V17 (2026-10-01): THE HEADER, FOUNDER-LOCKED (docs/site/LOCKED.md; header-lock in tools/site-checks/lock-check.js). 1a4272a5's door, restored: the three emblems in the grey bubble, the page's own door a white bubble with its emblem and name, and the white highlight sliding to the door you pick (the view transition above). One row at every width: the logo, the bubble, Log in, Start and the menu. One spacing set for every phone up to 440px, the coordinator's, measured to fit every page from 360 to 430 (its tighter step runs to 389px, not 379: /connect's open door needs 391px of row at the wider one; under 360 Start leaves the row on every page, as there is no room for it); no rule here names a page. The word "Rillo" beside the logo shows only when the whole row fits with it: shell.client.js THE WORDMARK measures the row on load, on resize and when the fonts land, and sets data-word. ===== */ /* the logo is the blue Rillo mark on every page (it took the page's product colour on /connect, black) */ .rsite #hd .brand i{background:#0052FF!important} @media (max-width:720px){ .rsite #hd .brand span{display:none!important} .rsite #hd .hd__in[data-word="1"] .brand span{display:inline!important} .rsite #hd .drop,.rsite #hd .seg .has.is-open .drop{display:none!important} } @media (min-width:441px) and (max-width:720px){.rsite #hd .login{height:44px!important;min-height:44px!important}} /* Log in and Start the same size (44px, as 1a4272a5's Start) */ @media (max-width:440px){ .rsite #hd .hd__in{display:flex!important;align-items:center;height:68px!important;gap:6px!important;padding-left:10px!important;padding-right:10px!important} .rsite #hd .hd__mid{display:flex!important;margin:0 auto!important;min-width:0;gap:0} .rsite #hd .hd__end{margin-left:0!important;gap:6px!important} .rsite #hd .brand{min-width:0!important;min-height:44px;gap:6px;flex:none} .rsite #hd .brand i{width:28px;height:28px;border-radius:9px}.rsite #hd .brand i svg{width:17px;height:17px} .rsite #hd .seg{width:auto!important;padding:2px!important;gap:0!important} .rsite #hd .hd__in[data-here="connect"] .seg{grid-template-columns:auto 38px 38px!important} .rsite #hd .hd__in[data-here="shops"] .seg{grid-template-columns:38px auto 38px!important} .rsite #hd .hd__in[data-here="crm"] .seg{grid-template-columns:38px 38px auto!important} .rsite #hd .hd__in[data-here=""] .seg{grid-template-columns:38px 38px 38px!important} .rsite #hd .seg>a:not(.is-here),.rsite #hd .seg>.has>a:not(.is-here){width:38px!important;min-width:38px!important;padding:0!important;gap:0!important} .rsite #hd .seg i{width:20px;height:20px;border-radius:6px}.rsite #hd .seg i svg{width:12px;height:12px} .rsite #hd .seg a.is-here{padding:0 9px 0 5px!important;gap:5px!important;font-size:13.5px} .rsite #hd .seg a.is-here span{font-size:13.5px} /* 40px to the eye, 44px to a finger: a 2px clear border above and under each, the fill and the outline painted inside it */ .rsite #hd .login,.rsite #hd .hd__end .btn--p{box-sizing:border-box;height:44px!important;min-height:44px;min-width:58px;padding:0 8px!important;font-size:13px!important;border-radius:12px;border:2px solid transparent!important;border-left-width:0!important;border-right-width:0!important;background-clip:padding-box!important} .rsite #hd .login{background:transparent!important;box-shadow:inset 0 0 0 1px rgba(14,17,22,.3)!important} .rsite #hd .startRing{--r:10px;display:inline-flex!important} .rsite #hd .startRing__b{inset:2px 0!important} .rsite #hd .btn--p::after{font-size:13px} .rsite #hd .burger{width:30px!important;height:44px} } @media (max-width:389px){ .rsite #hd .hd__in{gap:4px!important;padding-left:8px!important;padding-right:8px!important} .rsite #hd .hd__end{gap:4px!important} .rsite #hd .hd__in[data-here="connect"] .seg{grid-template-columns:auto 34px 34px!important} .rsite #hd .hd__in[data-here="shops"] .seg{grid-template-columns:34px auto 34px!important} .rsite #hd .hd__in[data-here="crm"] .seg{grid-template-columns:34px 34px auto!important} .rsite #hd .hd__in[data-here=""] .seg{grid-template-columns:34px 34px 34px!important} .rsite #hd .seg>a:not(.is-here),.rsite #hd .seg>.has>a:not(.is-here){width:34px!important;min-width:34px!important} .rsite #hd .login,.rsite #hd .hd__end .btn--p{min-width:54px;padding:0 6px!important} } /* under 360px (a 320px phone) the row has no room for Start on any page: it is the menu's first row and the hero's first button */ @media (max-width:359px){.rsite #hd .startRing{display:none!important}} /* A FINGER'S 44PX, NOTHING MOVED (RILLO DOORS POLISH V1, job 2, polish-check P4). On a phone the menu button is drawn 30px wide and the logo 28px (the coordinator's spacing, RILLO DOORS V17); each now takes a finger's 44px through a clear box around it that reaches into the screen's edge and the gap beside it, never over a neighbour, so the row looks exactly as approved. */ @media (max-width:440px){ .rsite #hd .burger,.rsite #hd .brand{position:relative} .rsite #hd .burger::before{content:'';position:absolute;top:0;bottom:0;left:-4px;right:-10px} .rsite #hd .brand::before{content:'';position:absolute;top:0;bottom:0;left:-10px;right:-6px} } @media (max-width:389px){ .rsite #hd .burger::before{left:-4px;right:-8px} .rsite #hd .brand::before{left:-8px;right:-4px} } /* THE MENU (RILLO DOORS V17, founder job 4): Start free and Log in, the three products, Request a demo (in the first screen), the nine industries in two columns ending with More industries, then "Not on the list?" in the menu's own size, then How it works, Pricing and Who uses it. The close X is drawn as an X (two crossing strokes the size of the three lines), not the three lines turned, which Safari drew as one thin stick. */ .rsite .mm .mm__in>.demoItem{margin:8px 0 2px} .rsite .mm .drop__else{margin:4px 0 0;padding:0 10px;font-size:15px;font-weight:500;color:var(--ink2)} .rsite .mm .drop__else a{font-size:15px;font-weight:500;color:var(--ink);min-height:44px} .rsite .hd .burger .burger__x{display:none} .rsite .hd .burger[aria-expanded="true"] .burger__a,.rsite .hd .burger[aria-expanded="true"] .burger__b,.rsite .hd .burger[aria-expanded="true"] .burger__c{display:none} .rsite .hd .burger[aria-expanded="true"] .burger__x{display:inline} /* THE BANNERS (RILLO DOORS V17, founder additions 1 and 2): a moving row faded at both ends. /shops' placeholder businesses under its hero with their line; /crm's nine industries (each its own page) ending with More industries, which opens every other preset by its own name, General Sales first, then "Not on the list?". Every sideways row on the site ends in a fade. */ /* SIDEWAYS ROWS END IN THE FADE (RILLO DOORS V17 FIX1, job 3; found on iPhone Safari: /shops' trade chips cut at the screen's edge). Every row that scrolls sideways ends in the banners' fade above (transparent to black over 8%) at each end where it is cut: shell.client.js SIDEWAYS ROWS finds the rows (any box whose overflow-x scrolls and whose content is wider, but a pager, whose every child is as wide as the row, and the app's screens inside a demo window) and keeps data-xf on each: start (more to the right), mid (more both ways), end (more to the left). doors17-tests R16 walks every public page at 360 and 390. */ /* PAGE LENGTH ON A PHONE (RILLO DOORS V17, founder job 7: a door page in seven phone screens, by cutting repeated text, never by shrinking type). An Already built card's small kind label said its title again ("Calls", Call queue): on a phone the title stands alone (a beta card keeps its Beta tag). The talk demo's paragraph said what its four steps say. */ /* RILLO SITE PAGES V3: the page's room for the floating Ask us (Website Receptionist's button, 48px tall, 16px from the bottom). At the end of a page, where the button always shows, the footer's last row sat under it (Terms and Trust at a desk, at every width from 700px up). The footer is locked (docs/site/LOCKED.md), so the room is the page's: a strip in the footer's own colour after it, as tall as the button and its gap. Only from 641px: on a phone the footer's last row is centred under its tiles and the button (48px, at the right) never reaches it, and a door page keeps to seven phone screens (doors17 R11). sitespace-tests C holds it on every page at every width. */ /* RILLO BUG SWEEP V4 (D63): the scanned card's company mark is its initial, never an empty tile */ /* RILLO DOORS V17 (founder job 7, seven phone screens by cutting repeated text): on a phone the hero's piece, the day's three queued calls, which the demo under it opens on and Which one are you shows again, is not shown twice. */ /* RILLO DOORS V17 (founder job 7: one solid blue element per section): a plan's tag is outlined, not a second blue fill. */ @keyframes sbeam{to{transform:rotate(360deg)}} .rsite{overflow:visible} .rsite--hd{position:sticky;top:0;z-index:40} .rsite--hd>.hd{position:relative} .rcard{--rc-blue:#0052ff;--rc-ink:#0a0b0d;--rc-ink3:#666d7c;--rc-hair:#e5e8ee;--rc-surf:#ffffff;--rc-onblue:#fff;--rCard:22px;--rCtl:12px;--col:430px;--rc-ease:cubic-bezier(.2,.8,.2,1);--rc-press:120ms;--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--logoBox:30px;--qrK:.30;--qrCx:76%;--colR:56%;--hdrH:calc(var(--logoBox) + 14px);--lockW:42px;--lockH:30px;--lockRight:9px;--lockBottom:6px;--fsInset:10px;position:relative;display:block;width:100%;max-width:var(--col);margin:0 auto;font-family:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:-.008em;-webkit-font-smoothing:antialiased}.rcard.rcard--app{--rc-blue:var(--accent);--rc-ink:var(--text);--rc-ink3:var(--text-3);--rc-hair:var(--line);--rc-surf:var(--surface);--rc-onblue:var(--on-accent)}@media (max-width:360px){.rcard{--qrK:.28}}.rcard .bcWrap{grid-template-columns:minmax(0,1fr);width:100%;min-width:0;perspective:1200px;display:grid;place-items:center;margin:0 auto 14px;user-select:none;-webkit-user-select:none;touch-action:pan-y;position:relative}.rcard .bcWrap::after{content:"";position:absolute;left:8%;right:8%;bottom:-6px;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(21,23,26,.22),transparent 72%);filter:blur(6px);pointer-events:none;z-index:-1}.rcard .bcCard{position:relative;width:min(100%,var(--col));aspect-ratio:1.75/1;transform-style:preserve-3d;will-change:transform;outline:none;border-radius:var(--rCard);cursor:default;box-shadow:0 14px 38px -20px rgba(14,17,22,.42);--c:#15171a;--ci:#f5f6f7;--ci2:rgba(245,246,247,.62);--edge:rgba(255,255,255,.10);--sheen:.12;--grainBlend:soft-light;--grainA:.04;--shadow:.55;--rim:rgba(255,255,255,.16);--fsBg:#fff;--fsInk:#15171a}.rcard .bcCard[data-flippable="true"]{cursor:pointer}.rcard .bcCard:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--rc-blue)}.rcard .bcFace{position:absolute;inset:0;border-radius:var(--rCard);overflow:hidden;background:var(--c);border:1px solid var(--edge);color:var(--ci);padding:14px 22px 12px;display:flex;flex-direction:column;justify-content:space-between;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-sizing:border-box;box-shadow:0 1px 0 var(--rim) inset,0 -1px 0 rgba(0,0,0,.18) inset,1px 0 0 rgba(255,255,255,.04) inset,-1px 0 0 rgba(0,0,0,.10) inset,0 2px 3px -1px rgba(21,23,26,.28),0 18px 28px -16px rgba(21,23,26,.34),0 46px 76px -40px rgba(21,23,26,var(--shadow))}.rcard .bcFace--front{transform:rotateY(0) translateZ(1px)}.rcard .bcFace--back{transform:rotateY(180deg) translateZ(1px)}.rcard .bcCard.is-light .bcFace{border-color:rgba(21,23,26,.32)}.rcard .bcCard.is-tone .bcFace{background:linear-gradient(160deg,color-mix(in srgb,var(--c) 84%,#fff) 0%,var(--c) 52%,color-mix(in srgb,var(--c) 86%,#000) 100%)}.rcard .bcFace::before{content:"";position:absolute;inset:-40%;border-radius:inherit;background:radial-gradient(closest-side at var(--lx,50%) var(--ly,30%),rgba(255,255,255,var(--sheen)),rgba(255,255,255,0) 60%);pointer-events:none;mix-blend-mode:screen}.rcard .bcFace::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--grainA);mix-blend-mode:var(--grainBlend);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.16' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E"),repeating-linear-gradient(97deg,rgba(255,255,255,.012) 0 1px,transparent 1px 7px);background-size:64px 64px,160px 160px,auto}.rcard .bcFace>*{position:relative;z-index:1}.rcard .bcFace .bc__backMid,.rcard .bcFace .bc__mid2,.rcard .bcFace .bc__bottom,.rcard .bcFace .bc__top{pointer-events:none}.rcard .bcFace .bcF,.rcard .bcFace .bc__qrFront,.rcard .bcFace .bc__logo{pointer-events:auto}.rcard .bc__top{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;align-self:start;column-gap:6px;min-height:var(--logoBox);width:calc(100% - var(--lockW));max-width:calc(100% - var(--lockW));overflow:visible;box-sizing:border-box;padding-right:0}.rcard .bc__top.is-empty{min-height:0;height:0;overflow:hidden}.rcard .bc__logo{grid-column:1;min-height:calc(var(--logoBox) + 8px);display:flex;flex-wrap:nowrap;width:max-content;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ci);min-width:0;max-width:100%;background:transparent;border:0;padding:4px 12px 4px 4px;margin:-4px 0 -4px -4px;border-radius:999px;font-family:inherit;cursor:default;text-align:left;justify-self:start;box-sizing:border-box;position:relative;text-decoration:none}.rcard .bc__logo .lg{display:flex;align-items:center;flex:none}.rcard .bc__logo .lg:empty,.rcard .bc__logo .co:empty{display:none}.rcard .bc__logo.is-word{padding-left:0}.rcard .bc__logo.is-word .co{font-size:1.2em;font-weight:750;letter-spacing:-.01em;line-height:var(--logoBox)}.rcard .bc__logo .co{flex:none;min-width:0;white-space:nowrap;line-height:1.15;overflow:visible;text-align:left}.rcard .bc__logo .co.is-wrap{flex:0 1 auto;white-space:normal;max-height:2.3em;overflow:hidden}.rcard .bc__logo.is-word .co.is-wrap{line-height:1.15}.rcard .bc__logo img{height:var(--logoBox);width:auto;max-width:132px;object-fit:contain;display:block;border-radius:0;align-self:center;flex:none}.rcard .mono{width:var(--logoBox);height:var(--logoBox);border-radius:8px;background:var(--s,#15171a);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:600;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}.rcard .bcFace>.bc__qrHalf{position:absolute;inset:0;pointer-events:none;z-index:2}.rcard .bc__qrFront{position:absolute;left:var(--qrCx);top:calc(var(--hdrH) + (100% - var(--hdrH) - var(--lockH) - 10px) / 2);transform:translate(-50%,-50%);width:calc(var(--qrK) * 100%);aspect-ratio:1/1;height:auto;border-radius:10px;background:#fff;padding:6px;border:0;cursor:pointer;box-shadow:0 0 0 1.5px var(--qrEdge,#fff),0 1px 3px rgba(0,0,0,.25);pointer-events:auto;box-sizing:border-box}.rcard .bcCard.is-light .bc__qrFront{--qrEdge:#15171a}.rcard .bc__qrFront svg,.rcard .qrbox svg,.rcard .bc__qrFront img,.rcard .qrbox img{width:100%;height:100%;display:block}.rcard .bc__qrFront:empty{display:none}.rcard .bcFace--front{display:grid;grid-template-columns:100%;grid-template-rows:var(--hdrH) auto 1fr;align-content:start;row-gap:4px}.rcard .bc__mid2{display:block;max-width:var(--colR);flex:none;min-width:0}.rcard .bc__who{flex:1 1 auto;min-width:0}.rcard .bc__name{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.08;margin:0;overflow-wrap:normal;white-space:nowrap;overflow:visible}.rcard .bc__name.is-wrap{white-space:normal;max-height:2.2em;overflow:hidden;text-wrap:balance}.rcard .bc__role{font-size:13.5px;color:var(--ci2);margin:4px 0 0;overflow-wrap:normal;line-height:1.3;max-height:2.6em;overflow:hidden}.rcard .bc__logo img[src$="/brand/favicon/icon-192.png"]{border-radius:24%}.rcard .bcFace--front .bc__bottom{display:block;align-self:end;padding-right:calc(var(--lockW) + 8px)}.rcard .bc__contact{font-size:13px;line-height:1.45;display:flex;flex-direction:column;align-items:flex-start;gap:0;min-width:0;max-width:calc((100% + var(--lockW) + 8px) * .56)}.rcard .bc__slot{display:block;min-height:20px;line-height:20px}.rcard .bcF{display:none;max-width:100%;padding:3px 8px;margin-left:-8px;border:1px solid transparent;border-radius:7px;background:transparent;font:inherit;font-size:13px;line-height:1.25;color:inherit;text-align:left;cursor:pointer;white-space:nowrap;text-decoration:none;box-sizing:border-box;transition:transform var(--rc-press) var(--rc-ease),background var(--rc-press) var(--rc-ease)}.rcard .bcF.is-on{display:block;width:fit-content}.rcard .bc__contact.is-tight .bcF{padding-top:0;padding-bottom:0}.rcard .bc__footer .bcF,.rcard .rc-made{position:relative}.rcard .bc__footer .bcF::after,.rcard .rc-made::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:var(--rc-tap,44px);transform:translateY(-50%)}.rcard .bcF--em,.rcard .bcF--url{font-variant-ligatures:none}.rcard .is-short{white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis;max-height:none;overflow-wrap:normal;min-width:0}.rcard .bc__logo .co.is-short{flex:0 1 auto;display:block}.rcard .bcF.is-short{display:block}.rcard .bcF--ph,.rcard .bcF--url{font-family:var(--mono);font-size:max(13px,.94em);letter-spacing:-.01em;font-variant-numeric:tabular-nums}@media (hover:hover){.rcard .bcF:hover,.rcard a.bc__logo:hover{background:rgba(255,255,255,.16)}.rcard .bcCard.is-light .bcF:hover,.rcard .bcCard.is-light a.bc__logo:hover{background:rgba(0,0,0,.08)}}.rcard .bcF:active{transform:scale(.985);background:rgba(255,255,255,.18)}.rcard .bcCard.is-light .bcF:active{background:rgba(0,0,0,.10)}.rcard .bcF:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ci)}.rcard .bc__mark{position:absolute;right:var(--lockRight);bottom:var(--lockBottom);width:var(--lockW);height:var(--lockH);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;z-index:3;opacity:1;pointer-events:none}.rcard .bc__mark svg{width:16px;height:16px;display:block}.rcard .bc__mark small{font-size:13px;line-height:1;letter-spacing:.02em;font-weight:600;color:var(--ci2);display:block}.rcard .bc__backMid{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;padding:2px 0 calc(var(--lockH) + 6px + var(--fsInset) + 8px)}.rcard .bc__backMid .bc__mid{flex:1;min-width:0;text-align:center;max-width:32ch;margin:0 auto;font-size:14.5px;font-weight:400;line-height:1.45;letter-spacing:-.004em}.rcard .bc__summary{font-size:14.5px;line-height:1.45;margin:0 auto}.rcard .bc__links{font-size:13px;line-height:1.6;text-align:center}.rcard .bc__links span{display:block}.rcard .bc__rating{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px auto 0;font-variant-numeric:tabular-nums}.rcard .bc__mid>.bc__rating:first-child{margin-top:0}.rcard .bc__stars{display:flex;gap:2px;color:var(--ci)}.rcard .bc__stars svg{width:16px;height:16px;display:block}.rcard .bc__rt{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.25}.rcard .bc__rt b{font-size:inherit;font-weight:600;color:var(--ci)}.rcard .bc__rt small{font-size:13px;color:var(--ci2)}.rcard .bcCard.is-co .bc__rating{justify-content:flex-start;margin-left:0}.rcard .bc__footer{position:absolute;left:var(--fsInset);right:var(--fsInset);bottom:var(--fsInset);height:calc(var(--lockH) + 6px);padding:0 6px 0 12px;border-radius:calc(var(--rCard) - var(--fsInset));display:grid;grid-template-columns:auto 1fr var(--lockW);align-items:center;column-gap:10px;background:var(--fsBg);color:var(--fsInk);z-index:3;font-size:13px;font-weight:500;letter-spacing:.01em;box-sizing:border-box}.rcard .bc__verified{font-size:13px;font-weight:500;padding:2px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--ci) 82%,transparent);color:color-mix(in srgb,var(--ci) 82%,transparent);letter-spacing:.02em;background:transparent;flex:none;align-self:center;white-space:nowrap;height:22px;line-height:16px;box-sizing:border-box;font-family:inherit;cursor:pointer;pointer-events:auto;position:relative;margin:0}.rcard .bc__verified::before{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:var(--rc-tap,44px);transform:translateY(-50%)}.rcard .bc__verified:focus-visible{outline:2px solid var(--ci);outline-offset:2px}.rcard .bc__vtip{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:6;width:max-content;max-width:min(240px,70vw);white-space:normal;text-align:left;font-size:13px;font-weight:500;letter-spacing:0;line-height:1.35;padding:6px 10px;border-radius:8px;background:var(--ci);color:var(--c);box-shadow:0 0 0 1px var(--edge);opacity:0;visibility:hidden;transform:translateY(-2px);pointer-events:none;transition:opacity .12s,transform .12s,visibility 0s .12s}.rcard .bc__top--right .bc__vtip{left:auto;right:0}.rcard .bc__verified:hover .bc__vtip,.rcard .bc__verified:focus-visible .bc__vtip,.rcard .bc__verified[aria-expanded="true"] .bc__vtip{display:block;opacity:1;visibility:visible;transform:none;transition:opacity .12s,transform .12s}@media (prefers-reduced-motion:reduce){.rcard .bc__vtip{transition:none}}.rcard .bc__footer .bc__cardNo{justify-self:center;text-align:center;white-space:nowrap;opacity:.95;cursor:pointer;padding:3px 8px;border-radius:8px;pointer-events:auto;border:0;background:transparent;color:inherit;font:inherit;position:relative}.rcard .bc__footer .bc__cardNo{font-size:12px}.rcard .bc__cardNo b{font-weight:500;letter-spacing:.12em;font-variant-numeric:tabular-nums}.rcard .bc__cardNo::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:var(--rc-tap,44px);transform:translateY(-50%)}.rcard .bc__cardNo:focus-visible{outline:none;box-shadow:0 0 0 2px var(--fsInk)}@media (hover:hover){.rcard .bc__cardNo:hover{background:rgba(127,127,127,.16)}}.rcard .bc__footer .bcF--url{display:block;white-space:nowrap;padding:3px 7px;margin:0 0 0 -7px;font-size:13px;color:inherit;font-weight:500;overflow:visible;border-radius:8px;width:fit-content;max-width:calc(100% + 7px)}@media (hover:hover){.rcard .bc__footer .bcF--url:hover{background:rgba(127,127,127,.16)}}.rcard .bc__footer .bc__mark{position:static;width:var(--lockW);height:var(--lockH);color:var(--fsInk);justify-self:end}.rcard .bc__footer .bc__mark small{color:var(--fsInk);opacity:1}@media (max-width:380px){.rcard .bc__footer{column-gap:6px}}.rcard .bcCard.is-light{--fsBg:var(--rc-blue);--fsInk:#fff}.rcard .bcCard.is-light.is-tinted{--fsBg:var(--fsTint);--fsInk:#fff}.rcard .bc__qrBig{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 0;box-sizing:border-box;background:#fff;border-radius:var(--rCard);z-index:5;opacity:0;pointer-events:none;transition:opacity .2s;color:#15171a}.rcard .bc__qrBig.is-show{opacity:1;pointer-events:auto}.rcard .bc__qrBig .qrbox{height:calc(100% - 44px);width:auto;aspect-ratio:1;flex:none}.rcard .bc__qrBig p{position:static;text-align:center;font-size:13px;line-height:16px;color:#8A93A1;margin:0;flex:none}.rcard .bc__qrClose{position:absolute;top:8px;right:8px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(14,17,22,.07);color:#15171a;cursor:pointer;display:grid;place-items:center;z-index:6}.rcard .bc__qrClose svg{width:16px;height:16px}.rcard .bc__flipHint{position:absolute;right:14px;top:12px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;opacity:.9;transition:opacity .4s;z-index:2}.rcard .bcCard.is-light .bc__flipHint{background:rgba(0,0,0,.08)}.rcard .bc__flipHint svg{width:14px;height:14px}.rcard .bcCard.is-touched .bc__flipHint{opacity:0}.rcard .rc-dock{max-width:var(--col);margin:0 auto 22px;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:4px;padding:6px;border-radius:20px;background:var(--rc-surf);border:1px solid var(--rc-hair);box-sizing:border-box}.rcard .rc-dock__btn{height:56px;border:1px solid transparent;border-radius:var(--rCtl);background:transparent;font:inherit;font-size:13px;padding:0 2px;font-weight:500;color:var(--rc-ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-decoration:none;min-width:44px;transition:transform var(--rc-press) var(--rc-ease),background var(--rc-press) var(--rc-ease)}.rcard .rc-dock__btn:hover{background:color-mix(in srgb,var(--rc-ink) 5%,transparent)}.rcard .rc-dock__btn:active{transform:scale(.97)}.rcard .rc-dock__btn svg{width:19px;height:19px}.rcard .rc-dock{display:flex}.rcard .rc-dock__btn{flex:1 1 auto;white-space:nowrap;padding:0 6px}.rcard .rc-dock__btn--primary{background:var(--rc-blue);color:var(--rc-onblue);font-weight:600;font-size:13px;letter-spacing:-.01em}.rcard .rc-dock__btn--primary:hover{background:var(--rc-blue);filter:brightness(1.12)}.rcard .rc-dock__btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--rc-blue) 35%,transparent)}.rcard .rc-more{display:grid;gap:6px;max-width:var(--col);margin:-12px auto 22px}.rcard .rc-more[hidden]{display:none}.rcard .rc-more__row{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 14px;border-radius:var(--rCtl);border:1px solid var(--rc-hair);background:var(--rc-surf);color:var(--rc-ink);font:inherit;font-size:14.5px;font-weight:500;text-align:left;cursor:pointer;text-decoration:none}.rcard .rc-more__row svg{width:19px;height:19px;flex:none}.rcard .rc-more__row small{margin-left:auto;color:var(--rc-ink3);font-size:13px;font-weight:400}.rcard .rc-more__row[aria-disabled="true"]{cursor:default;opacity:.72}.rcard .rc-made{display:block;text-align:center;font-size:13px;color:var(--rc-ink3);text-decoration:none;margin:-8px auto 0}.rcard .rc-made:hover{text-decoration:underline}@media (prefers-reduced-motion:reduce){.rcard .bcFace::before{display:none}.rcard .rc-dock,.rcard .bcF,.rcard .rc-dock__btn{transition:none!important}}.rcard .bcFace--own{padding:0;overflow:hidden}.rcard .bcFace--own>*:not(.bc__own):not(.bc__qrBig):not(.bc__mark--front){display:none}.rcard .bcFace--own>.bc__mark--front{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:4px;height:24px;padding:0 9px 0 7px;border-radius:12px;background:rgba(255,255,255,.92);box-shadow:0 1px 3px rgba(0,0,0,.18)}.rcard .bcFace--own>.bc__mark--front svg{width:14px;height:14px;color:#0052ff}.rcard .bcFace--own>.bc__mark--front small{font-size:13px;font-weight:600;line-height:24px;color:#15171a}.rcard .bc__own{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}.rcard .bcFace--own::before,.rcard .bcFace--own::after{display:none}.bc__qrBig.rc-qrsheet{position:fixed;inset:0;z-index:var(--z-modal,100);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;box-sizing:border-box;background:#fff;color:#15171a;border-radius:0;opacity:1;pointer-events:auto;font-family:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}.bc__qrBig.rc-qrsheet .qrbox{width:min(84vw,64vh,440px);height:auto;aspect-ratio:1}.bc__qrBig.rc-qrsheet .qrbox svg,.bc__qrBig.rc-qrsheet .qrbox img{width:100%;height:100%;display:block}.bc__qrBig.rc-qrsheet p{position:static;margin:0;font-size:15px;line-height:1.4;color:#5B6472;text-align:center}.bc__qrBig.rc-qrsheet .bc__qrClose{position:absolute;top:16px;right:16px;width:48px;height:48px;border-radius:50%;border:1px solid rgba(14,17,22,.11);background:#fff;color:#15171a;display:grid;place-items:center;cursor:pointer}.bc__qrBig.rc-qrsheet .bc__qrClose svg{width:20px;height:20px}.rc-pick-scrim{position:fixed;inset:0;z-index:var(--z-scrim,68);display:grid;place-items:center;padding:16px;background:rgba(10,12,16,.55)}.rc-pick{width:min(360px,100%);display:grid;gap:14px;justify-items:center;padding:20px;border-radius:20px;background:var(--surface,#fff);color:var(--text,#15171a);box-shadow:0 20px 60px rgba(0,0,0,.28)}.rc-pick-h{margin:0;font-size:18px;font-weight:600;justify-self:start}.rc-pick-sub{margin:0;color:var(--text-2,#5b6472);justify-self:start}.rc-crop{position:relative;overflow:hidden;border-radius:16px;background:#e8ebf2;touch-action:none;cursor:grab;max-width:100%}.rc-crop:active{cursor:grabbing}.rc-crop:focus-visible{outline:3px solid var(--rc-blue);outline-offset:2px}.rc-crop img{position:absolute;left:0;top:0;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none;transform-origin:0 0}.rc-crop-ring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 999px rgba(10,12,16,.45);pointer-events:none}.rc-pick-zoom{display:flex;align-items:center;gap:10px;width:100%}.rc-pick-zoom input{flex:1;min-height:44px}.rc-pick-z{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--line,rgba(14,17,22,.11));background:var(--surface,#fff);color:inherit;font-size:20px;cursor:pointer}.rc-pick-acts{display:grid;gap:8px;width:100%}.rc-pick-acts .btn-c{width:100%}.rc-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.rc-own{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.rc-own .auth-error{flex-basis:100%;margin:0}.rc-own-thumb.rc-logo-thumb{width:auto;height:44px;aspect-ratio:auto;object-fit:contain;background:#fff}.rc-own-thumb{width:88px;height:auto;aspect-ratio:1050/600;object-fit:cover;border-radius:8px;border:1px solid var(--line,rgba(14,17,22,.11))}.rc-av{--av:72px;width:var(--av);height:var(--av);border-radius:50%;display:grid;place-items:center;flex:none;font-style:normal;font-weight:600;font-size:calc(var(--av) / 3);letter-spacing:.02em;color:var(--k4-av-ink,#3d4350);object-fit:cover;background:var(--k4-av,#eef0f4);box-shadow:inset 0 0 0 1px rgba(10,11,13,.06)}img.rc-av{background:#E8EBF2}.rc-av.rc-av-mark svg{width:50%;height:50%;display:block}.rcard .bcCard.is-co{--coP:20px;--fsBg:#fff;--fsInk:#15171a;--fsInset:12px;--qrEdge:rgba(21,23,26,.14);box-shadow:0 12px 30px -20px rgba(14,17,22,.30),0 1px 2px rgba(14,17,22,.06)}.rcard .bcCard.is-co .bcFace{padding:var(--coP);background:#fff;border-color:rgba(21,23,26,.12);box-shadow:none}.rcard .bcCard.is-co .bcFace::before,.rcard .bcCard.is-co .bcFace::after{display:none}.rcard .bcWrap:has(>.bcCard.is-co)::after{display:none}.rcard .bcCard.is-co .bc__top{grid-column:1;grid-row:1;width:100%;max-width:none}.rcard .bcCard.is-co .bcFace--front{grid-template-columns:minmax(0,1fr) 27%;grid-template-rows:auto minmax(0,1fr) auto;column-gap:16px;row-gap:8px;align-content:stretch}.rcard .bcCard.is-co .bc__flipHint{position:static;grid-column:2;grid-row:1;justify-self:end;align-self:center;background:rgba(21,23,26,.06)}.rcard .bcCard.is-co .bc__mid2{grid-column:1;grid-row:2;align-self:center;max-width:none}.rcard .bcCard.is-co .bc__name{font-size:26px}.rcard .bcCard.is-co .bc__role{font-size:14px;margin-top:3px}.rcard .bcCard.is-co .bcFace>.bc__qrHalf{position:static;inset:auto;grid-column:2;grid-row:2;align-self:center;justify-self:stretch;z-index:auto}.rcard .bcCard.is-co .bc__qrFront{--qrEdge:rgba(21,23,26,.14);position:relative;left:auto;top:auto;transform:none;width:100%;height:auto;aspect-ratio:1/1;border-radius:10px;box-shadow:0 0 0 1px var(--qrEdge)}.rcard .bcCard.is-co .bcFace--front .bc__bottom{grid-column:1;grid-row:3;align-self:baseline;padding-right:0;margin-bottom:-4.5px}.rcard .bcCard.is-co .bc__contact{max-width:none}.rcard .bcCard.is-co .bc__slot:empty{display:none}.rcard .bcCard.is-co .bcF{font-size:13px}.rcard .bcCard.is-co .bc__mark--front{position:static;grid-column:2;grid-row:3;justify-self:end;align-self:baseline;margin-bottom:-4.5px}.rcard .bcCard.is-co .bc__mark{display:block;width:auto;height:auto;line-height:1;white-space:nowrap}.rcard .bcCard.is-co .bc__mark svg{display:inline-block;width:15px;height:15px;vertical-align:-3px;margin-right:4px;color:#0052ff}.rcard .bcCard.is-co .bc__mark small{display:inline;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ci2);opacity:1}.rcard .bcCard.is-co .bc__backMid{justify-content:flex-start;padding:0 0 calc(var(--lockH) + 6px + var(--fsInset) - var(--coP) - 1px)}.rcard .bcCard.is-co .bc__backMid .bc__mid{max-width:none;margin:0;text-align:left}.rcard .bcCard.is-co .bc__summary{margin:0}.rcard .bcCard.is-co .bc__footer{padding:0 8px;grid-template-columns:auto 1fr auto;align-items:baseline;align-content:center;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px rgba(21,23,26,.12)}.rcard .bcCard.is-co .bc__footer .bc__mark{justify-self:end}.rcard .bcCard.is-co .bcF--url,.rcard .bcCard.is-co .bcF--ph{font-family:inherit;letter-spacing:0}@media (max-width:359px){.rcard .bcCard.is-co{--coP:16px}.rcard .bcCard.is-co .bcFace--front{grid-template-columns:minmax(0,1fr) 24%}}.rcard .bcCard{box-shadow:0 1px 1px rgba(10,11,13,.10),0 4px 8px -2px rgba(10,11,13,.12),0 22px 40px -22px rgba(10,11,13,.42);transition:box-shadow var(--rl-fast,160ms) var(--rl-ease-out,cubic-bezier(.2,0,0,1))}.rcard .bcCard.is-touched:active{box-shadow:0 2px 2px rgba(10,11,13,.10),0 10px 18px -6px rgba(10,11,13,.16),0 34px 56px -26px rgba(10,11,13,.46)}.rcard .bcWrap::after{opacity:.55}.rcard .bcFace{box-shadow:inset 0 1px 0 var(--rim),inset 0 0 0 1px var(--edge)}.rcard .bcCard.is-tone .bcFace{background:var(--c)}.rcard .bcFace::before{opacity:0;transition:opacity var(--rl-base,220ms) var(--rl-ease-out,cubic-bezier(.2,0,0,1))}@media (hover:hover){.rcard .bcCard:hover .bcFace::before{opacity:.7}}.rcard .bcCard:active .bcFace::before{opacity:1}.rcard .bcFace::after{opacity:calc(var(--grainA) * .6)}.rcard .bcF--ph,.rcard .bcF--url{font-family:inherit;font-size:13px;letter-spacing:0;font-variant-numeric:tabular-nums}.rcard{--lockW:58px}.rcard .bc__mark{flex-direction:row;align-items:center;justify-content:flex-end;gap:5px;width:auto;right:16px;bottom:12px;height:20px}.rcard .bc__mark svg{width:14px;height:14px;color:var(--ci2)}.rcard .bc__mark small{line-height:20px}.rcard .bc__footer .bc__mark{width:auto;height:var(--lockH)}.rcard .bc__flipHint{background:none;right:10px;top:8px;width:28px;height:28px;color:var(--ci2)}.rcard .bcCard.is-light .bc__flipHint{background:none}.rcard .bc__flipHint svg{width:15px;height:15px}.rcard .bc__role{text-wrap:balance}.rcard .bc__lic{margin:2px 0 0;font-size:13px;line-height:1.3;color:var(--ci2);font-variant-numeric:tabular-nums;overflow-wrap:break-word}.rcard .bc__qrFront{box-shadow:0 0 0 1px var(--qrEdge,rgba(255,255,255,.9)),0 1px 2px rgba(0,0,0,.18)}@media (prefers-reduced-motion:reduce){.rcard .bcFace::before{display:none}.rcard .bcCard{transition:none}}.cardHost{width:100%;max-width:430px;margin:0 auto}.siteCard .rcard{margin:0 auto}.siteCard--still{pointer-events:none}.cardHost{container-type:inline-size;aspect-ratio:1.75/1}.cardHost>.siteCard{width:max(100cqi,360px);transform:scale(var(--cks));transform-origin:0 0}.cardHost>.siteCard{--cks:.6666}@container (min-width:248px){.cardHost>.siteCard{--cks:.6888}}@container (min-width:256px){.cardHost>.siteCard{--cks:.7111}}@container (min-width:264px){.cardHost>.siteCard{--cks:.7333}}@container (min-width:272px){.cardHost>.siteCard{--cks:.7555}}@container (min-width:280px){.cardHost>.siteCard{--cks:.7777}}@container (min-width:288px){.cardHost>.siteCard{--cks:.8}}@container (min-width:296px){.cardHost>.siteCard{--cks:.8222}}@container (min-width:304px){.cardHost>.siteCard{--cks:.8444}}@container (min-width:312px){.cardHost>.siteCard{--cks:.8666}}@container (min-width:320px){.cardHost>.siteCard{--cks:.8888}}@container (min-width:328px){.cardHost>.siteCard{--cks:.9111}}@container (min-width:336px){.cardHost>.siteCard{--cks:.9333}}@container (min-width:344px){.cardHost>.siteCard{--cks:.9555}}@container (min-width:352px){.cardHost>.siteCard{--cks:.9777}}@container (min-width:360px){.cardHost>.siteCard{--cks:1}}.cardHost{position:relative}.cardHost>.siteCard{position:absolute;left:0;top:0}.siteCard .bcWrap{margin-bottom:0}.phonePoster__card .bcF--url,.phonePoster__card .bcF--ph{font-family:inherit;letter-spacing:0}@keyframes moFlip{0%,34%{transform:rotateY(0)}46%,80%{transform:rotateY(180deg)}92%,100%{transform:rotateY(360deg)}}.cardHost[data-play] .siteCard .bcCard:not(.is-touched){animation:moFlip 8s cubic-bezier(.45,.05,.3,1) infinite}.cardHost[data-play] .siteCard .bcCard:hover{animation-play-state:paused}[data-play="paused"] .bcCard{animation-play-state:paused!important}@media (prefers-reduced-motion:reduce){[data-play] .bcCard{animation:none!important;opacity:1!important;transform:none!important}}.door .siteCard .bcCard:not(.is-touched),.story__card .siteCard .bcCard:not(.is-touched){animation:moFlip 8s cubic-bezier(.45,.05,.3,1) infinite}.door .siteCard .bcCard:hover,.story__card .siteCard .bcCard:hover{animation-play-state:paused}@media (prefers-reduced-motion:reduce){.door .siteCard .bcCard,.story__card .siteCard .bcCard{animation:none!important}}.door .siteCard .bcCard:not(.is-touched),.story__card .siteCard .bcCard:not(.is-touched){animation:none}