/* Narto · shared components for the rebuilt pages (kai-rebuild).
   Feature blocks, the process steps, the why-us cards, the moving bands, placeholders, review slots,
   the plan card and the closing block. Tokens from site.css only; design rules in DESIGN.md. */

/* ==================== checked points ==================== */
/* A green filled square with an ink tick: fill, never text. */
.checks { display: grid; gap: var(--space-m); max-width: 34em; padding: 0; list-style: none; }
.checks li { position: relative; padding-left: 2.25rem; color: var(--graphite); text-wrap: pretty; }
.checks li::before {
  content: "";
  position: absolute;
  top: .2em;
  left: 0;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--radius);
  background: var(--accent);
}
.checks li::after { /* the tick */
  content: "";
  position: absolute;
  top: calc(.2em + .3rem);
  left: .5rem;
  width: .375rem;
  height: .625rem;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checks strong { display: block; color: var(--accent-text); font-weight: 700; } /* --accent-text: 5.0:1 on concrete, 5.3:1 on white */
.night .checks li, .checks--night li { color: var(--night-muted); }
/* On green: ink text, and the square turns ink with a green tick, so it still shows */
.section--green .checks li { color: var(--ink); }
.section--green .checks strong { color: var(--ink); }
.section--green .checks li::before { background: var(--ink); }
.section--green .checks li::after { border-color: var(--accent); }
.night .checks strong, .checks--night strong { color: var(--night-text); }

/* ==================== feature blocks ==================== */
/* Title, an italic hook in the customer's words, three or four checked points, one button,
   and one drawing on the other side. Sides alternate from 900px; on phones the drawing sits under the text. */
.features-head { margin-bottom: var(--space-2xl); }
.features { display: grid; gap: var(--space-2xl); padding: 0; list-style: none; }
.feature { display: grid; gap: var(--space-xl); align-items: center; }
.feature__label { margin-bottom: var(--space-s); color: var(--accent-text); font-size: var(--small-size); font-weight: 600; }
.feature__title {
  max-width: 12em;
  margin-bottom: var(--space-s);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);
  font-weight: 800;
  line-height: .95;
  text-wrap: balance;
}
.feature__hook {
  max-width: 26em;
  margin-bottom: var(--space-l);
  color: var(--graphite);
  font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem);
  font-style: italic;
  line-height: 1.4;
  text-wrap: pretty;
}
.feature .checks { margin-bottom: var(--space-l); }
.feature__visual {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--white);
}
@media (min-width: 900px) {
  .features { gap: calc(var(--section-pad) * 1.25); }
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); }
  .feature:nth-child(even) .feature__visual { order: -1; }
}

/* The feature phones: one phone (the review thread's phone from home.css), whole, standing on the page background,
   each showing its feature happening on a real-looking screen. Tokens only; sizes in cqw of the screen. */
.feature__visual--phone { display: flex; justify-content: center; overflow: visible; background: none; } /* the phone sits on the page */
.feature__visual--phone .thread-device { justify-self: auto; height: auto; overflow: visible; }
/* The whole phone, exactly a phone's proportions. The screen is placed inside the frame (inset), not given height: 100%:
   WebKit does not resolve a percentage height against an aspect-ratio box, so the screen ran out of the frame. */
.feature__visual--phone .thread-phone { height: auto; aspect-ratio: 9 / 19; min-height: 0; }
.feature__visual--phone .thread-screen { position: absolute; inset: .4375rem; height: auto; }
.feature__visual--phone .thread-screen::after { /* the home indicator */
  content: "";
  position: absolute;
  bottom: .55rem;
  left: 33%;
  width: 34%;
  height: 4px;
  border-radius: 2px;
  background: var(--ink);
}
.thread-screen { container-type: inline-size; }

