:root {
  --ink: #0f172a;
  --muted: #475569;
  --paper: #fdfaf3;
  --line: rgba(15, 23, 42, 0.15);
  --brand: #0e7490;
  --brand-deep: #0b4c5f;
  --accent: #d97706;
  --ok: #166534;
  --card: rgba(255, 255, 255, 0.8);
  --shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, rgba(14, 116, 144, 0.22), transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(217, 119, 6, 0.2), transparent 35%),
    linear-gradient(180deg, #fffdf9 0%, var(--paper) 100%);
  font-family: "Space Grotesk", "Trebuchet MS", sans-serif;
  line-height: 1.45;
  min-height: 100vh;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background-image: radial-gradient(rgba(15, 23, 42, 0.1) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
}

.wrap {
  width: min(1100px, calc(100% - 2rem));
  margin: 0 auto;
}

.topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  padding: 1rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

main {
  padding-top: 5.2rem;
}

.beta-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: var(--brand-deep);
  text-align: center;
}

.beta-banner-text {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: #fff;
}

.beta-banner-text a {
  color: #fff;
}

.beta-banner-text a:hover,
.beta-banner-text a:focus-visible {
  text-decoration-thickness: 2px;
}

.beta-banner-close {
  flex: 0 0 auto;
  border: 0;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.beta-banner-close:hover,
.beta-banner-close:focus-visible {
  background: rgba(255, 255, 255, 0.3);
  outline: 2px solid #fff;
  outline-offset: 1px;
}

body.beta-banner-visible .topbar {
  top: var(--beta-banner-h, 0px);
}

body.beta-banner-visible main {
  padding-top: calc(5.2rem + var(--beta-banner-h, 0px));
}

.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-left: auto;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.78);
  border: 1px solid rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; }

.hero { padding: 4.2rem 0 3rem; }

.hero-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.hero-mark {
  display: block;
  width: clamp(100px, 14vw, 150px);
  height: auto;
  border-radius: 1.25rem;
  box-shadow: 0 14px 30px rgba(11, 76, 95, 0.18);
}

.hero-name {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--brand-deep);
  margin: 0 0 0.8rem;
  font-weight: 700;
}

h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif;
  line-height: 1.05;
  margin-top: 0;
}

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  max-width: 15ch;
  margin-bottom: 0.8rem;
}

.lede {
  max-width: 58ch;
  color: var(--muted);
  font-size: 1.08rem;
}

.hero-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 1.2rem 0; }

.hero-points {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: 0.4rem;
  color: var(--muted);
}

.hero-points li::before {
  content: "■";
  color: var(--accent);
  margin-right: 0.5rem;
  font-size: 0.55rem;
  vertical-align: middle;
}

.screenshots {
  padding: 1rem 0 2.5rem;
}

.screenshots-head {
  margin-bottom: 1.25rem;
  max-width: 46ch;
}

.screenshots-head h2 { margin-bottom: 0.3rem; }

.shot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.shot-card {
  margin: 0;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 0.6rem 0.6rem 1rem;
  box-shadow: var(--shadow);
}

.shot-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.6rem;
  border: 1px solid var(--line);
  margin-bottom: 0.7rem;
}

.shot-card img.zoomable-shot {
  cursor: zoom-in;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.shot-card img.zoomable-shot:hover,
.shot-card img.zoomable-shot:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
}

.shot-card figcaption {
  font-size: 0.85rem;
  color: var(--muted);
  padding: 0 0.2rem;
}

.shot-card figcaption strong {
  color: var(--ink);
}

.downloads {
  padding: 0.75rem 0 1.6rem;
}

.downloads-head {
  margin-bottom: 1rem;
}

.downloads-head h2 {
  margin-bottom: 0.35rem;
}

.downloads-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1140px;
  margin-inline: auto;
}

/* The single download matching the visitor's OS, lifted out of the grid. */
.dl-primary {
  max-width: 1140px;
  margin: 0 auto 1rem;
}

.dl-primary .download-card {
  padding: 1.6rem 1.5rem;
  border-color: rgba(14, 116, 144, 0.42);
  background: linear-gradient(180deg, rgba(14, 116, 144, 0.07), rgba(255, 255, 255, 0.94));
}

