/* Monstera PDF Editor, monsterapdf.com
   One stylesheet, no framework, no JavaScript. Dark on every page. */

/* ---------- Fonts, self hosted ---------- */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric matched fallbacks so the swap does not shift the layout */
@font-face {
  font-family: "Inter Fallback";
  src: local("Segoe UI"), local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
}

@font-face {
  font-family: "Instrument Fallback";
  src: local("Segoe UI Semibold"), local("Arial");
  size-adjust: 98%;
}

/* ---------- Tokens ---------- */

:root {
  --void: #050c07;
  --ink: #0a150e;
  --green: #2be067;
  --green-hi: #5cff8d;
  --lime: #c6ff4f;
  --coral: #ff7a54;
  --text: #f3fbf5;
  --read: #cfe0d4;
  --muted: #8ba394;
  --surface: rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .06);
  --edge: rgba(255, 255, 255, .09);
  --edge-strong: rgba(255, 255, 255, .16);
  --on-green: #04240f;

  --font-display: "Instrument Sans", "Instrument Fallback", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Inter Fallback", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Consolas", monospace;

  --r-card: 18px;
  --r-prose: 20px;
  --r-shot: 22px;
  --r-panel: 28px;
  --r-pill: 999px;

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  color-scheme: dark;
}

/* ---------- Base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  background: var(--void);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--void);
  color: var(--read);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
}

/* Ambient glows, fixed behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vmax 45vmax at 0% 0%, rgba(43, 224, 103, .13), transparent 62%),
    radial-gradient(50vmax 38vmax at 100% 0%, rgba(255, 122, 84, .09), transparent 60%),
    radial-gradient(60vmax 40vmax at 50% 105%, rgba(198, 255, 79, .07), transparent 62%);
}

main { flex: 1 0 auto; }

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--text);
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--green-hi);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .15s var(--ease), text-decoration-color .15s var(--ease);
}
a:hover { color: var(--lime); }

strong { color: var(--text); font-weight: 600; }

code, kbd {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--surface-2);
  border: 1px solid var(--edge);
  border-radius: 6px;
  padding: .08em .38em;
  color: var(--text);
  overflow-wrap: anywhere;
}

pre {
  font-family: var(--font-mono);
  font-size: .88rem;
  line-height: 1.6;
  background: var(--void);
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  color: var(--text);
  margin: 1.2em 0;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }

::selection { background: rgba(43, 224, 103, .35); color: var(--text); }

/* Focus, visible on every interactive element */
:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible,
.chip:focus-visible { border-radius: var(--r-pill); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  background: var(--lime);
  color: var(--on-green);
  font-weight: 600;
  padding: .7rem 1.1rem;
  border-radius: var(--r-pill);
  text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--on-green); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Buttons ---------- */

.btn {
  --lift: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 48px;
  padding: .75rem 1.35rem;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  transform: translateY(calc(var(--lift) * -1));
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-primary {
  color: var(--on-green);
  background: linear-gradient(180deg, var(--green-hi), var(--green));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 10px 34px -10px rgba(43, 224, 103, .7),
    0 2px 6px -2px rgba(43, 224, 103, .45);
}
.btn-primary:hover {
  --lift: 2px;
  color: var(--on-green);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 16px 44px -10px rgba(43, 224, 103, .8),
    0 3px 10px -2px rgba(43, 224, 103, .5);
}

.btn-secondary {
  color: var(--text);
  background: var(--surface);
  border-color: var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.btn-secondary:hover {
  --lift: 2px;
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--edge-strong);
}

.btn-sm { min-height: 40px; padding: .5rem 1rem; font-size: .9rem; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}
.actions--center { justify-content: center; }

/* ---------- Header and navigation ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 12, 7, .66);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--edge);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -0.03em;
  margin-right: auto;
}
.brand:hover { color: var(--text); }
.brand-mark {
  width: 34px;
  height: 34px;
  flex: none;
  /* The mark is green on a near black green page, so a thin light edge and a soft
     green glow keep its outline readable at this small size */
  filter: drop-shadow(0 0 .75px rgba(214, 255, 226, .75)) drop-shadow(0 0 9px rgba(43, 224, 103, .35));
}

.nav-links {
  display: flex;
  align-items: center;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-size: .93rem;
  font-weight: 500;
  padding: .45rem .8rem;
  border-radius: var(--r-pill);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.nav-links a:hover { color: var(--text); background: var(--surface); }
.nav-links a[aria-current="page"] { color: var(--text); background: var(--surface-2); }

.nav-desktop { display: flex; align-items: center; gap: 1rem; }

/* Mobile navigation, a details element so it works without scripting */
.nav-mobile { display: none; position: relative; }
.nav-mobile > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem .95rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--edge);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: .92rem;
  cursor: pointer;
  user-select: none;
}
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-mobile > summary svg { width: 18px; height: 18px; }
.nav-mobile .icon-close { display: none; }
.nav-mobile[open] .icon-open { display: none; }
.nav-mobile[open] .icon-close { display: block; }

.nav-mobile-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(300px, calc(100vw - 32px));
  padding: .6rem;
  background: rgba(10, 21, 14, .97);
  border: 1px solid var(--edge-strong);
  border-radius: var(--r-card);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
}
.nav-mobile-panel .nav-links { flex-direction: column; align-items: stretch; gap: 2px; }
.nav-mobile-panel .nav-links a { padding: .75rem .9rem; border-radius: 12px; font-size: 1rem; color: var(--read); }
.nav-mobile-panel .btn { width: 100%; margin-top: .5rem; }