/* 2: Narto's own example site on the screen, under the status bar, with the Saturday hours changed */
.ph-site { position: relative; }
.ph-site img { width: 100%; height: auto; }
.ph-hours { /* the Saturday hours, changed */
  position: absolute;
  left: 27.9%;
  top: 62.5%;
  padding: .15em .35em;
  border-radius: 1.2cqw;
  background: var(--accent-tint);
  color: var(--ink);
  font-size: 3.7cqw;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.ph-chat {
  position: absolute;
  top: 3%;
  left: 4%;
  right: 4%;
  display: grid;
  gap: 2.4cqw;
  padding: 4cqw;
  border-radius: 5cqw;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-size: max(11px, 4.6cqw);
  line-height: 1.3;
}
.ph-chat__me, .ph-chat__them { max-width: 82%; padding: 2.4cqw 3.4cqw; border-radius: 4.4cqw; }
.ph-chat__me { justify-self: end; border-bottom-right-radius: 1.2cqw; background: var(--ink); color: var(--night-text); }
.ph-chat__them { justify-self: start; border-bottom-left-radius: 1.2cqw; background: var(--accent); color: var(--ink); font-weight: 600; }

/* 3: a new inquiry from the site lands in the inbox */
.ph-mail { padding: 2cqw 5cqw 0; font-size: max(11px, 4.4cqw); line-height: 1.35; }
.ph-mail__app { margin-bottom: 3cqw; font-family: var(--font-display); font-size: 9cqw; font-weight: 800; line-height: 1; }
.ph-mail__new {
  display: grid;
  gap: 1.6cqw;
  margin-bottom: 3cqw;
  padding: 4cqw;
  border-radius: 4cqw;
  background: var(--concrete);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.ph-mail__from { display: flex; align-items: center; gap: 2cqw; }
.ph-mail__dot { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--accent); }
.ph-mail__time { margin-left: auto; color: var(--graphite); }
.ph-mail__subject { font-weight: 700; }
.ph-mail__field span { display: block; color: var(--graphite); font-size: .85em; }
/* The older mail below: earlier inquiries, as an inbox shows them (sender, day, subject, the first line) */
.ph-mail__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2cqw; padding: 2.6cqw 0; border-top: 1px solid var(--rule); line-height: 1.3; }
.ph-mail__row b { font-weight: 700; }
.ph-mail__when { color: var(--graphite); font-size: .85em; }
.ph-mail__subj { grid-column: 1 / -1; }
.ph-mail__prev { grid-column: 1 / -1; overflow: hidden; color: var(--graphite); white-space: nowrap; text-overflow: ellipsis; }

/* 4: the report, with example numbers labelled as such. The numbers roll up (home.js), the bars fill, then what
   changed since last time, what we did on the site and the most visited page fill the rest of the screen. */
.ph-report { padding: 2cqw 6cqw 0; font-size: max(11px, 4.2cqw); line-height: 1.3; }
.ph-report__top { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.ph-report__top b { font-family: var(--font-display); font-size: 9cqw; font-weight: 800; line-height: 1; }
.ph-report__tag { padding: 1cqw 2.6cqw; border-radius: var(--radius); background: var(--ink); color: var(--night-text); font-size: .85em; font-weight: 600; }
.ph-report__when { margin: 1.2cqw 0 4cqw; color: var(--graphite); }
.ph-stat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label num" "delta num" "bar bar";
  align-items: center;
  gap: .6cqw 3cqw;
  margin-bottom: 3cqw;
  padding-bottom: 3cqw;
  border-bottom: 1px solid var(--rule);
}
.ph-stat__label { grid-area: label; font-weight: 700; }
.ph-stat__delta { grid-area: delta; color: var(--accent-text); font-size: .85em; font-weight: 600; }
.ph-stat__num { grid-area: num; color: var(--ink); font-family: var(--font-display); font-size: 12.5cqw; font-weight: 800; line-height: 1; }
.ph-stat i { grid-area: bar; height: 2.4cqw; margin-top: 1.6cqw; border-radius: var(--radius); background: var(--ink); transform-origin: 0 50%; }
.ph-stat:nth-child(3) i { width: 92%; }
.ph-stat:nth-child(4) i { width: 46%; background: var(--accent); }
.ph-stat:nth-child(5) i { width: 26%; }
.ph-report__head { margin: 1.4cqw 0 2.2cqw; font-family: var(--font-display); font-size: 6.2cqw; font-weight: 800; line-height: 1; }
.ph-days { display: flex; align-items: flex-end; gap: 1.2cqw; height: 13cqw; margin-bottom: 4cqw; }
.ph-days i { flex: 1; height: calc(var(--h) * 100%); border-radius: 1px; background: var(--ink); transform-origin: 50% 100%; }
.ph-days i:last-child { background: var(--accent); }
.ph-did { display: grid; gap: 1.8cqw; margin-bottom: 4cqw; padding: 0; list-style: none; }
.ph-did li { position: relative; padding-left: 6.4cqw; }
.ph-did li::before { /* a green square with an ink tick, as the checked points */
  content: "";
  position: absolute;
  top: .15em;
  left: 0;
  width: 4cqw;
  height: 4cqw;
  border-radius: var(--radius);
  background: var(--accent);
}
.ph-did li::after {
  content: "";
  position: absolute;
  top: calc(.15em + .8cqw);
  left: 1.45cqw;
  width: 1.1cqw;
  height: 2cqw;
  border: solid var(--ink);
  border-width: 0 .5cqw .5cqw 0;
  transform: rotate(45deg);
}
.ph-report__page { margin-bottom: 3cqw; padding: 2.2cqw 3cqw; border-radius: var(--radius); background: var(--concrete); font-weight: 600; }
.ph-report__note { color: var(--graphite); font-size: .85em; }
/* The rolling numbers: home.js turns each digit into a column of digits that rolls to its value. */
.odo { display: inline-flex; }
.odo__col { display: flex; align-items: flex-start; justify-content: center; height: 1em; overflow: hidden; clip-path: inset(0); } /* as wide as its own digit; clip-path: WebKit does not clip a sliding (composited) column with overflow alone */
.odo__strip { display: block; }
.odo__strip span { display: block; height: 1em; text-align: center; }

