/* Respond — withrespond.com
   ---------------------------------------------------------------------------
   The palette is the application's own: pure black, white, and #3c3e40 as the
   only structural stroke. No accent hue is introduced, because the app has
   none, and a marketing site that invents one would be describing a different
   product.

   The material instead is *resolution*: things arrive faint and settle to full
   opacity, which is exactly how Respond's own windows behave over the app
   underneath them. Motion means "this came into focus", never "this is modern".
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
}

:root {
  color-scheme: dark;

  --surface: #000;
  --stroke: #3c3e40;

  /* Alphas carried over from the app, where each tier was chosen to clear
     4.5:1 against pure black. */
  --text: rgba(255, 255, 255, 0.97);
  --text-soft: rgba(255, 255, 255, 0.78);
  --text-faint: rgba(255, 255, 255, 0.68);
  /* 0.52 is the floor for the quietest tier: below it, 12–13px labels drop
     under 4.5:1 on black. It still reads a clear step below --text-faint. */
  --text-ghost: rgba(255, 255, 255, 0.52);

  --edge: rgba(255, 255, 255, 0.13);
  --edge-strong: rgba(255, 255, 255, 0.24);
  --fill: rgba(255, 255, 255, 0.07);
  --fill-hover: rgba(255, 255, 255, 0.13);

  --radius-card: 22px;
  --radius-control: 12px;
  --radius-window: 14px;

  /* Exponential ease-out, matching the app's --ease exactly. */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);

  /* Measured, not guessed: Inter's ch unit runs narrower than its average
     glyph, so 68ch rendered at 83 characters a line. 58ch lands near 70. */
  --measure: 58ch;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --section-gap: clamp(6rem, 14vh, 11rem);

  --z-sticky: 100;
  --z-nav: 200;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--surface);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.shell {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* ------------------------------------------------------------------ type */

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.5rem, 7.2vw, 5.25rem);
}

h2 {
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
}

h3 {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

p { text-wrap: pretty; }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 46ch;
}

.section-note {
  color: var(--text-faint);
  font-size: 0.95rem;
  max-width: 52ch;
  margin-top: 1.1rem;
  line-height: 1.65;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: 46px;
  padding-inline: 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  background: #fff;
  color: #000;
  transition: transform 200ms var(--ease), filter 200ms var(--ease);
}

.btn:hover { filter: brightness(0.88); }
.btn:active { transform: scale(0.985); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--stroke);
}

.btn--ghost:hover {
  background: var(--fill);
  filter: none;
  border-color: var(--edge-strong);
}

.btn-note {
  color: var(--text-faint);
  font-size: 0.85rem;
  letter-spacing: 0;
}

/* -------------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--ease);
}

.nav[data-scrolled='true'] { border-bottom-color: var(--edge); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 62px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.wordmark img { width: 21px; height: 21px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
}

.nav-links a {
  color: var(--text-faint);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 180ms var(--ease);
}

.nav-links a:hover { color: var(--text); }

.nav .btn { height: 36px; padding-inline: 0.95rem; font-size: 0.875rem; }

@media (max-width: 720px) {
  .nav-links { display: none; }
}

/* ------------------------------------------------------------------- hero */

.hero {
  padding-block: clamp(4rem, 12vh, 8.5rem) clamp(2.5rem, 6vh, 4rem);
}

.hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: end;
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2rem;
}

/* On a narrow column the row wraps into an uneven two-line arrangement, and
   the reassurance ends up beside the secondary link instead of under the
   button it qualifies. Stack them, and reorder so the note follows the
   download it is talking about. */
@media (max-width: 620px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 0.7rem;
  }

  .hero-actions .btn { width: 100%; }
  .hero-actions .btn-note { order: 1; }
  .hero-actions .btn--ghost { order: 2; }
}

.hero-side { display: grid; gap: 1.4rem; }

/* The specimen is the argument: one real message, resolving from the language
   it arrived in into the language you read. The product, performed. */
.specimen {
  border: 1px solid var(--edge);
  border-radius: var(--radius-card);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.05), transparent 62%),
    rgba(255, 255, 255, 0.018);
}

.specimen-row + .specimen-row {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--edge);
}

.specimen-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-ghost);
  letter-spacing: 0.02em;
  margin-bottom: 0.4rem;
}