@media (max-width: 860px) {
  .nav-desktop { display: none; }
  .nav-mobile { display: block; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  text-align: center;
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .3rem .95rem .3rem .3rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--edge);
  color: var(--read);
  font-size: .9rem;
  margin-bottom: 1.75rem;
  max-width: 100%;
}
.badge-tag {
  background: var(--lime);
  color: #1b2600;
  font-weight: 700;
  font-size: .8rem;
  padding: .22rem .65rem;
  border-radius: var(--r-pill);
}

.display {
  font-size: clamp(2.9rem, 1.4rem + 6.4vw, 6.4rem);
  line-height: .98;
  letter-spacing: -0.045em;
  max-width: 13ch;
  margin-inline: auto;
}
.display .line { display: block; }

/* The claim under the product name: second tier, not a second headline */
.hero-claim {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.14;
  color: var(--text);
  font-size: clamp(1.45rem, 1.1rem + 1.45vw, 2.35rem);
  margin-top: 1.1rem;
  max-width: 20ch;
}

/* The only gradient text on the whole site */
.gradient-text {
  background: linear-gradient(95deg, var(--green) 5%, var(--lime) 52%, var(--coral) 98%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-bottom: .06em;
}

@media (max-width: 400px) {
  .display { font-size: 2.55rem; }
}

.hero-claim { margin-inline: auto; }

/* Features page hero: text only, centred */
.hero--center { padding-bottom: clamp(1rem, 2vw, 2rem); }
.hero--center .hero-copy { max-width: 820px; margin-inline: auto; }
.hero--center .meta-row-features { justify-content: center; }

.lede {
  font-size: clamp(1.06rem, 1rem + .35vw, 1.25rem);
  color: var(--read);
  max-width: 40ch;
  margin: 1.6rem auto 2.2rem;
  line-height: 1.55;
}

.fineprint {
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: .88rem;
}

/* Screenshot frame */
.shot-wrap {
  position: relative;
  margin: clamp(3rem, 2rem + 4vw, 5rem) auto 0;
  max-width: 1120px;
}
.shot-wrap::before {
  content: "";
  position: absolute;
  inset: 8% 6% -6%;
  z-index: -1;
  background:
    radial-gradient(50% 55% at 50% 40%, rgba(43, 224, 103, .42), transparent 72%),
    radial-gradient(35% 40% at 88% 70%, rgba(255, 122, 84, .18), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.shot {
  position: relative;
  padding: 1px;
  border-radius: var(--r-shot);
  background: linear-gradient(160deg, rgba(92, 255, 141, .7), rgba(255, 255, 255, .08) 30%, rgba(255, 255, 255, .05) 65%, rgba(255, 122, 84, .5));
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .9);
}
.shot-inner {
  border-radius: calc(var(--r-shot) - 1px);
  overflow: hidden;
  background: var(--ink);
}
.titlebar {
  display: flex;
  align-items: center;
  gap: .6rem;
  height: 38px;
  padding-inline: 14px 0;
  background: #0d1a11;
  border-bottom: 1px solid var(--edge);
  color: var(--muted);
  font-size: .78rem;
  text-align: left;
}
.titlebar-mark { width: 16px; height: 16px; }
.titlebar-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titlebar-controls { display: flex; height: 100%; }
.titlebar-controls span {
  width: 46px;
  display: grid;
  place-items: center;
}
.titlebar-controls svg { width: 10px; height: 10px; stroke: var(--muted); }
@media (max-width: 520px) {
  .titlebar-controls span { width: 30px; }
}
/* The screenshot only. Without :not() this also caught the 16px logo in the
   mock title bar and stretched it across the window. */
.shot img:not(.titlebar-mark) { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Home page: two screenshots shown in turn. Each shows for 10 seconds, then fades
   over 1 second into the other, on a 20 second loop. The images share one grid
   cell, so the frame keeps its size. Pure CSS, so it needs no script. It pauses
   while the pointer is over it, and reduced motion shows the first image only. */
/* a.zoom.shot-slides: the zoom link's display: block must not undo the stacking */
.shot-slides, a.zoom.shot-slides { display: grid; }
.shot-slides > .shot-slide { grid-area: 1 / 1; }
.shot-slides > .shot-slide:nth-child(2) { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .shot-slides > .shot-slide { animation: shot-turn 20s linear infinite; }
  .shot-slides > .shot-slide:nth-child(2) { opacity: 1; animation-delay: -10s; }
  .shot-slides:hover > .shot-slide { animation-play-state: paused; }
}
@keyframes shot-turn {
  0%, 45% { opacity: 1; }
  50%, 95% { opacity: 0; }
  100% { opacity: 1; }
}

/* Soft fade at the base of the hero frame */
.hero .shot-wrap::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px; bottom: -2px;
  height: 26%;
  background: linear-gradient(180deg, transparent, var(--void) 92%);
  pointer-events: none;
  border-radius: 0 0 var(--r-shot) var(--r-shot);
}

/* ---------- Sections ---------- */

.section { padding-block: clamp(4rem, 3rem + 4vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
/* A section that sits directly under another, so their padding does not stack */
.section--follow { padding-top: 0; }

.section-head { text-align: center; max-width: 720px; margin: 0 auto 2.75rem; }
.section-head h2,
.h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem); }
.section-head p { color: var(--muted); margin-top: 1rem; font-size: 1.08rem; }

/* ---------- Bento ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 1020px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .bento { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  padding: 1.6rem;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), transform .2s var(--ease);
}
.card:hover { border-color: rgba(43, 224, 103, .55); background: rgba(255, 255, 255, .05); }
.card h3 { font-size: 1.28rem; margin-bottom: .5rem; }
.card p { color: var(--muted); font-size: .98rem; line-height: 1.55; }

.bento .card { min-height: 220px; display: flex; flex-direction: column; }
.bento .card .card-icon { margin-bottom: auto; }
.bento .card h3 { margin-top: 2.25rem; }

.card-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--green-hi);
  background: rgba(43, 224, 103, .1);
  border: 1px solid rgba(43, 224, 103, .25);
}
.card-icon svg { width: 22px; height: 22px; }
.card-icon--coral {
  color: var(--coral);
  background: rgba(255, 122, 84, .1);
  border-color: rgba(255, 122, 84, .3);
}

/* ---------- Chips ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 900px;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: .55rem 1.05rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--edge);
  color: var(--read);
  font-size: .95rem;
  font-weight: 500;
}
.chip--hi {
  color: var(--green-hi);
  background: rgba(43, 224, 103, .09);
  border-color: rgba(43, 224, 103, .4);
}
.center-link { text-align: center; margin-top: 2rem; font-weight: 600; }

/* ---------- Closing panel ---------- */

.cta-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  border-radius: var(--r-panel);
  border: 1px solid var(--edge);
  background: var(--ink);
  padding: clamp(3rem, 2rem + 5vw, 6rem) clamp(1.25rem, 4vw, 3rem);
}
.cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 80% at 15% 110%, rgba(43, 224, 103, .28), transparent 65%),
    radial-gradient(45% 70% at 90% -10%, rgba(255, 122, 84, .2), transparent 65%);
}
.cta-panel h2 { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4rem); }
/* One short sentence per panel, so let it size to its own text and stay on a
   single line. It still wraps once the panel is narrower than the sentence. */
