/* SITE-44: the redesign's basics for the document pages (features, car link,
   support, privacy, beta). The same glass, dusk and faint Vancouver as the
   concept home page, without its key-on and drive. Loaded after styles.css. */
:root {
  --glass: rgba(30,30,34,.52); --glass-edge: rgba(255,255,255,.16);
  --warm: #F0B04A;
}

/* The sky and the city sit behind the page: the canvas carries the page colour, not body. */
body { background: transparent; }
/* On a page shorter than the window, the footer still sits at the bottom. */
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; position: relative; }
/* The sky never runs past the end of the page: on a short page it would stretch the scroll below the footer. */
.r-sky { max-height: 100%; }
body > main { flex: 1 0 auto; }

/* The nav is the same liquid glass as the cards. */
.nav { background: var(--glass); border: 1px solid var(--glass-edge); position: relative;
  backdrop-filter: blur(24px) saturate(1.7); -webkit-backdrop-filter: blur(24px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.04), 0 10px 40px -20px rgba(0,0,0,.8); }
.nav::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(170deg, rgba(255,255,255,.08), rgba(255,255,255,0) 45%); }
/* The open phone menu sits over text, so its glass is dense enough to read on. */
@media (max-width: 760px) { .nav-links { background: rgba(28,28,32,.95); border-color: var(--glass-edge);
  backdrop-filter: blur(30px) saturate(1.7); -webkit-backdrop-filter: blur(30px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 24px 50px -20px rgba(0,0,0,.7); } }

/* The footer is glass too: the city runs on under it to the bottom of the page. */
.footer { background: var(--glass); border-top: 1px solid var(--glass-edge); border-radius: 36px 36px 0 0; margin-top: 40px;
  backdrop-filter: blur(24px) saturate(1.7); -webkit-backdrop-filter: blur(24px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 -24px 50px -20px rgba(0,0,0,.6); }
/* The footer runs on to the bottom of the screen. Past the end of the page (and in overscroll)
   Safari paints only the page colour and fixed layers, so the fixed city showed through under
   the footer and its toolbar. Once the footer is well in view the city fades out and the page
   colour eases to the colour the footer's glass reads as. A fade, not a tracked edge: anything
   positioned per scroll lags a frame behind iOS scrolling. */
html { transition: background-color .8s ease-out; }
html.r-end { background-color: #16171b; }
html.r-end #r-city.on { opacity: 0; transition: opacity .8s ease-out; }
/* One Pro badge across the site: the white pill. */
body .ft-pro, body .cl-pro, body .r-pro { display: inline-block; padding: 3px 8px; border-radius: 999px; background: #fff; color: #000 !important;
  font: 900 italic 11px/1.1 var(--display); letter-spacing: 0; text-transform: uppercase; vertical-align: 2px; white-space: nowrap; }
.footer::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(170deg, rgba(255,255,255,.06), rgba(255,255,255,0) 30%); }

/* The night sky at the top of the page, fading out over the screens below it. */
.r-sky { position: absolute; left: 0; right: 0; top: 0; height: 300vh; height: 300svh; z-index: -1; pointer-events: none;
  background: radial-gradient(1000px 620px at 72% 30%, rgba(74, 99, 120, .34), transparent 70%),
              linear-gradient(180deg, #03060b 0%, #08111b 14%, #0e1a27 26%, #142233 34%, rgba(20, 34, 51, .78) 46%, rgba(16, 26, 38, .45) 62%, rgba(12, 16, 22, .18) 80%, rgba(10, 10, 10, 0) 100%); }
.r-sky svg { position: absolute; inset: 0 0 auto; width: 100%; height: 30%; max-width: none; }

/* The paywall's faint Vancouver (CAL-1553), drawn as tiles that only move. */
#r-city { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 0; transition: opacity 1.1s ease-out; contain: strict; }
#r-city.on { opacity: 1; }
/* Safari 26+ draws the page on under its glass toolbar, below the viewport: the city runs on past the bottom. */
#r-city { bottom: -160px; }
#r-cityTiles { position: absolute; left: 0; top: 0; will-change: transform; }
#r-cityTiles canvas { position: absolute; width: 512px; height: 512px; max-width: none; }

/* The page's text sits in glass cards, one per section; the title stays on the sky. */
.r-card { position: relative; border-radius: 32px; background: var(--glass); border: 1px solid var(--glass-edge);
  backdrop-filter: blur(24px) saturate(1.7); -webkit-backdrop-filter: blur(24px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.04), 0 24px 50px -20px rgba(0,0,0,.7); }
.r-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(170deg, rgba(255,255,255,.08), rgba(255,255,255,0) 38%); }
.r-doc-card { margin: 28px 0 0; padding: clamp(22px, 4.5vw, 44px); }
.r-doc-card > :first-child { margin-top: 0; }
/* The live pages rule a line above each section heading; in a card, the card's edge does that. */
.doc .r-doc-card > h2:first-child { border-top: 0; padding-top: 0; }
.r-doc-card > :last-child { margin-bottom: 0; }
.r-doc-head { margin-bottom: 8px; }
/* SITE-46: with English, French and Italian, a page links to the other two: the pills sit together
   on the right of the eyebrow row and wrap under each other only if the row runs out of room. */
.doc-langs { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
@media (max-width: 560px) { .r-doc-card { margin-left: -4px; margin-right: -4px; border-radius: 26px; } }

@media (prefers-reduced-motion: reduce) { #r-city { transition: none; } }

/* The smallest phones (about 320 wide): long buttons wrap rather than run past the glass. */
@media (max-width: 380px) {
  .r-doc-card .btn { white-space: normal; height: auto; min-height: 48px; padding-top: 10px; padding-bottom: 10px; text-align: center; max-width: 100%; }
}