/* Ardos AI — shared styles, written by hand (not generated).
   1. Tokens   2. Header, menu, language switch, buttons   3. Footer
   4. Loader and first-visit intro   5. Landing page additions
   6. Static pages   7. Scroll reveal and reduced motion
   The landing page also loads app.css, its own compiled styles. To leave that app untouched,
   nothing here resets elements globally and every static-page rule starts with .page. */

/* 1. Tokens ------------------------------------------------------------- */
:root {
  --ink: #0a0c16;
  --fg: #eceef2;
  --muted: #9ba1b9;
  --subtle: #7c829c;
  --aura: #818cf8;
  /* The ten colours of the RSuite dashboard. --spectrum lines them up for bars, rules and the intro. */
  --indigo: #818cf8; --sky: #38bdf8; --teal: #2dd4bf; --green: #4ade80; --amber: #fbbf24;
  --coral: #f87171; --pink: #f472b6; --magenta: #d946a8; --blue: #3b82f6; --slate: #94a3b8;
  --spectrum: linear-gradient(90deg, var(--indigo), var(--sky), var(--teal), var(--green), var(--amber), var(--coral), var(--pink));
  --line: rgb(255 255 255 / 0.06);
  --line-2: rgb(255 255 255 / 0.1);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pad: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
}
@media (min-width: 768px) {
  :root { --pad: max(32px, env(safe-area-inset-left), env(safe-area-inset-right)); }
}
html { background: var(--ink); scrollbar-color: #2b313b var(--ink); }

/* 2. Header, menu, language switch, buttons ----------------------------- */
:where(.hdr, .mnav, .ftr, .veil, .fallback), :where(.hdr, .mnav, .ftr, .veil, .fallback) * { box-sizing: border-box; }
:where(.hdr, .mnav, .ftr) :where(ul, p, h2) { margin: 0; padding: 0; list-style: none; }
:where(.hdr, .mnav, .ftr) a { color: inherit; text-decoration: none; }
:where(.hdr, .mnav, .ftr, .veil, .page) :focus-visible { outline: 1.5px solid var(--aura); outline-offset: 3px; border-radius: 6px; }

.skip { position: fixed; left: 16px; top: -72px; z-index: 110; padding: 11px 18px; border-radius: 999px; background: var(--fg); color: var(--ink); font: 500 14px/1 var(--sans); text-decoration: none; transition: top 0.2s; }
.skip:focus { top: calc(16px + env(safe-area-inset-top)); }

.hdr { position: fixed; inset: 0 0 auto; z-index: 50; padding-top: env(safe-area-inset-top); border-bottom: 1px solid transparent; font-family: var(--sans); color: var(--fg); transition: background-color 0.5s, border-color 0.5s; }
.hdr.scrolled, .menu-open .hdr { border-bottom-color: var(--line); background: rgb(10 12 22 / 0.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1400px; height: 64px; margin: 0 auto; padding: 0 var(--pad); }
.hdr-bar { position: absolute; inset: auto 0 -1px; height: 1px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.75), #fff); box-shadow: 0 0 10px rgb(255 255 255 / 0.55); }

.logo { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--fg); }
.logo .mark { display: block; width: 22px; height: 22px; }
.logo b { font-size: 15px; font-weight: 500; letter-spacing: 0.22em; }
.logo small { display: none; margin-left: 4px; font-size: 12px; color: var(--subtle); }

.menu { display: none; align-items: center; gap: 4px; }
.menu a { display: block; padding: 9px 14px; white-space: nowrap; border-radius: 999px; font-size: 13px; color: var(--muted); transition: color 0.3s; }
.menu a:hover, .menu a[aria-current] { color: var(--fg); }
.hdr-end { display: flex; align-items: center; gap: 10px; }
.hdr .hdr-cta { display: none; }

/* Language switch: two small monospace codes split by a hairline. */
.lang { display: inline-flex; align-items: center; font: 10.5px/1 var(--mono); letter-spacing: 0.14em; color: var(--subtle); }
.lang > * { position: relative; padding: 14px 8px; }
.lang > * + *::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 10px; transform: translateY(-50%); background: rgb(255 255 255 / 0.18); }
.lang [aria-current] { color: var(--fg); }
.lang a { color: var(--subtle); transition: color 0.3s; }
.lang a:hover { color: var(--aura); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--fg); color: var(--ink); font: 500 14px/1 var(--sans); white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 10px 40px -10px rgb(129 140 248 / 0.35); transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease); }
.btn:hover { background: #fff; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.2), 0 10px 50px -8px rgb(129 140 248 / 0.5); }
.btn:active { transform: scale(0.97); }
.btn.sm { height: 36px; padding: 0 16px; font-size: 13px; }
.btn.ghost { background: none; color: var(--fg); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.btn.ghost:hover { background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25); }
.link { color: var(--fg); text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.25); text-underline-offset: 4px; transition: text-decoration-color 0.3s; }
.link:hover { text-decoration-color: var(--aura); }

