/* yield theorem · main page (the Broadsheet direction). Ink on newsprint: Newsreader for display, Inter
   for the working text. The scene runs full-bleed behind everything; an oversized headline sits across
   the bottom-left and multiplies with the dots, and an agent feed of frosted notifications sits top right.
   Structure shared with the style directions lives in styles/base.css. */

:root {
  --ground: #f1ede4;
  --paper: #f8f6f0;
  --ink: #16140f;
  --ink-soft: #2c2a24;
  --muted: #55514a;
  --faint: #8a8579;
  --hair: #cfc8b8;
  --mark-bg: var(--ink);
  --mark-dot: var(--ground);
  --nav-h: 58px;
  --px: 28px;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Helvetica, sans-serif;
  --ease: 140ms ease;
  color-scheme: light;
}

/* No sideways scrolling, so copy and rings flung past the edge by the explosion never widen the page. On
   the root it applies to the viewport, which stays the scroller, so the sticky masthead still works. */
html { overflow-x: clip; }
body { background: var(--ground); color: var(--muted); font: 400 15px/1.6 var(--sans); }
a { transition: color var(--ease); }
a:hover { color: var(--ink); }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }

/* ---- controls ---- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; border: 1px solid transparent; border-radius: 999px;
  font: 500 13px/1.2 var(--sans); cursor: pointer; transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.btn-sm { padding: 6px 13px; font-size: 12px; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #2e2a22; color: var(--paper); }
.btn-ghost { background: none; color: var(--ink); border-color: var(--ink); }
.btn-block { width: 100%; border-radius: 6px; }

/* ---- masthead ---- */

.nav {
  position: sticky; top: 0; z-index: 10; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--px);
  background: var(--ground);
  border-bottom: 4px double var(--ink);
}
.lockup { color: var(--ink); font: 500 15px/1 var(--sans); letter-spacing: -0.3px; }

/* ---- hero ---- */

.hero {
  min-height: calc(100svh - var(--nav-h));
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--ground);
  border-bottom: 1px solid var(--ink);
}

/* Full-bleed scene; the dots thin toward the bottom, where the headline sits. */
.scene {
  position: absolute; inset: 0;
  --fade-top: 0.14; --fade-bottom: 0.42; --focus-x: 0.5; --focus-y: 0.3;
  display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 18px var(--px);
}
.tag-button {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px;
  border: 1px solid var(--ink); border-radius: 999px; background: var(--ground);
  font: 500 11px/1.4 var(--sans); color: var(--ink);
}
.tag-button .icon { width: 12px; height: 12px; }

/* No z-index here: a stacking context would stop the headline multiplying with the canvas. Being
   positioned and later in the DOM already puts it above the scene. */
/* The hero's foot: the headline bottom left and the stack band beside it in the bottom-right corner, their
   bottoms aligned. One wrapping row, so on narrow screens the band drops to its own line, still pinned
   right. The deck sits under the hero (.intro). */
.hero-copy {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 48px; row-gap: 22px;
  padding: 0 var(--px) 40px;
}

/* 12em keeps the headline on the same two lines at every desktop size. */
.hero h1 {
  max-width: 12em;
  font: 500 clamp(39px, 4.95vw, 81px)/0.9 var(--serif);
  font-optical-sizing: auto; letter-spacing: -0.035em;
  color: var(--ink);
  mix-blend-mode: multiply;
}
.hero h1 em { font-style: italic; font-weight: 400; }

/* The deck: the guarantee in three newspaper columns, in its own band under the hero. */
.intro { margin: 0 var(--px); padding: 30px 0 34px; border-bottom: 1px solid var(--ink); }
.deck {
  columns: 3; column-gap: 36px; column-rule: 1px solid var(--hair);
  font: 400 16px/1.5 var(--serif); color: var(--ink-soft);
}
.deck p { margin: 0 0 7px; break-inside: avoid; }
.deck em { font-style: italic; }
.deck-lead { font-weight: 600; color: var(--ink); }
.deck-promise { font-weight: 600; color: var(--ink); }
.deck-end { color: var(--ink); }
/* The founder's inner monologue, set as typed input. */
.deck-code {
  padding: 1px 5px; border-radius: 4px; background: rgba(22, 20, 15, 0.07);
  font: 500 0.82em/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink);
}
.deck-mark { font-size: 0.75em; line-height: 0; }
.deck-note { margin: 10px 0 0; padding-top: 6px; border-top: 1px solid var(--hair); font: italic 400 12.5px/1.4 var(--serif); color: var(--muted); }
@media (max-width: 1100px) { .deck { columns: 2; } }


