/* ═══════════════════════════════════════════════════════════════════
   MELV — the marketing home page.
   ───────────────────────────────────────────────────────────────────
   Loaded AFTER app.css and depends on it for every colour, radius,
   shadow and easing token. Nothing here declares a raw hex except the
   two gradient washes, which are token colours at low alpha.

   That dependency is deliberate. A marketing site with its own palette
   drifts from the product within a month, and the first thing a visitor
   sees after signing up is the mismatch. Editing --accent in app.css
   moves this page too.

   Dark mode needs no work here for the same reason: app.css already
   defines all three states (system default, [data-theme="light"],
   [data-theme="dark"]) and everything below reads tokens.
   ═══════════════════════════════════════════════════════════════════ */

/* app.css sets 14px for a dense operations tool. A landing page is read
   at arm's length, not scanned all day. */
body.home { font-size: 16px; line-height: 1.6; }

/* ── --accent-ink: the accent when it is TEXT rather than a fill ─────
   Inside the app, public/palette.js computes this per theme and writes
   it at runtime. Nothing computes it here, because the marketing page
   has no tenant to paint from — so it is declared as a static token in
   all three theme states.

   It exists because using --accent directly as a foreground is a real
   bug and this page had it: #1F4E5F on the dark background measures
   2.09:1, far under the 4.5:1 AA floor, and the MELV column heading of
   the comparison table was effectively invisible in dark mode. The
   value below is what derivePalette('#1F4E5F', 'dark') returns, so the
   static token and the runtime one agree by construction.

   Light needs no adjustment: #1F4E5F on white is already 9.08:1. */
:root { --accent-ink: #1F4E5F; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent-ink: #3D8AAF; }
}
:root[data-theme="dark"] { --accent-ink: #3D8AAF; }

.wrap { width: min(1140px, calc(100% - 48px)); margin-inline: auto; }
.wrap.narrow { width: min(760px, calc(100% - 48px)); }

/* app.css makes .btn an 11px uppercase label. Right in a toolbar, far too
   quiet for a hero call to action. */
.btn-lg {
  font-size: 13px; letter-spacing: .04em;
  padding: 13px 22px; border-radius: var(--r);
}

.eyebrow { color: var(--ink-3); margin: 0 0 10px; }

.sec-title {
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.022em;
  font-weight: 600; margin: 0 0 14px; max-width: 20ch;
}
.sec-lede { color: var(--ink-2); font-size: 17px; max-width: 62ch; margin: 0 0 18px; }
.hint { color: var(--ink-3); font-size: 13px; margin: 8px 0 0; }
.fine { color: var(--ink-3); font-size: 12.5px; line-height: 1.6; max-width: 78ch; margin: 18px 0 0; }

/* ── nav ─────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 12px max(24px, calc((100% - 1140px) / 2));
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t), background var(--t);
}
/* The rule only appears once the page has moved, so the hero meets the
   nav as one surface. home.js sets .stuck. */
.nav.stuck { border-bottom-color: var(--line); }

.nav-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.nav-brand b { font-size: 19px; letter-spacing: .10em; font-weight: 700; }
.mark {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 8px; color: var(--on-accent); background: var(--accent);
}

.nav-links { display: flex; gap: 22px; margin-left: 12px; flex: 1; }
.nav-links a {
  color: var(--ink-2); text-decoration: none; font-size: 14px;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--ink); border-bottom-color: var(--accent-ink); }

.nav-actions { display: flex; align-items: center; gap: 8px; }

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

/* ── hero ────────────────────────────────────────────────────────── */

