/* ══ One legal template ══
   The one stylesheet of privacy.html and terms.html, linked by both, last,
   after the shared sheets (pinned by test/dom/legal-pages-passport.test.js):
   one header, one body column, one contents, one link style, one callout.
   A rule for one page's own blocks (privacy's tables, terms' jurisdiction
   and contact blocks) matches nothing on the other. A change here bumps
   the ?v= on both pages' links together. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[id] { scroll-margin-top: 72px; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(16,16,18,0.82);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

:root {
  --mono: 'JetBrains Mono', 'Fira Code', monospace;
  --serif: 'Inter', sans-serif;
  /* One type scale on the seven pages: the product pages' H1, verbatim
     (developers' :root), and a quieter step for the documents' section
     heads, which are long-form heads, not marketing H2s: 22px on phones,
     28px from 1000px. */
  --text-h1: clamp(2.4rem, 3.8vw + 23.5px, 76px);
  --text-doc-h2: clamp(22px, 1.2vw + 16px, 28px);
}

/* ── Page frame ──
   One column, the same on both documents. From 1200px the contents moves
   into a sticky rail in the left margin (see the contents, below). */
.page-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 72px 32px 96px;
}

/* ── Header ──
   The copy (eyebrow, title, and privacy's subtitle), then the document's
   meta row as a passport data page (passport-object.css): one column,
   the page full width under the copy; from 1024px two, the page beside
   the copy at the landing's page width. Nothing in it moves: this is a
   document. */
.doc-header {
  display: grid;
  gap: 32px;
  margin-bottom: 56px;
}
.doc-copy { display: flex; flex-direction: column; }

/* Trimmed to its capitals, so they start on the data page's top edge,
   not ~4px into the line box (as on developers). */
.doc-eyebrow {
  position: relative;
  display: block;
  padding-left: 34px;
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #6e6e75;
  text-box: trim-both cap alphabetic;
}
.doc-eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(.365em - .5px);
  width: 24px;
  height: 1px;
  background: #d4d4cf;
}
/* Without text-box (Firefox, Safari before 18.2): developers' fallback
   for JetBrains Mono 12px at 1.5. */
@supports not (text-box: trim-both cap alphabetic) {
  .doc-eyebrow { margin: -.38em 0 -.39em; }
  .doc-eyebrow::before { top: calc(.745em - .5px); }
}

.doc-title {
  font-family: var(--serif);
  font-size: var(--text-h1);
  font-weight: 600;
  color: #101012;
  line-height: 1.1;
  margin-top: 24px;
  letter-spacing: -0.02em;
}

.doc-subtitle {
  margin-top: 16px;
  font-size: var(--text-md);
  color: rgba(16,16,18,0.62);
  max-width: 600px;
  line-height: 1.6;
}

/* The data page: the meta items as the booklet's label/value rows
   (.ppo-fields dt/dd, on the page's own spans). Privacy's labels are its
   own; terms' first is its own word "Effective:", and the two its row
   never had (Service, Governing law) are chrome, aria-hidden. The values
   are the document's, so no EXAMPLE tag; head and MRZ are aria-hidden.
   Where the page is wide the rows flow into columns, in order. Below
   1024px the header's one column is an auto track, and the page's
   min-content (the unbroken MRZ line) would widen it past the gutter:
   min-width: 0 holds the page to the column, and the MRZ is clipped
   inside it. */