/* 1: the website, built from what is already out there. Three cards stand around the phone (the old site, the
   Google listing, the Facebook page); each flies into the phone and its part of the finished site lands; then a
   green tick, and only then the Zoom call. One drawing, sized in cqw of its stage. Without motion: the cards around
   the finished site. */
.build {
  position: relative;
  width: min(100%, 34rem);
  aspect-ratio: 100 / 122;
  container-type: inline-size;
  line-height: 1.3;
}
.build__src, .build__call { font-size: max(10px, 3.1cqw); } /* cqw of the stage: set on its children, not on it */
.build .thread-device { position: absolute; top: 0; left: 23cqw; width: 54cqw; margin: 0; padding: 0; }
.build .thread-phone { padding: 1.3cqw; border-radius: 8.4cqw; }
.build .thread-phone::before { top: 21%; height: 9%; }
.build .thread-phone::after { top: 27%; height: 12%; }
.build .thread-screen { inset: 1.3cqw; border-radius: 7.1cqw; }
.build .thread-screen::before { top: 2.1%; width: 26%; height: auto; aspect-ratio: 3.4; margin-left: -13%; }
.build .thread-bar { height: 14cqw; padding: 0 8cqw 0 9cqw; }
.build__site { position: relative; aspect-ratio: 390 / 844; }
.build__part { position: absolute; inset: 0; }
.build__part img { width: 100%; height: auto; }
.build__part--a { clip-path: inset(0 0 64% 0); }     /* the name and the headline: from the old site */
.build__part--b { clip-path: inset(36% 0 34% 0); }   /* the text, the call button and the hours: from the listing */
.build__part--c { clip-path: inset(66% 0 0 0); }     /* the photo: from the Facebook page */
.build__skel { position: absolute; inset: 0; display: grid; align-content: start; gap: 5cqw; padding: 10cqw 6cqw; }
.build__skel i { display: block; height: 7cqw; border-radius: var(--radius); background: var(--concrete); }
.build__skel i:nth-child(1) { width: 55%; }
.build__skel i:nth-child(2) { height: 30cqw; }
.build__skel i:nth-child(3) { width: 80%; height: 14cqw; }
.build__skel i:nth-child(4) { height: 12cqw; }
.build__skel i:nth-child(5) { height: 70cqw; }
.build__done { /* the green tick on the finished site */
  position: absolute;
  top: -3cqw;
  right: -4cqw;
  width: 11cqw;
  height: 11cqw;
  border-radius: 50%;
  background: var(--accent);
}
.build__done::after {
  content: "";
  position: absolute;
  top: 2.4cqw;
  left: 4.1cqw;
  width: 2.6cqw;
  height: 5cqw;
  border: solid var(--ink);
  border-width: 0 1cqw 1cqw 0;
  transform: rotate(45deg);
}

