/* ═══════════════════════════════════════════════════════════════════════
   YOURSHOPDESK.COM

   The pictures on this site are dark application screens. So the page is
   warm paper and the ONLY dark objects on it are the screenshots and two
   deliberate bands. That is the whole design decision. Everything else
   serves it: if the page were also dark, the product would stop reading as
   the product and start reading as more page.

   The furniture is borrowed from an engineering drawing rather than from a
   SaaS landing page. Hairline rules, mono labels, numbered figures, a spec
   rail down the left of each section. The site is about how systems are put
   together, so it is dressed as a drawing of one.

   No framework, no reset library, no JavaScript.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Paper, in three weights. Nothing here is pure white: a screenshot with
     a white chrome sits ON the page, and pure white would fuse the two. */
  --paper: #f7f4ef;
  --paper-2: #fffefb;
  --paper-3: #efe9df;

  /* Ink. --ink-3 is the lightest that still passes AA on --paper at body
     size. Do not lighten it to make something look calmer. */
  --ink: #15120e;
  --ink-2: #4b453c;
  --ink-3: #6e6559;

  --rule: #ded5c7;
  --rule-2: #cbc0ae;

  /* One accent. --flame is for surfaces and marks, --flame-ink for anything
     that is read as text, because the bright one does not pass on paper. */
  --flame: #c03d0a;
  --flame-ink: #8f2d06;
  --flame-soft: #fbeade;

  --blue: #1d4e8f;
  --blue-soft: #e6eef8;
  --green: #166b45;
  --green-soft: #e4f1ea;

  --dark: #14120f;
  --dark-2: #1f1b16;

  --wrap: 1160px;
  --narrow: 730px;

  --s1: .35rem;
  --s2: .7rem;
  --s3: 1.1rem;
  --s4: 1.7rem;
  --s5: 2.6rem;
  --s6: 4rem;
  --s7: 6rem;

  --radius: 3px;

  --head: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  /* House baseline. Body type starts here and is not quietly designed down. */
  font-size: 1.15rem;
  line-height: 1.7;
  font-synthesis-weight: none;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }          /* the UA default 40px side margin insets every shot */
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s5) 0; }

a { color: var(--flame-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--flame); }

h1, h2, h3, h4 {
  font-family: var(--head);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--s3);
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

/* ── The wrap. Every band gets one. A strip with no wrap runs to the edge of
      a 1920 screen while everything else stops, and nothing lines up. ───── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.2rem); }
.wrap--narrow { max-width: var(--narrow); }

.band { padding-block: clamp(3.2rem, 7vw, var(--s7)); }
.band--tint { background: var(--paper-3); }
.band--line { border-top: 1px solid var(--rule); }

/* A dark band REBINDS the ink ramp rather than recolouring selectors. A
   component added later inherits the fix instead of reintroducing the bug. */
.band--dark {
  background: var(--dark);
  --ink: #f4f1ea;
  --ink-2: #c3bcae;
  --ink-3: #958d7f;
  --paper: var(--dark);
  --paper-2: #24201a;
  --paper-3: #1b1813;
  --rule: #332e26;
  --rule-2: #464035;
  --flame-ink: #ff8a4c;
  --flame-soft: #2b1a10;
  --blue-soft: #16243a;
  --green-soft: #12281d;
  color: var(--ink);
}
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 { color: var(--ink); }

/* ── Mono furniture. The drawing-office voice. ───────────────────────────── */
.kicker {
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--flame-ink);
  margin: 0 0 var(--s2);
  display: block;
}
.kicker--quiet { color: var(--ink-3); }

