/* Session Updater for rxdoc files — site styles.
 *
 * Palette lifted from the app's own theme.rs, so the site and the thing it
 * sells look like the same object: chassis #0E1116, panel #161A21, mint accent
 * #5EEAD4, and the waveform colours used as semantic accents where a page
 * needs to distinguish kept from dropped work.
 *
 * Single-theme on purpose, and dark: the app screenshots are light, so a dark
 * page frames each one as a window sitting on a desktop rather than bleeding
 * into the page around it. */

:root {
  --chassis:   #0e1116;
  --panel:     #161a21;
  --card:      #1c2129;
  --line:      #262d37;
  --line-soft: #1f252e;
  --ink:       #e7ecf1;
  --muted:     #98a4b1;
  --faint:     #6f7c89;
  --accent:    #5eead4;
  --accent-dim:#16302e;
  --accent-ink:#0b2b28;
  --kept:      #4ade80;
  --dropped:   #f87171;
  --amber:     #fbbf24;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --measure: none;
  --gutter: clamp(1.1rem, 4vw, 2.25rem);
}

* { 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(--chassis);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 48rem; margin: 0 auto; padding: 0 var(--gutter); }
.prose { max-width: var(--measure); }

p { margin: 0 0 1.05em; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -.018em;
}

code, .mono { font-family: var(--mono); font-size: .88em; }
code { background: var(--panel); padding: .1em .35em; border-radius: 3px; }

.eyebrow {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ------------------------------------------------------------------- nav -- */
header.site {
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--chassis) 92%, transparent);
  backdrop-filter: blur(8px);
}

header.site .bar {
  display: flex; align-items: center; gap: 1.4rem;
  padding: .85rem 0; flex-wrap: wrap;
}

.brand {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: -.015em; color: var(--ink); text-decoration: none;
  margin-right: auto;
  display: inline-flex; align-items: center; gap: .6rem;
  /* Without this the text keeps the body's 1.62 line-height, so its line box
     is much taller than the glyphs and centring the mark against that box
     leaves the mark sitting visibly high. Collapsing the line box to the
     glyphs is what makes `align-items: center` mean what it looks like. */
  line-height: 1;
}
/* The product mark: a waveform whose middle section is emphasised — the
   swapped-in region. Same artwork and same accent as the app icon, so the
   site and the thing it sells read as one object. */
.brand-mark { display: block; flex: 0 0 auto; width: 30px; height: 30px; }

/* The header is the only place the mark appears at small size, so give the
   bar enough height that a 30px mark does not crowd the rule beneath it. */
header.site .bar { padding: 1rem 0; }
.brand span { color: var(--accent); }

nav.site a {
  font-family: var(--display); font-size: .88rem; font-weight: 500;
  color: var(--muted); text-decoration: none; margin-left: 1.15rem;
}
nav.site a:hover, nav.site a.active { color: var(--ink); }
nav.site a.active { color: var(--accent); }

/* ------------------------------------------------------------------ hero -- */
.hero { padding: clamp(3rem, 9vw, 5.5rem) 0 2.5rem; }
.hero h1 {
  font-size: clamp(2rem, 5.2vw, 3rem);
  font-weight: 700;
  margin-bottom: 1rem;
}
.hero .lede {
  font-size: clamp(1.08rem, 2.2vw, 1.24rem);
  color: var(--muted);
  max-width: 46ch;
}

.cta-row { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin-top: 1.8rem; }

.btn {
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  padding: .68rem 1.35rem; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent);
  color: var(--accent-ink); text-decoration: none; display: inline-block;
}
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--faint); }

/* Both hero actions use this size, so download and buy carry equal visual
   weight; download leads by being listed first and by appearing three times
   (hero, its own section, and once more at the end) against buy's once.
   Prominence rather than persuasion — the wording stays factual. */
.btn-lg { font-size: 1.06rem; padding: .85rem 1.75rem; border-radius: 8px; }

