/* One stylesheet for eskley.com and rowtrace.com. Every value comes from DS_Blue tokens.css
   (version 1791646153-fb0a, sha256 d1f920cb…5819065); nothing here defines a colour.
   Layout: one 1120px frame, a 65ch prose column, tables and code break out to full width.
   html[data-site] picks the site. Ruled 2026-10-13: eskley's header and footer are solid rail navy,
   Rowtrace's header is white with an accent rule; long pages are full-width alternating bands. */

:root { color-scheme: light; --wrap: 1120px; --gutter: var(--space-3); }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text-primary);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2rem, 4.2vw, var(--text-3xl)); letter-spacing: -0.02em; }
h2 { font-size: var(--text-xl); letter-spacing: -0.01em; }
h3 { font-size: var(--text-lg); }
p, ul, ol { margin: 0; max-width: 65ch; }
code, pre, .mono { font-family: var(--font-mono); font-size: var(--text-sm); }
code { background: var(--bg-alt); padding: 1px 5px; border-radius: var(--radius-sm); }
pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); overflow-x: auto; line-height: 1.6; margin: 0; max-width: 100%; }
pre code { background: none; padding: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.eyebrow { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 var(--space-1); }
.lead { font-size: 1.125rem; color: var(--text-secondary); }
.lead strong, .answer { color: var(--text-primary); font-weight: 600; }
.muted { color: var(--text-muted); }
.small { font-size: var(--text-sm); }
@media (max-width: 640px) { :root { --gutter: var(--space-2); } }

/* ---------- marks: solid eskley tile, hollow Rowtrace tile (DS_Blue "The two marks invert") ---------- */
.mark { display: inline-flex; align-items: center; justify-content: center; flex: none;
  font-family: var(--font-body); font-weight: 600; line-height: 1; }
.mark span { display: block; }
.mark-e { background: var(--accent); color: var(--accent-ink); }
.mark-e span { text-box: trim-both ex alphabetic; }
.mark-r { background: var(--surface); color: var(--accent); border: 1.5px solid var(--accent); }
.mark-r span { text-box: trim-both cap alphabetic; }
.m32 { width: 32px; height: 32px; font-size: 22px; border-radius: 5px; }
.m24 { width: 24px; height: 24px; font-size: 16px; border-radius: 4px; }
.m16 { width: 16px; height: 16px; font-size: 11px; border-radius: 3px; }
.m16.mark-r { border-width: 1px; }
.m64 { width: 64px; height: 64px; font-size: 44px; border-radius: 11px; border-width: 2px; }
.wordmark { font-family: var(--font-body); font-weight: 600; letter-spacing: -0.01em; font-size: 1.375rem; line-height: 1; }

/* ---------- buttons: DS_Blue control height (--form-control, 36px), one primary per section ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--form-control); padding: 0 18px; border-radius: var(--radius-full);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; line-height: 1;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--text-muted); color: var(--text-primary); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }

/* ---------- header ---------- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--border); position: relative; z-index: 5; }
.site-header .bar { min-height: 64px; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-primary); }
.brand:hover { color: var(--text-primary); }
.nav { display: flex; gap: var(--space-3); align-items: center; }
.nav a { font-size: var(--text-sm); color: var(--text-secondary); text-decoration: none;
  padding: 20px 0 18px; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--text-primary); }
.nav a[aria-current="page"] { color: var(--text-primary); font-weight: 600; border-bottom-color: var(--accent); }
.bar-end { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.byline { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm);
  color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.byline:hover { color: var(--text-primary); }
.byline b { font-weight: 600; color: var(--text-secondary); }
@media (max-width: 760px) {
  .site-header .bar { gap: 0 var(--space-2); padding-top: 12px; }
  .nav { order: 3; width: 100%; overflow-x: auto; gap: var(--space-3); scrollbar-width: none; }
  .nav a { padding: 10px 0 10px; }
  .byline .by-text { display: none; }
}

/* eskley's header is solid (rail navy), Rowtrace's is hollow (white, accent rule). */
html[data-site="eskley"] .site-header { background: var(--rail); border-bottom-color: var(--rail); }
html[data-site="eskley"] .site-header .brand { color: var(--rail-ink); }
html[data-site="eskley"] .site-header .nav a { color: var(--rail-ink-off); }
html[data-site="eskley"] .site-header .nav a:hover { color: var(--rail-ink); }
html[data-site="eskley"] .site-footer { background: var(--rail); color: var(--rail-ink-off); border-top-color: var(--rail); }
html[data-site="eskley"] .site-footer a,
html[data-site="eskley"] .site-footer .f-head,
html[data-site="eskley"] .site-footer .brand { color: var(--rail-ink); }
html[data-site="eskley"] .site-footer .legal { border-top-color: var(--rail-current); }
html[data-site="rowtrace"] .site-header { border-bottom: 2px solid var(--accent); }
.hero-band { padding-block: var(--space-10) var(--space-8); }

/* ---------- footer: same structure on both sites ---------- */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--border); margin-top: var(--space-12);
  color: var(--text-muted); font-size: var(--text-sm); }
