/* ───────────────────────────────────────────────────────────────
   Cancha marketing site

   Identity comes from the subject: a Saturday-morning pitch in
   Oklahoma. Deep pitch green as ground, chalk-line white as paper,
   red-dirt clay as the accent.

   Type: heavy negative-tracked sans for display (team-sheet
   lettering), warm serif for reading (this is a community product,
   not a SaaS dashboard).

   Bilingual: every translatable block appears twice, tagged
   data-l="es" / data-l="en". CSS shows one set. Spanish is the
   default in the markup itself, so it survives with JavaScript off.
   ─────────────────────────────────────────────────────────────── */

:root {
  --ground:      #F2F4EF;
  --ground-2:    #E7EBE3;
  --ink:         #14261B;
  --muted:       #5C6B60;
  --rule:        #D3DACD;
  --accent:      #B4491F;
  --accent-soft: #F0DCD2;
  --gold:        #9A6D12;
  --chalk:       #FFFFFF;

  --display: ui-sans-serif, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --body: Georgia, "Iowan Old Style", Charter, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 64ch;
  --page: 1120px;
  --step: clamp(1rem, 0.6rem + 1.6vw, 1.6rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0E1F15; --ground-2: #142A1D; --ink: #EAEFE7; --muted: #91A497;
    --rule: #24402E; --accent: #E0703F; --accent-soft: #2E1D14; --gold: #E8B33C; --chalk: #17301F;
  }
}
:root[data-theme="dark"] {
  --ground: #0E1F15; --ground-2: #142A1D; --ink: #EAEFE7; --muted: #91A497;
  --rule: #24402E; --accent: #E0703F; --accent-soft: #2E1D14; --gold: #E8B33C; --chalk: #17301F;
}
:root[data-theme="light"] {
  --ground: #F2F4EF; --ground-2: #E7EBE3; --ink: #14261B; --muted: #5C6B60;
  --rule: #D3DACD; --accent: #B4491F; --accent-soft: #F0DCD2; --gold: #9A6D12; --chalk: #FFFFFF;
}

/* Brand names are never translated. Without this, Chrome renders the
   wordmark as "Dogcha": the markup splits it into "Can" + "cha", and
   "can" is Spanish for dog. The .brand class is paired with a
   translate="no" attribute applied at load. */
.brand { white-space: nowrap; }

/* ── language switching ───────────────────────────────────────── */
/* Hide the language NOT in use — never re-declare display on the visible one.
   `display: revert` looked right here and is a trap: it reverts to the
   user-agent default (block for a div), not to the author rule, which silently
   turned .cta-row's flex row into a stacked column in English only.
   Spanish is the default in the markup itself, so a visitor with JS disabled
   still gets a complete Spanish page. */
:root[data-site-lang="es"] [data-l="en"] { display: none; }
:root[data-site-lang="en"] [data-l="es"] { display: none; }

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--body); font-size: 17px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--step); }

/* ── type ─────────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.032em;
  line-height: 1.02; text-wrap: balance; margin: 0;
}
h1 { font-size: clamp(2.5rem, 1.3rem + 5vw, 5.2rem); }
h2 { font-size: clamp(1.8rem, 1.15rem + 2.3vw, 2.9rem); }
h3 { font-size: 1.16rem; letter-spacing: -0.018em; }
p { margin: 0; max-width: var(--measure); }

.eyebrow {
  font-family: var(--display); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0;
}
.lede { font-size: clamp(1.05rem, 0.98rem + 0.5vw, 1.28rem); color: var(--muted); }
.small { font-size: 0.9rem; color: var(--muted); }

/* ── scaffolding ──────────────────────────────────────────────── */
.section { padding: clamp(3.5rem, 2rem + 6vw, 7.5rem) 0; border-top: 1px solid var(--rule); }
.section-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 3.5rem; }
.stack { display: flex; flex-direction: column; gap: 1.1rem; }
.grid { display: grid; gap: 1.5rem; }