.cta-panel p {
  color: var(--read);
  margin: 1.1rem auto 2rem;
  width: fit-content;
  max-width: 100%;
  font-size: 1.08rem;
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: clamp(3rem, 2rem + 4vw, 6rem);
  border-top: 1px solid var(--edge);
  background: rgba(5, 12, 7, .6);
  padding-block: 3.5rem 2rem;
  font-size: .93rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2.5rem;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

.footer-brand p { color: var(--muted); margin-top: .9rem; max-width: 34ch; }
.footer-col h2 {
  font-family: var(--font-body);
  font-size: .85rem;
  letter-spacing: 0;
  color: var(--text);
  margin-bottom: .9rem;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-col a { color: var(--muted); text-decoration: none; }
.footer-col a:hover { color: var(--text); }

.footer-legal {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--edge);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
  color: var(--muted);
  font-size: .85rem;
}
.footer-legal p { max-width: 70ch; }

/* ---------- Inner pages ---------- */

.page-head {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2rem, 1.5rem + 2vw, 3rem);
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.page-head--center { text-align: center; margin-inline: auto; }
.page-label {
  display: inline-block;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 500;
  margin-bottom: .9rem;
}
.page-head h1 { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); }
.standfirst {
  color: var(--muted);
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  margin-top: 1rem;
  max-width: 62ch;
  line-height: 1.6;
  margin-inline: auto;
  /* even out the lines so the last one is never a stranded word or two */
  text-wrap: balance;
}
.page-head--center .standfirst { margin-inline: auto; }

.meta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.4rem;
  padding: 0;
  list-style: none;
}
.meta-row-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: .5rem;
  margin-top: 1.4rem;
  padding: 0;
  list-style: none;
}
.meta-row li {
  font-size: .85rem;
  color: var(--read);
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  padding: .3rem .8rem;
}
.meta-row-features li {
  font-size: .85rem;
  color: var(--read);
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  padding: .3rem .8rem;
}

/* Layout with an on this page sidebar */
.doc {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
@media (max-width: 960px) { .doc { grid-template-columns: minmax(0, 1fr); } }

.toc {
  position: sticky;
  top: 92px;
  font-size: .9rem;
}
.toc h2 {
  font-family: var(--font-body);
  font-size: .85rem;
  letter-spacing: 0;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: .8rem;
}
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 1px solid var(--edge); }
.toc a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  padding: .35rem 0 .35rem 1rem;
  margin-left: -1px;
  border-left: 1px solid transparent;
  line-height: 1.4;
}
.toc a:hover { color: var(--text); border-left-color: var(--green); }
@media (max-width: 960px) {
  .toc { position: static; }
  .toc ol { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); border-left: 0; gap: .4rem; }
  .toc a { border: 1px solid var(--edge); border-radius: 12px; padding: .5rem .8rem; margin: 0; background: var(--surface); }
}

