/* Shared design system for the product pages.
   ---------------------------------------------------------------------------
   Two products, one studio. Lander and Folio each get their own page, their
   own wordmark and their own accent, but they share this sheet so they read as
   a family rather than as unrelated templates. The DNA is
   the ARCH-E index: #f2f2f2 paper, Barlow, hairline square boxes, uppercase
   micro-labels. What is new here is the layout of a product page, which is
   wider than an index and has a hero, an access section and a price.

   Every page sets --accent on :root. Nothing else changes. */

:root {
  --paper: #f2f2f2;
  --box: #f7f7f7;
  --line: #e0e0e0;
  --line-strong: #d8d8d8;
  --ink: #2e2e2e;
  --body: #555;
  --mute: #777;
  --faint: #aaa;
  --ghost: #c0c0c0;
  --accent: #2e2e2e;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* scroll-padding clears the sticky topbar, which is 3.6rem, plus enough room
   that the section's own label is not sitting against it. */
html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; }

body {
  background: var(--paper);
  font-family: 'Barlow', Arial, sans-serif;
  color: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* One language on screen, both in the DOM, so the hidden one is still found
   by a find-in-page search and by a crawler. Same rule as the index. */
html[data-lang="es"] [data-l="en"] { display: none; }
html[data-lang="en"] [data-l="es"] { display: none; }

.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 2rem; }
.narrow { max-width: 720px; }

/* topbar ------------------------------------------------------------------
   Sticky, because a product page is long and the two things a visitor wants
   at any scroll depth are the access docs and the way back out. */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(242, 242, 242, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  display: flex; align-items: center; gap: 1.5rem;
  height: 3.6rem;
}
.mark {
  font-family: 'Barlow Condensed', 'Barlow', Arial, sans-serif;
  font-weight: 900; font-size: 1.35rem; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink);
  text-decoration: none; line-height: 1; white-space: nowrap;
}
/* The dot is the only place the accent appears in the wordmark. It is what
   makes three pages built from one sheet look like three companies. */
.mark i { color: var(--accent); font-style: normal; }

.tnav { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.tnav a, .tnav button {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: 'Barlow', Arial, sans-serif;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; color: #999; text-decoration: none;
  transition: color 0.2s ease;
}
.tnav a:hover, .tnav button:hover { color: var(--ink); }
.tnav .lang { display: flex; align-items: baseline; gap: 0.3rem; }
.tnav .lang button { font-size: 0.7rem; letter-spacing: 0.1em; color: #c8c8c8; }
.tnav .lang button.active { color: var(--ink); }
.tnav .lang .sep { color: #ddd; font-size: 0.7rem; font-weight: 300; }
@media (max-width: 820px) { .tnav .hide-sm { display: none; } }

/* chips ------------------------------------------------------------------- */
.chip {
  display: inline-block;
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; padding: 0.22rem 0.5rem;
  border: 1px solid var(--line-strong); color: var(--faint);
  white-space: nowrap; vertical-align: middle;
}
.chip.live { color: var(--paper); background: var(--accent); border-color: var(--accent); }
.chip.soon { color: var(--accent); border-color: var(--accent); }
/* Named `later`, not `plan`: a chip written as `chip plan` also matched the
   `.plan` price-card rule below and came out as a 172 px flex box. */
.chip.later { color: #bbb; border-style: dashed; }

/* hero -------------------------------------------------------------------- */
.hero { padding: 5.5rem 0 4rem; }
.eyebrow {
  display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 1.8rem;
}
.hero h1 {
  font-family: 'Barlow Condensed', 'Barlow', Arial, sans-serif;
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(3rem, 9vw, 6rem); line-height: 0.92;
  letter-spacing: -0.005em; color: var(--ink);
  margin-bottom: 1.4rem;
}
.hero h1 i { color: var(--accent); font-style: normal; }
.lede {
  max-width: 42rem; font-size: 1.12rem; font-weight: 300;
  line-height: 1.65; color: var(--mute); margin-bottom: 1rem;
}
.lede b { font-weight: 600; color: var(--ink); }
.sub {
  max-width: 40rem; font-size: 0.92rem; font-weight: 300;
  line-height: 1.8; color: var(--faint);
}

.cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2.4rem; }
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: 'Barlow', Arial, sans-serif;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; padding: 0.85rem 1.5rem;
  border: 1px solid var(--accent); background: var(--accent); color: var(--paper);
  transition: filter 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover { filter: brightness(1.25); }
.btn.ghost { background: none; color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { filter: none; border-color: var(--ink); }
.btn[aria-disabled="true"] {
  background: none; color: #bbb; border-color: #ddd; border-style: dashed;
  cursor: default; pointer-events: none;
}

/* numbers ----------------------------------------------------------------
   The real figures, printed big, because they are the argument. Each one
   carries its own source line: a number with no provenance is decoration. */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line);
}
.stat {
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--box); padding: 1.4rem 1.3rem 1.3rem;
}
.stat-n {
  font-family: 'Barlow Condensed', 'Barlow', Arial, sans-serif;
  font-weight: 900; font-size: 2.1rem; line-height: 1;
  color: var(--ink); margin-bottom: 0.5rem;
}
.stat-n small { font-size: 0.9rem; font-weight: 600; color: var(--faint); }
.stat-l {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--faint); line-height: 1.6;
}