.getbox {
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 11px;
  padding: 1.5rem 1.6rem;
  margin: 1.4rem 0 1.8rem;
  text-align: center;
}
.getbox-meta {
  margin: .9rem 0 0; color: var(--muted); font-size: .9rem;
}

.note-inline { color: var(--faint); font-size: .88rem; }

/* --------------------------------------------------------------- section -- */
section { padding: 2.75rem 0; border-top: 1px solid var(--line-soft); scroll-margin-top: 4.5rem; }
section:first-of-type { border-top: 0; }
section > h2 {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  margin-bottom: 1.1rem;
}
section > .eyebrow { display: block; margin-bottom: .5rem; }

h3 { font-size: 1.05rem; margin: 1.8rem 0 .5rem; }

/* ----------------------------------------------------------------- cards -- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 1.15rem 1.25rem;
}
.card h3 { margin: 0 0 .45rem; font-size: 1rem; }
.card p { margin: 0; font-size: .93rem; color: var(--muted); }

/* -------------------------------------------------------------- figures -- */
figure { margin: 1.6rem 0 0; }
figure img {
  max-width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 9px;
}
figcaption { color: var(--faint); font-size: .86rem; margin-top: .55rem; }

/* --------------------------------------------------------------- pricing -- */
.pricebox {
  background: var(--panel);
  border: 1px solid var(--accent);
  border-radius: 11px;
  padding: 1.6rem 1.7rem;
  max-width: 30rem;
}
.pricebox .amount {
  font-family: var(--display); font-weight: 700;
  font-size: 2.6rem; line-height: 1; letter-spacing: -.03em;
}
.pricebox .amount small {
  font-size: .85rem; font-weight: 500; color: var(--muted);
  letter-spacing: 0; margin-left: .5rem;
}
.pricebox ul { margin: 1.2rem 0 1.4rem; padding-left: 1.1rem; }
.pricebox li { margin-bottom: .4rem; color: var(--muted); font-size: .95rem; }
.pricebox li::marker { color: var(--accent); }

/* ---------------------------------------------------------------- callout -- */
.callout {
  border-left: 3px solid var(--accent);
  background: var(--accent-dim);
  border-radius: 0 7px 7px 0;
  padding: .95rem 1.15rem;
  margin: 1.5rem 0;
  max-width: var(--measure);
}
.callout p { margin: 0; font-size: .95rem; }
.callout p + p { margin-top: .6rem; }

.callout.plain { background: var(--panel); border-left-color: var(--faint); }

/* ------------------------------------------------------------------ list -- */
ul.plain { list-style: none; padding: 0; margin: 1rem 0 0; max-width: var(--measure); }
ul.plain li {
  padding-left: 1.5rem; position: relative; margin-bottom: .65rem; color: var(--muted);
}
ul.plain li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent);
}
ul.plain strong { color: var(--ink); font-weight: 600; }

/* ----------------------------------------------------------------- terms -- */
.legal { max-width: var(--measure); }
.legal h2 { font-size: 1.12rem; margin: 2rem 0 .5rem; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--muted); }
.legal strong { color: var(--ink); }
.legal .updated { color: var(--faint); font-size: .88rem; }

/* ---------------------------------------------------------------- footer -- */
footer.site {
  border-top: 1px solid var(--line);
  margin-top: 3rem;
  padding: 2rem 0 3rem;
  color: var(--faint);
  font-size: .88rem;
}
footer.site nav { margin-bottom: 1rem; display: flex; gap: 1.2rem; flex-wrap: wrap; }
footer.site nav a { font-family: var(--display); font-size: .87rem; color: var(--muted); text-decoration: none; }
footer.site nav a:hover { color: var(--ink); }
footer.site .disclaimer { max-width: var(--measure); line-height: 1.55; }

.scroller { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 26rem; font-size: .93rem; }
th, td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { font-family: var(--display); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
td { color: var(--muted); }
td strong { color: var(--ink); }

/* Ordered lists appear only in the install steps. */
.prose ol { color: var(--muted); padding-left: 1.25rem; margin: .5rem 0 1.05em; }
.prose ol li { margin-bottom: .4rem; }