.site-footer .cols { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: var(--space-4);
  padding-block: var(--space-6) var(--space-4); }
.site-footer .cols > * { min-width: 0; }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.site-footer a { color: var(--text-secondary); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.f-head { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-primary); margin-bottom: var(--space-1); }
.site-footer .legal { border-top: 1px solid var(--border); padding-block: var(--space-2) var(--space-4); line-height: 1.6; }
.site-footer .legal p { max-width: none; }
@media (max-width: 760px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } .site-footer .cols > :first-child { grid-column: 1 / -1; } }

/* ---------- page opening ---------- */
.page-head { padding-block: var(--space-8) var(--space-5); display: grid; gap: var(--space-2); }
.page-head .lead { max-width: 62ch; }
.subnav { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-top: var(--space-1); }
.subnav a { font-size: var(--text-sm); text-decoration: none; color: var(--text-secondary);
  padding: 6px 14px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface); }
.subnav a:hover { border-color: var(--text-muted); color: var(--text-primary); }
.subnav a[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hover); font-weight: 600; }

/* ---------- long pages: one column of full-width bands ---------- */
.doc { display: grid; grid-template-columns: minmax(0, 1fr); }

.body { display: grid; gap: var(--space-8); min-width: 0; }
.sec { display: grid; gap: var(--space-2); min-width: 0; scroll-margin-top: var(--space-3); }
.sec > h2 + .answer, .sec > h2 + p { margin-top: 2px; }
.sec h3 { margin-top: var(--space-2); }
.sec ul, .sec ol { padding-left: 1.25em; display: grid; gap: 6px; }

/* ---------- comparison table: full width; stacks into one block per row on a phone ---------- */
.table-wrap { overflow-x: auto; max-width: 100%; }
table.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.5; }
table.compare th, table.compare td { text-align: left; vertical-align: top; padding: 12px var(--space-2);
  border-bottom: 1px solid var(--border-light); }
table.compare thead th { background: var(--surface-2); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); }
table.compare thead th:first-child { border-top-left-radius: var(--radius-md); }
table.compare thead th:last-child { border-top-right-radius: var(--radius-md); }
table.compare tbody th { font-weight: 600; color: var(--text-primary); width: 22%; }
table.compare tbody tr:last-child > * { border-bottom: 0; }
table.compare .us { background: var(--accent-soft); }
table.compare thead th.us { color: var(--accent-hover); }
table.compare sup a { text-decoration: none; font-size: 0.7em; }
@media (max-width: 760px) {
  .table-wrap { overflow: visible; }
  table.compare, table.compare tbody, table.compare tr, table.compare th, table.compare td { display: block; width: auto; }
  table.compare { border: 0; background: none; }
  table.compare thead { display: none; }
  table.compare tbody { display: grid; gap: var(--space-1); }
  table.compare tbody tr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
  table.compare tbody th { background: var(--surface-2); width: auto; }
  table.compare td { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--space-1); }
  table.compare td::before { content: attr(data-label); font-size: var(--text-xs); font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); padding-top: 2px; }
}

/* ---------- draft gaps: facts still owed in the source drafts, shown as they are ---------- */
.gap { background: var(--warn-soft); border: 1px dashed var(--warn); border-radius: var(--radius-sm);
  padding: 0 5px; font-size: 0.92em; color: var(--text-primary); }
.gap::before { content: "Gap · "; font-weight: 600; color: var(--warn); }

/* draft banner: only on pages that still carry gaps; goes when the last gap is resolved */
.draft-banner { background: var(--warn-soft); border-bottom: 1px solid var(--warn); color: var(--text-primary);
  padding: var(--space-1) var(--space-2); font-size: var(--text-sm); text-align: center; }