.ppo-doc { --ppo-w: 100%; --ppo-h: 0px; min-width: 0; }
.ppo-doc .doc-meta { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 24px; }
.doc-meta-item { display: flex; flex-direction: column; gap: 4px; }
.doc-meta-label {
  font: 600 12px/1.2 var(--ppo-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ppo-ink-3);
}
.doc-meta-value { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--ppo-ink); }
.doc-meta > span { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--ppo-ink); }
.doc-meta-dot { display: none; }
.ppo-doc a { color: var(--teal); text-decoration: none; }
.ppo-doc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ppo-doc a:focus-visible { outline: 2px solid #1f49ff; outline-offset: 2px; border-radius: 3px; }
/* One MRZ line, cut on a character boundary, never through a chevron.
   It anchors the foot of the page: in flow at the end of the column
   (the component places it 44px up, over a 76px bottom padding), the
   bottom padding the same as the top. */
.ppo-doc .ppo-mrz { position: static; margin-top: auto; letter-spacing: .03em; }
.ppo-doc .ppo-page.is-solo { padding-bottom: 24px; }
@supports (width: round(down, 10px, 3px)) {
  .ppo-doc .ppo-mrz { width: round(down, 100%, 1ch + .03em); }
}
/* Beside the title (from 1024px) the data page is a passport page at its
   own 88 x 125, like every other page on the site: the rows at its head,
   the MRZ at its foot. Below that it keeps its rows' height, so the legal
   text does not start lower on a phone. */
@media (min-width: 1024px) {
  .doc-header { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 4vw, 56px); align-items: start; }
  .ppo-doc { --ppo-w: 272px; --ppo-h: calc(var(--ppo-w) * 125 / 88); width: var(--ppo-w); }
}

/* ── Contents: a booklet index ──
   Mono numbers on hairline rules, no card, in a disclosure whose summary
   is the "Contents" title. Up to 768px it starts closed, from 769px open,
   two columns from 1024px (filled row by row so the rules line up
   across; no column is ever wider than the list). From 1200px it is a
   sticky rail in the left margin, one column, and the section in view
   is marked aria-current="true" (passport-legal.js). Without
   the script it stays open everywhere, with no highlight. The index never
   transitions: the highlight recolours links as the page scrolls, and
   under reduced motion the shared 0.01ms clamp (passport-common.css)
   would start a transition each time. The contents sits above the
   section after it (privacy's first .section-anchor pulls that
   section's box 24px up over it), so all of the summary takes a tap. */
