/* ==========================================================================
   SproutSage public site — the homepage (/), the apps teaser (/launch) and
   the two legal pages (/privacy, /terms).
   Compiled into the binary (`include_str!`) and served at /site.css.

   DIRECTION: a teaser. Dark by default — near-black ground, emerald / cyan /
   blue light bleeding from behind the content, one gradient reserved for the
   headline's second line — and a light rendition for people whose system
   asks for one. Same three typefaces as the admin, so the front door and the
   house are one family.

   No JavaScript, no images, no icon font: the one illustration is an inline
   SVG, decorative and hidden from assistive technology.

   CONTENTS
     1  Tokens (dark, the default)
     2  Tokens (light)
     3  Base
     4  Navigation
     5  Hero and buttons
     6  The constellation
     7  Points
     8  Closing, devices, footer
     9  Small screens, reduced motion, forced colours
    10  Legal pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   1  Tokens (dark)
   -------------------------------------------------------------------------- */

:root {
  color-scheme: dark light;

  --bg: #06090a;
  --bg-raise: #0c1211;
  --panel: rgba(255, 255, 255, 0.035);
  --panel-strong: rgba(255, 255, 255, 0.06);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  --ink: #f1f5f3;
  --ink-soft: #a7b4af;
  --ink-faint: #85928d;

  --emerald: #34d399;
  --cyan: #22d3ee;
  --blue: #60a5fa;

  --cta: #34d399;
  --cta-hover: #6ee7b7;
  --cta-ink: #03140d;

  --glow-a: rgba(16, 185, 129, 0.16);
  --glow-b: rgba(59, 130, 246, 0.12);
  --hero-grad: linear-gradient(90deg, #34d399 0%, #22d3ee 50%, #60a5fa 100%);
  --title-grad: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.74) 100%);

  --radius: 18px;
  --radius-sm: 10px;

  --font-title: "Newsreader", Iowan Old Style, Georgia, "Times New Roman", serif;
  --font-ui: "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --------------------------------------------------------------------------
   2  Tokens (light)
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f7f4;
    --bg-raise: #ffffff;
    --panel: rgba(12, 21, 18, 0.03);
    --panel-strong: rgba(12, 21, 18, 0.055);
    --line: rgba(12, 21, 18, 0.1);
    --line-strong: rgba(12, 21, 18, 0.18);

    --ink: #0c1512;
    --ink-soft: #46534e;
    --ink-faint: #5f6b66;

    --emerald: #047857;
    --cyan: #0e7490;
    --blue: #1d4ed8;

    --cta: #065f46;
    --cta-hover: #047857;
    --cta-ink: #ffffff;

    --glow-a: rgba(16, 185, 129, 0.13);
    --glow-b: rgba(59, 130, 246, 0.09);
    --hero-grad: linear-gradient(90deg, #047857 0%, #0e7490 50%, #1d4ed8 100%);
    --title-grad: linear-gradient(180deg, #0c1512 0%, #26332e 100%);
  }
}

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

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main {
  flex: 1;
}

a {
  color: inherit;
}

/* The outline follows each element's own radius, so a pill stays a pill. */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.footer a:focus-visible,
.brand:focus-visible {
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--cta);
  color: var(--cta-ink);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

.wrap {
  width: min(72rem, 100% - 32px);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   4  Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: relative;
  z-index: 10;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand svg {
  width: 26px;
  height: 26px;
  color: var(--emerald);
}

.nav-links a {
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.nav-links a:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   5  Hero and buttons
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: clamp(32px, 6vw, 72px) 0 clamp(16px, 3vw, 40px);
  text-align: center;
  isolation: isolate;
}

.hero-tall {
  padding-block: clamp(56px, 12vw, 152px) clamp(64px, 10vw, 128px);
}

.glow {
  position: absolute;
  inset: -72px 0 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48% 42% at 50% 38%, var(--glow-a), transparent 70%),
    radial-gradient(34% 36% at 78% 10%, var(--glow-b), transparent 70%),
    radial-gradient(30% 30% at 18% 72%, var(--glow-b), transparent 70%);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--emerald) 22%, transparent);
}