/* ---------- pieces ---------- */
.callout { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3); max-width: 65ch; }
.callout p { max-width: none; }
.callout strong { color: var(--text-primary); }
.callout.trust { background: var(--accent-soft); border-color: var(--accent-soft); }
.panel { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--space-4); }
.links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-2); }
.link-tile { display: grid; gap: 6px; padding: var(--space-3); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); text-decoration: none; color: var(--text-secondary); font-size: var(--text-sm); }
.link-tile:hover { border-color: var(--accent); color: var(--text-secondary); }
.link-tile strong { font-family: var(--font-display); font-size: var(--text-base); color: var(--text-primary); line-height: 1.3; }
.link-tile .go { color: var(--accent); font-weight: 600; }
.ic { width: 20px; height: 20px; color: var(--accent); flex: none; }
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); }
.feature { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 4px var(--space-2); }
.feature h3 { font-size: var(--text-base); margin: 0; line-height: 1.4; }
.feature p { grid-column: 2; color: var(--text-secondary); font-size: var(--text-sm); }
@media (max-width: 640px) { .features { grid-template-columns: minmax(0, 1fr); } }
.steps { list-style: none; padding: 0 !important; display: grid; gap: var(--space-4) !important; counter-reset: step; }
.steps > li { position: relative; display: grid; gap: 6px; padding-left: 52px; min-height: 36px; counter-increment: step; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--accent); color: var(--accent); font-weight: 600; display: flex; align-items: center; justify-content: center; }
.steps h3 { margin: 4px 0 0; }
dl.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px var(--space-3); margin: 0; font-size: var(--text-sm); }
dl.facts dt { color: var(--text-muted); }
dl.facts dd { margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }
.band { background: var(--surface); border-block: 1px solid var(--border); padding-block: var(--space-8); margin-top: var(--space-10); }
.sources { font-size: var(--text-sm); color: var(--text-secondary); }
.sources ol { display: grid; gap: 4px; }

/* backup-folder illustration */
.tree { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.85; background: var(--surface);
  border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: var(--space-3); overflow-x: auto; min-width: 0; }
.tree .cap { font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: 0.04em;
  text-transform: uppercase; font-weight: 600; margin-bottom: var(--space-1); }
.tree ul { list-style: none; margin: 0; padding-left: 18px; max-width: none; border-left: 1px dotted var(--border); }
.tree > ul { padding-left: 0; border: 0; }
.tree li { white-space: nowrap; display: block; }
.tree .row { display: inline-flex; align-items: center; gap: 6px; }
.tree svg { width: 15px; height: 15px; flex: none; }
.tree .fo { color: var(--text-secondary); }
.tree .sh { color: var(--obj-sheet); }
.tree .hl > .row { background: var(--accent-soft); border-radius: var(--radius-sm); padding: 0 6px; margin-left: -6px; color: var(--accent-hover); font-weight: 500; }
.tree .note { font-family: var(--font-body); color: var(--text-muted); font-size: var(--text-xs); margin-left: 8px; }

/* SmartScreen walk-through (drawn, not a screenshot) */
.ss { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.ss figure { margin: 0; display: grid; gap: var(--space-1); align-content: start; }
.ss .win { background: var(--rail); color: var(--rail-ink); border-radius: var(--radius-sm); padding: 14px 16px;
  font-size: 0.8125rem; line-height: 1.45; min-height: 158px; display: grid; gap: 6px; align-content: start; }
.ss .win b { font-size: 1rem; font-weight: 600; }
.ss .win .k { color: var(--rail-ink-off); }
.ss .win u { color: var(--rail-ink); }
.ss .win .wb { justify-self: end; margin-top: auto; border: 1px solid var(--rail-ink-off); padding: 3px 12px; border-radius: 2px; }
.ss .win .wb.hot { border-color: var(--rail-ink); outline: 2px solid var(--accent); }
.ss figcaption { font-size: var(--text-sm); color: var(--text-secondary); }
.ss figcaption b { color: var(--text-primary); }
@media (max-width: 760px) { .ss { grid-template-columns: minmax(0, 1fr); } }

/* download card */
.dl-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-6); align-items: start;
  padding-block: var(--space-8) var(--space-6); }
.dl-head > * { min-width: 0; }
.dl-card { display: grid; gap: var(--space-3); }
@media (max-width: 860px) { .dl-head { grid-template-columns: minmax(0, 1fr); } }