/* The three sources, as their own little screens */
.build__src { position: absolute; width: 40cqw; }
.build__src--site { top: 9cqw; left: 60cqw; }
.build__src--map { top: 44cqw; left: 0; }
.build__src--page { top: 80cqw; left: 60cqw; }
.build__cap { /* a tab on the card's outer side, so it never crosses the phone */
  display: table;
  padding: .8cqw 2cqw;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--ink);
  color: var(--night-text);
  font-size: max(10px, 2.8cqw);
  font-weight: 600;
}
.build__src--site .build__cap, .build__src--page .build__cap { margin-left: auto; }
.build__card { padding: 2.4cqw; overflow: hidden; border-radius: var(--radius); background: var(--white); box-shadow: inset 0 0 0 1px var(--ink); }
.build__card--old { padding: 0; }
.build__dots { display: flex; gap: 1cqw; padding: 1.6cqw 2.2cqw; background: var(--rule); }
.build__dots i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: var(--white); }
.build__old-name { padding: 2.4cqw 2.4cqw 1.2cqw; font-weight: 700; line-height: 1.2; text-decoration: underline; }
.build__bars, .build__lines { display: flex; gap: 1.4cqw; padding: 0 2.4cqw 2cqw; }
.build__bars i { width: 7cqw; height: 1.4cqw; background: var(--rule); }
.build__old-img { display: block; height: 11cqw; margin: 0 2.4cqw; background: var(--concrete); box-shadow: inset 0 0 0 1px var(--rule); }
.build__lines { display: grid; padding-top: 2.2cqw; }
.build__lines i { height: 1.2cqw; background: var(--rule); }
.build__lines i:nth-child(2) { width: 82%; }
.build__lines i:nth-child(3) { width: 56%; }
.build__map { position: relative; display: block; height: 13cqw; margin: -2.4cqw -2.4cqw 2cqw; overflow: hidden; background: var(--concrete); }
.build__map::before, .build__map::after { /* two roads */
  content: "";
  position: absolute;
  left: -10%;
  width: 120%;
  height: 1.2cqw;
  background: var(--white);
}
.build__map::before { top: 30%; transform: rotate(-12deg); }
.build__map::after { top: 62%; transform: rotate(9deg); }
.build__pin {
  position: absolute;
  z-index: 1;
  top: 18%;
  left: 50%;
  width: 4.6cqw;
  height: 4.6cqw;
  margin-left: -2.3cqw;
  border-radius: 50% 50% 50% 0;
  background: var(--accent);
  transform: rotate(-45deg);
}
.build__pin::after { content: ""; position: absolute; top: 30%; left: 30%; width: 40%; height: 40%; border-radius: 50%; background: var(--ink); }
.build__biz { font-weight: 700; line-height: 1.2; }
.build__meta { color: var(--graphite); font-size: .9em; }
.build__tel { margin-top: .8cqw; color: var(--accent-text); font-weight: 700; }
.build__cover { display: block; height: 8cqw; margin: -2.4cqw -2.4cqw 0; background: var(--accent-tint); }
.build__page-name { display: flex; align-items: flex-end; gap: 1.6cqw; margin-top: -3.4cqw; font-weight: 700; line-height: 1.2; }
.build__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 7cqw;
  height: 7cqw;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: .75em;
  box-shadow: 0 0 0 .6cqw var(--white); /* a white ring, so it sits on the cover */
}
.build__post { display: block; aspect-ratio: 3 / 2; margin-top: 2cqw; overflow: hidden; border-radius: var(--radius); }
.build__post img { width: 100%; height: 100%; object-fit: cover; }
/* The call, after the site is done */
.build__call {
  position: absolute;
  top: 104cqw;
  left: 2cqw;
  display: flex;
  align-items: center;
  gap: 2cqw;
  padding: 2.2cqw 3.4cqw;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--night-text);
  font-weight: 600;
  white-space: nowrap;
}
.build__cam { position: relative; width: 3.6cqw; height: 2.8cqw; margin-right: 1.6cqw; border-radius: .5cqw; background: var(--accent); }
.build__cam::after { content: ""; position: absolute; top: .3cqw; left: 100%; width: 1.8cqw; height: 2.2cqw; background: var(--accent); clip-path: polygon(0 50%, 100% 0, 100% 100%); }

/* ==================== "More on how it works" under the steps track ==================== */
.process-more { margin-top: var(--space-l); }

/* ==================== why-us cards ==================== */
.why { display: grid; gap: var(--space-s); padding: 0; list-style: none; }
.why__card { display: grid; align-content: start; gap: var(--space-s); padding: var(--space-l); border-radius: var(--radius); background: var(--white); }
.why__card p { color: var(--graphite); text-wrap: pretty; }
.why__card--green { background: var(--accent); }
.why__card--green p { color: var(--ink); }
.why__card--ink { background: var(--ink); color: var(--night-text); }
.why__card--ink p { color: var(--night-muted); }
.why__card--ink .text-link { color: var(--night-text); }
.why__card--ink :focus-visible { outline-color: var(--night-text); }
.why__title { font-family: var(--font-display); font-size: var(--h3-size); font-weight: 700; line-height: 1; }
@media (min-width: 641px) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .why { grid-template-columns: repeat(3, minmax(0, 1fr)); } .why__card { min-height: 15rem; } }

/* ==================== moving bands: the trades and the tools ==================== */
/* Never a strip to swipe. Moving: site.js doubles the items (the copies are hidden from assistive tech) and the track
   slides by half its width, forever, at an even speed; neighbouring rows run in opposite directions. Still (reduced
   motion, or no script): the rows wrap onto several lines (the photo rows show their first six). Decided by CSS, so
   nothing reflows when a row starts moving. */