.toc { margin-bottom: 56px; position: relative; z-index: 1; }
.toc-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  font-family: var(--mono);
  font-size: var(--text-xs); font-weight: 600; line-height: 1.5;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: #6e6e75;
  list-style: none;
  cursor: pointer;
}
.toc-title::-webkit-details-marker { display: none; }
.toc-title::after {
  content: '+';
  content: '+' / '';
  font-size: var(--text-md); font-weight: 400; letter-spacing: 0;
  color: #101012;
}
.toc-details[open] > .toc-title::after { content: '\2212'; content: '\2212' / ''; }
.toc-title:focus-visible { outline: 2px solid #1f49ff; outline-offset: -2px; border-radius: 3px; }
.toc-list {
  list-style: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  column-gap: 40px;
  border-top: 1px solid rgba(16,16,18,0.12);
}
/* An item the Contents pill jumps to lands below the sticky topbar
   (56px), with the one above it in view. */
.toc-list li { margin: 0; border-bottom: 1px solid rgba(16,16,18,0.07); scroll-margin-top: 88px; }
.toc-list li a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 0;
  font-size: var(--text-base); line-height: 1.4;
  color: #3d3d42;
  text-decoration: none;
  transition: none;
}
.toc-list li a:hover { color: var(--teal); }
.toc-list li a:focus-visible { outline: 2px solid #1f49ff; outline-offset: -2px; border-radius: 3px; }
.toc-list li a[aria-current="true"] { color: var(--teal); }
.toc-num {
  flex-shrink: 0; min-width: 2em;
  font-family: var(--mono); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.04em;
  color: #6e6e75;
  transition: none;
}
.toc-list li a[aria-current="true"] .toc-num { color: var(--teal); }
@media (min-width: 1024px) {
  .toc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* From 1200px: the contents is a sticky rail in the left margin, the
   header and the body share the column beside it, and the body text
   keeps its 68ch measure (tables may use the whole column). The grid's
   inner width is the footer's 1080 column. */
@media (min-width: 1200px) {
  .page-wrap {
    max-width: 1176px;
    padding-left: 48px;
    padding-right: 48px;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
  }
  .doc-header { grid-column: 2; grid-row: 1; }
  .doc-body { grid-column: 2; grid-row: 2; }
  .toc {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    top: 72px;
    max-height: calc(100vh - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-bottom: 0;
  }
  .toc-list { grid-template-columns: 1fr; }
  .toc-list li a { padding: 7px 0 7px 12px; font-size: var(--text-sm); }
  .toc-list li a[aria-current="true"] { box-shadow: inset 2px 0 0 var(--teal); }
}

/* ── Sections ── */
.doc-section { margin-bottom: 48px; }
.doc-section + .doc-section {
  padding-top: 40px;
  border-top: 1px solid rgba(16,16,18,0.07);
}
.section-anchor {
  display: block;
  height: 0;
  visibility: hidden;
  margin-top: -80px;
  padding-top: 80px;
}
.section-num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--teal);
}
h2.section-title {
  font-family: var(--serif);
  font-size: var(--text-doc-h2);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #101012;
  margin-bottom: 20px;
}
h3.subsection-title {
  font-family: var(--serif);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: rgba(16,16,18,0.85);
  margin: 28px 0 12px;
}

/* ── Body text ──
   One width rule: running text and lists are at most 68ch of the 15px
   body face, so their right edges meet (a list's indent sits inside its
   box, never past the paragraphs); every box (tables, record cards,
   callouts and framed notices, the jurisdiction and contact panels)
   spans the column, and the text inside a box fills it, inside even
   padding. ch changes when the web font arrives; under reduced motion
   the shared 0.01ms clamp (passport-common.css) would turn that into a
   transition, so these never transition (as cli's .cmd-line). */
.doc-section p {
  font-size: var(--text-base);
  color: rgba(16,16,18,0.72);
  margin-bottom: 14px;
  line-height: 1.65;
}
.doc-section p:last-child { margin-bottom: 0; }
.doc-section ul, .doc-section ol {
  margin: 10px 0 14px;
  padding-left: 20px;
  font-size: var(--text-base);
  color: rgba(16,16,18,0.72);
  line-height: 1.65;
}
.doc-section li { margin-bottom: 6px; }
.doc-section li:last-child { margin-bottom: 0; }
.doc-section p, .doc-section ul, .doc-section ol { max-width: 68ch; transition: none; }
.doc-section :is(.callout, .jurisdiction-block, .contact-block) :is(p, ul, ol) { max-width: none; }
.callout, .jurisdiction-block, .contact-block { transition: none; }

/* ── Emphasis and links ──
   One link style in the documents' text: cobalt, underlined. */
strong { color: rgba(16,16,18,0.88); font-weight: 600; }
.doc-section a {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(31,73,255,0.45);
  text-underline-offset: 3px;
  transition: color .12s, text-decoration-color .12s;
}
.doc-section a:hover { color: #163cdd; text-decoration-color: currentColor; }
.doc-section a:focus-visible { outline: 2px solid #1f49ff; outline-offset: 2px; border-radius: 3px; }
/* Conspicuous terms (terms' all-caps disclaimers): one treatment, in ink
   and a touch heavier and wider than the text around them. The capitals
   are the document's own. It marks an inline run, never the paragraph:
   ch follows the weight, so a 600 paragraph would set a wider 68ch than
   the body text beside it. 600, not 500: 500 is a face these pages
   don't otherwise fetch on phones. */
.doc-section .conspicuous { color: var(--ink-0); font-weight: 600; letter-spacing: 0.02em; line-height: 1.75; }
.doc-section .conspicuous strong { color: inherit; }
code {
  font-family: var(--mono);
  font-size: 0.82em;
  background: rgba(31,73,255,0.1);
  color: var(--teal);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ── Callout: one component, two roles ──
   A neutral fill with a 2px rule on the left: near-black for what must
   be read (every "Important…" and the Google API notices), cobalt for a
   note. Which one is said by the label's own words; the labels hold AA
   at full opacity on the fill (cobalt 5.6:1). A list inside starts on
   the next line, with no gap of its own. A paragraph holding terms'
   conspicuous capitals sits in the must-read frame without a label
   (.framed). */
.callout, .doc-section p.framed {
  max-width: none;
  margin: 24px 0;
  padding: 18px 22px;
  background: #f6f6f4;
  border-left: 2px solid #1f49ff;
  border-radius: 0 10px 10px 0;
  font-size: var(--text-base);
  line-height: 1.65;
  color: rgba(16,16,18,0.72);
}
.callout-warn, .doc-section p.framed { border-left-color: #101012; }
.callout-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: var(--text-xs); font-weight: 700; line-height: 1.5;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: #1f49ff;
}
.callout-warn .callout-label { color: #101012; }
.callout ul, .callout ol { margin-top: 0; margin-bottom: 0; }

/* ── Tables (privacy) ──
   A table is a table, the full column wide (wider than the text from
   1200px), with set column widths where its text is long. One that
   can't read as columns (a cell of over 1,000 characters: marked
   is-records in the markup) is a stack of record cards at every width;
   the five-column cookie table (is-records-narrow) is cards below
   1024px, where its columns' longest words don't fit; and below 640px
   every table is. A card is one row: its first cell is the title, and
   each other value sits under its column's own header text (data-label,
   from its <th>), or from 640px beside it, in a narrow left column. The
   header row stays for assistive tech, out of sight, and the explicit
   table/rowgroup/row/columnheader/cell roles keep the semantics that
   display: block would drop (as developers' tools table). */
.table-wrap {
  overflow-x: auto;
  margin: 20px 0 28px;
  border-radius: 10px;
  border: 1px solid rgba(16,16,18,0.07);
}
/* Standalone tables not inside .table-wrap: scroll within themselves on
   narrow screens instead of forcing horizontal page overflow (mobile). */
.data-table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  margin: 20px 0 28px;
  border-radius: 10px;
  border: 1px solid rgba(16,16,18,0.07);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  color: rgba(16,16,18,0.7);
}
thead tr {
  background: rgba(16,16,18,0.04);
  border-bottom: 1px solid rgba(16,16,18,0.08);
}
th {
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(16,16,18,0.62);
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
}
td {
  padding: 11px 16px;
  border-bottom: 1px solid rgba(16,16,18,0.04);
  vertical-align: top;
  line-height: 1.55;
}
tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: rgba(16,16,18,0.015); }
tbody tr:hover { background: rgba(31,73,255,0.03); }
td strong { color: rgba(16,16,18,0.85); }
/* Record cards at every width: the same rules as every table's below
   640px (pinned equal), on the tables marked is-records. */
.doc-section .is-records, .doc-section .is-records thead, .doc-section .is-records tbody, .doc-section .is-records tr, .doc-section .is-records th, .doc-section .is-records td { display: block; }
.table-wrap:has(> .is-records) { overflow: visible; border: 0; border-radius: 0; }
.doc-section .is-records thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.doc-section .is-records tbody tr { margin-bottom: 12px; padding: 12px 16px; background: #ffffff; border: 1px solid rgba(16,16,18,0.08); border-radius: 10px; }
.doc-section .is-records tbody tr:nth-child(even), .doc-section .is-records tbody tr:hover { background: #ffffff; }
.doc-section .is-records td { padding: 6px 0; border: 0; overflow-wrap: anywhere; font-size: var(--text-base); color: rgba(16,16,18,0.72); line-height: 1.65; }
.doc-section .is-records td::before {
  content: attr(data-label);
  content: attr(data-label) / '';
  display: block;
  margin-bottom: 2px;
  font-family: var(--mono);
  font-size: var(--text-xs); font-weight: 600; line-height: 1.4;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #6e6e75;
}
.doc-section .is-records td:first-child { font-size: var(--text-base); font-weight: 600; color: var(--ink-0); }
.doc-section .is-records td:first-child strong { color: inherit; }
.doc-section .is-records td:first-child::before { display: none; }
/* The cookie table: the same cards, below 1024px only (pinned equal). */
@media (max-width: 1023.98px) {
  .doc-section .is-records-narrow, .doc-section .is-records-narrow thead, .doc-section .is-records-narrow tbody, .doc-section .is-records-narrow tr, .doc-section .is-records-narrow th, .doc-section .is-records-narrow td { display: block; }
  .table-wrap:has(> .is-records-narrow) { overflow: visible; border: 0; border-radius: 0; }
  .doc-section .is-records-narrow thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .doc-section .is-records-narrow tbody tr { margin-bottom: 12px; padding: 12px 16px; background: #ffffff; border: 1px solid rgba(16,16,18,0.08); border-radius: 10px; }
  .doc-section .is-records-narrow tbody tr:nth-child(even), .doc-section .is-records-narrow tbody tr:hover { background: #ffffff; }
  .doc-section .is-records-narrow td { padding: 6px 0; border: 0; overflow-wrap: anywhere; font-size: var(--text-base); color: rgba(16,16,18,0.72); line-height: 1.65; }
  .doc-section .is-records-narrow td::before {
    content: attr(data-label);
    content: attr(data-label) / '';
    display: block;
    margin-bottom: 2px;
    font-family: var(--mono);
    font-size: var(--text-xs); font-weight: 600; line-height: 1.4;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #6e6e75;
  }
  .doc-section .is-records-narrow td:first-child { font-size: var(--text-base); font-weight: 600; color: var(--ink-0); }
  .doc-section .is-records-narrow td:first-child strong { color: inherit; }
  .doc-section .is-records-narrow td:first-child::before { display: none; }
}
/* From 640px the labels hang in a narrow left column: the label floats
   into the cell's padding, and the cell holds it (flow-root), so a long
   label or a one-line value never overlaps the next. The tables set
   their columns: the one with the most text takes what the others
   leave, so it is the widest. */
@media (min-width: 640px) {
  .doc-section .is-records tbody tr { padding: 14px 20px; }
  .doc-section .is-records td:not(:first-child) { display: flow-root; padding-left: 172px; }
  .doc-section .is-records td:not(:first-child)::before { float: left; width: 152px; margin: 5px 0 0 -172px; }
  #legal-bases th:nth-child(1) { width: 26%; }
  #legal-bases th:nth-child(2) { width: 22%; }
  #international-transfers th:nth-child(1) { width: 24%; }
  #data-retention th:nth-child(1) { width: 20%; }
  #data-retention th:nth-child(2) { width: 26%; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .doc-section .is-records-narrow tbody tr { padding: 14px 20px; }
  .doc-section .is-records-narrow td:not(:first-child) { display: flow-root; padding-left: 172px; }
  .doc-section .is-records-narrow td:not(:first-child)::before { float: left; width: 152px; margin: 5px 0 0 -172px; }
}
/* From 1024px the cookie table is a table: a name on one line, Type,
   Duration and Required as narrow as their longest words (1%), and
   Purpose takes the rest. */
@media (min-width: 1024px) {
  #cookies td:first-child { white-space: nowrap; }
  #cookies th:nth-child(n+3) { width: 1%; }
}

/* ── Jurisdiction blocks (terms) and contact cards (both) ── */
.jurisdiction-grid {
  display: grid;
  gap: 16px;
  margin-top: 20px;
  font-size: var(--text-base);
}
.jurisdiction-block {
  background: #f6f6f4;
  border: 1px solid rgba(16,16,18,0.12);
  border-radius: 10px;
  padding: 20px 24px;
}
.jurisdiction-flag {
  font-family: var(--mono);
  font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--champagne);
  margin-bottom: 10px; display: block;
}
.jurisdiction-block p {
  font-size: var(--text-base) !important;
  color: rgba(16,16,18,0.65) !important;
}
.jurisdiction-block ul { margin: 8px 0 0 0 !important; }
.jurisdiction-block ul + p, .jurisdiction-block ol + p { margin-top: 14px; }
.jurisdiction-block li { font-size: var(--text-base) !important; }
.contact-block {
  background: #ffffff;
  border: 1px solid rgba(16,16,18,0.12);
  border-radius: 12px;
  padding: 28px 32px;
  margin: 8px 0 20px;
  font-size: var(--text-base);
}
.contact-block p { margin-bottom: 8px; }
.contact-block p:last-child { margin-bottom: 0; }

/* ── Contents pill (phones) ──
   One link, outside main, fixed at the bottom right once the contents
   has scrolled away (passport-legal.js un-hides it): "Contents" and the
   current section's number. It goes back to the contents, open; never
   from 769px. */
.contents-pill { display: none; }

/* ── Footer: the landing's (index.html footer.footer), as on developers,
   cli and extension: its markup, its five links, its CSS. ── */
.footer { background: #ffffff; padding: 52px 48px; border-top: 1px solid var(--border); }
.footer-inner { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-bottom { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--border); margin-top: 8px; }
.footer-copyright { font-size: var(--text-xs); color: var(--ink-3); font-family: var(--mono); }
.footer-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; min-height: 44px; }
.footer-brand img.icon { width: 22px; height: 22px; }
.footer-brand img.wordmark { width: auto; height: 15px; object-fit: contain; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.footer-link { font-size: var(--text-xs); color: var(--ink-1); text-decoration: none; transition: color .12s; padding: 12px 4px; min-height: 44px; display: inline-flex; align-items: center; }
.footer-link:hover { color: var(--ink-0); }
.footer-powered { font-size: var(--text-xs); color: var(--ink-3); font-family: var(--mono); text-decoration: none; transition: color .12s; min-height: 44px; display: inline-flex; align-items: center; }
.footer-powered:hover { color: var(--teal); }

/* ── Phones: the 24px gutter of every other public page ── */
@media (max-width: 768px) {
  .page-wrap { padding: 48px 24px 72px; }
  .toc-list { grid-template-columns: 1fr; }
  /* The head flag (.js) is set before the body is parsed: until the
     script closes the disclosure, its list stays hidden, so nothing
     shifts when it does. Without scripts the list shows, open; if the
     script never runs (blocked, failed), the head flag drops .js at
     DOMContentLoaded and it shows then. */
  .js .toc-details:not([data-ready]) > .toc-list { display: none; }
  .contents-pill:not([hidden]) {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    background: #ffffff;
    border: 1px solid rgba(16,16,18,0.12);
    border-radius: 999px;
    box-shadow: 0 6px 18px -8px rgba(16,16,18,0.28);
    font-size: var(--text-sm); font-weight: 600;
    color: #101012;
    text-decoration: none;
    transition: none;
  }
  /* As wide as the longest number (07A), so the pill never resizes
     (and shifts) as the reader moves between sections. */
  .contents-pill-num { min-width: calc(3ch + 0.12em); text-align: right; font-family: var(--mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; color: var(--teal); }
  .contents-pill-num:empty { display: none; }
  .contents-pill:focus-visible { outline: 2px solid #1f49ff; outline-offset: 2px; }
  /* Footer (the landing's, on phones): the five links sit 3 + 2. */
  .footer { padding: 52px 24px; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .footer-links { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 20px; }
}
/* Tables below 640px: a card per row, its first cell the title and each
   other value under its column's label; the header row stays for
   assistive tech, out of sight. */
@media (max-width: 639.98px) {
  .doc-section table, .doc-section thead, .doc-section tbody, .doc-section tr, .doc-section th, .doc-section td { display: block; }
  .table-wrap, .data-table { width: auto; overflow: visible; border: 0; border-radius: 0; }
  .doc-section thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .doc-section tbody tr { margin-bottom: 12px; padding: 12px 16px; background: #ffffff; border: 1px solid rgba(16,16,18,0.08); border-radius: 10px; }
  .doc-section tbody tr:nth-child(even), .doc-section tbody tr:hover { background: #ffffff; }
  .doc-section td { padding: 6px 0; border: 0; overflow-wrap: anywhere; font-size: var(--text-base); color: rgba(16,16,18,0.72); line-height: 1.65; }
  .doc-section td::before {
    content: attr(data-label);
    content: attr(data-label) / '';
    display: block;
    margin-bottom: 2px;
    font-family: var(--mono);
    font-size: var(--text-xs); font-weight: 600; line-height: 1.4;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #6e6e75;
  }
  .doc-section td:first-child { font-size: var(--text-base); font-weight: 600; color: var(--ink-0); }
  .doc-section td:first-child strong { color: inherit; }
  .doc-section td:first-child::before { display: none; }
}