.burger { display: grid; place-content: center; gap: 5px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--fg); cursor: pointer; }
.burger span { display: block; width: 16px; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform 0.35s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.mnav { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: calc(88px + env(safe-area-inset-top)) max(32px, var(--pad)) calc(40px + env(safe-area-inset-bottom)); overflow-y: auto; background: rgb(10 12 22 / 0.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-family: var(--sans); color: var(--fg); animation: mnav-in 0.3s ease; }
.mnav[hidden] { display: none; }
.mnav li a { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; font-size: 26px; letter-spacing: -0.02em; color: var(--muted); }
.mnav li a span { width: 24px; font: 11px var(--mono); letter-spacing: 0; color: var(--subtle); }
.mnav li a[aria-current] { color: var(--fg); }
.mnav .btn, .mnav .lang { align-self: flex-start; }
.mnav .lang { margin-left: -8px; font-size: 12px; }
.menu-open, .menu-open body { overflow: hidden; }
@keyframes mnav-in { from { opacity: 0; } }

@media (min-width: 640px) {
  .logo small { display: inline; }
  .hdr .hdr-cta { display: inline-flex; }
}
/* Five menu entries need 1100px in French before they fit on one line. */
@media (min-width: 1100px) {
  .menu { display: flex; }
  .burger, .mnav { display: none; }
}

/* 3. Footer ------------------------------------------------------------- */
.ftr { padding: 64px var(--pad) calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--ink); font-family: var(--sans); color: var(--fg); }
.ftr-in { max-width: 1320px; margin: 0 auto; }
.ftr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 32px; }
.ftr-brand { grid-column: 1 / -1; }
.ftr-brand p { max-width: 20rem; margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.ftr-brand .link { display: inline-block; margin-top: 20px; font-size: 14px; }
.ftr .social { display: flex; gap: 10px; margin-top: 22px; }
.ftr .social a { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted); transition: color 0.3s, border-color 0.3s; }
.ftr .social a:hover { border-color: rgb(129 140 248 / 0.5); color: var(--aura); }
.ftr h2 { font: 400 11px/1.4 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--subtle); }
.ftr h2 + ul { margin-top: 10px; }
.ftr li { font-size: 14px; line-height: 1.4; }
.ftr li a { display: inline-block; padding: 7px 0; color: var(--muted); overflow-wrap: anywhere; transition: color 0.3s; }
.ftr li a:hover { color: var(--fg); }
.ftr li.note { padding: 7px 0; font-size: 12.5px; color: var(--subtle); }
.ftr-end { display: flex; flex-direction: column; gap: 12px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.ftr-end p:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; color: rgb(236 238 242 / 0.9); }
/* The logo file is black on white: inverted, then blended so only the white drawing shows on the dark footer. */
.rways-logo { display: block; width: 88px; height: 36px; margin-left: 4px; filter: invert(1); mix-blend-mode: screen; }
.ftr-end p:last-child { font-size: 12px; line-height: 1.5; color: var(--subtle); }
@media (min-width: 768px) {
  .ftr-grid { grid-template-columns: 1.6fr repeat(3, 1fr); }
  .ftr-brand { grid-column: auto; }
  .ftr-end { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
}

/* 4. Loader and first-visit intro --------------------------------------- */
/* Hidden by default. It shows while the landing app starts, while a slow page loads, and once as the intro. */
.veil { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: var(--ink); color: var(--fg); font-family: var(--sans); text-align: center; animation: veil-failsafe 0s linear 9s forwards; }
.js [data-wait] .veil, .intro .veil, .geo .veil, .leaving .veil, .veil.on { display: flex; }
.veil.on { animation: veil-show 0.3s ease 0.25s both; }
.veil.out { opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.veil p { margin: 0; }

/* Seven soft colour spots around the centre; the intro turns the whole layer slowly. */
.veil-glow { position: absolute; left: 50%; top: 50%; width: min(130vw, 920px); aspect-ratio: 1; translate: -50% -50%; background: radial-gradient(circle at 50% 22%, rgb(129 140 248 / 0.2), transparent 30%), radial-gradient(circle at 72% 33%, rgb(56 189 248 / 0.16), transparent 28%), radial-gradient(circle at 78% 58%, rgb(45 212 191 / 0.16), transparent 28%), radial-gradient(circle at 60% 78%, rgb(74 222 128 / 0.13), transparent 26%), radial-gradient(circle at 38% 78%, rgb(251 191 36 / 0.13), transparent 26%), radial-gradient(circle at 22% 58%, rgb(248 113 113 / 0.14), transparent 28%), radial-gradient(circle at 28% 33%, rgb(244 114 182 / 0.16), transparent 28%); filter: blur(24px); opacity: 0; }
.veil-rays { position: absolute; left: 50%; top: 50%; width: min(150vw, 150vh, 1100px); aspect-ratio: 1; transform: translate(-50%, -50%); fill: none; opacity: 0; }
.veil-rays line { stroke: var(--indigo); stroke-width: 0.9; stroke-linecap: round; stroke-dasharray: 16 100; stroke-dashoffset: 16; }
.veil-mark { position: relative; width: 96px; aspect-ratio: 1; overflow: visible; fill: none; opacity: 0; animation: veil-show 0.4s ease 0.35s forwards; }
.veil-orbit { stroke: rgb(255 255 255 / 0.09); stroke-width: 0.6; transform-origin: 60px 60px; }
.veil-ring { stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 30 70; transform-origin: 60px 60px; transform: rotate(-50deg); animation: veil-spin 1.1s linear infinite; }
.veil-dot { transform-origin: 60px 60px; animation: veil-beat 1.6s ease-in-out infinite; }
.veil-pulse { stroke: var(--teal); stroke-width: 0.8; transform-origin: 60px 60px; opacity: 0; }
.veil-word, .veil-tag, .veil-line { display: none; }
.veil-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.veil-skip { position: absolute; right: var(--pad); bottom: calc(24px + env(safe-area-inset-bottom)); padding: 13px 18px; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--muted); font: 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; opacity: 0; animation: veil-show 0.5s ease 0.8s forwards; transition: color 0.3s, border-color 0.3s; }
.veil-skip:hover { border-color: rgb(255 255 255 / 0.25); color: var(--fg); }

/* The intro: the circle of the logo draws itself around the R, the tools converge on it, the name and the line follow. About 4.4 s in total. */
.intro { overflow: hidden; }
.intro .veil-glow { animation: veil-show 1.4s ease forwards, veil-turn 14s linear infinite; }
.intro .veil-mark { width: clamp(120px, 30vw, 176px); opacity: 1; animation: none; transition: transform 0.5s ease; }
.intro .veil-orbit { animation: veil-orbit 1.1s var(--ease) 0.1s both; }
.intro .veil-ring { stroke-dasharray: 100 100; animation: veil-draw 1.3s var(--ease) 0.15s both; }
.intro .veil-dot { animation: veil-pop 1s var(--ease) 0.35s both; }
.intro .veil-pulse { animation: veil-pulse 1.1s ease-out 0.95s both; }
.intro .veil-rays { opacity: 1; }
.intro .veil-rays line { animation: veil-ray 0.85s ease-in 1s both; }
.intro .veil-rays line:nth-child(2) { animation-delay: 1.06s; stroke: var(--sky); }
.intro .veil-rays line:nth-child(3) { animation-delay: 1.12s; stroke: var(--teal); }
.intro .veil-rays line:nth-child(4) { animation-delay: 1.18s; stroke: var(--green); }
.intro .veil-rays line:nth-child(5) { animation-delay: 1.24s; stroke: var(--amber); }
.intro .veil-rays line:nth-child(6) { animation-delay: 1.3s; stroke: var(--coral); }
.intro .veil-rays line:nth-child(7) { animation-delay: 1.36s; stroke: var(--pink); }
.intro .veil-rays line:nth-child(8) { animation-delay: 1.42s; stroke: var(--magenta); }
.intro .veil-word { position: relative; display: flex; margin-top: 30px; padding-left: 0.2em; font-size: clamp(30px, 8vw, 56px); font-weight: 500; line-height: 1; letter-spacing: 0.2em; transition: transform 0.5s ease; }
.intro .veil-word span { display: inline-block; color: transparent; background: linear-gradient(#fff 0%, #d7dbe2 45%, #8d95a3 100%); -webkit-background-clip: text; background-clip: text; animation: veil-letter 0.8s var(--ease) 1.45s both; }
.intro .veil-word span:nth-child(2) { animation-delay: 1.52s; }
.intro .veil-word span:nth-child(3) { animation-delay: 1.59s; }
.intro .veil-word span:nth-child(4) { animation-delay: 1.66s; }
.intro .veil-word span:nth-child(5) { animation-delay: 1.73s; }
.intro .veil-word span:nth-child(6) { animation-delay: 1.8s; }
.intro .veil-word span:nth-child(7) { animation-delay: 1.87s; }
.intro .veil-word span:nth-child(8) { animation-delay: 1.94s; }
.intro .veil-tag { position: relative; display: block; max-width: 34ch; margin: 18px var(--pad) 0; font-size: clamp(14px, 3.6vw, 17px); font-weight: 300; line-height: 1.45; color: var(--muted); animation: veil-rise 0.8s var(--ease) 2.35s both; }
.veil-tag span { display: none; }
html[lang="en"]:not([data-intro-lang]) .veil-tag [lang="en"], html[lang="fr"] .veil-tag [lang="fr"], html[data-intro-lang="fr"] .veil-tag [lang="fr"] { display: inline; }
.intro .veil-line { position: relative; display: block; width: min(220px, 50vw); height: 2px; margin-top: 26px; border-radius: 2px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, rgb(255 255 255 / 0), #fff); animation: veil-line 1.1s var(--ease) 2.5s both; }
.intro .veil.out .veil-mark, .intro .veil.out .veil-word { transform: scale(1.1); }
.veil.hold .veil-ring { stroke-dasharray: 30 70; animation: veil-spin 1.1s linear infinite; }

@keyframes veil-failsafe { to { visibility: hidden; } }
@keyframes veil-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes veil-spin { from { transform: rotate(-50deg); } to { transform: rotate(310deg); } }
@keyframes veil-beat { 50% { transform: scale(0.94); opacity: 0.75; } }
@keyframes veil-orbit { from { opacity: 0; transform: scale(0.6); } }
@keyframes veil-draw { from { stroke-dashoffset: 100; transform: rotate(-230deg); } to { stroke-dashoffset: 0; transform: rotate(-90deg); } }
@keyframes veil-pop { from { opacity: 0; transform: scale(0.82); filter: blur(10px); } }
@keyframes veil-pulse { from { opacity: 0.7; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@keyframes veil-ray { 0% { stroke-dashoffset: 16; opacity: 0; } 20% { opacity: 0.85; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes veil-letter { from { opacity: 0; transform: translateY(14px); filter: blur(14px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes veil-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes veil-line { to { transform: scaleX(1); } }
@keyframes veil-turn { to { rotate: 360deg; } }

/* 5. Landing page additions --------------------------------------------- */
/* Size of the eight-glyph name in the hero of the app (see LANDING_PATCHES in _build/build.rb). */
.hero-word { font-size: clamp(3rem, 13vw, 10.5rem); }
.home .hdr { animation: veil-rise 1s var(--ease) 0.5s both; }
/* Line under the hero name: a highlight sweeps across the letters. */
.hero-by { margin: 16px 0 0; font: 500 clamp(11px, 1.5vw, 15px)/1 var(--mono); letter-spacing: 0.34em; text-transform: uppercase; color: transparent; background: linear-gradient(90deg, #7c829c 0%, #7c829c 42%, #fff 50%, #7c829c 58%, #7c829c 100%) 100% 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; animation: by-sweep 4.5s linear 2.4s infinite; }
@keyframes by-sweep { to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .hero-by { animation: none; } }
/* Shooting stars: a fixed layer over the app that never catches a click. Each streak crosses once per cycle. */
.stars { position: fixed; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.stars i { position: absolute; left: 110%; top: 8%; width: 180px; height: 1px; border-radius: 1px; background: linear-gradient(90deg, #fff, var(--hue, var(--indigo)) 18%, transparent); opacity: 0; animation: shoot 9s linear infinite; }
.stars i:nth-child(2) { --hue: var(--teal); top: 30%; animation-duration: 13s; animation-delay: 3.5s; }
.stars i:nth-child(3) { --hue: var(--amber); top: -6%; left: 70%; animation-duration: 11s; animation-delay: 6s; }
.stars i:nth-child(4) { --hue: var(--pink); top: 52%; animation-duration: 17s; animation-delay: 9s; }
.stars i:nth-child(5) { --hue: var(--sky); top: -6%; left: 40%; animation-duration: 15s; animation-delay: 1.5s; }
.stars i:nth-child(6) { --hue: var(--green); top: 18%; animation-duration: 21s; animation-delay: 12s; }
@keyframes shoot { 0% { opacity: 0; transform: rotate(-28deg) translateX(0); } 2% { opacity: 0.9; } 14% { opacity: 0; transform: rotate(-28deg) translateX(-1500px); } 100% { opacity: 0; transform: rotate(-28deg) translateX(-1500px); } }
@media (prefers-reduced-motion: reduce) { .stars { display: none; } }
/* The landing app colours its figures and diagrams with --color-aura. Each item of a series
   (list rows, grid cards, the lines of a diagram) is given the next dashboard colour here. */
.home #root :is(ul, ol) > li:nth-child(6n + 1), .home #root [class*="grid-cols"] > :nth-child(6n + 1), .home #root svg > g:nth-child(10n + 1) { --color-aura: var(--indigo); }
.home #root :is(ul, ol) > li:nth-child(6n + 2), .home #root [class*="grid-cols"] > :nth-child(6n + 2), .home #root svg > g:nth-child(10n + 2) { --color-aura: var(--teal); }
.home #root :is(ul, ol) > li:nth-child(6n + 3), .home #root [class*="grid-cols"] > :nth-child(6n + 3), .home #root svg > g:nth-child(10n + 3) { --color-aura: var(--amber); }
.home #root :is(ul, ol) > li:nth-child(6n + 4), .home #root [class*="grid-cols"] > :nth-child(6n + 4), .home #root svg > g:nth-child(10n + 4) { --color-aura: var(--pink); }
.home #root :is(ul, ol) > li:nth-child(6n + 5), .home #root [class*="grid-cols"] > :nth-child(6n + 5), .home #root svg > g:nth-child(10n + 5) { --color-aura: var(--sky); }
.home #root :is(ul, ol) > li:nth-child(6n), .home #root [class*="grid-cols"] > :nth-child(6n), .home #root svg > g:nth-child(10n + 6) { --color-aura: var(--green); }
.home #root svg > g:nth-child(10n + 7) { --color-aura: var(--coral); }
.home #root svg > g:nth-child(10n + 8) { --color-aura: var(--magenta); }
.home #root svg > g:nth-child(10n + 9) { --color-aura: var(--blue); }
.home #root svg > g:nth-child(10n) { --color-aura: var(--slate); }
/* The area under the curve of the cockpit chart runs from sky blue to pink. */
.home #cockpit stop:first-child { stop-color: var(--sky); }
.home #cockpit stop:last-child { stop-color: var(--pink); }
/* Summary shown without JavaScript; the app replaces it when it starts. */
.fallback { max-width: 760px; margin: 0 auto; padding: 128px var(--pad) 80px; font-family: var(--sans); line-height: 1.6; color: var(--fg); }
.fallback h1 { margin: 0; font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; }
.fallback h2 { margin: 40px 0 0; font-size: 1.35rem; font-weight: 500; letter-spacing: -0.015em; }
.fallback p { margin: 12px 0 0; color: var(--muted); }
.fallback .lead { font-size: 1.125rem; }
.fallback .btn { margin-top: 28px; }

/* 6. Static pages ------------------------------------------------------- */
.page { margin: 0; overflow-x: clip; background: var(--ink); color: var(--fg); font-family: var(--sans); font-feature-settings: "ss01", "cv11"; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; }
.page main, .page main *, .page main *::before, .page main *::after { box-sizing: border-box; }
.page main { padding-top: calc(64px + env(safe-area-inset-top)); }
:where(.page main) :where(h1, h2, h3, p, ul, ol, dl, dd, dt, blockquote, table) { margin: 0; padding: 0; }
:where(.page main) :where(ul, ol) { list-style: none; }
:where(.page main) :where(p) { color: var(--muted); }
.page ::selection { color: #fff; background: #818cf840; }

.page .wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--pad); }
.page .wrap.narrow { max-width: 880px; }
.page .eyebrow { font: 11px/1.5 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--subtle); }
.page .eyebrow.spaced { margin-top: 56px; }
/* Titles are plain solid text: a gradient clipped to the letters left them invisible in some browsers. */
.page .metal { color: var(--fg); }
.page main h1 { max-width: 18ch; margin-top: 20px; font-size: clamp(2.3rem, 7.2vw, 4.75rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.page main h1 em { font-style: normal; color: var(--muted); }
.page main h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.page .eyebrow + h2 { margin-top: 16px; }
.page main h3, .page .panel h2 { font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; text-wrap: initial; }
.page .lead { max-width: 60ch; margin-top: 22px; font-size: clamp(1rem, 2.4vw, 1.125rem); text-wrap: pretty; }
.page .after { margin-top: 28px; }

.page .hero { position: relative; padding: clamp(56px, 10vw, 128px) 0 clamp(48px, 8vw, 96px); animation: veil-rise 0.9s var(--ease) both; }
.page .hero::before { content: ""; position: absolute; inset: -64px 0 0; z-index: -1; background: radial-gradient(60% 70% at 30% 0%, rgb(129 140 248 / 0.09), transparent 70%); pointer-events: none; }
.page .hero.compact { padding-bottom: 20px; }
.page .hero-split { display: grid; gap: 48px; align-items: center; }
.page .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.page section { padding: clamp(52px, 8vw, 88px) 0; border-top: 1px solid var(--line); }
.page section.flat { padding-top: 20px; border-top: 0; }
.page section.band { padding: 40px 0; text-align: center; }
.page .split { display: grid; gap: 28px; align-items: center; }

.page .grid { display: grid; gap: 16px; margin-top: 36px; }
.page .grid.flush { margin-top: 0; }
/* Each card of a grid takes the next dashboard colour for its label, tag, role and quote rule. */
.page .grid > :nth-child(6n + 1) { --hue: var(--indigo); }
.page .grid > :nth-child(6n + 2) { --hue: var(--teal); }
.page .grid > :nth-child(6n + 3) { --hue: var(--amber); }
.page .grid > :nth-child(6n + 4) { --hue: var(--pink); }
.page .grid > :nth-child(6n + 5) { --hue: var(--sky); }
.page .grid > :nth-child(6n) { --hue: var(--green); }
.page .panel { padding: clamp(22px, 3vw, 30px); border: 1px solid rgb(255 255 255 / 0.08); border-radius: 24px; background: linear-gradient(rgb(255 255 255 / 0.035), rgb(255 255 255 / 0.012)); box-shadow: inset 0 1px rgb(255 255 255 / 0.04), 0 30px 80px -40px rgb(0 0 0 / 0.8); }
.page .panel h2, .page .panel h3 { margin-top: 14px; }
.page .panel p { margin-top: 10px; font-size: 14.5px; }
.page .num { font: 11px/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hue, var(--aura)); }
.page .tag { display: inline-block; padding: 5px 11px; border: 1px solid color-mix(in srgb, var(--hue, var(--aura)) 30%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--hue, var(--aura)) 7%, transparent); font: 10.5px/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hue, var(--aura)); }
.page .panel .tag { margin-top: 18px; }
.page .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

.page .cta { text-align: center; }
.page .cta h2, .page .cta p { margin-inline: auto; }
.page .cta h2 + p { max-width: 48ch; margin-top: 14px; }
.page .cta .btn { margin-top: 28px; }

/* Onboarding */
.page .flow { display: flex; flex-direction: column; align-items: flex-start; gap: 34px; margin-top: 20px; font: 12px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.page .flow li { position: relative; padding: 11px 16px; border: 1px solid var(--line-2); border-radius: 12px; }
.page .flow li + li::before { content: "↓"; position: absolute; left: 18px; top: -27px; color: var(--hue, var(--aura)); }
.page .flow li.on { border-color: var(--hue, var(--aura)); background: color-mix(in srgb, var(--hue, var(--aura)) 10%, transparent); color: var(--hue, var(--aura)); }

/* About */
.page .banner { max-width: 26ch; font-size: clamp(1.25rem, 3.2vw, 1.9rem); font-weight: 500; line-height: 1.25; letter-spacing: 0.01em; }
.page .avatar { display: block; width: 136px; height: 136px; margin: 0 auto 6px; border: 2px solid var(--hue, var(--aura)); border-radius: 999px; object-fit: cover; object-position: 50% 30%; }
.page .panel .role { margin-top: 6px; font: 10.5px/1.5 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--hue, var(--aura)); }
.page .panel blockquote { margin-top: 18px; padding-left: 14px; border-left: 2px solid var(--hue, var(--aura)); font-size: 14.5px; color: rgb(236 238 242 / 0.9); }

/* Contact */
.page .booking { min-height: 420px; margin-top: 20px; padding: 0; overflow: hidden; }
.page .booking noscript p { padding: 28px; }

/* Legal pages */
.page .legal { max-width: 760px; }
.page .legal h2 { margin-top: 44px; font-size: 21px; letter-spacing: -0.015em; }
.page .legal p { margin-top: 12px; }
.page .legal .lead { margin-top: 22px; }
.page .legal .after { margin-top: 44px; }

/* Dashboard page */
.page .ticker { position: relative; min-height: 3.4em; margin-top: 36px; font: 11.5px/1.7 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--subtle); }
.page .ticker li { position: absolute; inset: 0 0 auto; opacity: 0; animation: tick 16s infinite; }
.page .ticker li:nth-child(2) { animation-delay: 4s; }
.page .ticker li:nth-child(3) { animation-delay: 8s; }
.page .ticker li:nth-child(4) { animation-delay: 12s; }
.page .ticker b { font-weight: 500; color: var(--hue, var(--aura)); }
@keyframes tick { 0% { opacity: 0; transform: translateY(6px); } 3%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-6px); } }

.page .dash { padding: 0; overflow: hidden; }
.page .dash-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 11px/1.4 var(--mono); color: var(--subtle); }
.page .dash-dots { display: flex; gap: 5px; }
.page .dash-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgb(255 255 255 / 0.14); }
.page .dash-url { flex: 1; min-width: 0; padding: 5px 12px; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / 0.04); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.page .dash-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: var(--aura); }
.page .dash-live i, .page .dash-line i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--aura); box-shadow: 0 0 12px rgb(129 140 248 / 0.8); animation: live 2.4s ease-in-out infinite; }
@keyframes live { 50% { opacity: 0.35; } }
.page .dash-body { display: grid; }
.page .dash-nav { display: flex; gap: 6px; padding: 12px 16px; overflow-x: auto; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); scrollbar-width: none; }
.page .dash-nav::-webkit-scrollbar { display: none; }
.page .dash-nav li { flex: none; padding: 7px 12px; border-radius: 10px; white-space: nowrap; }
.page .dash-nav li.on { background: rgb(255 255 255 / 0.06); color: var(--fg); }
.page .dash-main { min-width: 0; padding: 16px; }
.page .dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.page .dash-tiles div { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgb(255 255 255 / 0.02); }
.page .dash-tiles dt { font: 10px/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--subtle); }
.page .dash-tiles dd b { display: block; margin-top: 8px; font-size: clamp(1.5rem, 5vw, 2.1rem); font-weight: 500; line-height: 1; letter-spacing: -0.03em; }
.page .dash-tiles dd span { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.page .dash-line { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; padding: 12px 14px; border: 1px solid rgb(129 140 248 / 0.22); border-radius: 14px; background: rgb(129 140 248 / 0.05); font-size: 13px; line-height: 1.5; color: rgb(236 238 242 / 0.92); }
.page .dash-feed { margin-top: 12px; }
.page .dash-feed li { display: flex; align-items: baseline; gap: 12px; padding: 9px 2px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.page .dash-feed time { flex: none; font: 11px var(--mono); color: var(--subtle); }
.page .dash-feed span { flex: 1; min-width: 0; }
.page .dash-feed li::after { content: ""; flex: none; align-self: center; width: 7px; height: 7px; border: 1px solid rgb(255 255 255 / 0.3); border-radius: 50%; }
.page .dash-feed li.done::after { border-color: var(--hue, var(--aura)); background: var(--hue, var(--aura)); }

/* Figures and diagrams of the static pages take one dashboard colour per item. */
.page :is(.dash-tiles, .stats) > :nth-child(4n + 1), .page :is(.ticker, .flow, .dash-feed, .chips) > :nth-child(6n + 1) { --hue: var(--indigo); }
.page :is(.dash-tiles, .stats) > :nth-child(4n + 2), .page :is(.ticker, .flow, .dash-feed, .chips) > :nth-child(6n + 2) { --hue: var(--teal); }
.page :is(.dash-tiles, .stats) > :nth-child(4n + 3), .page :is(.ticker, .flow, .dash-feed, .chips) > :nth-child(6n + 3) { --hue: var(--amber); }
.page :is(.dash-tiles, .stats) > :nth-child(4n), .page :is(.ticker, .flow, .dash-feed, .chips) > :nth-child(6n + 4) { --hue: var(--pink); }
.page :is(.ticker, .flow, .dash-feed, .chips) > :nth-child(6n + 5) { --hue: var(--sky); }
.page :is(.ticker, .flow, .dash-feed, .chips) > :nth-child(6n) { --hue: var(--green); }
.page .dash-tiles div { border-top: 2px solid var(--hue); }
.page .dash-tiles dd b, .page .stats dd { color: var(--hue); }
.page .dash-dots i:nth-child(1) { background: var(--coral); }
.page .dash-dots i:nth-child(2) { background: var(--amber); }
.page .dash-dots i:nth-child(3) { background: var(--green); }
.page .flow li { border-color: color-mix(in srgb, var(--hue) 45%, transparent); color: var(--hue); }
.page .chips li { border-color: color-mix(in srgb, var(--hue) 40%, transparent); }
.page .chips li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--hue); }
.page .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.page .chips li { padding: 9px 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13.5px; color: var(--muted); }
.page .count { margin-top: 36px; font: clamp(1rem, 3.4vw, 1.5rem)/1.3 var(--mono); letter-spacing: 0.04em; color: var(--aura); }
.page .panel.note { margin: 0; border-color: rgb(129 140 248 / 0.22); font-size: 15px; color: rgb(236 238 242 / 0.9); }
.page .panel .term { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgb(0 0 0 / 0.35); font: 12px/1.6 var(--mono); }
.page .term b { font-weight: 400; color: var(--aura); }
.page .point { display: flex; align-items: flex-start; gap: 18px; }
.page .point .ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgb(129 140 248 / 0.3); border-radius: 12px; background: rgb(129 140 248 / 0.07); font: 13px var(--mono); color: var(--aura); }
.page .point h3 { margin-top: 0; }
.page .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--line); }
.page .stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; }
.page .stats dd { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 500; line-height: 1; letter-spacing: -0.04em; }
.page .stats dt { max-width: 24ch; font-size: 13.5px; line-height: 1.45; color: var(--muted); }