.band { --band-gap: var(--space-s); position: relative; }
.band + .band { margin-top: var(--space-s); }
.band__viewport {
  overflow: hidden;
  padding-block: 3px; /* room for the focus outline */
}
.band__viewport:focus-visible { outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
  .band__track { flex-wrap: wrap; width: auto; }
  .band--photos .trade:nth-child(n+7) { display: none; }
}
html:not(.js) .band__track { flex-wrap: wrap; width: auto; }
html:not(.js) .band--photos .trade:nth-child(n+7) { display: none; }
.band__track {
  display: flex;
  gap: var(--band-gap);
  width: max-content;
  margin: 0;
  padding: 0 var(--gutter);
  list-style: none;
}
.band.is-moving .band__viewport { overflow: hidden; }
.band.is-moving .band__track {
  padding-inline: 0 var(--band-gap); /* one gap after the last item, so half the track is exactly one cycle */
  animation: band-slide var(--band-time, 60s) linear infinite;
}
.band.is-moving[data-direction="reverse"] .band__track { animation-direction: reverse; }
/* A row holds still under the pointer (devices with hover only: on touch a hover sticks), under keyboard focus, after
   a tap (site.js toggles .is-tapped) and off screen. */
@media (hover: hover) { .band.is-moving:hover .band__track { animation-play-state: paused; } }
.band.is-moving .band__viewport:focus-visible .band__track,
.band.is-tapped .band__track,
.band.is-held .band__track { animation-play-state: paused; }
@keyframes band-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .band__track { animation: none !important; } }


/* Trades with a photo: the work itself, 4:5, the trade under it */
.trade { flex: none; width: clamp(9.5rem, 8rem + 6vw, 13rem); }
.trade__img {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--rule);
}
.trade__img img { width: 100%; height: 100%; object-fit: cover; }
.trade__name {
  display: block;
  margin-top: var(--space-xs);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.05;
}

/* Review cards: one at a time below 900px (deck.js; stacked without the script), three in a row from 900px */
.reviews { display: grid; gap: var(--space-s); margin: 0; padding: 0; list-style: none; }
.review { display: grid; align-content: start; gap: var(--space-s); padding: var(--space-m); border-radius: var(--radius); background: var(--white); }
.reviews-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); margin-top: var(--space-l); }
@media (min-width: 900px) { .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.reviews--six { }
@media (min-width: 900px) { .reviews--six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==================== the plan card (pricing) ==================== */
.plan {
  display: grid;
  align-content: start;
  gap: var(--space-m);
  padding: var(--space-xl) var(--space-l);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--night-text);
}
.plan :focus-visible { outline-color: var(--night-text); }
.plan__name { font-family: var(--font-display); font-size: var(--h3-size); font-weight: 700; line-height: 1; }
.plan__price { display: flex; align-items: baseline; gap: .15em; font-family: var(--font-display); font-size: clamp(4.5rem, 3rem + 6vw, 8rem); font-weight: 800; line-height: .9; }
.plan__per { font-size: clamp(1.4375rem, .96rem + 1.92vw, 2.5rem); font-weight: 700; color: var(--night-muted); } /* about a third of the price */
.plan__price--none { font-size: clamp(2.5rem, 1.8rem + 2.5vw, 3.75rem); }
.plan__terms { color: var(--night-muted); }
.plan .checks { padding-top: var(--space-m); border-top: 1px solid var(--night-rule); }
.plan .btn--primary { justify-self: start; }
.plan .btn--primary:hover, .plan .btn--primary:active { background: var(--night-text); color: var(--ink); }
.plan__small { color: var(--night-muted); font-size: var(--small-size); }
@media (max-width: 640px) { .plan { padding: var(--space-l) var(--space-m); } .plan .btn--primary { justify-self: stretch; } }


/* ==================== subpage sections ==================== */
.block + .block { margin-top: var(--section-pad); }
.plain-list { display: grid; gap: var(--space-xs); padding-left: 1.2em; }

/* The video slot on the booked page and the landing page */
.watch { max-width: 44rem; }

/* ==================== home: small section details ==================== */
.reviews-rating { display: inline-flex; margin-bottom: var(--space-l); padding: var(--space-xs) var(--space-m); }
.trades .section__lead, .tools .section__lead { margin-bottom: var(--space-xl); }
.trades, .tools { overflow-x: clip; }

/* ==================== pages: how it works, pricing, reviews ==================== */
/* The first section after a page head: the page title is its heading, so the head's own space is the gap. */
.section--first { padding-top: 0; }


/* Pricing: the plan card first, "What's in it" beside it from 900px; then what's not in it and the add-on. */
.pricing-top { display: grid; gap: var(--section-pad); align-items: start; }
.pricing-top .plan__price { flex-wrap: wrap; }
@media (min-width: 900px) { .pricing-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); } }