/* Prose, calm reading panel */
.prose {
  background: var(--ink);
  border: 1px solid var(--edge);
  border-radius: var(--r-prose);
  padding: clamp(1.4rem, 1rem + 3vw, 3.5rem);
  color: var(--read);
  line-height: 1.75;
  font-size: 1.03rem;
  min-width: 0;
  overflow-wrap: break-word;
}
.prose > * { max-width: 68ch; }
.prose > .table-wrap,
.prose > .wide,
.prose > .notice,
.prose > .conn,
.prose > .grid-cards { max-width: none; }
.prose > :first-child { margin-top: 0; }
.prose p,
.prose ul,
.prose ol,
.prose dl { margin: 0 0 1.1em; }
.prose h2 {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  margin: 2.4em 0 .7em;
  line-height: 1.3;
  scroll-margin-top: 96px;
}
.prose h3 {
  font-size: 1.06rem;
  letter-spacing: -0.015em;
  margin: 1.9em 0 .5em;
  line-height: 1.35;
}
.prose ul,
.prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--green); }
.prose hr { border: 0; border-top: 1px solid var(--edge); margin: 2.5em 0; max-width: none; }
.prose .lead { font-size: 1.14rem; color: var(--text); line-height: 1.65; }

.prose + .prose { margin-top: 1.25rem; }

/* Section heading with a larger h2, for feature style pages */
.prose--features h2 { font-size: 1.5rem; }
/* A prose panel standing on its own, with no on this page sidebar beside it */
.prose--narrow { max-width: 860px; margin-inline: auto; }

/* Notices */
.notice {
  position: relative;
  border-radius: var(--r-card);
  padding: 1.4rem 1.5rem 1.4rem 1.5rem;
  margin: 1.8em 0;
  background: rgba(255, 122, 84, .07);
  border: 1px solid rgba(255, 122, 84, .38);
  color: var(--read);
}
.notice h2,
.notice h3 { margin-top: 0 !important; font-size: 1.15rem; display: flex; align-items: center; gap: .6rem; }
.notice h2 svg,
.notice h3 svg { width: 22px; height: 22px; color: var(--coral); flex: none; }
.notice p:last-child,
.notice ul:last-child { margin-bottom: 0; }
.notice--green { background: rgba(43, 224, 103, .06); border-color: rgba(43, 224, 103, .35); }
.notice--green h2 svg,
.notice--green h3 svg { color: var(--green-hi); }

/* Tables */
.table-wrap {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid var(--edge);
  margin: 1.6em 0;
  background: rgba(5, 12, 7, .5);
  -webkit-overflow-scrolling: touch;
}
.table-wrap:focus-visible { outline-offset: 2px; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.55;
}
caption {
  caption-side: bottom;
  text-align: left;
  padding: .9rem 1.1rem;
  color: var(--muted);
  font-size: .85rem;
  border-top: 1px solid var(--edge);
}
th,
td {
  padding: .95rem 1.1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--edge);
  color: var(--read);
}
thead th {
  color: var(--text);
  font-weight: 600;
  font-size: .9rem;
  border-bottom: 2px solid var(--green);
  white-space: nowrap;
  background: rgba(255, 255, 255, .02);
}
tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }
tbody th { color: var(--text); font-weight: 600; }

/* Connection table, the trust centrepiece */
.conn {
  margin: 2em 0;
  border-radius: var(--r-card);
  border: 1px solid rgba(43, 224, 103, .3);
  background: linear-gradient(180deg, rgba(43, 224, 103, .06), rgba(43, 224, 103, .015));
  padding: clamp(1.1rem, 2.5vw, 1.75rem);
}
.conn-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.2rem; }
.conn-head h2 { margin: 0 0 .35rem !important; font-size: 1.4rem !important; }
.conn-head p { margin: 0; color: var(--muted); max-width: 60ch; }
.conn .table-wrap { margin: 0; background: var(--void); }
.conn table { min-width: 680px; }
.conn tbody th { width: 30%; }
.conn td:nth-child(3) { color: var(--text); }

/* Comparison table */
.compare table { min-width: 760px; }
.compare thead th { vertical-align: bottom; }
.compare .col-us { background: rgba(43, 224, 103, .07); }
.compare thead .col-us { color: var(--green-hi); background: rgba(43, 224, 103, .12); }
.compare tbody th { font-weight: 500; color: var(--read); min-width: 180px; }

.mark { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.mark::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--muted);
}
.mark--yes { color: var(--text); }
.mark--yes::before { background: var(--green); box-shadow: 0 0 0 3px rgba(43, 224, 103, .18); }
.mark--no::before { background: transparent; border: 1.5px solid var(--muted); }
.mark--part::before { background: var(--coral); }
.cell-note { display: block; color: var(--muted); font-size: .82rem; margin-top: .15rem; white-space: normal; }

/* Definition lists, system requirements */
.specs {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  border: 1px solid var(--edge);
  border-radius: 14px;
  overflow: hidden;
  margin: 1.4em 0;
  max-width: none !important;
}
.specs dt,
.specs dd {
  margin: 0;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--edge);
}
.specs dt { color: var(--text); font-weight: 600; background: rgba(255, 255, 255, .02); }
.specs dd { color: var(--read); }
.specs dt:last-of-type,
.specs dd:last-of-type { border-bottom: 0; }
@media (max-width: 560px) {
  .specs { grid-template-columns: 1fr; }
  .specs dt { border-bottom: 0; padding-bottom: .1rem; background: none; }
}