/* ---- agent feed: frosted notifications, top right ---- */

.feed {
  position: absolute; top: 18px; right: var(--px); z-index: 2;
  width: min(320px, calc(100% - 2 * var(--px)));
}
.feed-list { list-style: none; margin: 0; padding: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }

.note {
  position: relative;
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 10px 12px 11px 10px;
  border-radius: 18px;
  /* Glass: a thin wash of paper over a blur of the dots, so the field shows through. */
  background: rgba(250, 248, 242, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 14px 34px -12px rgba(22, 20, 15, 0.24), 0 2px 6px rgba(22, 20, 15, 0.05);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  font-family: var(--sans); color: var(--ink);
}
/* Before the page has run its arrivals (js/feed.js), cards wait off the stack. */
.note.is-pending { display: none; }
/* Up to three on show, fewer when the space above the stack row is short: js/feed.js measures it and
   sets data-max (one on phones, where the feed sits in the flow). The last one shown (.is-last) carries
   the stacked edges of the older ones behind it, as iOS groups them. */
.note:nth-child(n + 4) { display: none; }
.feed[data-max="2"] .note:nth-child(n + 3), .feed[data-max="1"] .note:nth-child(n + 2) { display: none; }
.feed[data-max="0"] { display: none; }
/* While js/feed.js measures, every card is laid out (invisibly, within one frame). */
.feed.is-measuring { display: block !important; }
.feed.is-measuring .note { display: grid !important; visibility: hidden; }
.note.is-last::before, .note.is-last::after {
  content: ""; position: absolute; border: 1px solid rgba(255, 255, 255, 0.6); border-top: 0;
  background: rgba(250, 248, 242, 0.24); border-radius: 0 0 15px 15px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 8px 18px -10px rgba(22, 20, 15, 0.28);
}
.note.is-last::before { left: 10px; right: 10px; bottom: -8px; height: 8px; }
.note.is-last::after { left: 22px; right: 22px; bottom: -15px; height: 7px; opacity: 0.75; }

/* App-icon tiles carrying each tool's mark in its own colour. */
.note-icon {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; overflow: hidden;
  background: #fff; box-shadow: 0 0 0 1px rgba(22, 20, 15, 0.08), 0 1px 3px rgba(22, 20, 15, 0.12);
}
.note-icon svg { width: 17px; height: 17px; fill: currentColor; }
.note-icon-claude { background: #d97757; color: #fff; }
.note-icon-claude svg { width: 19px; height: 19px; }
.note-icon-linear { color: #222326; }
.note-icon-github { color: #181717; }
.note-icon-n8n { color: #ea4b71; }
.note-icon-n8n svg { width: 20px; height: 20px; }
.note-icon-image img { width: 27px; height: auto; display: block; }

.note-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.note-head { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; line-height: 1.4; color: #3d3a33; }
.note-app { font-weight: 500; }
.note-time { flex: none; }
.note-title { font-size: 12.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.1px; color: var(--ink); }
.note-text { font-size: 11.5px; line-height: 1.4; color: var(--ink); }
.note-attr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; margin-top: 5px; font-size: 10.5px; line-height: 1.4; color: #3d3a33; }
.note-attr span { padding: 1px 6px; border-radius: 999px; background: rgba(22, 20, 15, 0.1); font-weight: 600; color: var(--ink); }

.note-more { margin-top: 5px; font-size: 11px; }
.note-more summary {
  display: inline-flex; align-items: center; gap: 5px; list-style: none; cursor: pointer;
  font-weight: 600; color: var(--ink);
}
.note-more summary::-webkit-details-marker { display: none; }
.note-more summary::after { content: "↓"; font-weight: 400; transition: transform var(--ease); }
.note-more[open] summary::after { transform: rotate(180deg); }
.note-chips {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px; max-height: 150px; overflow: auto;
}
.note-chips li { padding: 2px 7px; border-radius: 999px; background: rgba(22, 20, 15, 0.07); font-size: 10px; line-height: 1.5; color: var(--ink); }

/* Without backdrop blur, a near-solid card keeps the text readable over the dots. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .note { background: rgba(250, 248, 242, 0.95); }
}

/* ---- "Don't press this" (js/explode.js) ---- */

/* The button looks nervous under the pointer. Only while the page's motion is on. */
@keyframes nervous {
  0%, 100% { transform: none; }
  25% { transform: translate(-1px, 0) rotate(-1.5deg); }
  75% { transform: translate(1px, 0) rotate(1.5deg); }
}
html[data-motion="on"] .btn[data-signup]:hover { animation: nervous 0.24s linear infinite; }

.blast-canvas { position: fixed; inset: 0; z-index: 40; width: 100%; height: 100%; pointer-events: none; }
.blast-flash { position: fixed; inset: 0; z-index: 39; background: var(--paper); opacity: 0; pointer-events: none; }
.blast-ring {
  position: fixed; z-index: 41; width: 40px; height: 40px; border: 3px solid var(--ink); border-radius: 50%;
  pointer-events: none; transform: translate(-50%, -50%) scale(0.2);
}
.blast-word { display: inline-block; }

/* ---- trusted across the stack: overlapping app marks, bottom right of the hero ---- */

/* The band shares the headline's row, bottom-aligned in the right-hand corner: it takes the room the
   headline leaves (at least 360px, so it drops to its own line only on narrow screens) up to what three
   rows of fourteen need at full size (11.8 circles: fourteen tracks of 0.8, the middle row's half-step
   offset and the last circle's overhang). Container units size the circles to the width it gets. */
.stack {
  flex: 1 1 360px; max-width: calc(44px * 11.8); margin-left: auto;
  padding-top: 14px; border-top: 1px solid var(--ink); container-type: inline-size;
}
.stack-title {
  margin-bottom: 14px;
  font: 600 10.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
/* Three rows of fourteen (four rows of ten on phones, in the small-screens block): each circle overlaps
   the next by a fifth (tracks are 0.8 of a circle wide), every row after the first sits a tenth of a
   circle higher, and the middle row is shifted half a step right, like a honeycomb. */
.stack-list {
  --s: min(44px, calc(100cqi / 11.8));
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(14, calc(var(--s) * 0.8)); grid-auto-rows: var(--s);
}
.stack-list li {
  position: relative; justify-self: start; display: grid; place-items: center;
  width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 2.5px var(--ground), 0 5px 12px -5px rgba(22, 20, 15, 0.4);
  transition: transform var(--ease);
}
@media (min-width: 861px) {
  .stack-list li:nth-child(n + 15) { margin-top: calc(var(--s) * -0.1); }
  .stack-list li:nth-child(n + 15):nth-child(-n + 28) { margin-left: calc(var(--s) * 0.4); }
}
.stack-list li:hover { z-index: 2; transform: translateY(-4px); }
.stack-list img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stack-mark svg { width: 50%; height: 50%; fill: currentColor; }
.stack-list .stack-claude { background: #d97757; color: #fff; }
.stack-claude svg { width: 57%; height: 57%; }
.stack-hubspot { color: #ff7a59; }
.stack-github { color: #181717; }
.stack-github svg { width: 59%; height: 59%; }
.stack-n8n { color: #ea4b71; }
.stack-n8n svg { width: 62%; height: 62%; }
.stack-linear { color: #222326; }
.stack-list .stack-miro { background: #ffd02f; color: #050038; }
.stack-miro svg { width: 43%; height: 43%; }
.stack-supabase { color: #3ecf8e; }
.stack-list .stack-vercel { background: #000; color: #fff; }
.stack-vercel svg { width: 44%; height: 44%; }
.stack-notion { color: #000; }
.stack-notion svg { width: 56%; height: 56%; }
.stack-list .stack-render { background: #000; color: #fff; }
.stack-render svg { width: 46%; height: 46%; }
.stack-slack svg { width: 54%; height: 54%; }
/* Marks on transparent ground (Apify, Google) sit inset on the white circle; marks that run to their
   image's edge (promptfoo, Firecrawl, Tally) are fitted whole; Loom's tile is trimmed to its colour. */
.stack-list .stack-pad img { width: 60%; height: 60%; object-fit: contain; }
.stack-list .stack-fit img { width: 80%; height: 80%; object-fit: contain; }
.stack-list .stack-zoom img { transform: scale(1.2); }
.stack-lighthouse { color: #f44b21; }
/* No usable mark: an ink monogram, named on hover and for screen readers. */
.stack-list .stack-mono {
  background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 2.5px var(--ground), inset 0 0 0 1px var(--ink), 0 5px 12px -5px rgba(22, 20, 15, 0.4);
  font: italic 500 calc(var(--s) * 0.38)/1 var(--serif); letter-spacing: -0.02em;
}
/* The closing "+": the list is a sample of the stack, not all of it. */
.stack-list .stack-more {
  background: var(--ink); color: var(--paper);
  font: 400 calc(var(--s) * 0.56)/1 var(--sans);
}
.stack-more span[aria-hidden] { margin-top: -0.08em; }

/* ---- services: four broadsheet columns, each with an ink figure at its foot ---- */

.services {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 var(--px); border-bottom: 1px solid var(--ink);
}
.services-title {
  grid-column: 1 / -1; padding: 16px 0 14px; border-bottom: 1px solid var(--ink);
  font: italic 400 16px/1 var(--serif); color: var(--ink);
}
/* Each column spans three shared rows (subgrid), so titles, lines and figures align across columns even
   when one title runs to more lines. */
.service {
  grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 12px; align-content: start;
  min-width: 0; padding: 28px 24px 30px 0;
}
.service + .service { padding-left: 24px; border-left: 1px solid var(--hair); }
.service h3 { font: 500 27px/1.08 var(--serif); letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.service h3 + p { font-size: 14px; line-height: 1.55; }
.service-fig { align-self: end; padding-top: 22px; }

/* The figures: ink schematics (SVG), plus one frosted card. */
.service-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig-ink { fill: var(--ink); }
.fig-lines path { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.fig-pills rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.fig-doc { fill: var(--paper); stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.fig-fold { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.fig-labels text { font: 500 9.5px var(--sans); fill: var(--ink); text-anchor: middle; }
.fig-labels .start { text-anchor: start; }
.fig-labels .end { text-anchor: end; }
.fig-labels .strong { font-weight: 600; }
.fig-fail rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.fig-fail path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }
.fig-loop path { fill: none; stroke: var(--ink); stroke-width: 1.3; }
.fig-inner { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; }
.fig-node circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.3; }
.fig-node circle:first-child { fill: var(--ink); }
.fig-mark rect { fill: var(--ink); }
.fig-mark circle { fill: var(--paper); }

/* Human in the loop: the agent's approval request lands as a frosted card over a patch of halftone. */
.fig-approve { position: relative; display: grid; place-items: center; min-height: 112px; }
.fig-approve::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(var(--ink) 1.1px, transparent 1.5px) 0 0 / 7px 7px;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent);
  mask-image: radial-gradient(closest-side, #000 30%, transparent);
}
.approve {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  width: min(100%, 250px); padding: 10px 12px 11px; border-radius: 16px;
  background: rgba(250, 248, 242, 0.45); border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 12px 26px -12px rgba(22, 20, 15, 0.35);
  -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3);
}
.approve-head { display: flex; align-items: center; gap: 6px; font: 500 10.5px/1.3 var(--sans); color: #3d3a33; }
.approve-head span { margin-left: auto; }
.service-fig .approve-mark { display: inline-block; width: 16px; height: 16px; flex: none; }
.approve-mark rect { fill: var(--ink); }
.approve-mark circle { fill: var(--paper); }
.approve b { font: 600 12.5px/1.35 var(--sans); color: var(--ink); }
.approve-actions { display: flex; gap: 6px; }
.pill { padding: 3px 10px; border: 1px solid var(--ink); border-radius: 999px; font: 600 10.5px/1.3 var(--sans); color: var(--ink); }
.pill-ink { background: var(--ink); color: var(--paper); }

/* ---- closer and footer ---- */

.closer {
  display: flex; justify-content: center;
  margin: 0 var(--px); padding: 44px 0; border-bottom: 4px double var(--ink);
}

.footer {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 28px 32px;
  margin: 0 var(--px); padding: 36px 0 30px; font-size: 13px;
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer-brand p { max-width: 320px; font: 400 18px/1.3 var(--serif); color: var(--ink); }
.footer-brand em { font-style: italic; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-col h2 { margin-bottom: 3px; font: italic 400 14px/1 var(--serif); color: var(--faint); }
.footer-col a { color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--ease); }
.footer-col a:hover { color: var(--ink); text-decoration-color: currentColor; }
.footer-base { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 12px; }

/* ---- dialog ---- */

.signup {
  width: min(420px, calc(100% - 32px)); padding: 30px;
  border: 1px solid var(--ink); border-radius: 8px;
  background: var(--paper); color: var(--muted);
}
.signup::backdrop { background: rgba(241, 237, 228, 0.82); }
.signup h2 { padding-right: 24px; font: 500 27px/1.1 var(--serif); letter-spacing: -0.02em; color: var(--ink); }
.signup p { font-size: 13px; line-height: 1.55; }
.signup form { gap: 8px; }
.field-label { font: 500 12px/1.2 var(--sans); color: var(--ink); }
.field-label + input + .field-label { margin-top: 6px; }
.signup input, .signup select {
  padding: 10px 12px; border: 1px solid var(--hair); border-radius: 6px;
  background-color: #fff; color: var(--ink); font: 400 14px/1.4 var(--sans);
}
/* Native control, own chevron: matches the inputs' box on every platform. Greyed until chosen. */
.signup select {
  appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316140f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.signup select:invalid { color: var(--faint); }
.signup select option { color: var(--ink); }
.signup input:hover, .signup select:hover { border-color: var(--faint); }
.signup input[aria-invalid="true"], .signup select[aria-invalid="true"] { border-color: var(--ink); }
.signup-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signup .btn-block { margin-top: 6px; }
.field-error { color: var(--ink); font-size: 13px; }
.dialog-close { color: var(--muted); }
.dialog-close:hover { color: var(--ink); }

/* ---- small screens ---- */

@media (max-width: 860px) {
  :root { --px: 16px; }
  .scene { --fade-bottom: 0.55; --focus-x: 0.55; padding: 12px var(--px); }
  .tag-button { padding: 5px 7px; }
  .tag-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* The feed joins the flow under the pause button (so the copy can never run under it) and shows
     only the newest card. */
  .feed { position: relative; top: auto; right: auto; width: auto; margin: 52px var(--px) auto; }
  .note:nth-child(n + 2) { display: none; }
  .hero-copy { row-gap: 20px; padding-top: 28px; padding-bottom: 28px; }
  .hero h1 { font-size: clamp(35px, 9.75vw, 48px); }
  /* The band goes full width as four rows of ten (8.6 circles wide: ten tracks of 0.8, the half-step offset and the last overhang, so 11.6cqi each). */
  .stack { flex-basis: 100%; max-width: none; margin-left: 0; }
  .stack-list { --s: min(44px, 11.6cqi); grid-template-columns: repeat(10, calc(var(--s) * 0.8)); }
  .stack-list li:nth-child(n + 11) { margin-top: calc(var(--s) * -0.1); }
  .stack-list li:nth-child(20n + 11), .stack-list li:nth-child(20n + 12), .stack-list li:nth-child(20n + 13),
  .stack-list li:nth-child(20n + 14), .stack-list li:nth-child(20n + 15), .stack-list li:nth-child(20n + 16),
  .stack-list li:nth-child(20n + 17), .stack-list li:nth-child(20n + 18), .stack-list li:nth-child(20n + 19),
  .stack-list li:nth-child(20n + 20) { margin-left: calc(var(--s) * 0.4); }
  .intro { padding: 24px 0 28px; }
  .deck { font-size: 15.5px; }
  /* Services two by two. */
  .services { grid-template-columns: 1fr 1fr; }
  .service:nth-of-type(odd) { padding-left: 0; border-left: 0; }
  .service:nth-of-type(n + 3) { border-top: 1px solid var(--hair); }
  .footer { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .deck { columns: 1; }
  .services { grid-template-columns: 1fr; }
  .service, .service + .service { padding: 24px 0 26px; border-left: 0; }
  .service:nth-of-type(n + 2) { border-top: 1px solid var(--hair); }
}