/* Reviews page: six cards per kind as a grid, not the sideways strip. Videos two across on phones, three from 641px;
   written reviews stacked on phones, two from 641px, three from 900px. */
.reviews--grid { grid-template-columns: minmax(0, 1fr); }
.reviews--videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reviews--videos .review { gap: var(--space-xs); padding: var(--space-xs); }
@media (min-width: 641px) {
  .reviews--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews--videos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reviews--videos .review { gap: var(--space-s); padding: var(--space-m); }
}
@media (min-width: 900px) { .reviews--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Four why-us cards (About: How we work): two across, four in a row from 1000px */
@media (min-width: 1000px) { .why.why--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Feature buttons: the full primary button, full width on phones like every primary button there */
@media (max-width: 640px) { .feature__text .btn--primary { display: flex; width: 100%; } }

/* ==================== why us, with figures ==================== */
/* Each card leads with a big figure (or a drawn gauge), then one confident line. Tighter than the plain cards. */
.why--figures .why__card { min-height: 0; gap: var(--space-xs); padding: var(--space-l) var(--space-l) var(--space-m); }
.why__fig {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 2.4rem + 3vw, 5rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.why--figures .why__line { color: var(--ink); font-weight: 600; line-height: 1.35; text-wrap: pretty; }
.why--figures .why__card--ink .why__line { color: var(--night-text); }
.why__card--ink .why__line .text-link { display: inline; min-height: 0; font-weight: 500; }
.why__icon { display: block; width: auto; height: .9em; overflow: visible; }
.why__needle { stroke: var(--accent); }
.why-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m) var(--space-l); margin-top: var(--space-xl); }
@media (max-width: 640px) { .why-cta { flex-direction: column; align-items: stretch; } .why-cta .btn { width: 100%; } .why-cta .text-link { align-self: center; } }

/* ==================== trades: the middle row as hang tags ==================== */
/* Job tags on a rail: white, square, an eyelet on the left, the trade in the display face. Whole objects passing by,
   so a name is never chopped mid-word in a big ticker; clearly not the photo rows. */
.band--tags { --band-gap: var(--space-s); }
.band--tags .band__track { padding-block: var(--space-xs); }
.tag {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: .55rem 1.25rem .55rem 2.4rem;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.tag::before { /* the eyelet */
  content: "";
  position: absolute;
  top: 50%;
  left: .9rem;
  width: .6rem;
  height: .6rem;
  margin-top: -.3rem;
  border-radius: 50%;
  background: var(--concrete);
  box-shadow: 0 0 0 2px var(--accent);
}
.night .tag::before { background: var(--ink); } /* the eyelet is a hole: it shows the section behind */

/* ==================== questions: the heading stays beside the list on wide screens ==================== */
@media (min-width: 900px) {
  .split > .section__title { position: sticky; top: var(--space-xl); align-self: start; }
}

/* ==================== tools: the companies' own logos ==================== */
/* Every logo at one visual height (--logo-h, nudged per logo with --logo-scale where its artwork carries more or less
   padding), unaltered, with generous space around it as clear space. Two rows in opposite directions. */
.band--logos { --band-gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); --logo-h: clamp(1.625rem, 1.3rem + 1vw, 2.25rem); }
.band--logos .band__track { align-items: center; padding-block: var(--space-s); }
.band--logos + .band--logos { margin-top: 0; }
.logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--logo-h, 2.25rem) * 1.8);
}
.logo img { width: auto; height: calc(var(--logo-h, 2.25rem) * var(--logo-scale, 1)); max-width: none; }
/* Per logo: the artwork's own padding differs, so each is nudged to the same visual height (measured by eye at 1440). */
.logo--cloudflare { --logo-scale: 1.15; }
.logo--slack { --logo-scale: 1.15; }
.logo--google-workspace { --logo-scale: .9; }
.logo--zoom { --logo-scale: .9; }
.logo--simply { --logo-scale: .95; }
.logo--stripe { --logo-scale: 1.1; }
.logo--gohighlevel { --logo-scale: 1.45; }
.logo--openai { --logo-scale: 1.6; }
.logo--fathom { --logo-scale: .8; }
/* redirect.pizza publishes its mark only and writes its name as text beside it (as its own site header does). */
.logo--redirect-pizza { gap: .6em; font-size: calc(var(--logo-h, 2.25rem) * .72); }
.logo--redirect-pizza img { --logo-scale: .95; }
.logo__name { font-weight: 400; color: var(--ink); white-space: nowrap; letter-spacing: -.01em; line-height: 1; }
.logo__name b { font-weight: 700; }