/* Card grids used on inner pages */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1rem;
  margin: 1.5em 0;
}
.grid-cards .card { background: rgba(255, 255, 255, .025); }
.grid-cards .card h3 { margin: 0 0 .4rem; font-size: 1.08rem; letter-spacing: -0.02em; }
.grid-cards .card p { font-size: .95rem; margin: 0; line-height: 1.6; }
.grid-cards .card .card-icon { margin-bottom: 1rem; width: 40px; height: 40px; border-radius: 12px; }
.grid-cards .card .card-icon svg { width: 20px; height: 20px; }

/* Donation cost categories */
.cost-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
/* Feature groups on features.html */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 1rem;
}
.feature {
  background: var(--ink);
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  padding: 1.6rem 1.6rem 1.4rem;
  transition: border-color .2s var(--ease);
}
.feature:hover { border-color: rgba(43, 224, 103, .45); }
.feature-top { display: flex; align-items: center; gap: .85rem; margin-bottom: 1rem; }
.feature-top .card-icon { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.feature-top .card-icon svg { width: 20px; height: 20px; }
.feature h3 { font-size: 1.2rem; }
.feature p { color: var(--read); font-size: .97rem; line-height: 1.65; margin-bottom: .9rem; }
.feature ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.feature li {
  font-size: .83rem;
  color: var(--read);
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  padding: .22rem .65rem;
}

/* Split feature band */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
/* The small label above each feature band heading on the features page */
.split--lg .page-label { font-size: 1.25rem; }
/* Screenshot gallery on the features page */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr; } }
.gallery-item { margin: 0; }
.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 0;
  border: 1px solid var(--edge-strong);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
}
.gallery-item figcaption { margin-top: .8rem; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.gallery-item figcaption strong { color: var(--text); }

/* Click a screenshot to see it full size (js/zoom.js) */
a.zoom { display: block; cursor: zoom-in; }
a.zoom:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.zoom-dialog {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-out;
}
.zoom-dialog[open] { display: flex; align-items: center; justify-content: center; }
.zoom-dialog::backdrop { background: rgba(2, 6, 4, .92); }
.zoom-image {
  max-width: 96vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
  cursor: zoom-in;
}
/* Actual size: the image at its own pixels, scrolled within the dialog */
.zoom-dialog.zoom-actual { display: block; overflow: auto; }
.zoom-dialog.zoom-actual .zoom-image { max-width: none; max-height: none; cursor: zoom-out; }
.zoom-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--edge-strong);
  background: var(--ink);
  color: var(--text);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.zoom-close:hover { background: var(--surface-2); }

/* Help centre screenshot on the features page */
.help-shot { display: block; width: 100%; max-width: 520px; justify-self: center; }
.help-shot picture { display: block; }
.help-shot img {
  width: 100%;
  height: auto;
  border-radius: 0;
  border: 1px solid var(--edge-strong);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8), 0 0 60px -20px rgba(43, 224, 103, .25);
}
.split h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }
.split p { color: var(--read); margin-top: 1rem; line-height: 1.7; }

.checklist { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .7rem; }
.checklist li { display: flex; gap: .75rem; align-items: flex-start; color: var(--read); line-height: 1.6; }
.checklist li svg { width: 20px; height: 20px; flex: none; margin-top: .2rem; color: var(--green-hi); }

/* Sandbox diagram */
.diagram {
  background: var(--ink);
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  padding: clamp(1rem, 3vw, 2rem);
}
.diagram svg { width: 100%; height: auto; }

/* Engines */
.engines {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .75rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.engines li {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: 1rem 1.1rem;
}
/* Ten engines fill two rows of five. Narrower screens use two columns, then one,
   so the last row is never left with a gap. */
@media (max-width: 1000px) { .engines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .engines { grid-template-columns: 1fr; } }
.engines strong { display: block; font-family: var(--font-display); letter-spacing: -0.02em; font-size: 1.08rem; margin-bottom: .2rem; }
.engines span { color: var(--muted); font-size: .9rem; line-height: 1.5; display: block; }

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 760px) { .stats { grid-template-columns: 1fr; } }
.stat {
  border-radius: var(--r-card);
  border: 1px solid var(--edge);
  background: var(--surface);
  padding: 1.5rem;
}
.stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--text);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 2.8rem);
  line-height: 1;
}
.stat-value small { font-size: .45em; letter-spacing: -0.01em; color: var(--muted); margin-left: .2em; }
.stat p { color: var(--muted); margin-top: .6rem; font-size: .95rem; }

/* Steps, used only for real sequences */
.steps { counter-reset: step; list-style: none; padding: 0 !important; }
.steps > li { counter-increment: step; position: relative; padding-left: 2.8rem; margin-bottom: 1.1em; }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: .1rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .85rem;
  font-weight: 600;
  color: var(--green-hi);
  background: rgba(43, 224, 103, .1);
  border: 1px solid rgba(43, 224, 103, .35);
  line-height: 1;
}

/* Route cards, support and contact */
.routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1rem;
}
.route {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: var(--ink);
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  padding: 1.5rem;
}
.route--urgent { border-color: rgba(255, 122, 84, .4); }
.route h3 { font-size: 1.2rem; display: flex; align-items: center; gap: .7rem; }
.route h3 .card-icon { width: 36px; height: 36px; border-radius: 10px; }
.route h3 .card-icon svg { width: 18px; height: 18px; }
.route p { color: var(--read); font-size: .97rem; line-height: 1.65; }
.route .route-action { margin-top: auto; padding-top: .6rem; }
.route .route-action a { font-weight: 600; overflow-wrap: anywhere; }