.hero {
  padding: clamp(48px, 7vw, 96px) 0 8px;
  background:
    radial-gradient(900px 520px at 15% -10%, var(--accent-soft), transparent 68%),
    radial-gradient(700px 420px at 92% 0%, var(--accent-soft), transparent 62%);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.hero h1 {
  font-size: clamp(34px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -.032em;
  font-weight: 600; margin: 0 0 18px;
}
.lede { font-size: clamp(16px, 1.35vw, 19px); color: var(--ink-2); max-width: 54ch; margin: 0 0 26px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.cta-note { font-size: 13.5px; color: var(--ink-2); margin: 0; }
.cta-note b { color: var(--ink); }

/* Stacked on narrow screens, and the COPY stays first. An earlier version
   promoted the artwork above the headline, which pushed the one sentence
   explaining what this product is below the fold on a phone. */
@media (max-width: 940px) {
  /* minmax(0, 1fr), not 1fr. A grid item's min-width defaults to auto, which
     is min-content — so one long unbreakable phrase makes the TRACK wider
     than the container that holds it, and the text runs past the page
     margin without ever scrolling the document. Measured at 375px: the h1
     rendered 324px wide inside a 297px wrap. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { order: -1; }
  /* Belt and braces: if a single word is ever genuinely wider than the
     column, break it rather than letting it escape the layout. */
  .hero h1 { overflow-wrap: break-word; }
}

/* ── the drawn product window ────────────────────────────────────── */
/*
 * Not a screenshot. The asset CSP is img-src 'self' data:, so there is no
 * CDN photography available — and a real screenshot would go stale and
 * would only ever be right in one theme. This is built from the same
 * tokens as the app, so it follows light/dark and follows the brand.
 */
.win {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--sh-3); overflow: hidden;
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
  transition: transform 400ms cubic-bezier(.2,0,.2,1);
}
.win:hover { transform: perspective(1400px) rotateY(-3deg) rotateX(1deg); }
@media (prefers-reduced-motion: reduce) { .win, .win:hover { transform: none; transition: none } }
@media (max-width: 940px) { .win { transform: none } }

.win-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-sunk);
}
.win-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.win-bar .dot.r { background: #E06C60 } .win-bar .dot.a { background: #E3B341 } .win-bar .dot.g { background: #57A773 }
.win-title { margin-left: 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600 }

.win-body { padding: 14px }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px }
.stat {
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 10px; background: var(--surface-2);
}
.stat small { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 600 }
.stat b { font-family: var(--mono); font-size: 19px; font-weight: 600; letter-spacing: -.02em }

.q-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-3); padding: 0 2px 8px;
}
.q-head em { font-style: normal; color: var(--accent-ink); }

.q-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: var(--r-sm); border: 1px solid transparent;
}
.q-row + .q-row { border-top: 1px solid var(--line-2) }
.q-row.muted { opacity: .55 }
.q-row .av {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink); font-size: 11px; font-weight: 600;
  flex: 0 0 auto;
}
.q-row div { flex: 1; min-width: 0 }
.q-row b { display: block; font-size: 13.5px; font-weight: 600 }
.q-row small { color: var(--ink-3); font-size: 11.5px }