/* Moved from home.css (2026-10-06): the drawn phone and the steps track are used on the subpages too. */
/* ==================== thread ==================== */
/* Review add-on: a phone that receives the review request by text.
   One derived tint: --thread-grey, the incoming bubble = 93% --concrete + 7% --ink
   (falls back to --rule where color-mix is missing). Everything else uses site tokens. */

.thread {
  --thread-grey: var(--rule);
  padding-top: 0; /* follows the deal section; the panel's inner space is the gap */
}
@supports (color: color-mix(in srgb, red, blue)) {
  .thread { --thread-grey: color-mix(in srgb, var(--concrete) 93%, var(--ink)); }
}

.thread-panel {
  display: grid;
  gap: var(--space-xl);
  padding: var(--space-xl) var(--space-m) 0;
  border-radius: var(--radius);
  background: var(--white);
}
.thread-label {
  margin-bottom: var(--space-s);
  color: var(--accent-text);
  font-size: var(--small-size);
  font-weight: 600;
}
.thread .section__title { margin-bottom: var(--space-m); font-size: clamp(2rem, 1.4rem + 2.2vw, 3.5rem); }
.thread-text { max-width: 30em; color: var(--graphite); text-wrap: pretty; }
.thread-text:not(:last-child) { margin-bottom: var(--space-s); }

/* The phone. Its lower part runs past the panel edge, so only the thread shows. */
.thread-device {
  justify-self: start;
  width: min(100%, 17.5rem);
  height: 22.5rem;
  margin-inline: -2px;
  padding-inline: 2px; /* room for the side keys */
  overflow: hidden;
  font-family: var(--font-text);
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
}
.thread-phone {
  position: relative;
  height: 34rem;
  padding: .4375rem;
  border-radius: 2.75rem;
  background: var(--ink);
}
.thread-phone::before,
.thread-phone::after {
  content: "";
  position: absolute;
  width: 2px;
  background: var(--ink);
}
.thread-phone::before { left: -2px; top: 6.5rem; height: 3.5rem; border-radius: 1px 0 0 1px; }
.thread-phone::after { right: -2px; top: 8rem; height: 4.5rem; border-radius: 0 1px 1px 0; }

.thread-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 2.3125rem;
  background: var(--white);
}
/* Camera cut-out */
.thread-screen::before {
  content: "";
  position: absolute;
  top: .5625rem;
  left: 50%;
  width: 4.5rem;
  height: 1.3125rem;
  margin-left: -2.25rem;
  border-radius: 1rem;
  background: var(--ink);
}

.thread-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.5rem;
  padding: 0 1.375rem 0 1.5rem;
}
.thread-bar svg { display: block; fill: currentColor; }

.thread-head {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .25rem 1rem .625rem;
  border-bottom: 1px solid var(--rule);
}
.thread-back {
  width: .5625rem;
  height: .5625rem;
  margin: 0 .125rem 0 .25rem;
  border-bottom: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
  transform: rotate(45deg);
}
.thread-avatar {
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: var(--graphite);
  color: var(--white);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.thread-name { font-size: .9375rem; font-weight: 600; line-height: 1.2; }

.thread-day {
  padding: .875rem 0 .75rem;
  color: var(--graphite);
  font-size: .6875rem;
  line-height: 1.35;
  text-align: center;
}
.thread-day span { display: block; font-weight: 600; }

.thread-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3125rem;
  padding: 0 .875rem;
  font-size: .8125rem;
  line-height: 1.38;
}
/* Yesterday's two messages, the customer's reply (right, ink), and the text field at the bottom: a full thread */
.thread-msg--old { max-width: 84%; }
.thread-msg.thread-msg--me { align-self: flex-end; max-width: 78%; border-radius: 1.125rem 1.125rem .3125rem 1.125rem; background: var(--ink); color: var(--night-text); }
.thread-input {
  position: absolute;
  right: .75rem;
  bottom: 1.5rem;
  left: .75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .375rem .375rem .375rem .875rem;
  border-radius: 1.25rem;
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--graphite);
  font-size: .8125rem;
}
.thread-input i { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--rule); }
.thread-slot { position: relative; max-width: 84%; }
.thread-typing,
.thread-msg { border-radius: 1.125rem 1.125rem 1.125rem .3125rem; background: var(--thread-grey); }
.thread-msg { padding: .5rem .8125rem .5625rem; }
/* Only the motion script shows the typing bubble; without it the thread is already finished. */
.thread-typing {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: .25rem;
  padding: .8125rem 1rem;
  opacity: 0;
  visibility: hidden;
}
.thread-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--graphite); }