/* Profile */
.profile {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 820px) { .profile { grid-template-columns: 1fr; } }
.portrait {
  padding: 1px;
  border-radius: var(--r-card);
  background: linear-gradient(160deg, rgba(92, 255, 141, .5), var(--edge) 45%, rgba(255, 122, 84, .35));
  max-width: 280px;
}
.portrait img { border-radius: calc(var(--r-card) - 1px); width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--ink); }
.profile-links { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; grid-template-columns: 1fr; gap: .5rem; }
.profile-links .btn { width: 100%; }
.profile-facts { margin-top: 1.25rem; display: grid; gap: .6rem; font-size: .93rem; }
.profile-facts div { display: grid; gap: .1rem; }
.profile-facts dt { color: var(--muted); }
.profile-facts dd { margin: 0; color: var(--text); }
.pull {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text);
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  line-height: 1.4;
  border-left: 2px solid var(--green);
  padding-left: 1.2rem;
  margin: 1.8em 0;
}

/* Donate */
.donate-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
  margin-inline: auto;
}
.coffee {
  border-radius: var(--r-panel);
  border: 1px solid var(--edge);
  background:
    radial-gradient(90% 70% at 50% 100%, rgba(43, 224, 103, .18), transparent 70%),
    var(--ink);
  padding: clamp(1.4rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Everything in this panel sits on the centre line, the button included */
  align-items: center;
  text-align: center;
}
.coffee h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); word-spacing: .12em; }
/* Centred text needs a shorter measure, or the ragged edges stop lining up */
.coffee p { color: var(--read); line-height: 1.7; max-width: 52ch; }
.coffee .actions { margin-top: auto; padding-top: .5rem; }
.donate-note { color: var(--muted) !important; font-size: .88rem; line-height: 1.6 !important; }
/* Inside the donate box the note reads as a footnote: a thin rule above it, then
   smaller muted text across the full width of the box */
.coffee .donate-note {
  align-self: stretch;
  max-width: none;
  margin: .6rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--edge);
  font-size: .78rem;
  line-height: 1.55 !important;
}
/* Share links, donate page. Plain links to each service's own share page, so
   nothing here loads third party script and the page still runs without JS. */
.share-lead { margin-top: .9rem !important; font-size: .95rem !important; }
.share-row {
  list-style: none;
  margin: .7rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.share-row a {
  display: block;
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  padding: .3rem .7rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--read);
  text-decoration: none;
  background: rgba(255, 255, 255, .02);
}
.share-row a:hover,
.share-row a:focus-visible {
  color: var(--text);
  border-color: rgba(43, 224, 103, .55);
  background: rgba(43, 224, 103, .1);
}

.app-note {
  max-width: 68ch;
  margin: clamp(1.75rem, 1rem + 2vw, 2.75rem) auto 0;
  text-align: center;
  color: var(--muted);
  font-size: .93rem;
  line-height: 1.7;
}

/* 404 */
.lost {
  text-align: center;
  padding-block: clamp(4rem, 3rem + 6vw, 8rem);
}
.lost-code {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(5rem, 3rem + 10vw, 10rem);
  letter-spacing: -0.06em;
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(92, 255, 141, .55);
  margin-bottom: 1.5rem;
}
.lost h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.lost p { color: var(--muted); margin: 1rem auto 2rem; max-width: 44ch; }

/* Short "what it does not do" list */
.ticks {
  list-style: none;
  padding: 0 !important;
  margin: 0 0 1.4em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: .5rem;
  max-width: none !important;
}
.ticks li {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  padding: .6rem .95rem;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 12px;
  font-size: .95rem;
  color: var(--text);
  line-height: 1.4;
}
.ticks li::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(43, 224, 103, .18);
}

/* Tick list variants. --no marks items that follow "does not" or "no", --warn
   marks risks, --stack lays long sentences one per row. */
.ticks--no li::before {
  content: "\00D7";
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--coral);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
}
.ticks--warn li::before { background: var(--coral); box-shadow: 0 0 0 3px rgba(255, 122, 84, .18); }
.ticks--stack { grid-template-columns: minmax(0, 1fr); }
.ticks--stack li { align-items: flex-start; color: var(--read); }
.ticks--stack li::before { margin-top: .5em; }

/* ---------- Legal documents: privacy policy and terms ---------- */

/* Numbered sections. The number is real text, so it reads aloud and prints. */
.legal > h2 {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: 1.4rem;
  margin: 3rem 0 1rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--edge);
  max-width: none;
}
.sec-num {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 .4rem;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--green-hi);
  background: rgba(43, 224, 103, .1);
  border: 1px solid rgba(43, 224, 103, .35);
}
.legal h3 { font-size: 1.1rem; }

/* Sidebar contents on the legal pages, numbered to match the section badges */
.toc--numbered ol { counter-reset: sec; }
.toc--numbered li { counter-increment: sec; }
.toc--numbered a { display: flex; }
.toc--numbered a::before {
  content: counter(sec) ".";
  flex: none;
  min-width: 1.6em;
  color: var(--green-hi);
  font-variant-numeric: tabular-nums;
}