/* ── header ───────────────────────────────────────────────────── */
.masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.4rem 0; flex-wrap: wrap;
}
.logo-row { display: flex; align-items: center; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo {
  font-family: var(--display); font-weight: 800; font-size: 1.4rem;
  letter-spacing: -0.04em; display: inline-flex; align-items: baseline;
}
/* The descriptor carries the full name without shouting it. */
.logo-sub {
  font-family: var(--display); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted);
  margin-top: 0.22rem;
}
.logo b { color: var(--accent); font-weight: 800; }
.logo-mark {
  width: 1.45rem; height: 1.45rem; margin-right: 0.5rem;
  border: 2.5px solid var(--ink); border-radius: 3px;
  position: relative; align-self: center; flex: none;
}
.logo-mark::before { content: ""; position: absolute; inset: 0; left: 50%; border-left: 2.5px solid var(--ink); }
.logo-mark::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 0.48rem; height: 0.48rem;
  transform: translate(-50%, -50%); border: 2.5px solid var(--accent); border-radius: 50%;
}

/* the language switch — a segmented control, both states always visible
   so nobody has to guess what the button will do */
.lang {
  display: inline-flex; border: 1.5px solid var(--ink); border-radius: 3px;
  overflow: hidden; flex: none;
}
.lang button {
  font-family: var(--display); font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.04em; padding: 0.5rem 0.9rem; cursor: pointer;
  background: transparent; color: var(--ink); border: 0;
}
.lang button + button { border-left: 1.5px solid var(--ink); }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.lang button:focus-visible, .btn:focus-visible, .swatch:focus-visible, .demo-btn:focus-visible {
  outline: 2.5px solid var(--accent); outline-offset: 3px;
}

/* ── hero ─────────────────────────────────────────────────────── */
.hero { padding: clamp(2rem, 1rem + 4vw, 4.5rem) 0 clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.hero-grid { display: grid; gap: clamp(2.5rem, 1rem + 5vw, 4.5rem); align-items: start; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; } }
.hero h1 .quiet { color: var(--muted); display: block; }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.btn {
  font-family: var(--display); font-weight: 700; font-size: 0.98rem;
  letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  padding: 0.85rem 1.5rem; border-radius: 2px; border: 1.5px solid var(--ink);
  display: inline-block; transition: transform .12s ease, background .18s ease, color .18s ease;
}
.btn-primary { background: var(--ink); color: var(--ground); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--ground); transform: translateY(-1px); }

/* ── the bilingual demo: the thesis of the whole product ──────── */
.demo {
  background: var(--chalk); border: 1px solid var(--rule); border-radius: 4px;
  overflow: hidden; box-shadow: 0 18px 40px -28px rgba(0,0,0,.5);
}
.demo-bar {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--rule); background: var(--ground-2);
}
.demo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); flex: none; }
.demo-bar .demo-cap {
  font-family: var(--display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-left: auto;
}
.demo-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; }
.demo-field { display: flex; flex-direction: column; gap: 0.4rem; }
.demo-label {
  font-family: var(--display); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.flag {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
  padding: 0.1rem 0.35rem; border-radius: 2px;
  background: var(--accent-soft); color: var(--accent); letter-spacing: 0.06em;
}
.demo-text {
  font-family: var(--body); font-size: 1.02rem; line-height: 1.5;
  padding: 0.85rem 0.95rem; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--ground); min-height: 5.6rem;
}
.demo-text.out { border-style: dashed; border-color: var(--accent); }
.caret {
  display: inline-block; width: 2px; height: 1.05em; vertical-align: -0.16em;
  background: var(--accent); margin-left: 1px;
}
.demo-arrow {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--display); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
}
.demo-arrow::before, .demo-arrow::after { content: ""; height: 1px; background: var(--rule); flex: 1; }
.demo-foot {
  padding: 0.85rem 1.25rem; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; background: var(--ground-2); flex-wrap: wrap;
}
.demo-foot .small { font-size: 0.82rem; }
.demo-btn {
  font-family: var(--display); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.04em; padding: 0.45rem 0.9rem; cursor: pointer;
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--rule); border-radius: 2px;
}
.demo-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── the "before" list ────────────────────────────────────────── */
.before { display: grid; gap: 0; margin-top: 2rem; }
/* Stacked by default. The two-column version needs ~136px for the tool
   name plus a readable measure beside it, which a 360px phone hasn't got. */
