/* shopready.dev, set on Pagesystem's foundations: its type faces, type and space scale, and quiet neutrals tinted toward
   the one accent. Green means one thing on this page: a field that is there and right. Everything else is ink. */
@font-face { font-family: "Instrument Sans"; src: url("/fonts/InstrumentSans-Variable.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-Variable.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  /* Layout: one 1120px column; the hero pairs the promise with the product, every later section is a heading and its matter. */
  --bg: #f6f8f7;
  --surface: #ffffff;
  --well: #eef2f0;
  --ink: #0c1210;
  --ink-2: #39443f;
  --muted: #5d6863;
  --line: #e1e7e4;
  --line-2: #cfd8d3;
  --ready: #0b7a50;
  --ready-bg: #e3f3eb;
  --miss: #b42c2c;
  --miss-bg: #fbe8e6;
  --band: #0c1210;
  --on-band: #f2f5f3;
  --on-band-2: #a9b4ae;
  --on-band-line: #2a3430;
  /* The deep green of the hero and the cart band, the colors its field of cells is drawn in, and the ink button. */
  --deep: #052b1e;
  --on-deep: #effaf4;
  --on-deep-2: #a9cdbb;
  --on-deep-line: rgb(239 250 244 / 0.16);
  --cell-1: #6fe0ad;
  --cell-2: #1f9d68;
  --cell-3: #c8f7de;
  --cell-4: #0f6b47;
  --btn: #0c1210;
  --on-btn: #ffffff;
  --shadow: 0 1px 2px rgb(12 18 16 / 0.06), 0 12px 32px -12px rgb(12 18 16 / 0.18);

  --s-2: 2px; --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px; --s-32: 32px; --s-48: 48px; --s-64: 64px; --s-96: 96px; --s-128: 128px;
  --t-12: 0.75rem; --t-13: 0.8125rem; --t-14: 0.875rem; --t-15: 0.9375rem; --t-16: 1rem; --t-17: 1.0625rem; --t-20: 1.25rem; --t-24: 1.5rem;
  --text-figure: clamp(2.25rem, 1.25rem + 3vw, 3.75rem);
  --text-page: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
  --text-display: clamp(3rem, 1.5rem + 4.8vw, 5.5rem);
  --r-6: 6px; --r-8: 8px; --r-12: 12px; --r-16: 16px; --r-pill: 999px;
  --page: 1120px;
  --frame: calc(var(--page) + var(--s-48));
  --read: 640px;
  --gutter: max(var(--s-16), env(safe-area-inset-left, 0px));
  --gutter-end: max(var(--s-16), env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0f0d; --surface: #121816; --well: #1a2220; --ink: #edf2ef; --ink-2: #c3ccc7; --muted: #9aa6a0;
    --line: #222b27; --line-2: #2f3a35; --ready: #5fd3a0; --ready-bg: #133326; --miss: #ff8f86; --miss-bg: #3a1716;
    --band: #121816; --on-band: #edf2ef; --on-band-2: #9aa6a0; --on-band-line: #2a3430; --btn: #edf2ef; --on-btn: #0b0f0d;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 40px -16px rgb(0 0 0 / 0.7);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-padding-top: var(--s-96); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t-16)/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
h1, h2, h3, summary { text-wrap: balance; }
p, li, td, figcaption { text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
code { font: 450 0.9em/1 var(--mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; top: var(--s-8); left: var(--s-8); z-index: 20; padding: var(--s-8) var(--s-12); border-radius: var(--r-8); background: var(--ink); color: var(--bg); text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }
:focus-visible { outline: 2px solid var(--ready); outline-offset: 2px; border-radius: var(--r-6); }

.kicker { color: var(--muted); font: 500 var(--t-14)/1.4 var(--sans); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8); min-height: 44px; padding: 0 var(--s-16); border: 1px solid var(--btn); border-radius: var(--r-8); background: var(--btn); color: var(--on-btn); font: 500 var(--t-15)/1 var(--sans); text-decoration: none; white-space: nowrap; transition: opacity 200ms var(--ease); }
.btn:hover { opacity: 0.86; }
.btn.small { min-height: 36px; padding: 0 var(--s-12); font-size: var(--t-14); }

/* The engraving: Shop Ready's signature, cut the way a banknote is. A guilloche rosette of layered curves (drawn by
   tools/engrave.py), a ground of fine engraved lines, and a lattice band at the edges. The files are only shapes; the
   green is laid through them here, so it follows the theme. */
.field { position: relative; isolation: isolate; overflow: hidden; color: var(--on-deep);
  background: url("/grain.svg") center / cover no-repeat, radial-gradient(80% 120% at 78% 40%, #0a3d2a, transparent 70%), var(--deep); }
.field::before { content: ""; position: absolute; z-index: -1; pointer-events: none; background: var(--cell-1);
  -webkit-mask: url("/rosette.svg") center / contain no-repeat; mask: url("/rosette.svg") center / contain no-repeat; }
/* The hero's texture: the line work of money (tools/pattern.py), a lattice field and a medallion behind the card. The
   lattice fades out under the words on the left, so they sit on quiet green. */
.hero.field { background: radial-gradient(70% 110% at 78% 45%, #0a3d2a, transparent 70%), var(--deep); }
.hero.field::before { inset: 0; opacity: 0.55;
  -webkit-mask: url("/pattern.svg") center / cover no-repeat, linear-gradient(90deg, transparent 8%, #000 52%);
  -webkit-mask-composite: source-in;
  mask: url("/pattern.svg") center / cover no-repeat, linear-gradient(90deg, transparent 8%, #000 52%);
  mask-composite: intersect; }
.cart-in.field::before { top: -18rem; right: -14rem; width: 36rem; aspect-ratio: 1; opacity: 0.32; }
.install-in.field { background: url("/grain.svg") center / cover no-repeat, var(--band); }
.install-in.field::before { top: -14rem; right: -12rem; width: 30rem; aspect-ratio: 1; opacity: 0.22; }
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292' height='10'%3E%3Ctext x='0' y='7.5' font-family='ui-monospace,Menlo,monospace' font-size='6.4' letter-spacing='0.6' fill='%230b7a50'%3ESHOP READY %C2%B7 PRODUCT DATA AI SHOPPERS CAN BUY FROM %C2%B7 %3C/text%3E%3C/svg%3E") 0 0 / 292px 10px repeat-x; }

/* The bar: the mark, three places on the page, and the one action. */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; border-bottom: 1px solid var(--line); background: var(--bg); }
.bar-in { display: flex; align-items: center; gap: var(--s-24); max-width: var(--frame); margin: 0 auto; padding: var(--s-12) var(--gutter-end) var(--s-12) var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: var(--s-8); font: 600 var(--t-17)/1 var(--sans); letter-spacing: -0.02em; text-decoration: none; }
.brand svg { width: 24px; height: 24px; flex: none; }
.brand .tag { fill: var(--ready); }
.brand .tick { fill: none; stroke: var(--bg); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 0; }
.brand:hover .tick { animation: tick-draw 420ms var(--ease); }
@keyframes tick-draw { from { stroke-dashoffset: 16; } }
.bar nav { display: flex; gap: var(--s-32); margin-left: auto; }
.bar nav a { color: var(--muted); font-size: var(--t-14); text-decoration: none; white-space: nowrap; transition: color 200ms var(--ease); }
.bar nav a:hover { color: var(--ink); }
.bar .btn { margin-left: var(--s-8); }

/* The hero: the promise on the left, the product on the right, as the shopper's agent would read it. */
.hero-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; gap: var(--s-64); max-width: var(--frame); margin: 0 auto; padding: var(--s-96) var(--gutter-end) var(--s-96) var(--gutter); }
.hero-say { display: grid; justify-items: start; gap: var(--s-24); }
.hero h1 { font-size: var(--text-display); line-height: 0.98; font-weight: 600; letter-spacing: -0.05em; }
.lede { max-width: 34rem; color: var(--ink-2); font-size: var(--t-17); line-height: 1.65; }
.get { display: inline-flex; align-items: center; gap: var(--s-8); min-width: 0; max-width: 100%; min-height: 48px; padding: var(--s-4) var(--s-4) var(--s-4) var(--s-16); border: 1px solid var(--line-2); border-radius: var(--r-12); background: var(--surface); box-shadow: 0 1px 2px rgb(12 18 16 / 0.05); }
/* A command wraps at its spaces when the line is short, and only then inside a word; it never pushes its Copy off the page. */
.get pre { flex: 1 1 auto; min-width: 0; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.get code { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-size: var(--t-15); line-height: 1.5; }
.get code::before { content: "$ "; color: var(--muted); }
.ask code::before { content: none; }
.copy { flex: none; min-height: 36px; padding: 0 var(--s-12); border: 0; border-radius: var(--r-8); background: var(--ink); color: var(--bg); font: 500 var(--t-14)/1 var(--sans); cursor: pointer; transition: opacity 200ms var(--ease); }
.copy:hover { opacity: 0.86; }
.copy:active { transform: scale(0.97); }
.copy[data-done] { background: var(--ready); color: var(--surface); }
.copy svg { width: 14px; height: 14px; margin-right: var(--s-4); vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hero-small { margin-top: calc(-1 * var(--s-8)); color: var(--muted); font-size: var(--t-14); line-height: 1.55; }
.more { display: inline-flex; align-items: center; gap: var(--s-8); margin-top: calc(-1 * var(--s-12)); color: var(--ink); font: 500 var(--t-14)/1.4 var(--sans); text-decoration: none; white-space: nowrap; }
.more span { transition: transform 200ms var(--ease); }
.more:hover span { transform: translateX(3px); }

.hero .kicker, .hero .hero-small { color: var(--on-deep-2); }
.hero .lede { color: var(--on-deep-2); }
.hero .more { color: var(--on-deep); }
/* The command spans the column of words above it, so it reads as a field, not a chip left short of them. */
.hero .get { justify-self: stretch; justify-content: space-between; border-color: var(--on-deep-line); background: rgb(0 0 0 / 0.22); box-shadow: none; }
.hero .get code { color: var(--on-deep); }
.hero .get code::before { color: var(--on-deep-2); }
.hero .copy { background: var(--on-deep); color: var(--deep); }
.hero .receipt { border-color: transparent; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 24px 64px -20px rgb(0 0 0 / 0.6); }

/* The receipt: one sample product page read field by field, each field's state as a chip, the counts as meters. */
.receipt { display: grid; gap: var(--s-16); padding: var(--s-24); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-16); background: var(--surface); box-shadow: var(--shadow); }
.receipt figcaption { display: flex; justify-content: space-between; align-items: center; gap: var(--s-12); color: var(--ink); font: 600 var(--t-15)/1.3 var(--sans); }
.pill { padding: var(--s-2) var(--s-8); border-radius: var(--r-pill); background: var(--well); color: var(--muted); font: 500 var(--t-12)/1.5 var(--sans); white-space: nowrap; }
.receipt-url { display: flex; align-items: center; gap: var(--s-8); min-height: 36px; padding: var(--s-8) var(--s-12); border-radius: var(--r-8); background: var(--well); color: var(--ink-2); font: 400 var(--t-13)/1.4 var(--mono); overflow-wrap: anywhere; }
.receipt-url .dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ready); }
.lines { display: grid; padding: 0; list-style: none; }
.lines li { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) 4.75rem; align-items: center; gap: var(--s-12); min-height: 44px; padding: var(--s-8) 0; border-bottom: 1px solid var(--line); font-size: var(--t-14); line-height: 1.4; }
.lines li:first-child { border-top: 1px solid var(--line); }
.lines span { color: var(--muted); }
.lines b { font-weight: 500; color: var(--ink); }
.lines i { justify-self: end; padding: var(--s-2) var(--s-8); transition: background-color 320ms var(--ease), color 320ms var(--ease); border-radius: var(--r-pill); font: 500 var(--t-12)/1.5 var(--sans); font-style: normal; white-space: nowrap; }
.lines .ok { background: var(--well); color: var(--muted); }
.lines .fixed, .lines .added { background: var(--ready-bg); color: var(--ready); }
.totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16) var(--s-24); }
.total { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s-8) var(--s-16); font-size: var(--t-13); line-height: 1.4; }
.total > span:first-child { color: var(--muted); }
.total b { font: 600 var(--t-14)/1.4 var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.total .was { color: var(--muted); font-weight: 400; }
.total .to { margin: 0 var(--s-4); color: var(--muted); font-weight: 400; }
/* A meter fills to where the page is now; the struck figure beside it says where it was. */
.meter { position: relative; grid-column: 1 / -1; height: 6px; border-radius: var(--r-pill); background: var(--well); overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--ready); transition: width 900ms var(--ease), background-color 320ms var(--ease); }
.is-6of6 i { width: 100%; } .is-9of10 i { width: 90%; }
.verdict { display: flex; align-items: center; justify-content: center; gap: var(--s-8); min-height: 44px; border-radius: var(--r-8); background: var(--ready-bg); color: var(--ready); font: 600 var(--t-14)/1 var(--sans); transition: background-color 320ms var(--ease), color 320ms var(--ease); }
.verdict svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* The card's one moment: when the page opens, it plays the fix once. Fields start as found, then turn right in order.
   The markup is the finished card; without script, or with reduced motion, that is all anyone sees. */
.receipt[data-run] .lines i[data-was] { background: var(--miss-bg); color: var(--miss); }
.receipt[data-run] .lines li:has(i[data-was]) b { color: var(--muted); }
.receipt[data-run] .is-6of6 i { width: 33.333%; background: var(--miss); }
.receipt[data-run] .is-9of10 i { width: 20%; background: var(--miss); }
.receipt[data-run] .verdict { background: var(--well); color: var(--muted); }
.receipt[data-run] .verdict svg { visibility: hidden; }
.lines li b { transition: color 320ms var(--ease); }

/* The figures from mttr: their question, four numbers on one rule, and where they came from. */
.figures { display: grid; gap: var(--s-24); max-width: var(--frame); margin: 0 auto; padding: 0 var(--gutter-end) 0 var(--gutter); }
.fig-h { padding-top: var(--s-24); border-top: 1px solid var(--line-2); }
.figures ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-32); padding: 0; list-style: none; }
.figures li { display: grid; align-content: start; gap: var(--s-8); }
.figures b { font-size: var(--text-figure); line-height: 1; font-weight: 600; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.figures span { color: var(--ink-2); font-size: var(--t-14); line-height: 1.5; }
.source { color: var(--muted); font-size: var(--t-13); line-height: 1.55; }

/* Sections: one column, an even distance apart, each a heading and its matter. */
main { display: grid; }
.sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-32); width: 100%; max-width: var(--frame); margin: 0 auto; padding: var(--s-128) var(--gutter-end) 0 var(--gutter); }
.head { display: grid; gap: var(--s-12); max-width: var(--read); }
.head h2, .answer h2, .install h2, .close h2, .cart h2 { font-size: var(--text-page); line-height: 1.04; font-weight: 600; letter-spacing: -0.04em; }
.head p { color: var(--ink-2); font-size: var(--t-17); line-height: 1.6; }
.answer { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-16) var(--s-64); }
.answer p { color: var(--ink-2); font-size: var(--t-17); line-height: 1.65; }