.chips--start { justify-content: flex-start; margin: 0 0 1.4em; max-width: none; }
.chips--start .chip { font-size: .88rem; padding: .4rem .85rem; }
/* Inside a prose panel the list indent and item spacing would otherwise win */
.prose .chips--start { padding-left: 0; }
.prose .chips--start .chip { margin: 0; }

.rights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1rem;
  margin: 1.4em 0 1.6em;
  max-width: none;
}
.rights-card {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  padding: 1.25rem 1.35rem;
}
.rights-label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green-hi);
  margin-bottom: .6rem;
}
.rights-card p { margin-bottom: .8em; }
.rights-card ul { margin: 0; }

.legal-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
  margin: 1.4em 0;
  max-width: none;
}
.legal-contact div {
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-card);
  border: 1px solid rgba(43, 224, 103, .3);
  background: rgba(43, 224, 103, .05);
}
.legal-contact dt { font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }
.legal-contact dd { margin: 0; color: var(--text); font-weight: 600; line-height: 1.5; }

.legal-colophon {
  max-width: none;
  padding: 1.5rem;
  border-radius: var(--r-card);
  border: 1px dashed var(--edge-strong);
  text-align: center;
  font-size: .95rem;
  color: var(--muted);
}
.legal-colophon p:last-child { margin-bottom: 0; }

/* Sub heading inside a feature band */
.sub-head {
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  margin-top: 1.8rem;
}

/* Caption under the hero screenshot */
.shot-caption {
  margin: 1.5rem auto 0;
  max-width: 62ch;
  text-align: center;
  color: var(--muted);
  font-size: .97rem;
  line-height: 1.6;
}

/* Split hero: copy on the left, screenshot on the right */
.hero--split {
  text-align: left;
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) 0;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
.hero--split .badge { margin-bottom: 1.4rem; }
.hero--split .display {
  font-size: clamp(2.5rem, 1.1rem + 3.6vw, 4.6rem);
  max-width: 11ch;
  margin-inline: 0;
}
.hero--split .hero-claim { margin-inline: 0; }
.hero--split .lede { margin: 1.35rem 0 2rem; max-width: 46ch; }
.hero--split .actions { justify-content: flex-start; }
.hero--split .shot-wrap { margin: 0; max-width: none; }
/* Keep the two hero buttons on one row in the narrower left column */
.hero--split .actions .btn { padding-inline: 1.15rem; }
/* Let the frame run a little past the container, so the mockup keeps its detail.
   Only in the two column layout: at narrower widths it would overflow the page. */
@media (min-width: 1200px) {
  /* Bleed only into the space that actually exists beside the container,
     so a 1200px or 1280px window never gains a horizontal scrollbar. */
  .hero--split .hero-media { width: calc(100% + clamp(0px, (100vw - 1250px) / 2, 96px)); }
}
.hero--split .shot-caption { margin: 1.4rem 0 0; text-align: left; max-width: 56ch; }
/* The base hero fades the shot into the page, which only suits a centred hero */
.hero--split .shot-wrap::after { display: none; }
/* Sit the bloom behind and below the frame so it does not glare over the top edge.
   Insets stay positive: a negative one widens the page at small sizes. */
.hero--split .shot-wrap::before {
  inset: 18% 3% 2% 3%;
  filter: blur(52px);
  background:
    radial-gradient(52% 52% at 45% 60%, rgba(43, 224, 103, .3), transparent 72%),
    radial-gradient(38% 42% at 92% 78%, rgba(255, 122, 84, .16), transparent 70%);
}

@media (max-width: 1199px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero--split .hero-media { width: 100%; }
  .hero--split { text-align: center; }
  .hero--split .display { max-width: 16ch; margin-inline: auto; }
  .hero--split .hero-claim { margin-inline: auto; }
  .hero--split .lede { margin-inline: auto; }
  .hero--split .actions { justify-content: center; }
  .hero--split .shot-wrap { margin-top: 1rem; }
  .hero--split .shot-caption { text-align: center; margin-inline: auto; }
}

/* Larger checklist used in feature bands */
.checklist--lg li { font-size: 1.05rem; }
.checklist--lg { gap: .9rem; }

/* Collapsible technical detail, works without scripting */
.tech {
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: 0 1.4rem;
  margin-top: 1.5rem;
}
.tech > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 1.15rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.1rem;
  color: var(--text);
}
.tech > summary::-webkit-details-marker { display: none; }
.tech > summary svg {
  width: 18px;
  height: 18px;
  color: var(--green-hi);
  transition: transform .2s var(--ease);
}
.tech[open] > summary svg { transform: rotate(180deg); }
.tech > summary:focus-visible { outline-offset: -4px; }
.tech-body { padding-bottom: 1.5rem; }
.faq-list { display: grid; gap: .75rem; max-width: 820px; margin-inline: auto; }
.faq-list .tech { margin-top: 0; }
.faq-list .tech-body > p:last-child { margin-bottom: 0; }
.tech-body > p { color: var(--read); margin-bottom: 1.2rem; line-height: 1.7; }