.rule-label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.lede { font-size: clamp(1.2rem, 2.1vw, 1.42rem); line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.note { font-size: .96rem; color: var(--ink-3); }

/* ── The spec rail. Section kicker in a left column, content on the right,
      hairline between. Stacks to one column below 900. ──────────────────── */
.rail { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3.4rem); align-items: start; }
.rail > .rail-head { border-top: 2px solid var(--ink); padding-top: var(--s2); position: sticky; top: var(--s4); }
.rail > .rail-head .n { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; color: var(--ink-3); display: block; margin-top: var(--s1); }
@media (max-width: 900px) {
  /* minmax(0, 1fr), NOT 1fr. A bare 1fr is minmax(auto, 1fr), so the track
     is never allowed narrower than its widest unbreakable child, and the
     code block on the home page made the whole document 731px wide inside
     a 375px phone. The block scrolls sideways by itself. The page must
     not. */
  .rail { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .rail > .rail-head { position: static; }
}
.rail > * { min-width: 0; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: .7rem 1.1rem; z-index: 100;
  font-family: var(--head); font-weight: 600;
}
.skip:focus { left: .6rem; top: .6rem; }

.site-head { border-bottom: 1px solid var(--rule); background: var(--paper); position: sticky; top: 0; z-index: 50; }
.site-head .wrap { display: flex; align-items: center; gap: var(--s4); min-height: 68px; }
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--head); font-weight: 700; font-size: 1.06rem; letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.brand svg { width: 26px; height: 26px; flex: none; }
.brand span { color: var(--ink-3); font-weight: 500; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.7rem); }
.site-nav a { font-family: var(--head); font-size: .95rem; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--flame-ink); }
@media (max-width: 720px) {
  .site-head .wrap { flex-wrap: wrap; min-height: 0; padding-block: .7rem; gap: .5rem var(--s3); }
  .site-nav { margin-left: 0; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .site-nav a { white-space: nowrap; font-size: .9rem; }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--head); font-size: 1rem; font-weight: 600;
  padding: .78rem 1.3rem; border-radius: var(--radius);
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  text-decoration: none; cursor: pointer; line-height: 1.2;
}
.btn:hover { background: var(--flame); border-color: var(--flame); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { position: relative; padding-block: clamp(2.8rem, 7vw, 5.4rem) clamp(2.4rem, 5vw, 3.6rem); overflow: hidden; }
/* A drawing grid, faint enough that you notice it only if you look. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 8%, transparent 72%);
  opacity: .5;
}
.hero .wrap { position: relative; z-index: 1; }
.hero h1 { max-width: 17ch; }
.hero .lede { margin-top: var(--s3); }

/* ── Figures. Every screenshot is a numbered figure with a mono caption. ─── */
.fig { margin-block: var(--s4); }
.fig-frame {
  border: 1px solid var(--rule-2);
  background: var(--paper-2);
  padding: 7px;
  border-radius: var(--radius);
  box-shadow: 0 1px 0 var(--rule), 0 14px 30px -20px rgba(20,18,15,.5);
}
.fig-frame img { border-radius: 1px; width: 100%; }
.fig figcaption {
  display: flex; gap: var(--s2); align-items: baseline; flex-wrap: wrap;
  margin-top: var(--s2); padding-top: var(--s2);
  border-top: 1px solid var(--rule);
  font-size: .95rem; color: var(--ink-2);
}
.fig figcaption b { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--flame-ink); font-weight: 500; flex: none; }

/* On a phone the figure swaps to the PHONE capture of the same screen, which
   is tall and narrow. Full bleed it would be a metre of scrolling, so the
   frame narrows and centres and the picture reads as what it is: the product,
   on a phone. Matches the breakpoint in the <picture> source exactly. */
@media (max-width: 640px) {
  .fig--dual .fig-frame { max-width: 320px; margin-inline: auto; }
  .fig--dual figcaption { max-width: 320px; margin-inline: auto; }
}

/* Four brands, one system. The strip that makes the whole argument at a
   glance.

   TWO columns, not four. Two of these desks are LIGHT themed, because that
   is the brand their owner has, and at a quarter of the page width a light
   screenshot reads as an empty box rather than as software. Half width is
   the smallest size at which all four are legibly a screen. */
.brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); margin-top: var(--s5); }
.brands figure { min-width: 0; margin: 0; }
.brands .fig-frame { padding: 5px; }
.brands figcaption { margin-top: .55rem; padding-top: .55rem; font-size: .92rem; display: block; }
.brands figcaption b { display: block; margin-bottom: 2px; }
@media (max-width: 560px) {
  .brands { grid-template-columns: 1fr; }
  /* Four full length phone captures stacked is most of a minute of scrolling
     before the visitor has read a sentence. Show the top of each one. A
     cropped screenshot is still a screenshot, and the point of this strip is
     recognition, not reading. */
  .brands .fig-frame img { max-height: 340px; object-fit: cover; object-position: top; }
}

