html{background:#0C0A09}
body{margin:0;min-height:100vh;background:#FFFFFF}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
section[id]{scroll-margin-top:12px}
h1,h2,h3{text-wrap:balance}
a{color:#C2410C}a:hover{color:#9A3412}
/* wordmark: "Remo" in the text colour, "Screen" in the icon's orange gradient */
.wordmark{font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;font-weight:700;letter-spacing:-.022em;font-size:1.06em}
.wordmark>span{background:linear-gradient(180deg,#FFB067 8%,#FD9B3D 40%,#E2521B 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
a:focus-visible,summary:focus-visible{outline:2px solid #E8590C;outline-offset:3px;border-radius:6px}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
details[open] .faq-plus{transform:rotate(45deg)}
.faq-plus{transition:transform .2s ease}

/* narrower windows: the section links become one scrollable row under the logo */
@media (max-width:1179px){
  .topnav{order:3;width:100%;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;white-space:nowrap;margin:-6px 0 2px}
  .topnav::-webkit-scrollbar{display:none}
}
@media (max-width:600px){header>div{column-gap:12px!important}}
@media (max-width:420px){.lang>summary>span{display:none}}

/* language picker */
.lang{position:relative}
.lang>summary{display:flex;align-items:center;gap:6px;color:#D6CFC9;font-size:13px;padding:12px 0}
.lang>summary:hover{color:#FFFFFF}
.lang-menu{position:absolute;right:0;top:calc(100% + 2px);z-index:30;min-width:180px;padding:6px;display:grid;background:#1D1A18;border:1px solid #2E2A27;border-radius:14px;box-shadow:0 24px 48px -12px rgba(0,0,0,.6)}
.lang-menu a{display:block;padding:9px 12px;border-radius:9px;color:#D6CFC9;text-decoration:none;font-size:14px;line-height:1.3}
.lang-menu a:hover{background:#2A2522;color:#FFFFFF}
.lang-menu a[aria-current]{color:#FF8F5E;font-weight:600}

/* overview diagram: drawn at 1120 px; site.js zooms it to narrower columns, phones get a stacked list.
   Without the script it scrolls sideways; with it the box never scrolls, so the cards' entrance motion
   can't raise a scrollbar (Safari counts translated children as overflow). */
.ov-wrap{overflow-x:auto}
.ov-wrap.fit{overflow:visible}
.ov-wrap.fit-t{overflow:hidden}
.ov-wrap.fit-t>.ov{transform-origin:0 0;margin:0!important}
#overview{overflow-x:hidden;overflow-x:clip}
@media (max-width:760px){
  .ov-wrap{overflow:visible}
  .ov{width:auto!important;height:auto!important;display:flex;flex-direction:column;gap:12px}
  .ov>svg{display:none}
  .ov>.ov-i{position:static!important;width:auto!important;height:auto!important}
  .ov-lc{order:1}.ov-c1{order:2}.ov-c2{order:3}.ov-c3{order:4}.ov-hub{order:5;padding:24px!important}
  .ov-pill{order:6;align-self:center;transform:none!important;margin:4px 0}
  .ov-lm{order:7;margin-top:12px}.ov-mac{order:8}.ov-lr{order:9;margin-top:12px}.ov-reg{order:10;padding:16px 20px!important}
  .ov-c1,.ov-c2,.ov-c3{padding:16px 20px!important}
  .ov-mac img{max-width:340px}
}

/* relay deploy guide */
.guide h2{margin:48px 0 0;font-size:24px;line-height:1.3;font-weight:700;scroll-margin-top:12px}
.guide p{margin:14px 0 0;font-size:16.5px;line-height:1.75;color:#44403C}
.guide pre{margin:18px 0 0;padding:16px 18px;overflow-x:auto;background:#12100F;border-radius:14px;font-family:'SF Mono',ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:1.7;color:#E7E1DB}
.guide code{font-family:inherit}

/* wide windows (one-row header): the header stays at the top as a frosted bar */
@media (min-width:1180px){
  .site-header{position:sticky;top:0;z-index:40;background:rgba(18,16,15,.82)!important;-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
  section[id]{scroll-margin-top:64px}
}

/* motion: the hero plays once on load; site.js reveals the rest as it scrolls in.
   Everything uses translate/scale/opacity, so inline transforms stay as they are. */
@keyframes rs-rise{from{opacity:0;translate:0 26px}}
@keyframes rs-rise-dev{from{opacity:0;translate:0 72px;scale:.96}}
@media (prefers-reduced-motion:no-preference){
  .hero-txt{animation:rs-rise 1s cubic-bezier(.2,.65,.25,1) backwards}
  .hero-txt:nth-child(2){animation-delay:.08s}
  .hero-txt:nth-child(3){animation-delay:.16s}
  .hero-txt:nth-child(4){animation-delay:.24s}
  .hero-txt:nth-child(5){animation-delay:.3s}
  .hero-dev{animation:rs-rise-dev 1.3s cubic-bezier(.16,.7,.2,1) backwards}
  .hero-dev:nth-child(1){animation-delay:.32s}
  .hero-dev:nth-child(2){animation-delay:.44s}
  .hero-dev:nth-child(3){animation-delay:.56s}

  .rv{opacity:0;translate:0 32px;transition:opacity .9s cubic-bezier(.2,.65,.25,1),translate 1.1s cubic-bezier(.2,.65,.25,1),scale 1.1s cubic-bezier(.2,.65,.25,1);transition-delay:var(--rv-d,0s)}
  .rv-zoom{translate:0 48px;scale:.94}
  .rv-left{translate:-36px 0}
  .rv-right{translate:44px 0}
  .rv-pop{translate:0 12px;scale:.8;transition-timing-function:cubic-bezier(.2,.65,.25,1),cubic-bezier(.34,1.45,.64,1),cubic-bezier(.34,1.45,.64,1)}
  .rv-line{opacity:1;translate:none;scale:0 1;transform-origin:0 50%;transition-duration:.7s}
  .rv.in{opacity:1;translate:none;scale:none}
  .ov-draw{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s cubic-bezier(.45,.05,.25,1) var(--rv-d,0s)}
  .ov-draw.in{clip-path:inset(0 0 0 0)}

  /* scroll-linked: --p goes 0 → 1 while the element rises into view (site.js) */
  .sc-zoom{scale:calc(.88 + .12 * var(--p, 1));translate:0 calc((1 - var(--p, 1)) * 56px);opacity:calc(.35 + .65 * var(--p, 1));transform-origin:50% 100%}
  .hero-txt-x{translate:0 calc(var(--hp, 0) * 90px);opacity:calc(1 - var(--hp, 0) * 1.25)}
}
@media print{.rv,.sc-zoom{opacity:1!important;translate:none!important;scale:none!important}.ov-draw{clip-path:none!important}}