/* sections ---------------------------------------------------------------- */
section { padding: 4.5rem 0; }
section + section { border-top: 1px solid var(--line); }
.sec-head { margin-bottom: 2.5rem; max-width: 44rem; }
.sec-label {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.9rem;
}
.sec-head h2 {
  font-size: 1.6rem; font-weight: 600; line-height: 1.25;
  color: var(--ink); letter-spacing: -0.01em; margin-bottom: 0.9rem;
}
.sec-head p { font-size: 0.95rem; font-weight: 300; line-height: 1.8; color: var(--mute); }
.sec-head p b { font-weight: 600; color: var(--ink); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; }
.card {
  border: 1px solid var(--line); background: var(--box);
  padding: 1.4rem 1.35rem; display: flex; flex-direction: column; gap: 0.7rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.card:hover { background: #fff; border-color: #c8c8c8; }
.card-n {
  font-family: var(--mono); font-size: 0.68rem; color: var(--accent);
  letter-spacing: 0.08em;
}
.card h3 { font-size: 0.98rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
.card p { font-size: 0.86rem; font-weight: 300; line-height: 1.75; color: var(--mute); }
.card p b { font-weight: 600; color: var(--ink); }
.card code {
  font-family: var(--mono); font-size: 0.8em; background: var(--paper);
  border: 1px solid #e5e5e5; padding: 0.05rem 0.3rem;
}

/* prose ------------------------------------------------------------------- */
.prose p { font-size: 0.95rem; font-weight: 300; line-height: 1.85; color: var(--body); margin-bottom: 1.1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose b, .prose strong { font-weight: 600; color: var(--ink); }
.prose i { font-style: italic; }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--mute); }
.prose ul, .prose ol { margin: 0 0 1.2rem 1.2rem; font-size: 0.95rem; font-weight: 300; line-height: 1.85; }
.prose li { margin-bottom: 0.45rem; }
.prose h3 { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 2rem 0 0.8rem; }
.prose code {
  font-family: var(--mono); font-size: 0.85em; background: var(--box);
  border: 1px solid #e5e5e5; padding: 0.05rem 0.3rem;
}

/* A measurement table, lifted from the index, because the honest number is
   the thing these products are actually selling. */
table.m {
  width: 100%; border-collapse: collapse; margin: 0.6rem 0 1.4rem;
  font-size: 0.88rem; font-weight: 300; color: var(--body);
}
table.m th {
  text-align: left; font-size: 0.64rem; font-weight: 600; color: var(--faint);
  letter-spacing: 0.11em; text-transform: uppercase;
  padding: 0 1rem 0.55rem 0; border-bottom: 1px solid var(--line-strong);
}
table.m td { padding: 0.6rem 1rem 0.6rem 0; border-bottom: 1px solid #ececec; }
table.m td b { color: var(--ink); font-weight: 600; }
table.m tr.win td { background: rgba(46, 46, 46, 0.03); }
table.m tr.win td:first-child { box-shadow: inset 2px 0 0 var(--accent); padding-left: 0.6rem; }

.verdict {
  border-left: 2px solid var(--accent); padding: 0.2rem 0 0.2rem 1.1rem;
  margin: 1.4rem 0; color: var(--ink); font-size: 0.95rem; font-weight: 400; line-height: 1.8;
}
.src { font-size: 0.76rem; color: var(--faint); font-weight: 300; line-height: 1.7; }
.src a { color: #999; }

.stack { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin: 0 0 1.4rem; }
.stack span {
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #888; border: 1px solid #ddd; padding: 0.28rem 0.55rem;
}

/* access: code with tabs --------------------------------------------------
   The point of the whole rework. A product you can only look at is a demo;
   a product with an addressable surface is a product. The tabs are curl,
   MCP and the library, and the status chip above them never lies about
   which of the three is actually running. */
/* minmax(0, 1fr), not 1fr. A `pre` with white-space: pre has a min-content
   width as wide as its longest line, and a plain 1fr track refuses to go
   below it, so the two columns resized every time a tab was switched. The
   explicit 0 minimum pins the split and lets the block scroll instead.
   The split is 1.15 / 0.85 rather than even because the longest line that
   has to fit is `git clone <repo url>` on Lander, and clipping the one
   command a reader is most likely to copy is worse than a narrower list
   of tool names on the right, which wraps perfectly well. */
.access { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 2.5rem; align-items: start; }
@media (max-width: 880px) { .access { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line-strong); flex-wrap: wrap; }
.tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; cursor: pointer;
  font-family: 'Barlow', Arial, sans-serif;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: #aaa; padding: 0.7rem 0.95rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tab:first-child { padding-left: 0; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

.pane { display: none; }
.pane[data-on] { display: block; }

pre.code {
  background: #fbfbfb; border: 1px solid var(--line); border-top: none;
  padding: 1.2rem 1.25rem; overflow-x: auto;
  font-family: var(--mono); font-size: 0.78rem; line-height: 1.8; color: #44474d;
  white-space: pre;
}
pre.code b { color: var(--ink); font-weight: 600; }
pre.code .c { color: #a8aeb8; }
pre.code .s { color: var(--accent); }
.code-note { font-size: 0.78rem; font-weight: 300; line-height: 1.75; color: var(--faint); margin-top: 0.9rem; }

/* The tool surface, listed. These are real function names out of the repo,
   not an invented API, which is the only reason it is worth printing. */
.tools { border-top: 1px solid var(--line-strong); }
.tool {
  display: flex; gap: 1rem; align-items: baseline;
  padding: 0.8rem 0; border-bottom: 1px solid #ececec;
}
.tool code {
  font-family: var(--mono); font-size: 0.78rem; color: var(--ink);
  flex: 0 0 13.5rem; word-break: break-word;
}
.tool span { font-size: 0.82rem; font-weight: 300; line-height: 1.7; color: var(--mute); }
@media (max-width: 620px) {
  .tool { flex-direction: column; gap: 0.3rem; }
  .tool code { flex: none; }
}

/* price ------------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.plan {
  border: 1px solid var(--line); background: var(--box);
  padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 0.8rem;
}
.plan.pick { border-color: var(--accent); background: #fff; }
.plan-name {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint);
}
.plan.pick .plan-name { color: var(--accent); }
.plan-p {
  font-family: 'Barlow Condensed', 'Barlow', Arial, sans-serif;
  font-weight: 900; font-size: 2.3rem; line-height: 1; color: var(--ink);
}
.plan-p small { font-size: 0.85rem; font-weight: 600; color: var(--faint); letter-spacing: 0.02em; }
.plan ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.2rem; }
.plan li {
  font-size: 0.84rem; font-weight: 300; line-height: 1.6; color: var(--mute);
  padding-left: 1rem; position: relative;
}
.plan li::before { content: '\2014'; position: absolute; left: 0; color: #ccc; }
.plan .btn { margin-top: auto; text-align: center; }

/* footer ------------------------------------------------------------------ */
.foot { border-top: 1px solid var(--line-strong); padding: 3rem 0 4rem; }
.foot-in { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: space-between; }
.foot-col { display: flex; flex-direction: column; gap: 0.55rem; }
.foot-h {
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ghost); margin-bottom: 0.3rem;
}
.foot a, .foot p {
  font-size: 0.82rem; font-weight: 300; line-height: 1.7; color: #888;
  text-decoration: none;
}
.foot a { text-decoration: underline; text-underline-offset: 3px; }
.foot a:hover { color: var(--ink); }
.foot-note {
  margin-top: 2.5rem; font-size: 0.76rem; font-weight: 300; line-height: 1.8; color: var(--faint);
  max-width: 44rem;
}
.foot-note a { color: #999; font-size: inherit; }

@media (max-width: 620px) {
  .wrap { padding: 0 1.4rem; }
  .hero { padding: 3.5rem 0 2.8rem; }
  section { padding: 3.2rem 0; }
  .lede { font-size: 1rem; }
}

/* ===========================================================================
   THE ONE-SCREEN FRAME
   ---------------------------------------------------------------------------
   Everything above this line is the long-page vocabulary the three products
   started from. This block is the frame they now all use: a fixed viewport,
   the argument pinned on the left, and a box on the right that swaps panels
   instead of scrolling.

   It lives here and not in each page because the frame is the thing most
   likely to need a change, and a change to it has to land on all three pages
   at once. Each page keeps only its --accent and its own content rules.

   Two things are load-bearing and easy to break:
   - every child of a grid row that must shrink needs min-height: 0, or the
     minmax(0, 1fr) row grows to fit its content and the page scrolls;
   - product.js wires EVERY [role="tablist"] it finds, independently, so the
     topbar panel switcher and any nested sub-tabs need no new JavaScript.
   =========================================================================== */

html, body { height: 100%; }
/* smooth is for a page with anchors. This one has none, and smooth makes a
   programmatic scroll reset visible. */
html { scroll-behavior: auto; }
body { overflow: hidden; }

.shell { height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }

.topbar-in { height: 3.2rem; gap: 1.1rem; }
.topbar .tabs { border: none; margin-left: auto; gap: 0; flex-wrap: nowrap; }
.topbar .tab { padding: 0.55rem 0.7rem; border-bottom-width: 2px; }
.topbar .tab:first-child { padding-left: 0.7rem; }

.wrap { max-width: 1280px; }

/* The split is 0.9 / 1.1: the pitch is fixed prose and the board holds the
   code blocks and tables, which need the extra room. */
.stage { min-height: 0; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0; }
.stage > * { min-height: 0; }

/* the argument, always on screen --------------------------------------- */
.pitch { padding: 2.2rem 2.5rem 1.6rem 2rem; display: flex; flex-direction: column; overflow: hidden; }
.pitch .eyebrow { margin-bottom: 1.1rem; gap: 0.55rem; }
.pitch h1 {
  font-family: 'Barlow Condensed', 'Barlow', Arial, sans-serif;
  font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 0.95;
  letter-spacing: -0.005em; color: var(--ink); margin-bottom: 1rem;
}
.pitch h1 i { color: var(--accent); font-style: normal; }
.pitch .lede { font-size: 0.95rem; line-height: 1.6; margin-bottom: 0.75rem; max-width: 30rem; }
.pitch .sub { font-size: 0.8rem; line-height: 1.65; max-width: 30rem; }

.call { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 0; }

/* The numbers sit on the floor of the column, so the pitch reads as one
   block of argument with its evidence underneath it at any screen height. */
.pitch .stats { margin-top: auto; border-left: none; }
.pitch .stat { padding: 0.9rem 0.9rem 0.8rem; border-left: 1px solid var(--line); border-right: none; }
.pitch .stat-n { font-size: 1.5rem; margin-bottom: 0.3rem; }
.pitch .stat-l { font-size: 0.6rem; letter-spacing: 0.09em; }

/* the swapping box ------------------------------------------------------
   overflow-y: auto is the safety net, not the plan. Every panel is written
   to fit; this stops a long one from being unreachable if it does not. */
.board {
  border-left: 1px solid var(--line-strong); background: var(--box);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.7rem 2rem 1.7rem 2.2rem;
}
.board .pane[data-on] { display: block; animation: in 0.25s ease both; }
@keyframes in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.board .sec-head { margin-bottom: 0.9rem; max-width: 38rem; }
.board .sec-head h2 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.board .sec-head p { font-size: 0.88rem; line-height: 1.7; }
.board .cards { gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.board .card { background: #fff; padding: 1rem 1rem; gap: 0.5rem; }
.board .card h3 { font-size: 0.88rem; }
.board .card p { font-size: 0.8rem; line-height: 1.65; }
.board .card-n { font-size: 0.62rem; }
.board pre.code { background: #fff; border-top: 1px solid var(--line); font-size: 0.72rem; line-height: 1.7; padding: 0.9rem 1rem; }
.board .tool { padding: 0.55rem 0; }
.board .tool code { flex: 0 0 11.5rem; font-size: 0.72rem; }
.board .tool span { font-size: 0.76rem; line-height: 1.6; }
.board table.m { font-size: 0.82rem; margin: 0.4rem 0 1rem; }
.board table.m td { padding: 0.45rem 1rem 0.45rem 0; }
.board .verdict { margin: 0.8rem 0; font-size: 0.86rem; line-height: 1.7; }
.board .prose p { font-size: 0.86rem; line-height: 1.75; margin-bottom: 0.8rem; }
.board .prose h3 { font-size: 0.92rem; margin: 1.3rem 0 0.6rem; }
.board .src { font-size: 0.72rem; }
.board .plans { gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); }
.board .plan { background: #fff; padding: 0.9rem 1rem; gap: 0.55rem; }
.board .plan-p { font-size: 1.55rem; }
.board .plan li { font-size: 0.78rem; }
.board .plan .btn { padding: 0.65rem 1rem; font-size: 0.68rem; }
.board .stack { margin-bottom: 1rem; }

/* numbered steps, for a setup that is a sequence rather than a list ------ */
.steps { display: flex; flex-direction: column; gap: 0.7rem; }
.step { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.step-n {
  font-family: var(--mono); font-size: 0.7rem; color: var(--accent);
  border: 1px solid var(--line-strong); background: #fff;
  text-align: center; padding: 0.22rem 0; letter-spacing: 0.04em;
}
.step h3 { font-size: 0.9rem; font-weight: 600; color: var(--ink); margin-bottom: 0.35rem; }
.step p { font-size: 0.82rem; font-weight: 300; line-height: 1.7; color: var(--mute); }
.step p b { font-weight: 600; color: var(--ink); }
.step code { font-family: var(--mono); font-size: 0.78em; background: #fff; border: 1px solid #e5e5e5; padding: 0.05rem 0.3rem; }

/* a two-column list of real questions, each with its own answer ---------- */
.qs {
  list-style: none; border-top: 1px solid var(--line-strong); margin: 0.6rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); column-gap: 1.4rem;
}
.qs li { border-bottom: 1px solid #ececec; padding: 0.3rem 0; }
.qs q { display: block; font-size: 0.84rem; font-weight: 400; color: var(--ink); quotes: '\201C' '\201D'; line-height: 1.5; }
.qs small { display: block; font-size: 0.74rem; font-weight: 300; line-height: 1.6; color: var(--faint); margin-top: 0.15rem; }

/* copy button, for the one block a reader is meant to take away --------- */
.block { position: relative; }
.copy {
  position: absolute; top: 0.45rem; right: 0.45rem; z-index: 2;
  background: #fff; border: 1px solid var(--line-strong); cursor: pointer;
  font-family: 'Barlow', Arial, sans-serif;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink); padding: 0.3rem 0.65rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.copy:hover { border-color: var(--ink); }
.copy[data-done] { color: var(--accent); border-color: var(--accent); }

/* one-line footer, because the frame has no room for four columns ------- */
.bar {
  border-top: 1px solid var(--line-strong);
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.5rem 1.2rem; padding: 0.6rem 2rem; min-height: 2.4rem;
}
.bar a, .bar span { font-size: 0.7rem; font-weight: 300; color: #999; text-decoration: none; line-height: 1.5; }
.bar a { text-decoration: underline; text-underline-offset: 3px; }
.bar a:hover { color: var(--ink); }
.bar .right { margin-left: auto; display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* Below 980 px the frame gives up and becomes a normal page. A fixed
   viewport with two columns on a phone would mean a scrolling box inside a
   non-scrolling page, which is the worst of both. */
@media (max-width: 980px) {
  body { overflow: auto; }
  .shell { height: auto; min-height: 100dvh; }
  .stage { grid-template-columns: minmax(0, 1fr); }
  .pitch { padding: 1.8rem 1.4rem 1.4rem; }
  .pitch .stats { margin-top: 1.8rem; }
  .board { border-left: none; border-top: 1px solid var(--line-strong); overflow: visible; padding: 1.8rem 1.4rem; }
  /* Wrapping, not a sideways scroll: a scrolling tab row on a phone hides
     the last panels behind a gesture nothing on screen asks for. */
  .topbar .tabs { width: 100%; margin-left: 0; flex-wrap: wrap; }
  /* The horizontal padding is written again because it comes from .wrap,
     and the shorthand would otherwise take it away at the one width where
     the bar touches the edge of the screen. */
  .topbar-in { height: auto; padding: 0.5rem 1.4rem; flex-wrap: wrap; }
  .bar { padding: 0.8rem 1.4rem; }
  .bar .right { margin-left: 0; }
}