/* ── Numbers ─────────────────────────────────────────────────────────────── */
.counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.counts div { border-top: 2px solid var(--ink); padding-top: var(--s2); }
.counts .n { font-family: var(--head); font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; display: block; }
.counts p { font-size: .98rem; color: var(--ink-2); margin: var(--s2) 0 0; line-height: 1.45; }
@media (max-width: 800px) { .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Cards, lists, code ──────────────────────────────────────────────────── */
.cards { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.card { border: 1px solid var(--rule); background: var(--paper-2); border-radius: var(--radius); padding: var(--s4); }
.card .n { font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; color: var(--flame-ink); display: block; margin-bottom: var(--s2); }
.card h3 { margin-bottom: var(--s2); }
.card p { font-size: 1.04rem; color: var(--ink-2); }

pre.code {
  font-family: var(--mono); font-size: .88rem; line-height: 1.75;
  background: var(--dark); color: #f1ece2;
  border-radius: var(--radius); padding: var(--s3) var(--s4);
  overflow-x: auto; margin: 0;
  -webkit-text-size-adjust: 100%;
}
pre.code .c { color: #8e8574; }
pre.code .k { color: #ff9a63; }
.code-cap { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: var(--s2); }

/* ── The line. A numbered rail with a hairline running down it. ──────────── */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { position: relative; padding: 0 0 var(--s4) clamp(2.6rem, 5vw, 3.4rem); counter-increment: step; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: .1rem;
  font-family: var(--mono); font-size: .8rem; font-weight: 500; color: var(--flame-ink);
  background: var(--paper); padding-bottom: .3rem;
}
.steps li::after {
  content: ""; position: absolute; left: 11px; top: 1.5rem; bottom: 0; width: 1px; background: var(--rule-2);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps h3 { font-size: 1.16rem; margin-bottom: .2rem; }
.steps p { color: var(--ink-2); font-size: 1.04rem; }

/* ── Flow. How a request moves, as boxes with arrows between them. ───────── */
.flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s3); margin: var(--s4) 0 var(--s3); list-style: none; padding: 0; }
.flow li { position: relative; border: 1px solid var(--rule-2); background: var(--paper-2); border-radius: var(--radius); padding: var(--s3); }
.flow li h4 { font-family: var(--head); font-size: 1rem; margin: 0 0 .3rem; }
.flow li p { font-size: .94rem; line-height: 1.5; color: var(--ink-2); margin: 0; }
.flow li .step-n { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; color: var(--flame-ink); display: block; margin-bottom: .35rem; }
/* The arrow sits between boxes. It is decorative, so it is hidden from a
   screen reader and it disappears the moment the grid wraps to one column. */
.flow li + li::before {
  content: "\203A"; position: absolute; left: calc(var(--s3) * -0.5 - 6px); top: 50%;
  transform: translateY(-50%); color: var(--rule-2); font-size: 1.5rem; line-height: 1;
}
@media (max-width: 640px) { .flow li + li::before { content: none; } }

/* ── Stacks ──────────────────────────────────────────────────────────────── */
.stack { border-top: 2px solid var(--ink); padding-top: var(--s4); margin-top: var(--s6); }
.stack:first-of-type { margin-top: var(--s4); }
.stack-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.stack-head h2 { margin-bottom: 0; }
.stack-head .tag { font-family: var(--mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--flame-ink); }
.stack-sub { font-family: var(--head); font-size: 1.1rem; color: var(--ink-3); font-weight: 500; }
.stack-for { border-left: 3px solid var(--flame); padding-left: var(--s3); margin: var(--s3) 0 var(--s4); color: var(--ink-2); max-width: 60ch; }

.parts { width: 100%; border-collapse: collapse; margin: var(--s3) 0; font-size: 1rem; }
.parts th, .parts td { text-align: left; vertical-align: top; padding: .72rem var(--s3) .72rem 0; border-bottom: 1px solid var(--rule); }
.parts th { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; width: 16%; white-space: nowrap; }
.parts td:first-of-type { font-family: var(--head); font-weight: 600; width: 26%; }
.parts td:last-child { color: var(--ink-2); font-size: .98rem; }
.table-wrap { overflow-x: auto; }
@media (max-width: 720px) {
  .parts, .parts tbody, .parts tr, .parts th, .parts td { display: block; width: auto; }
  .parts tr { border-bottom: 1px solid var(--rule); padding-bottom: .7rem; margin-bottom: .7rem; }
  .parts th, .parts td { border: 0; padding: 0 0 .2rem; }
  .parts td:first-of-type { width: auto; }
}

.twoup { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s4); margin-top: var(--s4); }
.ticks, .crosses { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.ticks li, .crosses li { position: relative; padding-left: 1.7rem; margin-bottom: .6rem; font-size: 1.02rem; color: var(--ink-2); line-height: 1.55; }
.ticks li::before { content: "+"; position: absolute; left: 0; top: 0; color: var(--green); font-family: var(--mono); font-weight: 700; }
.crosses li::before { content: "\2212"; position: absolute; left: 0; top: 0; color: var(--flame); font-family: var(--mono); font-weight: 700; }
.cost { font-family: var(--mono); font-size: .92rem; background: var(--flame-soft); border: 1px solid var(--rule-2); border-radius: var(--radius); padding: .6rem var(--s3); display: inline-block; color: var(--ink); }

/* ── Work entries ────────────────────────────────────────────────────────── */
.entry { border-top: 2px solid var(--ink); padding-top: var(--s4); margin-top: var(--s6); }
.entry:first-of-type { margin-top: var(--s4); }
.entry-meta { display: flex; flex-wrap: wrap; gap: .4rem var(--s3); margin-bottom: var(--s3); }
.entry-meta span { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.entry-meta span b { color: var(--ink-2); font-weight: 500; }
.pull { font-family: var(--head); font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 600; line-height: 1.3; color: var(--flame-ink); border-left: 3px solid var(--flame); padding-left: var(--s3); margin: var(--s4) 0 0; text-wrap: balance; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { font-family: var(--head); font-weight: 600; font-size: 1.14rem; padding: var(--s3) 2.2rem var(--s3) 0; cursor: pointer; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); font-family: var(--mono); color: var(--flame-ink); font-size: 1.2rem; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 var(--s4); color: var(--ink-2); max-width: 66ch; }

/* ── Form ────────────────────────────────────────────────────────────────── */
.form { display: grid; gap: var(--s3); max-width: 620px; margin-top: var(--s4); }
.field label { display: block; font-family: var(--head); font-weight: 600; font-size: .96rem; margin-bottom: .32rem; }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--body); font-size: 1.05rem;
  padding: .7rem .85rem; border: 1px solid var(--rule-2); border-radius: var(--radius);
  background: var(--paper-2); color: var(--ink);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--flame); outline-offset: 1px; border-color: var(--flame); }
.field textarea { min-height: 150px; resize: vertical; }
.field .hint { font-size: .9rem; color: var(--ink-3); margin-top: .25rem; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--rule); background: var(--paper-3); padding-block: var(--s5); font-size: .98rem; }
.site-foot .cols { display: grid; grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 760px) { .site-foot .cols { grid-template-columns: 1fr 1fr; } .site-foot .cols > :first-child { grid-column: 1 / -1; } }
.site-foot h4 { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: var(--s2); }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .45rem; }
.site-foot a { color: var(--ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--flame-ink); text-decoration: underline; }
.site-foot .fine { border-top: 1px solid var(--rule-2); margin-top: var(--s5); padding-top: var(--s3); color: var(--ink-3); font-size: .92rem; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }

/* ── Print. Somebody will print the stacks page and take it to a meeting. ── */
/* ── Above the fold ────────────────────────────────────────────────────────
   Two columns on a wide screen, words then picture on a narrow one. The
   picture is a real screen of the software rather than an illustration of
   it, so it earns the space it takes.                                      */
.hero--split { padding-block: clamp(2.2rem, 5vw, 4.4rem) clamp(3rem, 6vw, 5rem); }
.hero-grid { display: grid; gap: clamp(2.4rem, 5vw, 3.8rem); align-items: center; }
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); }
}
.hero-copy h1 { max-width: 17ch; margin-top: var(--s2); }
.hero-copy .lede { max-width: 46ch; }

/* The three counts. Same numbers as the proof band, written short, on the
   same hairline rule the rest of the page uses for a measured thing. */
.hero-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3); margin-top: var(--s5);
}
.hero-stats div { border-top: 2px solid var(--ink); padding-top: var(--s2); }
.hero-stats .n {
  font-family: var(--head); font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1; display: block;
}
.hero-stats .t {
  display: block; margin-top: .4rem; font-size: .9rem; line-height: 1.4;
  color: var(--ink-2);
}
@media (max-width: 420px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats div:last-child { grid-column: 1 / -1; }
}

/* The plate is dark on purpose. Both of these screenshots are a LIGHT app
   on light paper, and against the page background they read as a hole
   rather than as a screen. */
.hero-art { position: relative; }
.hero-plate {
  background: var(--dark); border-radius: 6px;
  padding: clamp(.45rem, 1.1vw, .8rem);
  box-shadow: 0 34px 70px -34px rgba(21, 18, 14, .5);
}
.hero-plate img { display: block; width: 100%; border-radius: 3px; }