.specimen-text {
  font-size: clamp(1rem, 1.7vw, 1.15rem);
  line-height: 1.45;
  letter-spacing: -0.015em;
  min-height: 2.9em;
}

.specimen-text[data-role='source'] { color: var(--text-soft); }
.specimen-text[data-role='target'] { color: var(--text); font-weight: 500; }

/* Each word settles in on its own beat, the way a translation arrives. */
.word {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(0.28em);
  animation: settle 620ms var(--ease-quart) forwards;
}

@keyframes settle {
  to { opacity: 1; filter: blur(0); transform: none; }
}

/* --------------------------------------------------------------- sections */

.section { padding-block: var(--section-gap); }

.section-head { max-width: 38ch; }

.section-head + * { margin-top: clamp(2.5rem, 5vw, 4rem); }

.rule {
  height: 1px;
  background: var(--edge);
  border: 0;
}

/* ------------------------------------------------------------------- demo */

.demo { scroll-margin-top: 80px; }

.demo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--edge);
}

.demo-tab {
  position: relative;
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-faint);
  padding: 0.7rem 0.9rem 0.85rem;
  cursor: pointer;
  transition: color 200ms var(--ease);
}

.demo-tab:hover { color: var(--text-soft); }
.demo-tab[aria-selected='true'] { color: var(--text); }

.demo-tab::after {
  content: '';
  position: absolute;
  inset-inline: 0.55rem;
  bottom: -1px;
  height: 1px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease);
}

.demo-tab[aria-selected='true']::after { transform: scaleX(1); }

/* A window that is plainly someone else's application. Respond's own surfaces
   are the only things drawn in the brand's black; everything under them is
   deliberately a different, softer grey so the layering reads instantly. */
.scene {
  position: relative;
  border: 1px solid var(--edge);
  border-radius: var(--radius-card);
  background: #0a0a0b;
  overflow: hidden;
  min-height: 430px;
  isolation: isolate;
}

.scene-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 42px;
  padding-inline: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.022);
}

.scene-dots { display: flex; gap: 6px; }
.scene-dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.scene-app {
  font-size: 0.82rem;
  color: var(--text-faint);
  letter-spacing: -0.005em;
}

.scene-body {
  display: grid;
  gap: 1rem;
  padding: clamp(1.1rem, 3vw, 1.9rem);
}

.msg { display: flex; gap: 0.75rem; align-items: flex-start; max-width: 40rem; }

.msg-avatar {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-faint);
}

.msg-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-soft);
  margin-bottom: 0.1rem;
}

.msg-name span {
  font-weight: 400;
  color: var(--text-ghost);
  margin-left: 0.45rem;
  font-size: 0.75rem;
}

.msg-text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-soft);
}

/* The reply landing in the conversation. It holds its place in the layout from
   the start, so arriving does not push the message above it around. */
.msg--out {
  justify-content: flex-end;
  margin-left: auto;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 420ms var(--ease-quart), transform 420ms var(--ease-quart);
}

/* Delayed just past the panel's own fade, so the two hand over rather than
   crossfading on top of each other in the same space. */
.scene[data-phase='sent'] .msg--out {
  opacity: 1;
  transform: none;
  transition-delay: 190ms;
}

.scene[data-complete='true'] .msg--out {
  opacity: 1;
  transform: none;
}

.msg-bubble {
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  padding: 0.5rem 0.75rem 0.55rem;
}

.msg--out .msg-name { text-align: right; }
.msg--out .msg-text { color: var(--text); }

/* The highlight sweeps in from the left, the way a real drag-select does. */
.msg-text mark {
  background: transparent;
  color: inherit;
  padding: 0.05em 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 520ms var(--ease-quart);
}

.scene[data-phase='select'] .msg-text mark,
.scene[data-phase='orb'] .msg-text mark,
.scene[data-phase='panel'] .msg-text mark,
.scene[data-phase='sent'] .msg-text mark { background-size: 100% 100%; }

/* Respond's own surfaces, rendered exactly as the app draws them. */
.respond-orb,
.respond-panel,
.respond-hover {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease), transform 380ms var(--ease-quart);
}

.respond-orb {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--stroke);
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  transform: scale(0.72);
}

.respond-orb img { width: 17px; height: 17px; }

.scene[data-phase='orb'] .respond-orb { opacity: 1; transform: scale(1); }