.dl-primary .dl-icon {
  font-size: 2.6rem;
}

.dl-primary .dl-title {
  font-size: 1.15rem;
}

.dl-primary .dl-arrow {
  font-size: 1.6rem;
}

/* Without JS the summary stays hidden and `open` keeps every card visible, so
   the full list is always reachable. The script reveals the summary only once
   it has actually promoted a card. */
.dl-others > summary {
  display: none;
}

.dl-others.is-enhanced > summary {
  display: block;
  max-width: 1140px;
  margin: 0 auto 0.9rem;
  padding: 0.55rem 0.9rem;
  border-radius: 0.7rem;
  border: 1.5px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: border-color 0.18s, color 0.18s;
}

.dl-others.is-enhanced > summary::-webkit-details-marker {
  display: none;
}

.dl-others.is-enhanced > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.45rem;
  color: var(--brand);
  transition: transform 0.18s;
}

.dl-others.is-enhanced[open] > summary::before {
  transform: rotate(90deg);
}

.dl-others.is-enhanced > summary:hover {
  border-color: rgba(14, 116, 144, 0.38);
  color: var(--brand);
}

/* `display: flex` below would otherwise beat the UA stylesheet's
   `[hidden] { display: none }`, so the attribute needs to be honoured
   explicitly for cards we only reveal once version.json names the file. */
.download-card[hidden] {
  display: none;
}

.download-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1.5px solid var(--line);
  border-radius: 20px;
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow);
  text-decoration: none !important;
  color: inherit;
  transition: box-shadow 0.18s, transform 0.15s, border-color 0.18s;
}

.download-card:hover {
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.14);
  border-color: rgba(14, 116, 144, 0.35);
  transform: translateY(-2px);
}

.dl-icon {
  font-size: 2.2rem;
  flex-shrink: 0;
}

.dl-info {
  flex: 1;
  min-width: 0;
}

.dl-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.15rem;
}

.dl-sub {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.dl-file {
  font-family: "JetBrains Mono", "Fira Mono", monospace;
  font-size: 0.7rem;
  color: var(--brand);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-arrow {
  font-size: 1.3rem;
  color: var(--brand);
  flex-shrink: 0;
}

.dl-experimental {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.38rem;
  border-radius: 0.3rem;
  background: rgba(180, 83, 9, 0.12);
  color: #b45309;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  vertical-align: 0.08rem;
}

/* Windows SmartScreen explainer under the download cards. */
/* Same `[hidden]` override as the cards: the script hides this off Windows. */
.download-note[hidden] {
  display: none;
}

.download-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1.5rem auto 0;
  max-width: 64ch;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 0.85rem;
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.09), var(--card));
  color: var(--ink);
}

.download-note-icon {
  font-size: 1.3rem;
  line-height: 1.35;
  flex-shrink: 0;
}

.download-note-body { min-width: 0; }

.download-note p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* winget install block: the same note shape as the SmartScreen explainer, in
   the brand colour so the two read as different kinds of advice. */
.download-note-winget {
  border-left-color: var(--brand);
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.09), var(--card));
}

.download-note p code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  padding: 0.1em 0.35em;
  /* Long package ids must be allowed to break on phones, or they push the
     page wider than the viewport. */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* One command on a dark terminal-style line, with a copy button. The button is
   removed by the script when the clipboard API is unavailable. */
.dl-cmd {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.7rem 0;
  padding: 0.6rem 0.8rem;
  border-radius: 0.6rem;
  background: var(--ink);
  color: #e6edf3;
}

.dl-cmd code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92rem;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  white-space: pre;
}

.dl-cmd code::before {
  content: "> ";
  opacity: 0.55;
  user-select: none;
}

.dl-cmd-copy {
  flex-shrink: 0;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  cursor: pointer;
}

.dl-cmd-copy:hover {
  background: rgba(255, 255, 255, 0.18);
}

.dl-cmd-copy[data-copied] {
  border-color: transparent;
  background: var(--brand);
  color: #fff;
}

.smartscreen-shot {
  margin: 1rem 0 0;
  max-width: 320px;
}

.smartscreen-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.6rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.smartscreen-shot figcaption {
  margin-top: 0.45rem;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.35;
}

.btn {
  display: inline-block;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--brand), #22a1bd);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  box-shadow: 0 9px 20px rgba(14, 116, 144, 0.25);
  cursor: pointer;
  font: inherit;
}

.btn-small { padding: 0.4rem 0.8rem; font-size: 0.86rem; }

.btn-ghost {
  background: transparent;
  color: var(--brand-deep);
  border-color: rgba(11, 76, 95, 0.3);
  box-shadow: none;
}

.btn[disabled],
.btn.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(0.2);
  box-shadow: none;
}

.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 0.5rem 0 2rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: var(--shadow);
}

.pricing { padding: 1.5rem 0 1rem; }
.pricing-head h2 { margin-bottom: 0.3rem; }

.pricing-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.price-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: var(--shadow);
}

.price-card.featured {
  border-color: rgba(14, 116, 144, 0.5);
  transform: translateY(-4px);
}

.chip {
  display: inline-block;
  margin: 0;
  color: #fff;
  background: linear-gradient(130deg, var(--brand-deep), var(--brand));
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.price {
  margin: 0.25rem 0;
  font-size: 1.8rem;
  font-weight: 700;
  font-family: "Fraunces", Georgia, serif;
}
.price span { font-size: 0.86rem; color: var(--muted); font-family: "Space Grotesk", sans-serif; }

.price-card ul {
  padding-left: 1.1rem;
  color: var(--ink);
  margin: 0 0 1rem;
}
.price-card li { margin: 0.45rem 0; }
.price-card li.off { color: #9ca3af; text-decoration: line-through; }

.price-card .btn,
.price-card .btn-ghost {
  margin-top: auto;
  align-self: flex-start;
}

/* Term fine print: what you are actually committing to, stated before the
   buy button rather than after the click. Takes over the auto margin from
   .price-card .btn above so the note and the button travel to the bottom edge
   as one block — otherwise the note would sit up under the bullets with the
   gap stranded below it. Cards without one are unaffected. */
.price-term {
  margin: auto 0 0;
  padding-top: 0.75rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}

.price-card .price-term + .btn { margin-top: 0.7rem; }

.muted { color: var(--muted); }

/* Command lines set in running prose. Monospace at full size sits taller than
   the Space Grotesk around it, so it is stepped down to match the x-height
   rather than left to the browser default. */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  padding: 0.1em 0.35em;
  white-space: nowrap;
}

.licensing-note {
  margin-top: 1rem;
  background: linear-gradient(160deg, rgba(14, 116, 144, 0.13), rgba(217, 119, 6, 0.1));
  border: 1px solid rgba(14, 116, 144, 0.25);
  border-radius: 1rem;
  padding: 1.2rem;
}

.faq {
  padding: 2.5rem 0 1rem;
}

/* Scoped to the FAQ: the downloads disclosure is a <details> too, and the card
   panel these rules draw looks like a stray second box around it. */
.faq details {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  padding: 0.85rem 1rem;
  margin: 0.7rem 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 700;
}

.beta {
  margin: 2rem auto 2.2rem;
  border: 1px solid rgba(22, 101, 52, 0.3);
  background: linear-gradient(145deg, rgba(22, 101, 52, 0.14), rgba(255, 255, 255, 0.9));
  border-radius: 1rem;
  padding: 1.6rem 1.8rem;
}

.beta-head {
  max-width: 62ch;
}

.beta-head h2 {
  margin-bottom: 0.35rem;
}

.beta-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin: 1.2rem 0 1.4rem;
}

.beta-col h3 {
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
}

.beta-col ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: 0.9rem;
  display: grid;
  gap: 0.35rem;
}

.beta-request-form {
  margin-top: 0.4rem;
  max-width: 480px;
}

.beta-privacy-note {
  margin: 0.6rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.beta-form-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0.2rem 0 0.35rem;
}

.beta-form-input {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font: inherit;
  padding: 0.62rem 0.78rem;
  margin-bottom: 0.65rem;
}

.beta-form-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.16);
}

.beta-form-status {
  min-height: 1.4em;
  margin: 0.55rem 0 0;
  font-size: 0.84rem;
  color: var(--muted);
}

.beta-form-status.success {
  color: var(--ok);
}

.beta-form-status.error {
  color: #b42318;
}