/* The phone lies over the corner, because the claim of the whole page is
   that the desk and the phone are ONE system rather than two products. It
   is hidden under 1000px, where the plate is already showing the phone
   capture and a second phone would be the same picture twice. */
.hero-phone {
  position: absolute; left: -14px; bottom: -26px; width: 28%; min-width: 128px;
  background: var(--dark); border: 6px solid var(--dark); border-radius: 20px;
  box-shadow: 0 26px 46px -24px rgba(21, 18, 14, .6);
}
.hero-phone img { display: block; width: 100%; border-radius: 14px; }
@media (max-width: 999px) {
  .hero-phone { display: none; }
  /* Stacked, the plate is serving the PHONE capture, which is a 390px wide
     screen. Left to fill a 960px tablet column it renders two and a half
     times life size and the search box alone is the height of a headline.
     Cap it at about the width of the phone it was taken on. */
  .hero-plate { max-width: 380px; }
}

.hero-art-cap {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
  margin: var(--s3) 0 0; text-align: right;
}
/* The phone hangs off the bottom left corner, so the caption starts to the
   right of it. Without this the first two words sit behind a screenshot. */
@media (min-width: 1000px) { .hero-art-cap { padding-left: 32%; } }
@media (max-width: 999px) { .hero-art-cap { text-align: left; } }
.band--tint .hero-art-cap { text-align: left; }

/* ── The contents ──────────────────────────────────────────────────────────
   The page is long on purpose, so it opens with a way past the parts a
   reader did not come for.                                                 */
.toc-h { font-size: clamp(1.5rem, 3vw, 2rem); }
.toc { margin-top: var(--s4); border-top: 2px solid var(--ink); }
.toc-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.4rem, 4vw, 3.4rem);
}
.toc-list li { border-bottom: 1px solid var(--rule-2); }
.toc-list a {
  display: flex; gap: var(--s3); align-items: baseline;
  padding: .78rem 0; text-decoration: none; color: var(--ink);
  font-family: var(--head); font-weight: 500;
}
.toc-list a:hover { color: var(--flame-ink); }
.toc-list .n {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  color: var(--ink-3); flex: none;
}
@media (max-width: 720px) { .toc-list { grid-template-columns: 1fr; } }

/* ── A screen section ──────────────────────────────────────────────────────
   Picture beside the words on a wide screen, above them on a narrow one,
   and the side alternates so six of these in a row do not march down the
   page in one column.                                                      */
.screen-grid { display: grid; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center; }
@media (min-width: 900px) {
  .screen-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
  /* The picture keeps the WIDER column whichever side it is on. Reordering
     alone put it in the narrow one on every left sided section, so half the
     screenshots came out smaller than the other half for no reason a reader
     could see. */
  .screen--left { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
  .screen--left .screen-art { order: -1; }
}
.screen-copy h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.screen-art .fig { margin: 0; }
.screen-art .fig-frame { background: var(--dark); padding: 6px; border-color: var(--dark); }

/* ── The button at every step ──────────────────────────────────────────────
   There are sixteen of these on the home page. They sit under a hairline so
   that a section visibly ENDS on one rather than trailing off.             */
.step-cta {
  margin: var(--s5) 0 0; padding-top: var(--s3);
  border-top: 1px solid var(--rule);
}
.btn--step { font-size: .92rem; padding: .62rem 1.05rem; }
.btn--step::after { content: " \2192"; }
.band--dark .btn--step { border-color: var(--rule-2); color: var(--ink); background: transparent; }
.band--dark .btn--step:hover { background: var(--flame); border-color: var(--flame); color: #fff; }

/* The one button on the page that is the point of the page. */
.btn--go { background: var(--flame); border-color: var(--flame); color: #fff; }
.btn--go:hover { background: var(--flame-ink); border-color: var(--flame-ink); }

/* Four cards in an auto-fit grid lay out three and one, and the orphan on
   the second row reads as a mistake. Two by two is the shape four things
   actually are. */
.cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .cards--two { grid-template-columns: 1fr; } }

.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--flame-ink); }
.card-cost { margin-top: .7rem; }

@media print {
  .site-head, .site-foot, .btn-row, .skip { display: none; }
  body { background: #fff; font-size: 11pt; }
  .band { padding-block: 1rem; }
  .band--dark { background: #fff; color: #000; }
  .fig-frame { box-shadow: none; }
}