.page .compare { width: 100%; margin-top: 36px; border-collapse: collapse; font-size: 14.5px; }
.page .compare th, .page .compare td { padding: 16px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.page .compare thead th { font: 11px/1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--subtle); }
.page .compare thead th:nth-child(2) { color: var(--aura); }
.page .compare tbody th { width: 21%; color: var(--muted); }
.page .compare td { color: var(--muted); }
.page .compare td:nth-child(2) { background: rgb(129 140 248 / 0.04); color: var(--fg); }
.page .compare td.weak { color: var(--subtle); }

.page .faq { margin-top: 28px; border-top: 1px solid var(--line); }
.page .faq details { border-bottom: 1px solid var(--line); }
.page .faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 17px; line-height: 1.4; list-style: none; cursor: pointer; }
.page .faq summary::-webkit-details-marker { display: none; }
.page .faq summary::after { content: "+"; flex: none; font: 18px/1.3 var(--mono); color: var(--aura); transition: transform 0.3s var(--ease); }
.page .faq details[open] summary::after { transform: rotate(45deg); }
.page .faq details p { max-width: 64ch; padding-bottom: 22px; }
.page .hosters { margin-top: 12px; font-size: 20px; letter-spacing: -0.01em; color: var(--fg); }

@media (max-width: 760px) {
  /* The comparison table becomes one card per criterion, each value labelled with its column. */
  .page .compare, .page .compare tbody, .page .compare tr, .page .compare th, .page .compare td { display: block; width: auto; }
  .page .compare thead { display: none; }
  .page .compare tr { padding: 18px 0; border-bottom: 1px solid var(--line); }
  .page .compare tbody th { padding: 0 0 10px; border: 0; font-size: 16px; color: var(--fg); }
  .page .compare td, .page .compare td:nth-child(2) { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 12px; padding: 7px 0; border: 0; background: none; }
  .page .compare td::before { content: attr(data-col); font: 10px/1.7 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--subtle); }
  .page .compare td:nth-child(2)::before { color: var(--aura); }
}
@media (min-width: 640px) {
  .page .dash-body { grid-template-columns: 168px minmax(0, 1fr); }
  .page .dash-nav { flex-direction: column; overflow: visible; border-right: 1px solid var(--line); border-bottom: 0; }
  .page .flow { flex-direction: row; align-items: center; gap: 40px; }
  .page .flow li + li::before { content: "→"; left: -27px; top: 50%; transform: translateY(-50%); }
}
@media (min-width: 700px) {
  .page .grid.c2, .page .grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .page .grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page .split { grid-template-columns: 1.3fr 1fr; gap: 56px; }
  .page .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .page .hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; }
  .page .hero-split h1 { font-size: clamp(2.5rem, 4.6vw, 4.1rem); }
}
@media (min-width: 1100px) {
  .page .grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 7. Scroll reveal and reduced motion ----------------------------------- */
/* site.js adds .reveal to <html>, so content stays visible when JavaScript is off. */
.reveal [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal [data-reveal].in { opacity: 1; transform: none; }
.reveal .grid > [data-reveal]:nth-child(2) { transition-delay: 0.08s; }
.reveal .grid > [data-reveal]:nth-child(3) { transition-delay: 0.16s; }
.reveal .grid > [data-reveal]:nth-child(4) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .page main *, .hdr, .hdr *, .mnav, .veil *, .page .hero { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .page .ticker li { animation: none !important; }
  .page .ticker li:first-child { opacity: 1; }
}