/* The field table: what each field tells an agent. */
.table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-12); background: var(--surface); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--s-16) var(--s-24); border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; font-size: var(--t-14); line-height: 1.5; }
th { color: var(--muted); font-weight: 500; font-size: var(--t-13); background: var(--well); }
tbody tr:last-child td { border-bottom: 0; }
td:first-child { white-space: nowrap; }
td code { color: var(--ink); }
td:last-child { color: var(--muted); white-space: nowrap; }
/* Required fields read in ink, recommended ones in the muted tone, so the two lists separate at a glance. */
td.req { color: var(--ink); font-weight: 500; }

/* The seven steps, in order: the order is the method, so the numbers stay. */
.steps { display: grid; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.steps li { display: grid; grid-template-columns: var(--s-48) minmax(0, 4fr) minmax(0, 6fr) minmax(0, 3fr); align-items: baseline; gap: var(--s-16); padding: var(--s-24) 0; border-bottom: 1px solid var(--line); }
.steps .n { color: var(--muted); font: 500 var(--t-13)/1.5 var(--mono); font-variant-numeric: tabular-nums; }
.steps b { font-size: var(--t-17); line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; }
.steps span:not(.n) { color: var(--ink-2); font-size: var(--t-15); line-height: 1.55; }
.steps li:hover code, .steps li:focus-within code { border-color: var(--ink); color: var(--ink); }
.steps code { justify-self: end; transition: border-color 200ms var(--ease), color 200ms var(--ease); padding: var(--s-4) var(--s-8); border: 1px solid var(--line-2); border-radius: var(--r-6); background: var(--surface); color: var(--ink-2); font-size: var(--t-12); white-space: nowrap; }

/* Platforms: six, in three columns, two or one as the page narrows; six divides each, so no cell is empty. */
.platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 0; list-style: none; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-12); background: var(--line); }
.platforms li { display: grid; align-content: start; gap: var(--s-8); padding: var(--s-24); background: var(--surface); }
.platforms b { font-size: var(--t-17); line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; }
.platforms span { color: var(--ink-2); font-size: var(--t-14); line-height: 1.55; }
.platforms code { color: var(--ink); overflow-wrap: anywhere; }

