/* theauctioneer.ai docs: Docs.dc.html (claudeDesignWaiting, 2026-09-07), five hash-routed
   tabs. Same tokens as waitlist.css; every value below is the design's own. */
:root { --ground: #0f0e0e; --ink: #201E1D; --paper: #F3F2F2; --blue: #4169E1; --blue-hover: #2F51B8; --blue-light: #8FA7F0; --muted: #6b6a66;
  --serif: "Instrument Serif", Georgia, serif; --sans: "Instrument Sans", system-ui, sans-serif;
  --r1: 3px; } /* U, 13 October 2026 (Carl: "ensure that all border radiuses are consistent"): the site's one radius, as in waitlist.css and app.css; every box and control below takes it, and only the orbs, which are square, stay 50% */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--paper); font: 16px/1.4 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--blue-light); text-decoration: none; }
a:hover { color: #fff; }
input, textarea, select, button { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; margin: 0; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes orbA { 0%,100% { transform: translate(-22%,-18%) scale(.9); } 50% { transform: translate(18%,22%) scale(1.1); } }
@keyframes orbB { 0%,100% { transform: translate(20%,-24%) scale(.8); } 50% { transform: translate(-18%,16%) scale(1); } }
@keyframes orbC { 0%,100% { transform: translate(0,24%) scale(.7); } 50% { transform: translate(8%,-20%) scale(.95); } }

/* U, 6 October 2026 (Henry): the position page's wall of lots behind the docs pages, faint and slow
   (docs-wall.js builds it). Fixed and under everything (z-index -1, over the body's ground), so it
   takes no clicks and no layout; still when motion is reduced. */
.docs-wall { position: fixed; inset: -40px 0; z-index: -1; display: flex; justify-content: space-between; padding: 0 20px; opacity: .05; pointer-events: none; } /* U, 7 October (Henry): "a bit less visible", 7% to 5% */
.docs-wall .col { flex: 0 0 calc((100% - 36px) / 4); min-width: 0; overflow: hidden; height: 100%; } /* U: the outer two of the four, each as wide as it was, the middle clear (Henry) */
.docs-wall .belt { display: flex; flex-direction: column; gap: 12px; animation-timing-function: linear; animation-iteration-count: infinite; }
.docs-wall img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@keyframes docsUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes docsDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }

.page { min-height: 100vh; display: flex; flex-direction: column; }
/* U, 10 October 2026 (Carl): the header's lockup (mark and wordmark), its side margin and its top clear space
   are shared/site-header.css's, one for every page, so none is set here */
.top { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid rgba(243,242,242,.1); flex-wrap: wrap; }
/* U, 10 October 2026 (Carl: "remove the white box around the nav links in all pages ... it should be free floating
   links"): the tabs are plain text, with no outline, no fill and no padding round them, 15px and 26px apart as the
   landing page's links are (test/site-nav.test.mjs). The current one is in paper where the others are at 70%, with
   a hairline under it; it was a block of paper. Nothing clips the row (no overflow), so a focus ring is whole. */
.tabs { display: flex; gap: 26px; flex: 0 1 auto; min-width: 0; }
.tabs button, .tabs a { padding: 6px 0; border: 0; border-radius: 0; background: transparent; color: rgba(243,242,242,.7); font-size: 15px; white-space: nowrap; flex: none; transition: color .2s; }
.tabs button:hover, .tabs a:hover { color: #fff; }
.tabs button.on { color: var(--paper); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(243,242,242,.5); text-underline-offset: 8px; }
.cta { margin-left: auto; padding: 7px 14px; border-radius: var(--r1); background: var(--blue); color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap; flex: none; }
.cta:hover { background: var(--blue-hover); color: #fff; }
/* U, 12 October 2026 (Carl, of the docs page: "when you swap through, it just swaps the data"): the five tabs share ONE header, the Learn more one:
   an eyebrow bar (the label, then Copy for AI), the headline at 64px, the intro at 19px, and this padding, all left-aligned and running the
   whole column. Nothing below is scoped to a tab to change any of that; a tab swaps the words, not the design. */
.tab { max-width: 1040px; width: 100%; margin: 0 auto; padding: 88px 32px 120px; box-sizing: border-box; animation: rise .45s ease-out; }
.eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(243,242,242,.6); }
.eyebrow-11 { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(243,242,242,.6); }
.eyebrow-row { display: flex; gap: 14px; align-items: baseline; }
.eyebrow-row .meta { font-size: 13px; color: rgba(243,242,242,.6); }
/* "Copy for AI" (2026-09-08): the tab's text as Markdown onto the clipboard, top of every tab */
.eyebrow-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }
.copy-ai { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border: 1px solid rgba(243,242,242,.28); border-radius: var(--r1); background: transparent; color: rgba(243,242,242,.8); font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.copy-ai:hover { color: #fff; border-color: rgba(243,242,242,.6); background: rgba(243,242,242,.08); }
.copy-ai.done { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.h1-64 { margin: 16px 0 0; font-size: 64px; line-height: 1.02; text-wrap: pretty; }
.lede { margin: 26px 0 0; font-size: 19px; line-height: 1.55; color: rgba(243,242,242,.8); }
.stats { --stat-pad: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 64px; border-radius: var(--r1); overflow: hidden; }
.stat { position: relative; background: var(--ground); padding: var(--stat-pad); } /* U, 13 October 2026 (Carl): the first and last cells took no side padding, so over the wall the first figure sat flush against its box's edge; all four keep the 22px, which also puts the four figures on one even pitch */
/* U, 13 October 2026 (Carl: "The dividing line is nice but should have padding on top and bottom"). The dividers used to be the 1px gap between the
   cells, showing the grid's own tint, so each ran the band's whole height and met its edges. Each cell now draws its own down its left edge and stops
   a cell's padding short of the top and bottom: a line is as tall as the figure and label it parts from the next. */
.stat + .stat::before { content: ""; position: absolute; left: 0; top: var(--stat-pad); bottom: var(--stat-pad); width: 1px; background: rgba(243,242,242,.1); }
.stat .num { font-family: var(--serif); font-size: 44px; line-height: 1; }
.stat .lab { margin-top: 8px; font-size: 13.5px; color: rgba(243,242,242,.6); }
.stats-cap { margin-top: 14px; font-size: 12px; color: rgba(243,242,242,.45); }
.h2-40 { margin: 104px 0 0; font-size: 40px; line-height: 1.1; }
.tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; margin-top: 40px; }
.tool { display: flex; gap: 18px; align-items: flex-start; }
.tool-head { display: flex; align-items: baseline; gap: 10px; }
.tool-name { font-weight: 600; font-size: 20px; }
.tag { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.tag.live { color: var(--blue-light); }
.tag.dim { color: rgba(243,242,242,.45); }
.tool p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.55; color: rgba(243,242,242,.75); }
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.case { border: 1px solid rgba(243,242,242,.14); border-radius: var(--r1); padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.case .who { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-light); }
.case-title { font-family: var(--serif); font-size: 26px; line-height: 1.15; }
.case ol { margin: 4px 0 0; padding: 0 0 0 18px; font-size: 14.5px; line-height: 1.6; color: rgba(243,242,242,.75); display: grid; gap: 6px; }
/* U, 11 October 2026 (Carl, of the docs' white panels: "the white too bright ... like the skip every batch panel with tinted
   white"). The two strips and the two form cards (.panel, further down) were solid paper, a slab on the black page. They take
   the reserve card's tint instead (waitlist.css .card-paper, his 10 October "too white, too shocking"): off-white at 18% over
   the page's black, a hairline at 36%, the same 8px blur, and the page's own light-on-dark for the text. The border takes 1px
   off each side of the padding, so every one keeps its size. Raise the two alphas for more presence, lower them for less. */
.strip, .panel { background: rgba(243,242,242,.18); border: 1px solid rgba(243,242,242,.36); backdrop-filter: blur(8px); color: var(--paper); }
.strip { margin-top: 104px; padding: 39px; border-radius: var(--r1); display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.strip-why { margin-top: 56px; }
.strip-title { font-family: var(--serif); font-size: 32px; line-height: 1.1; }
.strip-sub { margin-top: 8px; font-size: 15px; color: rgba(243,242,242,.75); }
.btn { padding: 14px 22px; border-radius: var(--r1); background: var(--blue); color: #fff; font-weight: 600; font-size: 16px; white-space: nowrap; }
.btn:hover { background: var(--blue-hover); color: #fff; }

/* why us */
.questions { margin-top: 56px; padding: 26px 28px; border: 1px solid rgba(243,242,242,.14); border-radius: var(--r1); }
.q-eyebrow { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-light); }
.questions ol { margin: 14px 0 0; padding: 0 0 0 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; font-size: 15px; line-height: 1.5; color: rgba(243,242,242,.8); }
.rivals { margin-top: 56px; }
.rival { display: grid; grid-template-columns: 56px minmax(0, 1fr) 300px; gap: 28px; padding: 30px 0; border-top: 1px solid rgba(243,242,242,.12); }
.rival .n { font-family: var(--serif); font-size: 40px; line-height: 1; color: rgba(243,242,242,.4); }
.rival-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rival-name { font-weight: 600; font-size: 24px; }
.rival-kind { font-size: 13.5px; color: rgba(243,242,242,.55); }
.rival p, .us p { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; color: rgba(243,242,242,.78); max-width: 600px; }
.rival p b { color: var(--paper); font-weight: 600; }
.marks { display: grid; gap: 6px; align-content: start; font-size: 13.5px; }
.marks > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(243,242,242,.08); }
.marks > div > span:first-child { color: rgba(243,242,242,.65); }
.marks > div > span:last-child { font-weight: 600; text-align: right; text-wrap: balance; } /* R36: wraps inside the 300px column (row 6's longer values) */
.marks .g { color: var(--blue-light); }
.marks .y { color: rgba(243,242,242,.85); }
.marks .n0 { color: rgba(243,242,242,.4); }
/* row 6, The Auctioneer: since R36 (Henry: "we shouldnt stand out like that") it is a .rival row like
   the five above, same colours and marks key; only the "where we are weaker" note keeps its smaller size */
.us p.weaker { font-size: 13.5px; color: rgba(243,242,242,.55); }
.verdict { margin-top: 96px; }
.verdict-p { margin: 22px 0 0; max-width: 680px; font-size: 17px; line-height: 1.6; color: rgba(243,242,242,.8); }
.footnote { margin: 18px 0 0; max-width: 680px; font-size: 13.5px; line-height: 1.6; color: rgba(243,242,242,.5); }

/* about */
.tab-about { min-height: calc(100vh - 144px); display: flex; flex-direction: column; }
.team-label { margin-top: 28px; }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 14px; flex: 1; min-height: 0; }
.person { border: 1px solid rgba(243,242,242,.14); border-radius: var(--r1); padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.person-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.person-name { font-weight: 600; font-size: 16px; }
.person-head a { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; flex: none; }
.role { font-size: 12px; color: var(--blue-light); margin-top: -6px; }
.person p { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(243,242,242,.75); }
.about-foot { margin-top: 18px; font-size: 13px; line-height: 1.5; color: rgba(243,242,242,.55); }

/* api and enterprise (R36, Henry): stacked top to bottom, the table, the notes or the steps, then the form card, centred. The header above them
   is the same as every other tab's (12 October 2026, Carl); only the form card below keeps its centred column. */
.panel-api, .panel-ent { width: 100%; max-width: 440px; margin: 72px auto 0; }
.panel-api .panel-title, .panel-api .panel-sub, .panel-ent .panel-title, .panel-ent .panel-sub { text-align: center; text-wrap: balance; }

/* api */
.api-docs { display: flex; flex-direction: column; min-height: 0; }
.endpoints { margin-top: 40px; border: 1px solid rgba(243,242,242,.14); border-radius: var(--r1); overflow: hidden; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
/* full width since R36: method, path and description side by side (one row each; two lines under 900px) */
.endpoints > div { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: 0 14px; padding: 13px 20px; border-bottom: 1px solid rgba(243,242,242,.1); }
.endpoints > div > span:empty { display: none; }
.endpoints > div.last { border-bottom: 0; }
.verb { color: var(--blue-light); }
.desc { font-family: var(--sans); color: rgba(243,242,242,.5); }
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; margin-top: 28px; font-size: 13px; line-height: 1.45; color: rgba(243,242,242,.7); }
.note-h { color: var(--paper); font-weight: 600; }
/* tinted like the strips' (the rule above); color-scheme: dark so the controls the page does not paint itself (the select's
   arrow and list, a browser's autofill) are the dark ones. The fields are the landing page's dark fields (waitlist.css
   .input-dark): paper at 8% and a hairline, square, not the white boxes they were. */
.panel { border-radius: var(--r1); padding: 21px 23px 19px; display: flex; flex-direction: column; min-height: 0; color-scheme: dark; }
.panel-title { font-family: var(--serif); font-size: 24px; line-height: 1.1; }
.panel-title-20 { font-size: 20px; }
.panel-sub { margin-top: 6px; font-size: 13px; color: rgba(243,242,242,.7); }
.panel-sub-12 { margin-top: 4px; font-size: 12px; }
.fields { display: grid; gap: 8px; margin-top: 16px; flex: 1; }
.fields input, .fields select { height: 42px; padding: 0 12px; border: 1px solid rgba(243,242,242,.28); border-radius: var(--r1); background: rgba(243,242,242,.08); font-size: 14px; color: var(--paper); outline: none; }
.fields textarea { padding: 10px 12px; border: 1px solid rgba(243,242,242,.28); border-radius: var(--r1); background: rgba(243,242,242,.08); font-size: 14px; line-height: 1.4; color: var(--paper); resize: none; outline: none; flex: 1; min-height: 0; }
.fields option { background: #1b1a19; color: var(--paper); }
.fields input::placeholder, .fields textarea::placeholder { color: rgba(243,242,242,.6); } /* as specific as the clear-on-focus rule at the foot, and before it, so that one still wins */
.fields input:focus, .fields select:focus, .fields textarea:focus { border-color: var(--blue-light); box-shadow: 0 0 0 4px rgba(143,167,240,.18); }
.fields input.err { border-color: #ff8a8a; }
.fields-s { gap: 7px; margin-top: 12px; }
.fields-s input { height: 38px; padding: 0 11px; border-radius: var(--r1); font-size: 13px; }
.send { display: block; width: 100%; margin-top: 10px; height: 44px; border: 0; border-radius: var(--r1); background: var(--blue); color: #fff; font-weight: 600; font-size: 14.5px; transition: background .2s; }
.send:hover { background: var(--blue-hover); }
.send.sent { background: rgba(243,242,242,.14); }
.send:disabled { opacity: .7; cursor: default; }
.send-s { margin-top: 9px; height: 40px; border-radius: var(--r1); font-size: 13.5px; }
.form-err { margin: 8px 0 0; font-size: 12.5px; color: #ffb0b0; } /* the page's light red for text on black, as .card-paper .left-red */

/* enterprise (layout shared with the api tab, above) */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 40px; background: rgba(243,242,242,.12); border: 1px solid rgba(243,242,242,.12); border-radius: var(--r1); overflow: hidden; }
.tile-e { background: var(--ground); padding: 20px 20px 18px; }
.tile-h { font-weight: 600; font-size: 14.5px; }
.tile-e p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: rgba(243,242,242,.7); }
/* "How an engagement runs": the heading centred, the numbered steps a centred block of left-aligned text */
.ent-bottom > div { max-width: 560px; margin: 72px auto 0; }
.h2-22 { font-size: 22px; line-height: 1.1; text-align: center; }
.steps { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.steps li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font-size: 14.5px; line-height: 1.5; color: rgba(243,242,242,.75); text-wrap: pretty; }
.step-n { font-family: var(--serif); font-size: 17px; line-height: 1; color: var(--blue-light); }
.steps b { color: var(--paper); font-weight: 600; }
.panel-ent { padding: 17px 19px 15px; }

/* privacy and terms (R36): the docs chrome around long legal text; in the nav the five tabs are
   links into the docs. One 580px column at 17px/1.7 (about 74 characters a line), serif headings,
   links underlined in the text */
.legal { width: 100%; max-width: 644px; margin: 0 auto; padding: 88px 32px 120px; }
.legal h1 { font-size: 56px; line-height: 1.02; }
.legal .lede { margin: 18px 0 0; font-size: 14px; color: rgba(243,242,242,.6); }
.legal h2 { margin: 52px 0 0; font-size: 26px; line-height: 1.15; }
.legal p { margin: 14px 0 0; font-size: 17px; line-height: 1.7; color: rgba(243,242,242,.8); }
.legal strong { color: var(--paper); font-weight: 600; }
.legal p a { text-decoration: underline; text-underline-offset: 3px; }
.legal .fine { margin-top: 44px; font-size: 14px; color: rgba(243,242,242,.55); }

.foot { margin-top: auto; padding: 22px 32px; border-top: 1px solid rgba(243,242,242,.1); display: flex; justify-content: space-between; gap: 20px; font-size: 13px; color: rgba(243,242,242,.5); flex-wrap: wrap; }
.foot-links { display: flex; gap: 6px 18px; flex-wrap: wrap; } /* R182 (22 October 2026): with Prices first among the docs' footer links, the row was wider than a 320px phone; it wraps within its group instead, 6px between its lines, and a desktop keeps one line beside the copyright, as before */

/* thinking orb, CSS stand-in from DESIGN_SPEC.md */
.orb { position: relative; display: block; width: 52px; height: 52px; border-radius: 50%; flex: none; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, oklch(92% .04 var(--h)) 0%, oklch(70% .16 var(--h)) 45%, oklch(42% .2 var(--h)) 100%);
  box-shadow: 0 10px 30px -8px oklch(60% .2 var(--h) / .7), inset 0 -6px 14px oklch(30% .15 var(--h) / .6); }
.orb-48 { width: 48px; height: 48px; }
.orb i { position: absolute; inset: 0; border-radius: 50%; filter: blur(4px); mix-blend-mode: screen; }
.orb i:nth-child(1) { background: radial-gradient(circle at 50% 50%, oklch(95% .05 calc(var(--h) + 30)) 0%, transparent 70%); transform: scale(.9); animation: orbA 8s ease-in-out infinite; }
.orb i:nth-child(2) { background: radial-gradient(circle at 50% 50%, oklch(75% .2 calc(var(--h) - 40)) 0%, transparent 70%); transform: scale(.8); animation: orbB 9s ease-in-out infinite; }
.orb i:nth-child(3) { background: radial-gradient(circle at 50% 50%, oklch(85% .12 calc(var(--h) + 70)) 0%, transparent 70%); transform: scale(.7); animation: orbC 10s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .orb i, .tab, .docs-wall .belt { animation: none !important; } }

@media (max-width: 900px) {
  .tab { padding: 56px 20px 80px; }
  .h1-64 { font-size: 44px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* two by two: the line between the columns belongs to the right-hand cells (2 and 4), the one between the rows to the lower two (3 and 4); the four arms
     meet in the middle and the outer ends stop a cell's padding short of the edge, as in a row */
  .stat:nth-child(odd)::before { content: none; }
  .stat:nth-child(2)::before { bottom: 0; }
  .stat:nth-child(4)::before { top: 1px; }
  .stat:nth-child(n+3)::after { content: ""; position: absolute; top: 0; left: var(--stat-pad); right: var(--stat-pad); height: 1px; background: rgba(243,242,242,.1); }
  .stat:nth-child(3)::after { right: 0; }
  .stat:nth-child(4)::after { left: 0; }
  .tools, .cases { grid-template-columns: 1fr; gap: 24px; }
  .h2-40 { margin-top: 64px; font-size: 32px; }
  .rival, .us { grid-template-columns: 40px minmax(0, 1fr); }
  .rival .marks, .us .marks { grid-column: 2; }
  .questions ol { grid-template-columns: 1fr; }
  .tab-about { min-height: 0; display: block; }
  .team, .notes, .tiles { grid-template-columns: 1fr; }
  .team { margin-top: 14px; }
  .panel { margin-top: 48px; }
  .ent-bottom > div { margin-top: 56px; }
  .endpoints > div { grid-template-columns: auto 1fr; align-items: start; padding: 11px 16px; }
  .endpoints > div > span:empty { display: block; }
  .desc { margin-top: 2px; }
  .top { gap: 20px 24px; } /* U, 10 October 2026: 24px (was 10) and the tabs 20px apart: the box's outline and padding were what kept the first tab off the wordmark and the last off the button, and brand, tabs and button share one row from about 800px (the button wraps under that, as it did with the box) */
  .tabs { gap: 20px; }
  .cta { display: none; } /* R179: see the phone's tabs, below */
  .legal { padding: 56px 20px 80px; }
  .legal h1 { font-size: 44px; }
  .legal h2 { margin-top: 44px; font-size: 24px; }
  .legal p { font-size: 16px; }
}
@media (max-width: 720px) {
  .top { gap: 20px 12px; flex-wrap: nowrap; align-items: flex-start; } /* R191: the mark and the tabs on one row (below), the mark level with their first line */
  .tabs { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-start; gap: 4px 16px; } /* U, 10 October 2026: one outlined chip a tab is gone too; 14px and 16px as the landing page's links are on a phone */
  .tabs button, .tabs a { font-size: 14px; line-height: 24px; } /* R191: each tab 36px tall, the brand's own height (site-header.css), so a line of them is level with the mark */
  .tabs [data-tab="about"], .tabs a[href$="#about"] { display: none; } /* R191: About us is off a phone's header for now */
  .rival, .us { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .rival .n { font-size: 28px; }
  .rival .marks, .us .marks { grid-column: 1; margin-top: 6px; }
  .marks > div > span:last-child { white-space: normal; text-align: right; }
  .rival p, .us p { max-width: none; }
  .questions { padding: 20px 18px; }
  .strip { padding: 25px 21px; }
  .strip-title { font-size: 26px; }
  .foot { padding: 20px 16px; }
}
@media (max-width: 640px) {
  .top { gap: 16px 12px; }
}
/* R179, Henry, 21 October 2026, with his phone's screenshot of the docs: "fix the nav bar on the docs on mobile. we dont need
   the request beta access button". Under the desktop's three-column row (901px) the header is the mark and the tabs: the button
   no longer takes the row beside the mark on a phone, or a row of its own under the brand and the tabs on a tablet (the pages'
   strips keep theirs).
   R191, Henry, the same evening, of R179 on his phone: "the logo cant sit up like that it needs to be flush with the different
   menu options", then "we can take about us off for now". Up to 720px the mark and the tabs share one row, the mark level with
   them (the 720px block), and About us is off a phone's header; its page is still at /docs.html#about, and a tablet and a
   desktop keep the tab. The docs' and the legal pages' four, and the prices pages' five, then fit one row on every phone from
   320px: 14px type 16px apart from 414px, 13px 12px apart under 414px, 12.5px 10px apart under 375px, and 12px 6px apart,
   10px after the mark, under 350px. The prices pages' six, once the Market shows, still wrap beside the mark on most phones
   (two lines at 430px, one at 480px), the mark level with their first line: each tab is the brand's 36px (line-height 24px
   and its 6px above and below), and the row's items keep to its top. */
@media (max-width: 413px) {
  .tabs { gap: 4px 12px; }
  .tabs button, .tabs a { font-size: 13px; }
}
@media (max-width: 374px) {
  .tabs { gap: 4px 10px; }
  .tabs button, .tabs a { font-size: 12.5px; }
}
@media (max-width: 349px) {
  .top { column-gap: 10px; }
  .tabs { gap: 4px 6px; }
  .tabs button, .tabs a { font-size: 12px; }
}
/* U, 12 October 2026: on a phone Why us's eyebrow (label, "Comparison · October 2026 · 3 min read", Copy for AI) no longer fits one line, and the bar
   wrapped the button under it: 33px the other four tabs do not have, so that tab's headline sat lower than theirs. Now the bar keeps one line and the
   byline drops under the label (two small lines are shorter than the 36px button); under 430px even that line is too wide, so it loses its
   " · 3 min read" and keeps the date. The headline is then at the same height on all five tabs. */
@media (max-width: 520px) {
  .eyebrow-bar { flex-wrap: nowrap; }
  .eyebrow-row { flex-wrap: wrap; gap: 0 14px; }
}
@media (max-width: 430px) {
  .eyebrow-row .meta .more { display: none; }
}

/* U, 7 October 2026 (Henry): "placeholders on text fields should go away after text fields have been clicked
   on". A field's placeholder clears once the field has focus, not at the first letter typed. */
input:focus::placeholder, textarea:focus::placeholder { color: transparent; }