.respond-panel {
  width: min(340px, 76%);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-window);
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(18px);
  padding: 0.95rem 1rem 1rem;
  transform: translateY(10px) scale(0.985);
  box-shadow: 0 26px 60px -24px rgba(0, 0, 0, 0.9);
}

.scene[data-phase='panel'] .respond-panel { opacity: 1; transform: none; }

.respond-hover {
  max-width: min(360px, 80%);
  border: 1px solid var(--stroke);
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.93);
  backdrop-filter: blur(16px);
  padding: 0.6rem 0.8rem;
  transform: translateY(6px);
  box-shadow: 0 20px 46px -22px rgba(0, 0, 0, 0.9);
}

.scene[data-phase='hover'] .respond-hover { opacity: 1; transform: none; }

.panel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--text-ghost);
  margin-bottom: 0.55rem;
}

.panel-head img { width: 13px; height: 13px; opacity: 0.75; }

.panel-source {
  font-size: 0.82rem;
  color: var(--text-ghost);
  line-height: 1.45;
  margin-bottom: 0.5rem;
}

.panel-result {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
  font-weight: 500;
}

.panel-reply {
  margin-top: 0.8rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--edge);
}

.panel-input {
  border: 1px solid var(--edge);
  border-radius: 9px;
  background: var(--fill);
  padding: 0.5rem 0.65rem;
  font-size: 0.88rem;
  color: var(--text-soft);
  min-height: 2.4em;
}

.caret {
  display: inline-block;
  width: 1px;
  height: 1.05em;
  background: var(--text);
  vertical-align: -0.16em;
  margin-left: 1px;
  animation: blink 1.05s steps(1, end) infinite;
}

@keyframes blink { 50% { opacity: 0; } }

.panel-out {
  margin-top: 0.55rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
  font-weight: 500;
}

.panel-copied {
  margin-top: 0.5rem;
  font-size: 0.74rem;
  color: var(--text-ghost);
}

/* Simulated cursor. Its travel is what sells the sequence as a real gesture.
   left/top must be pinned to 0: without them an absolutely positioned element
   keeps its static position as the transform origin, which for this SVG is
   below the message list, and every coordinate lands that far too low. */
.cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 15px; height: 21px;
  z-index: 5;
  opacity: 0;
  transition: opacity 240ms var(--ease), transform 720ms var(--ease-quart);
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

.scene[data-cursor='on'] .cursor { opacity: 1; }

.demo-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.1rem;
  color: var(--text-faint);
  font-size: 0.9rem;
}

.demo-replay {
  appearance: none;
  border: 1px solid var(--edge);
  background: none;
  color: var(--text-faint);
  font: inherit;
  font-size: 0.82rem;
  border-radius: 8px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}

.demo-replay:hover { color: var(--text); border-color: var(--edge-strong); }

/* ------------------------------------------------------- quality compare */

.compare {
  display: grid;
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: var(--radius-card);
  overflow: hidden;
}

@media (min-width: 780px) {
  .compare { grid-template-columns: 1fr 1fr; }
}

.compare-cell {
  background: var(--surface);
  padding: clamp(1.4rem, 3vw, 2.1rem);
}

.compare-cell[data-tier='pro'] { background: rgba(255, 255, 255, 0.028); }

.compare-tier {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-faint);
  margin-bottom: 1rem;
}

.compare-out {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.compare-cell[data-tier='free'] .compare-out { color: var(--text-ghost); }
.compare-cell[data-tier='pro'] .compare-out { color: var(--text); }

.compare-verdict {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--text-faint);
}

.compare-input {
  border: 1px solid var(--edge);
  border-radius: var(--radius-card);
  padding: clamp(1.2rem, 2.5vw, 1.6rem);
  margin-bottom: 1.25rem;
}

.compare-input .specimen-label { margin-bottom: 0.5rem; }

.compare-input p {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.4;
  letter-spacing: -0.018em;
  color: var(--text-soft);
}

/* ------------------------------------------------------------ everywhere */

.surface-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  list-style: none;
}

.surface-list li {
  border: 1px solid var(--edge);
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  font-size: 0.88rem;
  color: var(--text-soft);
}

/* --------------------------------------------------------------- privacy */

.promises {
  display: grid;
  gap: 1px;
  background: var(--edge);
  border-block: 1px solid var(--edge);
}

@media (min-width: 760px) {
  .promises { grid-template-columns: repeat(2, 1fr); }
}