.thread-link {
  width: 84%;
  margin-top: .1875rem;
  padding: .5625rem .8125rem .625rem;
  border: 1px solid var(--thread-grey);
  border-radius: .3125rem 1.125rem 1.125rem 1.125rem;
  background: var(--white);
}
.thread-link b { display: block; font-weight: 600; }
.thread-link span {
  display: block;
  color: var(--graphite);
  font-size: .6875rem;
  text-decoration: underline;
  text-underline-offset: .2em;
}

@media (min-width: 641px) {
  .thread-device { width: 18.75rem; height: 24rem; }
}
@media (min-width: 900px) {
  .thread-panel {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    padding: var(--space-2xl) var(--space-2xl) 0;
  }
  .thread-copy { align-self: center; padding-bottom: var(--space-2xl); }
  .thread-device { justify-self: center; align-self: end; height: 25rem; }
}

/* ==================== steps: a track from booking to live ==================== */
/* Four steps on green: each a numbered ink tile (the last one white: that's where you end up), the timing on a white
   label, a big title and one short line. Tiles are joined by an ink line: down the left on phones, across from
   1000px. When the list comes into view the tiles pop in order and the line runs on to the next one (home.js),
   about 3 s, once. Reduced motion and no JS: the finished track. */
.road { display: grid; gap: var(--space-xl); padding: 0; list-style: none; }
.road__step { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-content: start; column-gap: var(--space-m); }
.road__num {
  position: relative;
  z-index: 1;
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--night-text);
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1;
}
.road__step:last-child .road__num { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink); }
.road__when {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  margin-bottom: var(--space-xs);
  padding: .25rem .625rem;
  border-radius: var(--radius);
  background: var(--white);
  font-size: var(--small-size);
  font-weight: 700;
  line-height: 1.3;
}
.road__title {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
  font-weight: 800;
  line-height: .95;
}
.road__text { grid-column: 2; grid-row: 3; max-width: 22em; margin-top: var(--space-xs); text-wrap: pretty; }
.road__link { /* the line on to the next step */
  position: absolute;
  top: 4.5rem;
  bottom: calc(var(--space-xl) * -1);
  left: calc(2.25rem - 1.5px);
  width: 3px;
  background: var(--ink);
  transform-origin: 50% 0;
}
.steps .process-more { margin-top: var(--space-xl); }
@media (min-width: 1000px) {
  .road { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-l); }
  .road__step { grid-template-columns: minmax(0, 1fr); }
  .road__num { grid-row: 1; margin-bottom: var(--space-m); }
  .road__when { grid-column: 1; grid-row: 2; }
  .road__title { grid-column: 1; grid-row: 3; }
  .road__text { grid-column: 1; grid-row: 4; }
  .road__link {
    top: calc(2.25rem - 1.5px);
    right: calc(var(--space-l) * -1);
    bottom: auto;
    left: 4.5rem;
    width: auto;
    height: 3px;
    transform-origin: 0 50%;
  }
}

/* ==================== subpages: the home page's blocks (2026-10-06) ==================== */
/* Feature blocks outside the home list: .feature--flip puts the drawing first from 900px, so sides alternate down
   the page. A figure card stands in for a drawing where a number says it best. */
@media (min-width: 900px) { .feature--flip > :last-child { order: -1; } }
.feature__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); }
@media (max-width: 640px) { .feature__actions { flex-direction: column; align-items: stretch; } .feature__actions .btn { width: 100%; } .feature__actions .text-link { align-self: center; } }
.figure-card {
  display: grid;
  align-content: center;
  gap: var(--space-s);
  justify-self: center;
  width: min(100%, 24rem);
  aspect-ratio: 1;
  padding: var(--space-xl) var(--space-l);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
}
.figure-card--green { background: var(--accent); }
@media (max-width: 899px) { .figure-card { aspect-ratio: auto; min-height: 13rem; } } /* not a tall square on a phone */
.figure-card__fig { font-family: var(--font-display); font-size: clamp(4rem, 2.8rem + 4vw, 6.5rem); font-weight: 800; line-height: .9; }
.figure-card__line { font-weight: 600; line-height: 1.35; text-wrap: pretty; }
/* The closing "Want to see yours?" on ink (subpages that end with the steps on green) */
.night .terms { border-top-color: var(--night-rule); }
.night .terms__text { color: var(--night-muted); }
/* Pricing: the plan stays in view beside the list from 900px, so the column next to it is never empty;
   tighter steps between the sections. */
@media (min-width: 900px) {
  .pricing-top .plan { position: sticky; top: var(--space-l); }
}