/* Install: the one dark band, the words on the left and the three commands on the right. */
.install-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-64); padding: var(--s-64); border-radius: var(--r-16); background: var(--band); color: var(--on-band); }
.install-say { display: grid; align-content: start; gap: var(--s-16); }
.install .kicker { color: var(--on-band-2); }
.install-say p:not(.kicker) { color: var(--on-band-2); font-size: var(--t-16); line-height: 1.6; }
.install-say .small { font-size: var(--t-14); line-height: 1.55; }
.cmds { display: grid; gap: var(--s-24); padding: 0; list-style: none; }
/* The commands sit at their own height, centred against the words beside them. */
.cmds { align-self: center; align-content: start; }
.cmds li { display: grid; align-content: start; gap: var(--s-8); min-width: 0; }
.cmds li > span { color: var(--on-band-2); font: 500 var(--t-13)/1.4 var(--sans); }
.cmds .get { display: flex; justify-content: space-between; border-color: var(--on-band-line); background: color-mix(in srgb, var(--band), #fff 5%); box-shadow: none; }
.cmds .get code { color: var(--on-band); font-size: var(--t-14); }
.cmds .get code::before { color: var(--on-band-2); }
.cmds .copy { background: var(--on-band); color: var(--band); }
.cmds .ask code { font-family: var(--sans); font-size: var(--t-15); }

/* Questions and the close. */
/* Questions sit beside their heading, so an open answer has the page and never a strip with empty space beside it. */
.sec:has(> .faq) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-32) var(--s-64); align-items: start; }
.faq { display: grid; border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-24); padding: var(--s-24) 0; font-size: var(--t-17); line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--muted); font-weight: 400; font-size: var(--t-20); line-height: 1; transition: transform 200ms var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height 280ms var(--ease), content-visibility 280ms allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}
.faq details p { padding: 0 0 var(--s-24); color: var(--ink-2); line-height: 1.65; }
.close { display: grid; justify-items: center; gap: var(--s-16); max-width: var(--frame); margin: 0 auto; padding: var(--s-128) var(--gutter-end) var(--s-128) var(--gutter); text-align: center; }
.close p { max-width: 30rem; color: var(--ink-2); font-size: var(--t-17); line-height: 1.6; }
.close .btn { margin-top: var(--s-8); }
.nf-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-16) var(--s-24); margin-top: var(--s-8); }
.nf-links .more { margin-top: 0; }
.close .nf { font-size: var(--text-page); line-height: 1.1; font-weight: 600; letter-spacing: -0.035em; }