.hero h1 {
  max-width: 20ch;
  margin: 24px auto 0;
  font-size: clamp(36px, 5.6vw, 68px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
  background: var(--title-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero h1 .grad {
  display: block;
  margin-top: 0.08em;
  padding-bottom: 0.08em;
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
  background: var(--hero-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-tall h1 {
  font-size: clamp(44px, 8vw, 96px);
}

.lede {
  max-width: 36rem;
  margin: 26px auto 0;
  color: var(--ink-soft);
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.6;
  text-wrap: balance;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 36px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.btn-primary {
  background: var(--cta);
  color: var(--cta-ink);
  box-shadow: 0 0 36px color-mix(in srgb, var(--emerald) 30%, transparent);
}

.btn-primary:hover {
  background: var(--cta-hover);
  transform: translateY(-1px);
}

.btn svg {
  width: 18px;
  height: 18px;
  transition: transform 0.15s;
}

.btn-primary:hover svg {
  transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   6  The constellation
   -------------------------------------------------------------------------- */

.stage {
  max-width: 60rem;
  margin: clamp(32px, 5vw, 56px) auto 0;
}

.constellation {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.constellation .orbit {
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}

.constellation .orbit.faint {
  stroke: var(--line);
}

.constellation .link {
  stroke: var(--tone, var(--ink-faint));
  stroke-opacity: 0.35;
  stroke-width: 1;
}

.constellation .link.strong {
  stroke: var(--emerald);
  stroke-opacity: 0.45;
  stroke-width: 1.25;
}

.constellation .flow {
  stroke: var(--emerald);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 3 22;
  animation: flow 3.2s linear infinite;
}

.constellation .flow.d1 {
  stroke: var(--cyan);
  animation-delay: -1.1s;
}

.constellation .flow.d2 {
  stroke: var(--blue);
  animation-delay: -2.2s;
}

.constellation .emerald {
  --tone: var(--emerald);
}

.constellation .cyan {
  --tone: var(--cyan);
}

.constellation .blue {
  --tone: var(--blue);
}

.constellation .node {
  fill: var(--tone);
}

.constellation .node .halo {
  fill: var(--tone);
  fill-opacity: 0.14;
}

.constellation .node.inner {
  fill: var(--ink);
}

.constellation .node.inner .ring {
  fill: var(--bg);
  stroke: var(--emerald);
  stroke-opacity: 0.7;
  stroke-width: 1.25;
}

.constellation .stop-emerald {
  stop-color: var(--emerald);
}

.constellation .pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse 5s ease-in-out infinite;
}

.constellation .core {
  fill: var(--bg-raise);
  stroke: var(--emerald);
  stroke-width: 1.5;
}

.constellation .core-mark {
  stroke: var(--emerald);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes flow {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -25;
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

/* --------------------------------------------------------------------------
   7  Points
   -------------------------------------------------------------------------- */

.points {
  padding: clamp(24px, 4vw, 48px) 0 clamp(56px, 8vw, 96px);
}

.point-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.point {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.point .mark {
  display: block;
  width: 28px;
  height: 2px;
  margin-top: -23px;
  margin-bottom: 22px;
  background: var(--tone, var(--emerald));
  box-shadow: 0 0 14px var(--tone, var(--emerald));
}

.point.cyan {
  --tone: var(--cyan);
}

.point.blue {
  --tone: var(--blue);
}

.point.emerald {
  --tone: var(--emerald);
}

.point h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.point p {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 16px;
}

/* --------------------------------------------------------------------------
   8  Closing, devices, footer
   -------------------------------------------------------------------------- */

.closing {
  position: relative;
  padding: clamp(64px, 10vw, 128px) 0;
  border-top: 1px solid var(--line);
  text-align: center;
  isolation: isolate;
}

.closing .glow {
  inset: 0;
  background: radial-gradient(46% 70% at 50% 55%, var(--glow-a), transparent 72%);
}

.closing h2 {
  max-width: 22ch;
  margin: 0 auto;
  font-size: clamp(30px, 4.6vw, 52px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.closing h2 em {
  display: block;
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 500;
  color: var(--emerald);
}

.closing .lede {
  margin-top: 18px;
}

.devices {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: clamp(48px, 8vw, 80px) 0 0;
  padding: 0;
  list-style: none;
}

.device {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
}

.device-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--emerald) 14%, transparent);
  color: var(--emerald);
}

.device-icon svg {
  width: 17px;
  height: 17px;
}

.footer {
  padding: 28px 0 36px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 14px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.footer a {
  color: var(--ink-soft);
  text-decoration: none;
}

.footer a:hover,
.footer a[aria-current="page"] {
  color: var(--ink);
}

.footer a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   9  Small screens, reduced motion, forced colours
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .point-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }

  .brand {
    font-size: 19px;
  }

  .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
  }

  .stage {
    margin-inline: -8px;
  }

  .devices {
    gap: 8px;
  }

  .device {
    gap: 8px;
    padding: 6px 14px 6px 6px;
    font-size: 14px;
  }

  .device-icon {
    width: 28px;
    height: 28px;
  }
}

/* Entrance: opacity and transform only, so nothing reflows and nothing
   shifts — the layout is final from the first paint. Only for people whose
   system has not asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero .wrap > *,
  .point,
  .devices .device {
    animation: rise 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }

  .hero .wrap > :nth-child(2) {
    animation-delay: 0.08s;
  }

  .hero .wrap > :nth-child(3) {
    animation-delay: 0.16s;
  }

  .hero .wrap > :nth-child(4) {
    animation-delay: 0.24s;
  }

  .hero .wrap > :nth-child(5) {
    animation-delay: 0.36s;
    animation-duration: 1.1s;
  }

  .point:nth-child(1) {
    animation-delay: 0.5s;
  }

  .point:nth-child(2) {
    animation-delay: 0.6s;
  }

  .point:nth-child(3) {
    animation-delay: 0.7s;
  }

  .device:nth-child(1) {
    animation-delay: 0.42s;
  }

  .device:nth-child(2) {
    animation-delay: 0.5s;
  }

  .device:nth-child(3) {
    animation-delay: 0.58s;
  }

  .constellation .node {
    transform-box: fill-box;
    transform-origin: center;
    animation: bloom 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: 0.7s;
  }

  .constellation .node.inner {
    animation-delay: 0.5s;
  }

  .constellation .node:nth-of-type(2n) {
    animation-delay: 0.85s;
  }

  .constellation .node:nth-of-type(3n) {
    animation-delay: 1s;
  }

  .constellation .node .halo {
    transform-box: fill-box;
    transform-origin: center;
    animation: breathe 6s ease-in-out infinite;
  }

  .constellation .node:nth-of-type(2n) .halo {
    animation-delay: -2s;
  }

  .constellation .node:nth-of-type(3n) .halo {
    animation-delay: -4s;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes bloom {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(0.85);
  }
  50% {
    transform: scale(1.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn svg {
    transition: none;
  }

  .btn-primary:hover,
  .btn-primary:hover svg {
    transform: none;
  }

  .constellation .flow,
  .constellation .pulse {
    animation: none;
  }

  .constellation .flow {
    display: none;
  }
}

@media (forced-colors: active) {
  .hero h1,
  .hero h1 .grad {
    background: none;
    color: CanvasText;
  }
}

/* ==========================================================================
   10  Legal pages — /privacy and /terms
   --------------------------------------------------------------------------
   Long-form reading in the site's own register: Newsreader for the titles,
   Instrument Sans for the text, the same dark ground and the same three
   lights, turned down. A sticky contents column on wide screens, a folded
   one on narrow ones, an anchor on every section, and a print rendition
   that is plain black on white with the chrome removed.
   ========================================================================== */

:root {
  --amber: #fbbf24;
  --amber-bg: rgba(251, 191, 36, 0.12);
  --amber-line: rgba(251, 191, 36, 0.38);
  --amber-ink: #fde68a;
  --prose-ink: #d9e2de;
}

@media (prefers-color-scheme: light) {
  :root {
    --amber: #b45309;
    --amber-bg: rgba(245, 158, 11, 0.14);
    --amber-line: rgba(180, 83, 9, 0.35);
    --amber-ink: #78350f;
    --prose-ink: #1f2b27;
  }
}

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

/* The draft strip: one line, above everything, gone when the pages are final. */
/* Above the header's glow, which bleeds up behind the navigation. */
.legal-draft {
  position: relative;
  z-index: 1;
  border-block: 1px solid var(--amber-line);
  background: linear-gradient(var(--amber-bg), var(--amber-bg)), var(--bg);
  color: var(--amber-ink);
  font-size: 14px;
}

.legal-draft .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding-block: 10px;
}

.legal-draft strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.legal-draft strong::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 22%, transparent);
}

.legal-draft span {
  opacity: 0.86;
}

/* A detail the company has yet to supply. Loud on purpose. */
mark.ph {
  padding: 0.05em 0.35em;
  border: 1px dashed var(--amber-line);
  border-radius: 6px;
  background: var(--amber-bg);
  color: var(--amber-ink);
  font-family: var(--font-mono);
  font-size: 0.86em;
  font-weight: 500;
  white-space: nowrap;
}

/* The head */

.legal-head {
  position: relative;
  padding: clamp(40px, 7vw, 88px) 0 clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}

.legal-head .glow {
  inset: -72px 0 0;
  background:
    radial-gradient(40% 70% at 12% 20%, var(--glow-a), transparent 70%),
    radial-gradient(30% 60% at 70% 0%, var(--glow-b), transparent 70%);
  opacity: 0.8;
}

.legal-head .eyebrow {
  margin: 0;
  color: var(--emerald);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.legal-head h1 {
  max-width: 18ch;
  margin: 14px 0 0;
  font-family: var(--font-title);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.legal-head .lede {
  max-width: 40rem;
  margin: 18px 0 0;
  text-wrap: pretty;
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-faint);
  font-size: 14px;
}

.legal-meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
}

.legal-meta li > span:first-child {
  color: var(--ink-faint);
}

.legal-meta li > :last-child {
  color: var(--ink);
  font-weight: 500;
}

.legal-meta a {
  color: var(--ink);
  text-decoration: none;
}

.legal-meta a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The two columns */

.legal-layout {
  display: grid;
  grid-template-columns: 15.5rem minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(32px, 5vw, 56px) 0 clamp(64px, 9vw, 112px);
}

.toc {
  position: sticky;
  top: 24px;
  align-self: start;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}

.toc-title,
.toc-mobile summary {
  margin: 0 0 12px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.toc ol,
.toc-mobile ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.toc li,
.toc-mobile li {
  counter-increment: toc;
}

.toc a,
.toc-mobile a {
  display: grid;
  grid-template-columns: 1.9em minmax(0, 1fr);
  padding: 6px 10px 6px 12px;
  border-left: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.toc a::before,
.toc-mobile a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.95;
}

.toc a:hover,
.toc-mobile a:hover {
  border-left-color: var(--emerald);
  background: var(--panel);
  color: var(--ink);
}

.toc-other {
  margin: 20px 0 0;
  padding: 14px 12px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.toc-other a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  color: var(--ink-soft);
  text-decoration: none;
}

.toc-other a::before {
  content: none;
}

.toc-other a:hover {
  background: none;
  color: var(--ink);
}

.toc-mobile {
  display: none;
}

/* The text */

.prose {
  max-width: 44rem;
  color: var(--prose-ink);
  font-size: 17px;
  line-height: 1.75;
  overflow-wrap: break-word;
}

.prose > section {
  padding-top: clamp(36px, 5vw, 52px);
  scroll-margin-top: 8px;
}

.prose > section:first-of-type {
  padding-top: 0;
}

.prose > section + section {
  margin-top: clamp(36px, 5vw, 52px);
  border-top: 1px solid var(--line);
}

.prose h2 {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 18px;
  color: var(--ink);
  font-family: var(--font-title);
  font-size: clamp(27px, 3.2vw, 34px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.prose h2 .num {
  flex: none;
  color: var(--emerald);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transform: translateY(-0.35em);
}

.prose h2 .anchor {
  margin-left: auto;
  padding: 0 4px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 16px;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.prose section:hover .anchor,
.prose h2 .anchor:focus-visible {
  opacity: 1;
}

.prose h2 .anchor:hover {
  color: var(--emerald);
}

.prose section:target h2 .num {
  text-shadow: 0 0 14px var(--emerald);
}

.prose h3 {
  margin: 30px 0 8px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.prose p {
  margin: 0 0 16px;
  text-wrap: pretty;
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--emerald) 60%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s;
}

.prose a:hover {
  text-decoration-color: var(--emerald);
}

.prose code {
  padding: 0.1em 0.35em;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 0.84em;
}

.prose ul,
.prose ol {
  margin: 0 0 18px;
  padding-left: 0;
  list-style: none;
}

.prose li {
  position: relative;
  margin: 0 0 9px;
  padding-left: 26px;
}

.prose ul > li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--emerald);
  opacity: 0.85;
  transform: rotate(45deg);
}

.prose ol {
  counter-reset: item;
}

.prose ol > li {
  counter-increment: item;
}

.prose ol > li::before {
  content: counter(item) ".";
  position: absolute;
  left: 0;
  color: var(--emerald);
  font-family: var(--font-mono);
  font-size: 0.82em;
  line-height: 2.1;
}

/* At a glance: the short version, before the long one. */
.glance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 8px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  list-style: none;
}

.prose .glance li {
  margin: 0;
  padding: 20px 22px 22px;
  background: var(--bg-raise);
  font-size: 15.5px;
  line-height: 1.6;
}

.prose .glance li::before {
  content: none;
}

.glance strong {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
}

/* One light per row of the grid: emerald, cyan, blue. */
.glance li:nth-child(-n + 2) strong {
  color: var(--emerald);
}

.glance li:nth-child(n + 3):nth-child(-n + 4) strong {
  color: var(--cyan);
}

.glance li:nth-child(n + 5) strong {
  color: var(--blue);
}

/* A statement that must be found: Limited Use, the AI notice. */
.callout {
  position: relative;
  margin: 22px 0 22px;
  padding: 20px 22px 20px 24px;
  border: 1px solid color-mix(in srgb, var(--emerald) 30%, var(--line));
  border-radius: var(--radius-sm);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--emerald) 9%, transparent), transparent 70%),
    var(--panel);
}

.callout::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: var(--hero-grad);
}

.prose .callout p:last-child {
  margin-bottom: 0;
}

.callout-label {
  display: block;
  margin-bottom: 6px;
  color: var(--emerald);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Tables: scopes and subprocessors. Rows become cards on a phone. */
.legal-table {
  width: 100%;
  margin: 18px 0 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.55;
}

.legal-table th,
.legal-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legal-table thead th {
  background: var(--panel-strong);
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.legal-table tbody tr:last-child > * {
  border-bottom: 0;
}

.legal-table tbody th {
  color: var(--ink);
  font-weight: 600;
}

.legal-table code {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Permission tables: the scope string is the row's title, full width. */
.legal-table.scopes thead {
  display: none;
}

.legal-table.scopes tbody tr {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.legal-table.scopes.single tbody tr {
  grid-template-columns: minmax(0, 1fr);
}

.legal-table.scopes tbody tr:last-child {
  border-bottom: 0;
}

.legal-table.scopes th,
.legal-table.scopes td {
  padding: 0;
  border: 0;
}

.legal-table.scopes tbody th {
  grid-column: 1 / -1;
  margin-bottom: 10px;
  font-weight: 500;
}

.legal-table.scopes td[data-label]::before {
  content: attr(data-label);
  display: block;
  margin-bottom: 2px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.prose .fine {
  color: var(--ink-faint);
  font-size: 14.5px;
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 22px;
}

.contact-card {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}

.contact-card span {
  display: block;
  color: var(--ink-faint);
  font-size: 13.5px;
}

.prose .contact-card a {
  font-weight: 600;
  text-decoration: none;
}

.prose .contact-card a:hover {
  text-decoration: underline;
}

@media (max-width: 960px) {
  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .toc {
    display: none;
  }

  .toc-mobile {
    display: block;
    margin: 0 0 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
  }

  .toc-mobile summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
  }

  .toc-mobile summary::-webkit-details-marker {
    display: none;
  }

  .toc-mobile summary::after {
    content: "+";
    color: var(--ink-soft);
    font-size: 18px;
    line-height: 1;
  }

  .toc-mobile[open] summary::after {
    content: "\2212";
  }

  .toc-mobile ol {
    padding: 0 8px 12px;
  }

  .prose {
    max-width: none;
  }
}

@media (max-width: 560px) {
  .prose {
    font-size: 16.5px;
    line-height: 1.7;
  }

  .glance,
  .contact-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .prose h2 {
    gap: 10px;
  }

  .prose h2 .anchor {
    display: none;
  }

  .legal-table,
  .legal-table thead,
  .legal-table tbody,
  .legal-table tr,
  .legal-table th,
  .legal-table td {
    display: block;
  }

  .legal-table thead {
    display: none;
  }

  .legal-table tbody tr {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
  }

  .legal-table tbody tr:last-child {
    border-bottom: 0;
  }

  .legal-table th,
  .legal-table td {
    padding: 2px 0;
    border: 0;
  }

  .legal-table.scopes tbody tr {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-table.scopes tbody th {
    margin-bottom: 4px;
  }

  .legal-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-top: 8px;
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  mark.ph {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toc a,
  .toc-mobile a,
  .prose a,
  .prose h2 .anchor {
    transition: none;
  }
}

@media print {
  :root {
    --bg: #fff;
    --bg-raise: #fff;
    --panel: transparent;
    --panel-strong: transparent;
    --line: #c8c8c8;
    --ink: #000;
    --ink-soft: #222;
    --ink-faint: #444;
    --prose-ink: #000;
    --emerald: #000;
    --cyan: #000;
    --blue: #000;
    --amber-ink: #000;
    --amber-bg: transparent;
    --amber-line: #000;
  }

  body {
    font-size: 11pt;
  }

  .skip,
  .nav,
  .footer,
  .toc,
  .toc-mobile,
  .glow,
  .prose h2 .anchor {
    display: none !important;
  }

  .legal-head {
    padding: 0 0 12pt;
  }

  .legal-head h1 {
    font-size: 26pt;
  }

  .legal-layout {
    display: block;
    padding: 12pt 0 0;
  }

  .wrap {
    width: 100%;
  }

  .prose {
    max-width: none;
    font-size: 11pt;
    line-height: 1.5;
  }

  .prose > section {
    padding-top: 14pt;
    break-inside: auto;
  }

  .prose > section + section {
    margin-top: 14pt;
  }

  .prose h2,
  .prose h3 {
    break-after: avoid;
  }

  .prose h2 {
    font-size: 16pt;
  }

  .glance,
  .callout,
  .legal-table tr {
    break-inside: avoid;
  }

  .callout::before {
    background: #000;
  }

  .prose a[href^="http"]::after,
  .prose a[href^="mailto:"]::after {
    content: " <" attr(href) ">";
    font-size: 0.85em;
    word-break: break-all;
  }

  .prose .contact-card a::after {
    content: none;
  }
}