.pill {
  font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.pill.warm { background: var(--amber-soft); color: var(--amber) }
.pill.new  { background: var(--slate-soft); color: var(--slate) }
.pill.due  { background: var(--green-soft); color: var(--green) }
.pill.cap  { background: var(--red-soft);   color: var(--red) }

/* ── proof strip ─────────────────────────────────────────────────── */

.proof {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-top: clamp(36px, 5vw, 64px); padding: 22px 0 0; border-top: 1px solid var(--line);
}
.proof b {
  display: block; font-family: var(--mono); font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 600; letter-spacing: -.02em;
}
.proof small { color: var(--ink-3); font-size: 12.5px }
@media (max-width: 700px) { .proof { grid-template-columns: repeat(2, 1fr) } }

/* The attribution under the proof strip. Deliberately visible rather than an
   HTML comment: naming whose numbers these are is what makes them evidence
   rather than decoration. */
.proof-note { color: var(--ink-3); font-size: 12.5px; max-width: 66ch; margin: 14px auto 0; }

/* ── bands ───────────────────────────────────────────────────────── */

.band { padding: clamp(56px, 8vw, 104px) 0; }
.band.alt { background: var(--surface-sunk); border-block: 1px solid var(--line); }

.prob-grid, .feat-grid {
  display: grid; gap: 18px; margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}
.prob h3, .feat h3 { font-size: 16.5px; font-weight: 600; margin: 0 0 8px; letter-spacing: -.01em }
.prob p, .feat p { color: var(--ink-2); font-size: 14.5px; margin: 0 }

.prob {
  padding: 22px; border-radius: var(--r-lg);
  border: 1px solid var(--line); border-left: 3px solid var(--red);
  background: var(--surface);
}
.feat {
  padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: var(--surface); box-shadow: var(--sh-1);
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.feat:hover { box-shadow: var(--sh-2); border-color: var(--accent-ink); transform: translateY(-2px) }
@media (prefers-reduced-motion: reduce) { .feat:hover { transform: none } }
.feat .ico {
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px;
  border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); font-size: 16px;
}

/* ── comparison table ────────────────────────────────────────────── */

.table-scroll { overflow-x: auto; margin-top: 26px; border-radius: var(--r-lg); border: 1px solid var(--line) }
.cmp { width: 100%; border-collapse: collapse; background: var(--surface); min-width: 720px }
.cmp th, .cmp td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--line-2); vertical-align: top }
.cmp thead th {
  background: var(--surface-sunk); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.cmp tbody th { font-weight: 500; font-size: 14px; color: var(--ink-2); text-transform: none; letter-spacing: 0 }
.cmp td { font-size: 14px }
.cmp td small { display: block; color: var(--ink-3); font-size: 11.5px }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0 }

/* The MELV column is tinted rather than bolded, so the table still reads as
   a comparison and not as an advert with a table around it. */
.cmp .us { background: var(--accent-soft); }
.cmp thead .us { color: var(--accent-ink); background: var(--accent-soft) }
.cmp td.us b { font-family: var(--mono); font-size: 17px }

.cmp i { font-style: normal; font-size: 13.5px }
.cmp .yes { color: var(--green); font-weight: 600 }
.cmp .no  { color: var(--red) }
.cmp .dim { color: var(--ink-3) }

.pledge {
  margin-top: 30px; padding: 24px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface);
}
.pledge h3 { margin: 0 0 12px; font-size: 17px; font-weight: 600 }
.pledge ul { margin: 0; padding-left: 20px; display: grid; gap: 9px }
.pledge li { color: var(--ink-2); font-size: 14.5px }
.pledge li b { color: var(--ink) }

/* ── branding demo ───────────────────────────────────────────────── */

.brandy { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.82fr); gap: clamp(28px,5vw,64px); align-items: center }
@media (max-width: 940px) { .brandy { grid-template-columns: 1fr } }

.brand-demo { padding: 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-2) }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px }
.swatches button {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--line); padding: 0;
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.swatches button:hover { transform: scale(1.12) }
.swatches button[aria-pressed="true"] { border-color: var(--ink); transform: scale(1.12) }

/*
 * The preview is scoped with its own custom properties rather than writing
 * to :root, so dragging a colour here cannot repaint the whole page — the
 * visitor is trying one on, not committing to it.
 */
.mini-app {
  --pv-accent: var(--accent); --pv-on: var(--on-accent); --pv-ink: var(--accent-ink);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg);
}
.mini-rail {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.mini-mark {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: var(--pv-accent); color: var(--pv-on); font-weight: 700; font-size: 13px;
}
.mini-rail b { font-size: 14px; letter-spacing: -.01em }
.mini-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 12px }
.mini-link { color: var(--pv-ink); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px }
.mini-btn {
  background: var(--pv-accent); color: var(--pv-on); border: 0; cursor: pointer;
  padding: 9px 14px; border-radius: var(--r-sm); font: inherit; font-size: 12.5px; font-weight: 600;
}
.mini-foot {
  padding: 9px 12px; border-top: 1px solid var(--line); background: var(--surface);
  font-size: 11px; color: var(--ink-3); text-align: center;
}
.mini-foot b { color: var(--ink-2); letter-spacing: .08em }

/* ── pricing ─────────────────────────────────────────────────────── */

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; align-items: start }
@media (max-width: 940px) { .tiers { grid-template-columns: 1fr } }