body.lightbox-open {
  overflow: hidden;
}

.lightbox[hidden] {
  display: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(2, 6, 23, 0.78);
  display: grid;
  place-items: center;
  padding: 1rem;
}

.lightbox-panel {
  position: relative;
  width: min(96vw, 1400px);
  max-height: 94vh;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 0.9rem;
  padding: 0.8rem 0.8rem 0.6rem;
  box-shadow: 0 26px 60px rgba(2, 6, 23, 0.45);
}

.lightbox-image {
  display: block;
  max-width: 100%;
  max-height: calc(94vh - 4.8rem);
  margin: 0 auto;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.lightbox-caption {
  margin: 0.55rem 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.88rem;
}

.lightbox-close {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  width: 2rem;
  height: 2rem;
  color: #fff;
  background: rgba(15, 23, 42, 0.72);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: rgba(14, 116, 144, 0.9);
}

.footer {
  margin-top: 1.5rem;
  padding: 1.1rem 0 1.25rem;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 1));
  border-top: 1px solid rgba(148, 163, 184, 0.28);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem 1rem;
  flex-wrap: wrap;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-logo {
  border-radius: 4px;
}

.footer-brand-name {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  color: #fff;
  font-size: 1rem;
}

.footer-links {
  display: flex;
  gap: 0.85rem 1.25rem;
  flex: 1;
  flex-wrap: wrap;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.86rem;
  text-decoration: none;
  font-weight: 500;
}

.footer-links a:hover {
  color: rgba(255, 255, 255, 0.92);
}

.footer-copy {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.36);
  margin-left: auto;
}

@media (max-width: 950px) {
  .features,
  .pricing-grid,
  .downloads-grid,
  .shot-grid,
  .beta-columns { grid-template-columns: 1fr; }

  .beta-banner { flex-direction: column; gap: 0.4rem; padding: 0.55rem 0.9rem; }

  main { padding-top: 6.4rem; }

  .price-card.featured { transform: none; }

  .hero-brand-lockup { gap: 0.75rem; }

  .hero-mark { width: clamp(88px, 24vw, 122px); }

  .hero-name { font-size: clamp(1.6rem, 7vw, 2.3rem); }

  .topbar { align-items: flex-start; flex-direction: column; }

  .footer-copy { margin-left: 0; }
}

/* ── Legal pages (terms.html) ─────────────────────────────────────────────
   Reuses the site's wrap/topbar/footer chrome; only the reading column and
   its headings are new. h1 is capped at 15ch above for the hero lockup, which
   is too narrow for a page title set in running text. */
.legal-hero {
  padding: 3.4rem 0 1.6rem;
}
.legal-hero h1 {
  max-width: none;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
}
.legal-hero p {
  color: var(--muted);
  margin: 0;
}

.legal-body {
  padding-bottom: 3.5rem;
}

/* Line length is capped on each block, not on .legal-body itself. Capping the
   container made .wrap's `margin: 0 auto` centre the whole column, leaving the
   body indented relative to the page title in the hero above it. This way the
   container keeps the wrap's width and every block shares its left edge. */
.legal-body > * { max-width: 68ch; }
.legal-body h2 {
  font-size: 1.22rem;
  margin: 2.2rem 0 0.6rem;
}
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body p,
.legal-body li {
  color: var(--ink);
  line-height: 1.65;
}
.legal-body ul { padding-left: 1.15rem; }
.legal-body li { margin: 0.5rem 0; }
.legal-body a { color: var(--brand-deep); }

/* Anchor targets (#pro-term, #beta-term) land under the fixed topbar without
   this — the heading would scroll to the very top and sit behind the nav. */
.legal-body h2[id] { scroll-margin-top: 6rem; }

/* Plain-language summary at the head of the privacy policy, before the
   numbered detail. Tinted like .licensing-note so the two "read this bit"
   blocks on the site look related, but flush-left inside the reading column
   rather than a standalone card. */
.legal-callout {
  margin: 0 0 2rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(14, 116, 144, 0.25);
  border-left: 4px solid var(--brand);
  border-radius: 0.75rem;
  background: linear-gradient(160deg, rgba(14, 116, 144, 0.13), rgba(217, 119, 6, 0.1));
  line-height: 1.6;
}