/* home hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--space-6); align-items: center;
  padding-block: var(--space-10) var(--space-8); }
.hero > * { min-width: 0; }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, var(--text-4xl)); max-width: 15ch; }
.hero .facts-line { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--text-sm); color: var(--text-muted); }
.hero .facts-line span::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ok); margin-right: 8px; vertical-align: middle; }
@media (max-width: 860px) { .hero { grid-template-columns: minmax(0, 1fr); padding-top: var(--space-6); } }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.split > * { min-width: 0; }
@media (max-width: 760px) { .split { grid-template-columns: minmax(0, 1fr); } }
.home-sec { padding-block: var(--space-8) 0; display: grid; gap: var(--space-3); }
.home-sec > header { display: grid; gap: var(--space-1); max-width: 70ch; }

/* company */
.product { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; max-width: 820px; }
.product h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.75rem; letter-spacing: -0.01em; }
.product .body { gap: var(--space-2); }
@media (max-width: 560px) { .product { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
main:has(> .band:last-child) + .site-footer { margin-top: 0; }

/* ---------- long pages: full-width alternating sections. The grey bleeds from inside the column. ---------- */
.body { gap: 0; }
.body > .sec { padding-block: var(--space-8); }
.body > .sec:first-child { padding-top: var(--space-2); }
.body > .sec:nth-child(even), .alt-band {
  background: var(--bg-alt); box-shadow: 0 0 0 100vmax var(--bg-alt); clip-path: inset(0 -100vmax); }
.page-head { padding-bottom: var(--space-4); }

/* cards, as DS_Blue's Card */
.card { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.card h3 { font-size: var(--text-lg); margin: 0; }
.card p { color: var(--text-secondary); font-size: var(--text-sm); }
.card .btn { margin-top: auto; align-self: flex-start; }
.card .status { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: stretch; margin-top: var(--space-1); }
@media (max-width: 860px) { .cards { grid-template-columns: minmax(0, 1fr); } }

/* definition box and Q&A, as DS_Blue's DefinitionBox and QABlock */
.definition { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); margin: 0; max-width: 65ch; }
.definition dt { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-1); }
.definition dd { margin: 0; color: var(--text-secondary); }
.qa-list { display: grid; max-width: 75ch; }
.qa { border-top: 1px solid var(--border); padding-block: var(--space-3); display: grid; gap: 6px; }
.qa:last-child { border-bottom: 1px solid var(--border); }
.qa h3 { font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; line-height: 1.5; margin: 0; }
.qa p { color: var(--text-secondary); }

/* token life: three steps across */
.token-life { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); background: var(--accent-soft);
  border-radius: var(--radius-md); padding: var(--space-4); }
.token-life > div { display: grid; gap: 6px; align-content: start; min-width: 0; }
.token-life .n { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; color: var(--accent-hover); }
.token-life h3 { font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; margin: 0; line-height: 1.4; }
.token-life p { font-size: var(--text-sm); color: var(--text-secondary); }
@media (max-width: 760px) { .token-life { grid-template-columns: minmax(0, 1fr); padding: var(--space-3); } }

/* product screenshot slot (no real screenshot yet) */
.shot { aspect-ratio: 16 / 7; max-width: 100%; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-3);
  color: var(--text-muted); font-size: var(--text-sm); box-shadow: var(--shadow-card); }

/* side-by-side trees */
.trees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.trees > div { display: grid; gap: var(--space-1); min-width: 0; align-content: start; }
.trees .tl { font-size: var(--text-sm); font-weight: 600; }
.trees .tree { box-shadow: none; border-radius: var(--radius-md); }
@media (max-width: 760px) { .trees { grid-template-columns: minmax(0, 1fr); } }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.two > * { min-width: 0; }
@media (max-width: 860px) { .two { grid-template-columns: minmax(0, 1fr); } }

/* closing call to action, centred as in the export */
.cta-band { text-align: center; padding-block: var(--space-10); }
.cta-band .wrap { display: grid; gap: var(--space-2); justify-items: center; }
.cta-band p { max-width: 55ch; color: var(--text-secondary); }
main:has(> .cta-band:last-child) + .site-footer { margin-top: 0; }
.cta-band.alt-band + * { margin: 0; }
.home-band { padding-block: var(--space-10); }
.home-band .sec > .eyebrow { margin: 0; }
.home-band .sec > h2 { max-width: 30ch; }
.cta-band { background: var(--surface); border-top: 1px solid var(--border); }