/* Security specification panel on the features page */
.secspec {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  padding: clamp(1.25rem, 3vw, 1.9rem);
}
.secspec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 45% at 0% 0%, rgba(43, 224, 103, .1), transparent 70%);
  pointer-events: none;
}
.secspec-head {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-bottom: 1.2rem;
  margin-bottom: .3rem;
  border-bottom: 1px solid var(--edge);
}
.secspec-head .card-icon { flex: none; }
.secspec-kicker { color: var(--muted); font-size: .85rem; margin-bottom: .15rem; }
.secspec-head h3 { font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.3; }
.secspec-list { list-style: none; margin: 0; padding: 0; }
.secspec-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--edge);
}
.secspec-list li:last-child { border-bottom: 0; }
.secspec-list strong {
  display: block;
  color: var(--text);
  font-size: .98rem;
  margin-bottom: .2rem;
}
.secspec-list li > div > span {
  display: block;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.55;
}
.secspec-status {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .1rem;
  padding: .22rem .62rem;
  border-radius: var(--r-pill);
  font-size: .75rem;
  font-weight: 600;
  color: var(--green-hi);
  background: rgba(43, 224, 103, .1);
  border: 1px solid rgba(43, 224, 103, .3);
}
.secspec-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(43, 224, 103, .18);
}
.secspec-foot {
  margin-top: .3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--edge);
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.55;
}

/* Placeholder values in draft renders stand out */
.placeholder-note {
  border: 1px dashed rgba(198, 255, 79, .45);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  color: var(--muted);
  font-size: .9rem;
}

/* Utility, used instead of inline styles so the CSP can forbid them */
.stats--pair { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.stat--coral { border-color: rgba(255, 122, 84, .4); }
.profile-name { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem) !important; }
.table-note { text-align: center; font-size: .9rem; }
.m-0 { margin: 0 !important; }
.mt-md { margin-top: 1.6em !important; }
.mt-actions { margin-top: 1.6rem; }
.muted { color: var(--muted); }
.mt-0 { margin-top: 0 !important; }
.mt-lg { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.stack > * + * { margin-top: 1.25rem; }
.wrap-anywhere { overflow-wrap: anywhere; }

/* Release notes: the date and label under each release heading */
.prose .release-meta { padding-left: 0; margin: -.2rem 0 1.2em; }
.prose .release-meta li { margin: 0; }

/* Online Help: the index of articles and the article pages */
.prose > .help-list { max-width: none; }
.prose .help-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2.2em;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: .6rem;
}
.prose .help-list li { margin: 0; }
.help-list a {
  display: block;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 14px;
  padding: .85rem 1rem;
  text-decoration: none;
  transition: border-color .2s var(--ease);
}
.help-list a:hover { border-color: rgba(43, 224, 103, .45); }
.help-list strong { display: block; color: var(--text); font-weight: 600; line-height: 1.4; }
.help-list span { display: block; color: var(--muted); font-size: .88rem; line-height: 1.5; margin-top: .25rem; }
.help-list[hidden],
.help-search[hidden],
.help-index [hidden] { display: none; }
.prose > .help-search { max-width: none; }
.help-search { margin-bottom: 2rem; }
.help-search label {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text);
  margin-bottom: .6rem;
}
.help-search input {
  width: 100%;
  font: inherit;
  font-size: 1.05rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--edge-strong);
  border-radius: 14px;
  padding: .8rem 1rem;
}
.help-search input::placeholder { color: var(--muted); }
.help-search input:focus { border-color: var(--green); outline: 2px solid rgba(43, 224, 103, .35); outline-offset: 1px; }
.help-search-status { color: var(--muted); font-size: .92rem; margin: .7rem 0 1rem; min-height: 1.4em; }
.help-list .help-result-topic { color: var(--green-hi); font-size: .8rem; margin-top: .45rem; }
.help-crumb { font-size: .9rem; color: var(--muted); margin-bottom: .6rem; }
.help-crumb a { color: var(--muted); }
.help-crumb a:hover { color: var(--text); }
.toc a[aria-current="page"] { color: var(--text); border-left-color: var(--green); }
.help-article .help-note { margin-bottom: 1.5em; }
/* On a phone the other articles in the topic would push the article off the
   screen, so the list is left to the breadcrumb and the index */
@media (max-width: 960px) { .toc--siblings { display: none; } }

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .btn:hover { --lift: 0px; }
}

/* ---------- Print ---------- */

@media print {
  body::before,
  .site-header,
  .site-footer,
  .toc,
  .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .prose { background: none; border: 0; color: #000; padding: 0; }
  .prose h2, .prose h3, strong, th { color: #000; }
  a { color: #000; }
}

/* ---------- Cookie consent (js/consent.js) ---------- */

.consent {
  position: fixed;
  z-index: 200;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--gutter);
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.25rem 2rem;
  padding: 1.1rem 1.4rem;
  background: var(--ink);
  border: 1px solid var(--edge-strong);
  border-radius: var(--r-card);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .75);
}
.consent:focus { outline: none; }
.consent:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.consent-copy { flex: 1; min-width: 0; }
.consent h2 { font-size: 1.05rem; margin: 0 0 .3rem; }
.consent p { color: var(--read); font-size: .95rem; line-height: 1.5; margin: 0; }
.consent-actions { display: flex; gap: .6rem; flex: none; }
@media (max-width: 640px) {
  .consent { flex-direction: column; align-items: stretch; }
  .consent-actions .btn { flex: 1; }
}