.promise {
  background: var(--surface);
  padding: clamp(1.4rem, 3vw, 2rem);
}

.promise h3 { margin-bottom: 0.5rem; }

.promise p {
  color: var(--text-faint);
  font-size: 0.93rem;
  line-height: 1.65;
  max-width: 40ch;
}

/* --------------------------------------------------------------- pricing */

.plans {
  display: grid;
  gap: clamp(1rem, 2vw, 1.25rem);
}

@media (min-width: 760px) {
  .plans { grid-template-columns: 1fr 1fr; }
}

.plan {
  border: 1px solid var(--edge);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.plan[data-tier='pro'] {
  border-color: var(--edge-strong);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(255, 255, 255, 0.055), transparent 60%),
    rgba(255, 255, 255, 0.02);
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.plan-price small {
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text-faint);
}

.plan ul { list-style: none; display: grid; gap: 0.6rem; }

.plan li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.93rem;
  color: var(--text-soft);
  line-height: 1.5;
}

.plan li::before {
  content: '';
  position: absolute;
  left: 0.3rem;
  top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--text-ghost);
}

.plan .btn { margin-top: auto; }

/* ------------------------------------------------------------------- cta */

.closer {
  text-align: center;
  padding-block: clamp(5rem, 12vh, 8rem);
  border-top: 1px solid var(--edge);
}

.closer .lede { margin-inline: auto; }

.closer .hero-actions { justify-content: center; }

/* ---------------------------------------------------------------- footer */

.footer {
  border-top: 1px solid var(--edge);
  padding-block: 2.5rem 3rem;
}

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

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  list-style: none;
}

.footer a {
  color: var(--text-faint);
  font-size: 0.88rem;
  text-decoration: none;
  transition: color 180ms var(--ease);
}

.footer a:hover { color: var(--text); }

.footer-legal {
  color: var(--text-ghost);
  font-size: 0.82rem;
}

/* ------------------------------------------------------------ legal pages */

.legal {
  padding-block: clamp(3.5rem, 9vh, 6rem) clamp(4rem, 10vh, 7rem);
}

.legal-head { max-width: var(--measure); margin-bottom: 3rem; }

.legal-head h1 {
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  margin-bottom: 0.9rem;
}

.legal-updated {
  color: var(--text-ghost);
  font-size: 0.88rem;
}

.legal-body { max-width: var(--measure); }

.legal-body h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  letter-spacing: -0.025em;
  margin-top: 3rem;
  margin-bottom: 0.9rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--edge);
}

.legal-body h2:first-of-type { margin-top: 0; border-top: 0; padding-top: 0; }

.legal-body h3 {
  margin-top: 1.8rem;
  margin-bottom: 0.55rem;
  color: var(--text);
}

.legal-body p,
.legal-body li {
  color: var(--text-soft);
  font-size: 0.97rem;
  line-height: 1.75;
}

.legal-body p + p { margin-top: 1rem; }

.legal-body ul,
.legal-body ol {
  margin: 1rem 0 0 1.15rem;
  display: grid;
  gap: 0.55rem;
}

.legal-body a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--stroke);
  transition: text-decoration-color 180ms var(--ease);
}

.legal-body a:hover { text-decoration-color: currentColor; }

.legal-body strong { color: var(--text); font-weight: 500; }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.2rem;
  font-size: 0.92rem;
}

.legal-table th,
.legal-table td {
  text-align: left;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--edge);
  vertical-align: top;
  color: var(--text-soft);
}

.legal-table th {
  color: var(--text);
  font-weight: 500;
  background: rgba(255, 255, 255, 0.025);
}

.legal-scroll { overflow-x: auto; }

.callout {
  border: 1px solid var(--edge);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.025);
  padding: 1.1rem 1.25rem;
  margin-top: 1.4rem;
}

.callout p { color: var(--text); font-size: 0.93rem; }

/* --------------------------------------------------- scroll-in behaviour */

/* Content is visible by default; the reveal only enhances it. A headless
   renderer or a background tab therefore never ships a blank section. */
[data-reveal] {
  transition: opacity 700ms var(--ease-quart), transform 700ms var(--ease-quart);
}

[data-reveal][data-revealed='false'] {
  opacity: 0;
  transform: translateY(14px);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-reveal][data-revealed='false'] { opacity: 1; transform: none; }
  .word { opacity: 1; filter: none; transform: none; animation: none; }
  .cursor { display: none; }
}