/* The foot: an engraved scene of the trade the page is about, then the mark, who makes it and who checks it, and the
   links. The scene's paper is the light page colour (tools/tint.mjs), so in light mode it has no edge and in dark mode
   it is a printed band. */
.foot { border-top: 1px solid var(--line); }
.scene { margin: 0; background: #f6f8f7; }
.scene img { display: block; width: 100%; max-width: 1916px; height: auto; margin: 0 auto; }
.foot:has(.scene) { border-top: 0; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-16) var(--s-32); max-width: var(--frame); margin: 0 auto; padding: var(--s-32) var(--gutter-end) var(--s-48) var(--gutter); }
.foot p { color: var(--muted); font-size: var(--t-14); }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-24); }
.foot nav a, .foot p a { color: var(--muted); font-size: var(--t-14); white-space: nowrap; }
.foot nav a { text-decoration: none; }
.foot nav a:hover, .foot p a:hover { color: var(--ink); }

/* Universal Cart, on the home page: the one dark band, saying what the cart is and how it reaches a shop's pages. */
.cart-in { display: grid; gap: var(--s-48); padding: var(--s-64); border-radius: var(--r-16); }
.cart-say { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-24) var(--s-64); align-items: end; }
.cart-say .kicker { grid-column: 1 / -1; color: var(--on-deep-2); }
.cart-say p:not(.kicker) { color: var(--on-deep-2); font-size: var(--t-17); line-height: 1.6; }
.cart-more { display: grid; justify-items: start; gap: var(--s-16); }
.cart .more, .uc .more { margin-top: 0; }
.cart .more { color: var(--on-deep); }
.install .more { margin-top: var(--s-8); color: var(--on-band); }
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); padding: 0; list-style: none; counter-reset: flow; }
.flow li { display: grid; align-content: start; gap: var(--s-8); padding: var(--s-24); background: rgb(0 0 0 / 0.24); counter-increment: flow; }
.flow li:first-child { border-radius: var(--r-12) 0 0 var(--r-12); }
.flow li:last-child { border-radius: 0 var(--r-12) var(--r-12) 0; }
.flow li::before { content: counter(flow); color: var(--cell-1); font: 500 var(--t-13)/1 var(--mono); }
.flow b { font-size: var(--t-17); line-height: 1.35; font-weight: 600; }
.flow span { color: var(--on-deep-2); font-size: var(--t-14); line-height: 1.55; }
.feeds { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: var(--s-8) var(--s-24); padding-top: var(--s-24); border-top: 1px solid var(--on-deep-line); }
.feeds b { font-weight: 600; }
.feeds span { color: var(--on-deep-2); font-size: var(--t-15); }
.source-line { color: var(--on-deep-2); font-size: var(--t-13); }
.source-line a, .feeds a, .cart-more a:not(.more) { color: var(--on-deep); }