.tier {
  position: relative; padding: 26px 24px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-1);
  display: flex; flex-direction: column; gap: 14px;
}
/* The middle tier is the recommendation, and saying so measurably moves
   which one people pick. It is the honest recommendation too — a team is
   what this product is actually for. */
.tier.pop { border-color: var(--accent); box-shadow: var(--sh-2); }
.tier-flag {
  position: absolute; top: -11px; left: 24px;
  background: var(--accent); color: var(--on-accent);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
}
.tier h3 { margin: 0; font-size: 19px; font-weight: 600 }
.tier .tagline { color: var(--ink-2); font-size: 14px; margin: -6px 0 0 }
.price { display: flex; align-items: baseline; gap: 6px }
.price b { font-family: var(--mono); font-size: 38px; font-weight: 600; letter-spacing: -.03em }
.price span { color: var(--ink-3); font-size: 13px }
.price .quote { font-family: var(--sans); font-size: 26px }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; flex: 1 }
.tier li { position: relative; padding-left: 22px; font-size: 14px; color: var(--ink-2) }
.tier li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  color: var(--accent-ink); font-weight: 700; font-size: 13px;
}
.tier .seatnote { color: var(--ink-3); font-size: 12px; margin: 0 }

/* ── faq ─────────────────────────────────────────────────────────── */

.faq { margin-top: 26px; border-top: 1px solid var(--line) }
.faq details { border-bottom: 1px solid var(--line) }
.faq summary {
  cursor: pointer; padding: 17px 34px 17px 0; position: relative;
  font-size: 16px; font-weight: 500; list-style: none;
}
.faq summary::-webkit-details-marker { display: none }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 15px;
  font-size: 20px; color: var(--ink-3); transition: transform var(--t);
}
.faq details[open] summary::after { transform: rotate(45deg) }
.faq p { margin: 0 0 18px; color: var(--ink-2); max-width: 68ch; font-size: 15px }

/* ── closer + footer ─────────────────────────────────────────────── */

.closer {
  padding: clamp(56px, 8vw, 100px) 0; text-align: center;
  background: radial-gradient(800px 400px at 50% 0%, var(--accent-soft), transparent 70%);
  border-top: 1px solid var(--line);
}
.closer h2 { font-size: clamp(24px, 3.2vw, 36px); letter-spacing: -.024em; font-weight: 600; margin: 0 auto 12px; max-width: 22ch }
.closer p { color: var(--ink-2); max-width: 56ch; margin: 0 auto 24px }

.foot { border-top: 1px solid var(--line); background: var(--surface-sunk); padding: 44px 0 0 }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr } }
.foot nav { display: flex; flex-direction: column; gap: 9px }
.foot nav .lab { color: var(--ink-3) }
.foot a { color: var(--ink-2); text-decoration: none; font-size: 14px }
.foot a:hover { color: var(--accent-ink) }
.foot-note { color: var(--ink-3); font-size: 13px; margin: 12px 0 0 }
.foot-base { margin-top: 34px; padding: 16px 0; border-top: 1px solid var(--line); color: var(--ink-3) }

/* ── signup dialog ───────────────────────────────────────────────── */

.modal {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--ink) 42%, transparent);
  backdrop-filter: blur(3px);
}
.modal-card {
  position: relative; width: min(440px, 100%); max-height: 92vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); padding: 30px; display: flex; flex-direction: column; gap: 13px;
  animation: rise var(--t) both;
}
.modal-x {
  position: absolute; top: 12px; right: 12px; border: 0; background: transparent;
  color: var(--ink-3); font-size: 15px; cursor: pointer; padding: 6px; border-radius: var(--r-sm);
}
.modal-x:hover { background: var(--surface-sunk); color: var(--ink) }

.su-steps { display: flex; gap: 5px; margin-bottom: 2px }
.su-steps i { height: 3px; flex: 1; border-radius: 999px; background: var(--line); transition: background var(--t) }
.su-steps i.on { background: var(--accent) }

.su-step { display: flex; flex-direction: column; gap: 13px }
.su-foot { color: var(--ink-3); font-size: 11.5px; margin: 4px 0 0; line-height: 1.5 }

.fork { display: grid; gap: 9px }
.fork-card {
  display: block; cursor: pointer; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.fork-card:hover { border-color: var(--accent) }
.fork-card input { position: absolute; opacity: 0; pointer-events: none }
.fork-card b { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 2px }
.fork-card small { color: var(--ink-2); font-size: 12.5px; line-height: 1.45; display: block }
.fork-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft) }
.fork-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px }

/* ── reveal on scroll ────────────────────────────────────────────── */
/*
 * Applied by home.js only, never in the stylesheet itself. If the script
 * fails to load, nothing is hidden — a CSS-first implementation would leave
 * the entire page invisible on a JS error, which is the classic version of
 * this bug.
 */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 500ms var(--t), transform 500ms cubic-bezier(.2,0,.2,1) }
.reveal.in { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none } }

/* ── the page on a phone ─────────────────────────────────────────────
   Two measured breakages, both on the surface a first-time visitor
   actually arrives on.

   1. The nav CTAs inherit .btn from app.css — 11px uppercase with no
      nowrap — so "Start free trial" rendered as three stacked lines at
      375px. The duplicate Sign in link goes at that width too: /app is
      one tap away from the trial flow, and dropping it buys the ~68px
      the CTA needs to stay on one line.

   2. .stat-row is repeat(4, 1fr), whose tracks cannot shrink below the
      min-content of "Conversations" and "Talk time" — so the fourth
      stat overran .win's overflow:hidden by 12px and was clipped
      mid-glyph below about 402px. Two columns, and it fits. */
@media (max-width: 620px) {
  .nav .btn { white-space: nowrap; padding: 9px 11px; }
  .nav-actions .btn.ghost[href="/app"] { display: none; }
}
@media (max-width: 460px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── trust pages: /security /privacy /terms /contact ─────────────────
   Long-form legal and policy text, which is a different reading job from
   the marketing page above. Measure is capped near 68 characters, headings
   get room, and tables are the two-column term/definition kind rather than
   data grids — these documents are scanned for one clause at a time, not
   read straight through. */
.doc { padding: 104px 0 72px; max-width: 760px; }
.doc-h1 { font-size: clamp(30px, 5vw, 42px); line-height: 1.1; letter-spacing: -.02em;
  margin: 6px 0 0; text-wrap: balance; }
.doc-updated { color: var(--ink-3); font-size: 13px; margin: 10px 0 0;
  font-variant-numeric: tabular-nums; }
.doc-lede { font-size: 17px; color: var(--ink-2); margin: 24px 0 0; }
.doc h2 { font-size: 21px; letter-spacing: -.01em; margin: 44px 0 0;
  padding-top: 22px; border-top: 1px solid var(--line); }
.doc h2:first-of-type { border-top: 0; padding-top: 0; }
.doc p { margin: 14px 0 0; }
.doc ul { margin: 14px 0 0; padding-left: 20px; }
.doc li { margin: 8px 0; }
.doc code { font-family: var(--mono, ui-monospace, monospace); font-size: 13px;
  background: var(--surface-sunk); padding: 2px 6px; border-radius: 5px;
  overflow-wrap: anywhere; }
.doc a { color: var(--accent); }

/* Two-column term/definition. Scrolls inside itself on a phone rather than
   pushing the page sideways. */
.doc-table { width: 100%; border-collapse: collapse; margin: 16px 0 0;
  display: block; overflow-x: auto; }
.doc-table td { border-top: 1px solid var(--line); padding: 12px 14px 12px 0;
  vertical-align: top; font-size: 14.5px; }
.doc-table tr td:first-child { width: 34%; min-width: 150px; color: var(--ink); }
.doc-table tr:first-child td { border-top: 0; }

/* The "what we do not claim" block is the most important thing on the
   security page, so it is given a colour rather than left as more prose. */
#not-claimed { border-top-color: var(--amber, #b26b00); }
#not-claimed + .doc-lede { color: var(--amber, #b26b00); }