/* Shared shell for RutaLive's pages at rutalive.fusiqo.com.
   A separate stylesheet, unlike the fusiqo.com apex landing which inlines
   everything.
   That page inlines its styles because it is the first impression and one
   response is the whole point; these are documents a store reviewer opens
   once, and four copies of the same CSS is the worse trade.

   It is a copy of El Impostor's sheet, not a shared one, and deliberately:
   the two apps differ only in their accent, and sharing the file would mean
   one app's restyle silently restyles the other. The tokens below are
   RutaLive's brand colour as declared in apps/ruta-live/app.yaml. */
:root {
  --ink: #0b1220;
  --ink-soft: #4b5563;
  --ink-faint: #9aa3af;
  --paper: #ffffff;
  --paper-warm: #f7f7fe;
  --line: #e6e6f2;
  --accent: #6d5ef8;
  --accent-dark: #5344e4;
  --radius: 14px;
  --measure: 66ch;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { width: min(760px, 100% - 2.5rem); margin-inline: auto; }
a { color: var(--accent-dark); }
a:hover { color: var(--accent); }

header {
  border-bottom: 1px solid var(--line);
  background: var(--paper-warm);
}
nav {
  display: flex; align-items: center; gap: 1.4rem;
  padding: .9rem 0; flex-wrap: wrap;
}
/* The mark is the product now, not the studio: this site is its own domain,
   so the top-left link goes to `/` and fusiqo is one more nav item. The icon
   is inline SVG rather than icon.png so the header paints with the document
   instead of waiting on the store asset. */
.logo {
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em;
  text-decoration: none; color: var(--ink); margin-right: auto;
  display: inline-flex; align-items: center; gap: .55rem;
}
.logo svg { display: block; border-radius: 7px; }
nav a.nav-link {
  text-decoration: none; color: var(--ink-soft); font-size: .93rem;
}
nav a.nav-link:hover { color: var(--ink); }

main { padding: clamp(2.5rem, 7vw, 4.5rem) 0 clamp(3rem, 8vw, 5rem); }

h1 {
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  line-height: 1.12; letter-spacing: -.03em; font-weight: 700;
  margin: 0 0 .6rem;
}
.updated {
  color: var(--ink-faint); font-size: .9rem; margin: 0 0 2.6rem;
}
h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  line-height: 1.25; letter-spacing: -.02em; font-weight: 700;
  margin: 2.8rem 0 .8rem;
}
h3 {
  font-size: 1.03rem; font-weight: 650;
  margin: 1.8rem 0 .5rem;
}
p, li { max-width: var(--measure); color: var(--ink-soft); }
p { margin: 0 0 1.05rem; }
li { margin-bottom: .5rem; }
strong { color: var(--ink); font-weight: 650; }

.lede {
  font-size: 1.1rem; color: var(--ink-soft);
  max-width: var(--measure); margin: 0 0 2rem;
}

.callout {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  margin: 1.8rem 0;
}
.callout p:last-child { margin-bottom: 0; }

table {
  width: 100%; border-collapse: collapse; margin: 1.4rem 0;
  font-size: .95rem;
}
th, td {
  text-align: left; padding: .7rem .8rem;
  border-bottom: 1px solid var(--line); vertical-align: top;
  color: var(--ink-soft);
}
th { color: var(--ink); font-weight: 650; }

footer {
  border-top: 1px solid var(--line);
  padding: 2rem 0 3rem;
  color: var(--ink-faint); font-size: .9rem;
}
footer a { color: var(--ink-soft); text-decoration: none; }
footer a:hover { color: var(--ink); }
.footer-links { display: flex; gap: 1.3rem; flex-wrap: wrap; margin-bottom: .9rem; }