.before-row {
  display: grid; grid-template-columns: 1fr; gap: 0.3rem;
  padding: 1.15rem 0; border-bottom: 1px solid var(--rule);
}
@media (min-width: 620px) {
  .before-row { grid-template-columns: auto 1fr; gap: 1rem; align-items: baseline; }
  .before-tool { min-width: 8.5rem; }
}
.before-row:first-child { border-top: 1px solid var(--rule); }
.before-tool {
  font-family: var(--display); font-weight: 800; font-size: 0.95rem; letter-spacing: -0.01em;
}
.before-row p { color: var(--muted); font-size: 0.98rem; }

/* ── features ─────────────────────────────────────────────────── */
.features { grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 860px) { .features { grid-template-columns: 1fr 1fr; gap: 3.5rem 3rem; } }
.feature { display: flex; flex-direction: column; gap: 1rem; }
.feature-copy { display: flex; flex-direction: column; gap: 0.55rem; }

.mock {
  background: var(--chalk); border: 1px solid var(--rule); border-radius: 4px;
  padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem;
  font-family: var(--display); font-size: 0.86rem; min-height: 11rem;
}
.mock-title {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule);
}
.mock-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.45rem 0; border-bottom: 1px solid var(--rule);
}
.mock-row:last-of-type { border-bottom: 0; }
.mock-name { font-weight: 700; letter-spacing: -0.01em; }
.mock-sub { display: block; font-family: var(--body); font-size: 0.78rem; color: var(--muted); letter-spacing: 0; font-weight: 400; }
.pill {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 999px; white-space: nowrap; flex: none;
}
.pill-bad  { background: var(--accent-soft); color: var(--accent); }
.pill-ok   { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--muted); }
.pill-good { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }
.mock-btn {
  margin-top: auto; text-align: center; font-size: 0.8rem; font-weight: 700;
  padding: 0.55rem; border-radius: 2px; background: var(--ink); color: var(--ground);
}
.bar { height: 6px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); }
.mock-money { font-family: var(--display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; }
.mock-money.sm { font-size: 1.05rem; }
.mock-note { font-family: var(--body); font-size: 0.78rem; color: var(--muted); text-align: center; }

/* ── theme switcher ───────────────────────────────────────────── */
.themes-grid { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 860px) { .themes-grid { grid-template-columns: 1fr 1.15fr; } }
.swatches { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.swatch {
  display: flex; align-items: center; gap: 0.55rem; cursor: pointer;
  padding: 0.5rem 0.85rem 0.5rem 0.5rem; border-radius: 2px;
  border: 1.5px solid var(--rule); background: transparent; color: var(--ink);
  font-family: var(--display); font-size: 0.85rem; font-weight: 700; letter-spacing: -0.01em;
  transition: border-color .15s ease;
}
.swatch:hover { border-color: var(--muted); }
.swatch[aria-pressed="true"] { border-color: var(--ink); }
.chips { display: flex; gap: 2px; flex: none; }
.chips i { width: 11px; height: 20px; border-radius: 1px; display: block; }

.phone {
  --c1: #f26419; --c2: #101014; --c3: #f5a623; --c4: #f7f7f5;
  max-width: 330px; margin-inline: auto; width: 100%;
  border: 9px solid #1a1a1e; border-radius: 30px; overflow: hidden;
  background: var(--c2); box-shadow: 0 24px 50px -30px rgba(0,0,0,.65);
  transition: background .45s ease;
}
.phone * { transition: background .45s ease, color .45s ease, border-color .45s ease; }
.ph-top {
  background: var(--c1); color: #fff; padding: 1.1rem 1rem 0.9rem;
  font-family: var(--display); display: flex; flex-direction: column; gap: 0.15rem;
}
.ph-club { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; }
.ph-tag { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: .85; }
.ph-body { padding: 0.9rem; display: flex; flex-direction: column; gap: 0.65rem; }
.ph-card {
  background: color-mix(in srgb, var(--c4) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--c4) 14%, transparent);
  border-radius: 8px; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.3rem;
}
.ph-card h4 { margin: 0; font-family: var(--display); font-size: 0.82rem; font-weight: 700; color: var(--c4); letter-spacing: -0.01em; }
.ph-card p { margin: 0; font-family: var(--body); font-size: 0.76rem; line-height: 1.45; color: color-mix(in srgb, var(--c4) 62%, transparent); }
.ph-amount { font-family: var(--display); font-size: 1.5rem; font-weight: 800; color: var(--c3); letter-spacing: -0.03em; }
.ph-btn { background: var(--c1); color: #fff; text-align: center; border-radius: 6px; padding: 0.6rem; font-family: var(--display); font-size: 0.8rem; font-weight: 700; }
.ph-chip {
  align-self: flex-start; background: var(--c3); color: var(--c2);
  font-family: var(--display); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.45rem; border-radius: 3px;
}

/* ── pricing ──────────────────────────────────────────────────── */
.price-grid { display: grid; gap: 1.5rem; }
@media (min-width: 760px) { .price-grid { grid-template-columns: 1fr 1fr; } }
.price-card {
  border: 1.5px solid var(--rule); border-radius: 4px; padding: 1.75rem;
  display: flex; flex-direction: column; gap: 0.85rem; background: var(--chalk);
}
.price-card.lead { border-color: var(--ink); }
.price-big {
  font-family: var(--display); font-weight: 800; letter-spacing: -0.045em;
  font-size: clamp(2.5rem, 1.6rem + 3.2vw, 3.7rem); line-height: 1;
}
.price-unit { font-size: 0.92rem; color: var(--muted); font-family: var(--body); letter-spacing: 0; }
.price-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.price-list li { position: relative; padding-left: 1.4rem; font-size: 0.96rem; color: var(--muted); }
.price-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.65rem; height: 1px; background: var(--accent); }

.mathbox { margin-top: 2.5rem; border: 1.5px solid var(--ink); border-radius: 4px; padding: 1.75rem; background: var(--accent-soft); }
.mathbox h3 { font-size: 1.4rem; margin-top: 0.5rem; }
.mathtable { width: 100%; border-collapse: collapse; margin-top: 1.1rem; font-size: 0.97rem; }
.mathtable th, .mathtable td { text-align: right; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--rule); }
.mathtable th:first-child, .mathtable td:first-child { text-align: left; padding-left: 0; }
.mathtable th { font-family: var(--display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.mathtable tfoot td { border-bottom: 0; border-top: 1.5px solid var(--ink); font-weight: 700; }
.mathtable td { font-variant-numeric: tabular-nums; }
.scroller { overflow-x: auto; }

/* ── fit / not-fit ────────────────────────────────────────────── */
.fit-grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .fit-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.fit-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.fit-list li { padding-left: 1.6rem; position: relative; color: var(--muted); }
.fit-yes li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.5em; width: 0.55rem; height: 0.3rem;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.fit-no li::before { content: ""; position: absolute; left: 0.1rem; top: 0.72em; width: 0.7rem; height: 2px; background: var(--rule); }

/* ── closing ──────────────────────────────────────────────────── */
.close { text-align: center; display: flex; flex-direction: column; gap: 1.5rem; align-items: center; }
.close p { margin-inline: auto; }
.foot {
  border-top: 1px solid var(--rule); padding: 2.5rem 0 3.5rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--muted);
}

/* ── motion ───────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .phone, .phone *, .btn, .swatch { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ADDED FOR THE MULTI-PAGE SITE
   nav · footer · long-form document pages

   Everything ABOVE this line is the landing page's original stylesheet,
   moved out of index.html byte for byte. Everything below is additive:
   no rule above was edited, reordered or reformatted — in particular the
   language rules near the top of this file are exactly as they were.

   Same rules of the road as the rest of the file:
     · design tokens only, never a raw hex;
     · never declare `display` on a [data-l] element, and never write a
       selector that could beat `:root[data-site-lang=…] [data-l=…]`
       (0,3,0) — the class selectors below are 0,1,0 and lose to it,
       which is exactly what we want;
     · reuse the five existing breakpoints (620 / 760 / 860 / 900),
       don't invent new ones.
   ═══════════════════════════════════════════════════════════════ */

/* ── site nav ─────────────────────────────────────────────────── */
/* Lives inside .masthead, between the logo and the language switch.
   .masthead is flex + space-between + wrap; the nav ships twice (one
   <nav> per language) and the hidden one is display:none, so it takes no
   space and the visible row reads logo · nav · language.
   Below 620px the nav drops onto its own full-width line underneath. */
.nav {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem 1.15rem; width: 100%; order: 3;
}
@media (min-width: 620px) { .nav { width: auto; order: 0; } }
.nav a {
  font-family: var(--display); font-size: 0.88rem; font-weight: 700;
  letter-spacing: -0.01em; color: var(--ink); text-decoration: none;
  padding: 0.15rem 0; border-bottom: 1.5px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── site footer ──────────────────────────────────────────────── */
/* .foot supplies the top rule and the padding. .foot-stack turns that row
   into a column so the link row sits above the business-identity block —
   the legal name, support address and © line a payment processor looks
   for on every page. */
.foot-stack { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.foot-links a {
  font-family: var(--display); font-size: 0.85rem; font-weight: 700;
  letter-spacing: -0.01em; color: var(--ink); text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.foot-links a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.foot-id { display: flex; flex-direction: column; gap: 0.4rem; }
.foot-id p { font-size: 0.85rem; color: var(--muted); }
.foot-id a { color: var(--muted); }
.foot-id .foot-name { color: var(--ink); }

/* Focus rings in this file are enumerated, not generic: a new interactive
   class gets no visible ring until it is named here. */
.nav a:focus-visible,
.foot-links a:focus-visible,
.foot-id a:focus-visible,
.prose a:focus-visible {
  outline: 2.5px solid var(--accent); outline-offset: 3px;
}

/* ── long-form document pages ─────────────────────────────────── */
/* Terms, privacy, refunds, about. The landing page is cards and grids and
   takes all its spacing from flex `gap`; a legal document is running
   prose and needs a measure, a heading rhythm and real lists.
   Margins are used here on purpose: adjacent-sibling margin collapse is
   what gives a heading its air WITHOUT putting a gap above the first line
   of the block — and it behaves correctly with the paired-language
   pattern, because the hidden copy generates no box at all.
   `.prose` itself never sets `display`, so the block may carry data-l. */
.doc-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); }

/* the "Last updated" / "Última actualización" line under a doc title */
.updated {
  font-family: var(--display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}

.prose { max-width: var(--measure); }
.prose > * { margin-bottom: 1.15rem; }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem); margin-top: 2.9rem; }
.prose h3 { font-size: 1.05rem; margin-top: 2rem; }
.prose a {
  color: var(--accent); text-decoration: underline;
  text-underline-offset: 0.15em; text-decoration-thickness: 1px;
}
.prose a:hover { text-decoration-thickness: 2px; }
.prose strong { font-weight: 700; color: var(--ink); }

.prose ul, .prose ol { max-width: var(--measure); margin-top: 0; padding-left: 1.5rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.55rem; }
.prose li:last-child { margin-bottom: 0; }
.prose li::marker { color: var(--muted); }
.prose li > ul, .prose li > ol { margin-top: 0.55rem; margin-bottom: 0; }

/* defined terms: <dt> the term, <dd> the definition */
.prose dl { margin-top: 0; }
.prose dt {
  font-family: var(--display); font-weight: 800; font-size: 1rem;
  letter-spacing: -0.018em;
}
.prose dd {
  margin: 0.35rem 0 1.15rem; padding-left: 1.1rem;
  border-left: 2px solid var(--rule); color: var(--muted);
  max-width: var(--measure);
}
.prose dd:last-child { margin-bottom: 0; }

/* Document table: left-aligned prose cells. .mathtable is the pricing
   table — right-aligned with tabular numerals — and is wrong for this.
   Wrap either one in .scroller so the page never scrolls sideways. */
.doc-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.doc-table th, .doc-table td {
  text-align: left; vertical-align: top;
  padding: 0.7rem 1.1rem 0.7rem 0; border-bottom: 1px solid var(--rule);
}
.doc-table th {
  font-family: var(--display); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.doc-table td { color: var(--muted); }
.doc-table td:first-child { color: var(--ink); }