/* The Universal Cart page. */
.uc-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: end; gap: var(--s-24) var(--s-64); max-width: var(--frame); margin: 0 auto; padding: var(--s-96) var(--gutter-end) var(--s-64) var(--gutter); }
.uc-hero h1 { font-size: var(--text-display); line-height: 0.98; font-weight: 600; letter-spacing: -0.05em; }
/* The question takes the full width so it sets in three lines; the answer sits under its second half. */
.uc-hero .kicker, .uc-hero .facts, .uc-hero h1 { grid-column: 1 / -1; }
.uc-hero h1 { max-width: 19ch; }
.uc-hero .lede { grid-column: 2; }
.uc-hero .lede { font-size: var(--t-17); line-height: 1.65; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-32); margin: var(--s-24) 0 0; padding: var(--s-24) 0 0; border-top: 1px solid var(--line-2); }
.facts div { display: grid; align-content: start; gap: var(--s-4); }
.facts dt { color: var(--muted); font-size: var(--t-13); }
.facts dd { margin: 0; font-size: var(--t-17); line-height: 1.4; font-weight: 600; letter-spacing: -0.01em; }
.uc .cart-in { gap: var(--s-32); }
.timeline { display: grid; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.timeline li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr) auto; align-items: baseline; gap: var(--s-16); padding: var(--s-24) 0; border-bottom: 1px solid var(--line); }
.timeline time, .timeline .when { color: var(--muted); font: 500 var(--t-14)/1.4 var(--sans); font-variant-numeric: tabular-nums; }
.timeline b { font-size: var(--t-17); font-weight: 600; letter-spacing: -0.01em; }
.timeline span { color: var(--ink-2); font-size: var(--t-15); }
.timeline .state { justify-self: end; padding: var(--s-2) var(--s-8); border-radius: var(--r-pill); background: var(--well); color: var(--muted); font: 500 var(--t-12)/1.5 var(--sans); white-space: nowrap; }
.timeline .state.live { background: var(--ready-bg); color: var(--ready); }
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-24); }
.path { display: grid; align-content: start; gap: var(--s-16); padding: var(--s-32); border: 1px solid var(--line); border-radius: var(--r-16); background: var(--surface); }
.path h3 { font-size: var(--t-24); line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; }
.path .rests { color: var(--muted); font-size: var(--t-14); }
.path ol { display: grid; gap: var(--s-12); padding: 0; list-style: none; counter-reset: path; }
.path li { display: grid; grid-template-columns: var(--s-24) minmax(0, 1fr); gap: var(--s-12); counter-increment: path; font-size: var(--t-15); line-height: 1.55; color: var(--ink-2); }
.path li::before { content: counter(path); display: grid; place-items: center; width: var(--s-24); height: var(--s-24); border-radius: 50%; background: var(--well); color: var(--ink); font: 600 var(--t-12)/1 var(--sans); }
.path li b { color: var(--ink); font-weight: 600; }
.path .after { padding-top: var(--s-16); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-14); }
.unsaid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-16); align-items: start; padding: var(--s-24); border: 1px dashed var(--line-2); border-radius: var(--r-12); }
.unsaid .pill { margin-top: var(--s-2); }
.unsaid p { color: var(--ink-2); font-size: var(--t-16); line-height: 1.6; }
.sources { display: grid; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.sources li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4) var(--s-24); padding: var(--s-16) 0; border-bottom: 1px solid var(--line); }
.sources a { font-weight: 500; }
.sources span { color: var(--muted); font-size: var(--t-14); }
.sources span { grid-column: 1 / -1; }
.sources time { color: var(--muted); font-size: var(--t-14); white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 1040px) {
  .steps li { grid-template-columns: var(--s-48) minmax(0, 1fr) auto; }
  .steps li > span:not(.n) { grid-column: 2 / -1; grid-row: 2; }
}
@media (max-width: 920px) {
  .hero-in, .install-in, .answer, .sec:has(> .faq), .cart-say, .paths, .uc-hero { grid-template-columns: minmax(0, 1fr); }
  .uc-hero .lede { grid-column: 1; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow li:first-child { border-radius: var(--r-12) 0 0 0; } .flow li:nth-child(2) { border-radius: 0 var(--r-12) 0 0; } .flow li:nth-child(3) { border-radius: 0 0 0 var(--r-12); } .flow li:last-child { border-radius: 0 0 var(--r-12) 0; }
  .cart-in { padding: var(--s-48) var(--s-32); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline li { grid-template-columns: minmax(0, 1fr) auto; }
  .timeline li > b, .timeline li > span:not(.state) { grid-column: 1 / -1; }
  .timeline .state { grid-column: 2; grid-row: 1; }
  .hero-in { gap: var(--s-48); padding-block: var(--s-64); }
  .receipt { max-width: 34rem; }
  .figures ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .install-in { gap: var(--s-32); padding: var(--s-48) var(--s-32); }
  .bar nav { display: none; }
  .bar .btn { margin-left: auto; }
}
@media (max-width: 600px) {
  .hero-in { padding-block: var(--s-48) var(--s-64); }
  .sec { padding-top: var(--s-96); }
  .receipt { padding: var(--s-16); }
  .receipt-url { padding-inline: var(--s-8); font-size: var(--t-12); }
  .lines li { grid-template-columns: minmax(0, 1fr) 4.75rem; row-gap: var(--s-2); }
  .lines b { grid-column: 1; grid-row: 2; }
  .lines i { grid-row: 1 / span 2; align-self: center; }
  .totals { grid-template-columns: minmax(0, 1fr); gap: var(--s-12); }
  .figures ul { gap: var(--s-24) var(--s-16); }
  .platforms { grid-template-columns: minmax(0, 1fr); }
  .steps li { grid-template-columns: var(--s-32) minmax(0, 1fr); gap: var(--s-4) var(--s-12); }
  .steps code { grid-column: 2; justify-self: start; margin-top: var(--s-4); }
  /* On a phone each field is one entry: its name and Google's listing on a line, what it tells an agent beneath. */
  .table table, .table tbody, .table tr { display: block; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4) var(--s-12); padding: var(--s-12) var(--s-16); border-bottom: 1px solid var(--line); }
  .table tbody tr:last-child { border-bottom: 0; }
  .table td { padding: 0; border: 0; }
  .table td:first-child { white-space: normal; }
  .table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; color: var(--ink-2); }
  .table td:last-child { grid-column: 2; grid-row: 1; font-size: var(--t-13); }
  .get { width: 100%; }
  .hero .get { padding-left: var(--s-12); }
  .hero .get code { font-size: var(--t-13); }
  .hero .get code::before { content: none; }
  .cmds .get { flex-wrap: wrap; padding: var(--s-12); row-gap: var(--s-8); }
  .install, .cart { padding-left: 0; padding-right: 0; }
  .cart-in { border-radius: 0; padding: var(--s-48) var(--gutter-end) var(--s-48) var(--gutter); }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow li, .flow li:first-child, .flow li:nth-child(2), .flow li:nth-child(3), .flow li:last-child { border-radius: 0; }
  .flow li:first-child { border-radius: var(--r-12) var(--r-12) 0 0; } .flow li:last-child { border-radius: 0 0 var(--r-12) var(--r-12); }
  .feeds { grid-template-columns: minmax(0, 1fr); }
  .path { padding: var(--s-24); }
  .unsaid { grid-template-columns: minmax(0, 1fr); }
  .sources li { grid-template-columns: minmax(0, 1fr); }
  .uc-hero { padding-block: var(--s-48) var(--s-32); }
  /* On a phone the scene is cropped to a taller frame round its middle, so the people in it stay readable. */
  .scene img { height: 18rem; object-fit: cover; object-position: 42% 60%; }
  .install-in { border-radius: 0; padding: var(--s-48) var(--gutter-end) var(--s-48) var(--gutter); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }