/* Website pages: the hub (/), /websites/, /about/, /contact/, /privacy/, /terms/ and 404.
   Page layout only. Every colour, face and device comes from tokens.css and components.css; this file
   arranges them. The blocks marked "from home.css" began as copies of the old homepage's layouts
   under a site- name (home-duo → site-duo, and so on); home.css retired when the hub replaced
   that homepage, so these are the only copy. Blocks used by two or more of these pages are
   candidates for components.css (CSS README rule). */

@layer sm.tokens, sm.base, sm.components, sm.page;

@layer sm.page {
  /* ── Photos (stock for now; the manifest is public/assets/photos/SOURCES.md) ── */
  /* The frame: the brand's white mat (--rs-media-border) with a thin ink edge outside it, the
     same 1.5px line the infographic and the cards use. */
  .site-frame { --site-edge: 1.5px; box-shadow: 0 0 0 var(--site-edge) var(--rs-ink), var(--rs-media-shadow); }
  /* Each photo's focal point and its crop (the owner's photos, 2026-09-24). Most are portrait
     and 640px wide: a crop keeps the face in the top third and never asks for more width than
     the file has at 1x. 58.6em: where a hero goes two-column (2 × 26rem + the 3rem gap +
     gutters). */
  /* Hub collage: the tile files are square crops cut so every head is about the same size (the
     cafe photo, a tight portrait, sets the scale; owner review 2026-09-25), so they need no focus. */
  /* Hub doors: 16:10 across the card's top. */
  .site-photo-notes { --rs-media-focus: 50% 15%; }   /* her face and the hand at her chin */
  .site-photo-main-street { --rs-media-focus: 50% 45%; }
  /* /websites/: the hero is square beside the text and 4:3 when stacked (the face at the top,
     the clipboard at the foot); How it works is landscape, like its photo. */
  .site-photo-clipboard { --rs-media-focus: 50% 40%; --rs-media-ratio: 1; }
  @media (max-width: 58.6em) { .site-photo-clipboard { --rs-media-focus: 50% 48%; --rs-media-ratio: 4 / 3; } }
  .site-photo-baker-tray { --rs-media-focus: 85% 50%; --rs-media-ratio: 4 / 3; }   /* the baker, not the empty rack */
  /* /about/: the train and its "Century Park" sign, 3:2; 16:9 in the two columns, so the
     column it ends doesn't run far below the other. /contact/: square beside the form, 4:3 when
     stacked. */
  .site-photo-lrt { --rs-media-focus: 50% 22%; --rs-media-ratio: 3 / 2; }
  @media (min-width: 60em) { .site-photo-lrt { --rs-media-ratio: 16 / 9; } }
  .site-photo-planner { --rs-media-focus: 50% 45%; --rs-media-ratio: 4 / 3; }
  @media (min-width: 60em) { .site-photo-planner { --rs-media-ratio: 1; } }
  /* Stacked on a tablet, these three would fill the column (about 720px at 768) from 640px
     files, so they stay at most 30rem wide, like How it works. With larger files, drop the cap
     and add the new widths to each srcset and sizes. */
  @media (max-width: 58.6em) { .site-photo-clipboard { max-inline-size: 30rem; } }
  @media (max-width: 59.99em) { .site-photo-lrt, .site-photo-planner { max-inline-size: 30rem; } }

  /* ── Heroes ─────────────────────────────────────────────────── */
  .sm-hero__body > :is(.sm-small, .site-hero__text) { max-inline-size: var(--rs-measure); }
  /* A hero pill may hold a whole short sentence: on narrow phones it wraps instead of
     widening the page. */
  @media (max-width: 30em) {
    .sm-hero .sm-pill { white-space: normal; text-align: start; }
  }

  /* A short hero (hub, about, contact, privacy, terms): the awning and the words, no picture,
     with the content close to the top on a phone. The top leaves the eyebrow clear air below
     the awning's scallops (owner review, 2026-09-24). */
  .site-hero--short { padding-block: calc(var(--rs-space-7) + var(--rs-space-3)) var(--rs-space-6); }
  .site-hero--short .sm-hero__body > .sm-lead { max-inline-size: var(--rs-measure); }
  /* The privacy page's title lines up with its reading column. */
  .site-hero--reading { padding-inline: max(var(--rs-gutter), (100% - var(--rs-width-reading)) / 2); }
  .site-hero--reading .sm-hero__body { gap: var(--rs-space-5); }

  /* ── Three-up cards: the outcomes on /websites/ ─────────────── */
  /* One column until three fit side by side (no 2 + 1 orphan on tablets); side by side, the
     four rows line up across the cards. From home.css (.home-outcomes). */
  .site-trio { grid-template-columns: minmax(0, 1fr); }
  .site-trio > .sm-card > :is(p, ul) { max-inline-size: var(--rs-measure); }
  .site-trio .sm-cluster { flex-direction: column; align-items: flex-start; gap: var(--rs-space-2); }
  @media (min-width: 56em) {
    .site-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site-trio > .sm-card { grid-row: span 4; grid-template-rows: subgrid; }
    .site-trio > .sm-card > * { align-self: start; }
  }

  /* ── Three ways we can help (hub, about): two doors and the session price card ── */
  /* The guide and websites cards are whole links; the session is the design system's price
     card (.sm-price-card, its button poppy through data-expression="offer"), the featured card:
     the only flag, big price and filled button in the row. Phones: one column, in reading
     order. Tablets: the price card on the right, as tall as the two doors stacked on the left
     (focus order stays guide, session, websites). Wide: three across, the price card in the
     middle and a little wider, standing taller than the doors on either side, under its awning. */
  .site-offers { display: grid; gap: var(--rs-space-7) var(--rs-space-5); grid-template-columns: minmax(0, 1fr); }
  .site-offers__door { align-content: start; grid-template-rows: repeat(4, auto) 1fr; }   /* the text cue sits at the card's foot */
  .site-offers__door:has(> .sm-card__media) { grid-template-rows: repeat(5, auto) 1fr; }
  .site-offers__door > :is(p, h3) { max-inline-size: var(--rs-measure); }
  .site-offers__door .sm-card__meta { font-weight: var(--rs-ui-weight); }
  .site-offers__door > .sm-link-action { align-self: end; justify-self: start; }
  .site-offers__door:hover .sm-link-action { text-decoration: underline; }
  /* A door's 16:10 photo runs across its top, inside the card's edge, and the butter icon disc
     sits on the photo's foot like a sticker. */
  .site-offers__door > .sm-card__media { border-radius: calc(var(--rs-feature-radius) - 1.5px) calc(var(--rs-feature-radius) - 1.5px) 0 0; }   /* inside the card's 1.5px edge */
  .site-offers__door > .sm-card__media > img { object-position: var(--rs-media-focus, 50% 50%); }
  .site-offers__door > .sm-card__media + .sm-card__icon { position: relative; z-index: 1; margin-block-start: calc(var(--rs-feature-icon-size) / -2 - var(--rs-space-2) - var(--rs-space-3)); box-shadow: 0 0 0 3px var(--rs-card); }
  .site-offers__featured { align-content: start; }
  .site-offers__featured > * { max-inline-size: var(--rs-measure); }
  .site-offers__featured > .sm-btn { max-inline-size: none; margin-block-start: var(--rs-space-2); }
  .site-offers__title { font-size: var(--rs-step-3); }
  @media (min-width: 40em) {
    .site-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rs-space-5); }
    .site-offers__door { grid-column: 1; }
    .site-offers__featured { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  }
  @media (min-width: 40em) and (max-width: 63.99em) {
    .site-offers__door > .sm-card__media { display: none; }   /* two stacked photo doors would stand twice as tall as the tag */
    .site-offers__door:has(> .sm-card__media) { grid-template-rows: repeat(4, auto) 1fr; }
    .site-offers__door > .sm-card__media + .sm-card__icon { margin-block-start: 0; box-shadow: none; }
  }
  /* Wide: the price card spans three rows; the two doors share the middle one, so they are
     the same height as each other (the taller door's own height, never stretched to the tag's)
     and sit level with the tag's middle. The rows above and below take up the difference. */
  @media (min-width: 64em) {
    .site-offers { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: 1fr auto 1fr; row-gap: 0; }
    .site-offers__door { grid-column: auto; grid-row: 2; }
    .site-offers__featured { grid-column: 2; grid-row: 1 / -1; padding-block: var(--rs-space-7); }
  }

  /* ── Callouts and ticked columns (from home.css) ─────────────── */
  .site-callout { padding: max(var(--rs-space-5), var(--rs-gutter)); }
  /* 13rem: the column floor at which the longest item still fits one line at body size. */
  .site-checklist-cols { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); column-gap: var(--rs-space-5); }

  /* ── Launch packages (from home.css) ─────────────────────────── */
  /* Side by side, the two cards share seven rows (label, flag, title, price, note, benefits,
     button), so titles, prices and buttons line up. Launch Pro has no flag, so its label takes
     the flag's row too. Two columns fit from 2 × 20rem + the 1.5rem gap = 41.5rem. */
  .site-packages { --rs-grid-min: 20rem; gap: var(--rs-space-7) var(--rs-space-5); container-type: inline-size; }
  .site-package { grid-row: span 7; grid-template-rows: subgrid; align-content: start; gap: var(--rs-space-4); padding: max(var(--rs-space-5), var(--rs-gutter)); border-radius: var(--rs-price-radius); }
  .site-package:not(:has(> .sm-price-card__flag)) > .sm-label:first-child { grid-row: span 2; align-self: start; }
  .site-package > * { align-self: start; }
  .site-package > .sm-btn { align-self: end; }
  .site-package .sm-checklist li { padding-block-end: var(--rs-space-2); }
  @container (width < 41.5rem) {
    .site-package { grid-row: auto; grid-template-rows: none; }
    .site-package:not(:has(> .sm-price-card__flag)) > .sm-label:first-child { grid-row: auto; }
  }
  .site-packages-note { text-align: center; }

  /* ── Two-column sections: 5 / 7 on wide screens, stacked below (from home.css) ── */
  .site-duo { display: grid; gap: var(--rs-space-6) var(--rs-space-7); align-items: start; }
  @media (min-width: 60em) {
    .site-duo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .site-duo--main-first { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }   /* contact: the form first, the note beside it */
    .site-sticky, .site-process__media { position: sticky; inset-block-start: calc(var(--rs-target) + var(--rs-space-7)); }
  }
  /* Stacked, the How it works photo stays modest (at most 30rem wide), not full width. */
  @media (max-width: 59.99em) { .site-process__media { max-inline-size: 30rem; } }

  /* The websites close: one button with the quiet link under it, in a white card. */
  .site-close-card { align-self: center; justify-items: start; gap: var(--rs-space-4); padding: max(var(--rs-space-5), var(--rs-gutter)); }
  /* A link that wraps keeps its arrow after the last word; one line is still a full 44px target. */
  .site-close-card .sm-link-action { display: block; padding-block: calc((var(--rs-target) - 1lh) / 2); }

  /* ── Numbered step cards (from home.css, "shared?") ─────────── */
  /* The numbers are part of the copy (01, 02…): the brand's feature-icon disc carries them.
     Phones: the disc sits beside the title, the text runs full width below. Wider: the text
     follows the title. */
  .site-steps { display: grid; gap: var(--rs-space-3); padding: 0; list-style: none; }
  .site-steps > li { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(var(--rs-feature-icon-size), auto) auto; align-items: center; gap: var(--rs-space-2) var(--rs-space-4); }
  .site-steps > li > p { grid-column: 1 / -1; }
  @media (min-width: 30em) {
    .site-steps > li { grid-template-rows: auto auto; align-items: start; }
    .site-steps__num { grid-row: 1 / span 2; }
    .site-steps > li > h3 { margin-block-start: max(0px, (var(--rs-feature-icon-size) - 1lh) / 2); }
    .site-steps > li > p { grid-column: 2; }
  }
  .site-steps h3 { font-size: var(--rs-step-1); }
  .site-steps__num {
    display: grid;
    place-items: center;
    inline-size: var(--rs-feature-icon-size);
    block-size: var(--rs-feature-icon-size);
    border-radius: var(--rs-feature-icon-radius);
    background: var(--rs-feature-icon-bg);
    color: var(--rs-feature-icon-fg);
    font: var(--rs-numeral-weight) var(--rs-step--1) / 1 var(--rs-numeral-font);
    font-variant-numeric: tabular-nums;
  }

  /* ── Hub: the short hero, who we help, the guide splash, About us, tips by email ── */
  /* The short hero (round 3): no picture, so the headline runs wide (two lines on a desktop)
     and the people below show on the first screen. Its actions and "Who we help" below keep a
     clear break (64px: this padding and the band's), so the two don't read as one block. */
  .site-hero--hub h1 { max-inline-size: 19em; }
  .site-hero--hub { padding-block-end: var(--rs-space-6); }
  /* Phones and tablets: a little less air inside the collage, so the first row of faces is on
     the first screen of a 390×844 phone. */
  @media (max-width: 59.99em) { .site-who { gap: var(--rs-space-4); } }

  /* A band that continues the hero's ground: its top padding and the hero's bottom padding
     make the gap. */
  .site-band--after-hero { padding-block-start: var(--rs-space-6); }
  /* Who we help, the true hero: a mosaic of six square photos, each tagged with its trade
     (Shopify's same-size merchant cards, as clean rounded tiles), with no awning above it.
     Phones and tablets: the heading, then the photos (two across, three from a large phone
     up), then the list, so faces come early. Wide: the heading and the list on the left, the
     photos beside them. */
  .site-who { display: grid; grid-template-areas: "head" "mosaic" "list"; gap: var(--rs-space-6); }
  .site-who__head { grid-area: head; }
  .site-who__mosaic { grid-area: mosaic; }
  .site-who__list { grid-area: list; }
  .site-who__list > :is(ul, p) { max-inline-size: var(--rs-measure); }
  @media (min-width: 60em) {
    .site-who { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "head mosaic" "list mosaic"; gap: var(--rs-space-5) var(--rs-space-7); }
    .site-who__mosaic { align-self: center; }
  }
  .site-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rs-space-4); margin: 0; padding: 0; list-style: none; }
  @media (min-width: 36em) { .site-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .site-mosaic > li { position: relative; display: grid; }
  .site-mosaic .sm-media { --rs-media-radius: var(--rs-radius-m); --rs-media-border: 0; --rs-media-shadow: var(--rs-shadow-1); }   /* clean tiles: the photo itself, rounded, with no frame or edge (owner review, 2026-09-24) */
  .site-mosaic__tag { position: absolute; z-index: 1; inset-inline-start: var(--rs-space-3); inset-block-end: var(--rs-space-3); white-space: nowrap; }
  @media (max-width: 22.5em) { .site-mosaic__tag { inset-inline-start: var(--rs-space-2); inset-block-end: var(--rs-space-2); letter-spacing: 0.02em; } }   /* 320: "Consultants" fits its tile on one line */

  /* The free guide's product splash, on the espresso band: the product stack (below) and the
     words. Phones and tablets: the stack first, about half a screen tall, then the words.
     Wide: the stack on the left, the words on the right. */
  .site-splash__grid { display: grid; gap: var(--rs-space-6) var(--rs-space-8); align-items: center; }
  .site-splash__art { --site-stack-size: 26rem; }
  .site-splash .sm-h2 { font-size: var(--rs-step-4); }
  .site-splash__words { justify-items: start; }
  .site-splash__words > :is(.sm-section-head, .sm-lead) { max-inline-size: var(--rs-measure); }
  .site-splash__action { display: grid; justify-items: start; gap: var(--rs-space-3); margin-block-start: var(--rs-space-2); }
  .site-splash__action > .sm-small { color: var(--rs-fg-2); }
  @media (min-width: 60em) {
    .site-splash__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
    .site-splash__art { --site-stack-size: 30rem; }
  }

  /* About us, short: the words beside the three numbers, always three across once they fit
     (no 2 + 1 row beside the words on a small laptop). */
  .site-about { align-items: center; }
  .site-about .sm-lead { max-inline-size: var(--rs-measure); }
  @media (min-width: 36em) { .site-about__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* A short phrase that reads as one word ("one-on-one") never breaks at its hyphens. */
  .site-nowrap { white-space: nowrap; }

  /* A centred close: the heading's underline centres with it. */
  .sm-cta-band .sm-h2::after { margin-inline: auto; }

  /* Tips by email: one white card at reading width, a small extra after the close. The heading
     carries the door cards' butter disc, here with the envelope: beside the words once they
     fit, above them on a small phone. The email field and the button share a row once they
     fit; on a phone they stack, the button last and full width. */
  .site-signup { gap: var(--rs-space-5); padding: max(var(--rs-space-5), var(--rs-gutter)); }
  .site-signup__head { display: grid; justify-items: start; gap: var(--rs-space-3) var(--rs-space-4); }
  .site-signup__icon { display: grid; place-items: center; inline-size: var(--rs-feature-icon-size); block-size: var(--rs-feature-icon-size); border-radius: var(--rs-feature-icon-radius); background: var(--rs-feature-icon-bg); color: var(--rs-feature-icon-fg); }
  .site-signup__icon > svg { inline-size: 1.5rem; block-size: 1.5rem; }
  @media (min-width: 30em) {
    .site-signup__head { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  }
  .site-signup__form { gap: var(--rs-space-3); }
  /* The field and the button are one height: the button's fill plus its ledge (the press below
     it) is exactly the field's height, so their tops and bottoms line up side by side. */
  .site-signup__row { --site-signup-h: 3.25rem; display: grid; gap: var(--rs-space-4); align-items: end; }
  .site-signup__row .sm-input { block-size: var(--site-signup-h); }
  .site-signup__row > .sm-btn { inline-size: 100%; block-size: calc(var(--site-signup-h) - var(--rs-x-press-y)); min-block-size: 0; margin-block-end: var(--rs-x-press-y); }
  @media (min-width: 30em) {
    .site-signup__row { grid-template-columns: minmax(0, 1fr) auto; }
    .site-signup__row > .sm-btn { inline-size: auto; }
  }
  /* The privacy link stands on its own line, not in a sentence: a full 44px target that
     overhangs its line, so the card keeps its spacing (as .site-404__aside does). */
  .site-signup .sm-small a { display: inline-block; padding-block: calc((var(--rs-target) - 1lh) / 2); margin-block: calc((1lh - var(--rs-target)) / 2); color: var(--rs-fg-accent); font-weight: var(--rs-ui-weight); }
  /* The thank-you line: shown after the form's success redirect (/?signup=success), when
     scripts.js marks the card .is-signed-up and the form steps aside. Opening the page at
     #signup-thanks shows it too, with no script. It lands clear of the sticky header. */
  .site-signup:not(.is-signed-up) .site-signup__thanks:not(:target) { display: none; }
  .site-signup.is-signed-up .site-signup__form { display: none; }
  .site-signup__thanks { scroll-margin-block-start: calc(var(--rs-target) + var(--rs-space-6)); }
  .site-signup__thanks:focus { outline: none; }   /* focused by script only, to be read out; never a tab stop */

  /* ── Reading columns (about, privacy, terms) ─────────────────────── */
  .site-prose > :first-child { margin-block-start: 0; }
  .site-prose { max-inline-size: none; }
  .site-prose > :is(p, ul, ol) { max-inline-size: var(--rs-measure); }
  .site-prose a { color: var(--rs-fg-accent); font-weight: var(--rs-ui-weight); }
  /* About: "What we do" and "Why we do this" side by side on a wide screen, stacked below. The
     Edmonton photo closes "Why we do this", under the line about the city. */
  .site-about-cols { display: grid; gap: var(--rs-space-7); align-items: start; }
  @media (min-width: 60em) { .site-about-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rs-space-8); } }
  .site-prose > .sm-media { margin-block-start: var(--rs-space-5); }
  .site-prose .sm-media > img { border-radius: 0; }   /* the frame rounds the photo, not the prose rule for loose images */
  /* Privacy and terms: the reading column after a short title block; each block (the summary
     card, the prose) is a stack row. */
  .site-hero--reading + .sm-band { padding-block-start: var(--rs-space-4); }
  .site-hero--reading .sm-lead a { color: var(--rs-fg-accent); font-weight: var(--rs-ui-weight); }
  .site-reading { gap: var(--rs-space-7); }

  /* ── Tables on phones (websites) ─────────────────────────────── */
  /* The brand table keeps a 32rem floor and scrolls inside its frame. The package table is
     short text in three columns, so on a phone it fits the frame instead: no hidden Launch Pro
     column and no sideways scroll to discover. */
  @media (max-width: 40em) {
    .site-table-fit .sm-table { min-inline-size: 0; }
    .site-table-fit :is(th, td) { padding-inline: var(--rs-space-2); hyphens: auto; overflow-wrap: break-word; }
    .site-table-fit :is(th, td):first-child { padding-inline-start: var(--rs-space-3); }
    .site-table-fit tbody th { hyphens: manual; }   /* the short row names wrap at spaces, not "af-ter" */
    .site-table-fit thead th { letter-spacing: 0; }
  }
  /* A value the owner must fill before the page ships (the publish dates): visible on purpose. */
  .site-placeholder-inline { padding-inline: 0.3em; border: var(--rs-border) dashed var(--rs-warn-text); border-radius: var(--rs-radius-s); background: var(--rs-warn-tint); color: var(--rs-ink); font-weight: var(--rs-ui-weight); }

  /* How we work (About): two by two on a tablet, four across when they fit, one column on a phone. */
  .site-ways { --rs-grid-min: 15rem; align-items: stretch; }
  .site-ways .sm-card__title { font-size: var(--rs-step-1); }

  /* ── Contact ──────────────────────────────────────────────────── */
  .site-form { padding: max(var(--rs-space-5), var(--rs-gutter)); scroll-margin-block-start: var(--rs-space-4); }   /* the form card lands just under the sticky header */
  .site-form .sm-small a { color: var(--rs-fg-accent); font-weight: var(--rs-ui-weight); }
  .site-form .sm-field { align-content: start; }   /* side by side, a field with help text never stretches its neighbour's input */
  /* The status live region stays in the accessibility tree while empty, so the first message is
     announced (as on the guide form); absolute: no extra grid gap above the button. */
  .site-form > .sm-status:empty { display: block; position: absolute; }
  @media (max-width: 22.5em) { .site-form { padding-inline: var(--rs-space-4); } }   /* 320: room for the longest option in the select */
  .site-note { padding: max(var(--rs-space-5), var(--rs-gutter)); }
  /* The photo above the note, one column beside the form (below it on a phone). */
  .site-contact__side { display: grid; gap: var(--rs-space-5); align-content: start; }

  /* ── Privacy ──────────────────────────────────────────────────── */
  .site-summary { padding: max(var(--rs-space-5), var(--rs-gutter)); }
  .site-summary a { color: var(--rs-fg-accent); font-weight: var(--rs-ui-weight); }

  /* ── 404 (from home.css) ─────────────────────────────────────── */
  .sm-hero--center .sm-hero__actions { justify-content: center; }
  .site-404__aside { justify-self: stretch; max-inline-size: var(--rs-measure); margin: var(--rs-space-5) auto 0; text-align: start; }
  .site-404__aside .sm-card__title { font-size: var(--rs-step-1); }
  .site-404__aside a { color: var(--rs-fg-accent); font-weight: var(--rs-ui-weight); }
  /* These links are the page's way out, not words in a sentence: a full 44px target that
     overhangs its line, so the rows keep their spacing (as .sm-masthead--foot does). */
  .site-404__aside li > a:first-child { display: inline-flex; align-items: center; min-block-size: var(--rs-target); margin-block: calc((1lh - var(--rs-target)) / 2); }

  /* ── Websites: the infographic, "What your website does for you" (.site-infographic) ── */
  /* A storefront drawn as a browser window: an awning over the address bar, the page, a sill.
     The drawing is decorative (aria-hidden); two numbered lists carry every word. Phones and
     tablets: the drawing, then the lists, with numbered pins on the window's edge. Wide (the
     figure is 58rem+): the lists sit either side and the drawing's rows are the body's rows
     (subgrid), so each callout sits level with the part it names, whatever its length, and
     points in with a leader. Sizes inside the drawing follow the figure's width (cqi). */
  .site-infographic {
    --ig-stroke: 1.5px;
    --ig-line: var(--ig-stroke) solid var(--rs-ink);
    --ig-leader: var(--rs-ink);
    --ig-pin: 1.75rem;
    --ig-pad: clamp(0.75rem, 3cqi, 1.25rem);                  /* the page's side margin inside the window */
    --ig-stripe: clamp(0.85rem, 3.4cqi, 1.2rem);              /* one awning stripe */
    --ig-tongue: calc(var(--ig-stripe) * 0.55);               /* how far the scallops hang over the address bar */
    --ig-small: clamp(0.7rem, 2.4cqi, 0.875rem);              /* the drawing's small text: address, sign, buttons */
    --ig-chrome-pad: 0.5rem;                                  /* above and below the address pill */
    --ig-bar: 0.375rem;                                       /* a line of pretend text */
    container: site-ig / inline-size;
    display: grid;
    gap: var(--rs-space-6);
  }
  .site-infographic__body { display: grid; gap: var(--rs-space-6); }

  /* The drawing: seven rows (awning, address bar, top of the page, services, trust, next step,
     sill). The frame is its own item behind rows 2–6; the parts sit on it. */
  .site-infographic__art { --ig-pad-in: max(var(--ig-pad), var(--ig-pin) / 2 + 0.4rem); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(7, auto); inline-size: min(100% - var(--ig-pin), 34rem); margin-inline: calc(var(--ig-pin) / 2) auto; color: var(--rs-ink); font-family: var(--rs-font-sans); line-height: 1.2; }   /* --ig-pad-in: the page keeps clear of the pins */
  .site-infographic__art > * { grid-column: 1; }
  .site-infographic__art svg { display: block; fill: none; stroke: currentColor; stroke-width: var(--ig-stroke); stroke-linecap: round; stroke-linejoin: round; }
  .site-infographic__art svg * { vector-effect: non-scaling-stroke; }
  .site-infographic__frame { grid-row: 2 / 7; border: var(--ig-line); border-block-start: 0; border-radius: 0 0 var(--rs-x-radius) var(--rs-x-radius); background: var(--rs-card); }
  .site-infographic__part { position: relative; z-index: 1; }

  /* The awning: forest and white stripes, one scallop per stripe, wider than the window. */
  .site-infographic__awning {
    grid-row: 1; position: relative; z-index: 2;
    block-size: calc(var(--ig-stripe) * 1.9); margin-inline: calc(var(--ig-stripe) * -0.5); margin-block-end: calc(var(--ig-tongue) * -1);
    border-radius: var(--rs-radius-s) var(--rs-radius-s) 0 0;
    background: linear-gradient(var(--rs-brand-deep) 0 0) 0 0 / 100% 0.3rem no-repeat, linear-gradient(90deg, var(--rs-brand) 50%, var(--rs-card) 0) 50% 0 / calc(var(--ig-stripe) * 2) 100%;
    mask-image: linear-gradient(var(--rs-ink) 0 0), radial-gradient(closest-side, var(--rs-ink) 96%, transparent);
    mask-size: 100% calc(100% - var(--ig-tongue)), var(--ig-stripe) calc(var(--ig-tongue) * 2);
    mask-position: 0 0, calc(50% + var(--ig-stripe) / 2) 100%;
    mask-repeat: no-repeat, repeat-x;
  }

  /* The address bar. Its side borders are clear, so the frame's ink edge shows through; a
     taller row adds room under the scallops, never under the bar. */
  .site-infographic__chrome { grid-row: 2; display: flex; flex-wrap: wrap; align-content: flex-end; align-items: center; gap: var(--rs-space-3); padding: calc(var(--ig-tongue) + var(--ig-chrome-pad)) var(--ig-pad-in) var(--ig-chrome-pad); border-inline: var(--ig-stroke) solid transparent; border-block-end: var(--ig-line); background: var(--rs-bg-2) padding-box; }
  .site-infographic__dots { display: flex; gap: 0.3rem; }
  .site-infographic__dots > span { inline-size: 0.6rem; block-size: 0.6rem; border: var(--ig-line); border-radius: 50%; background: var(--rs-card); }
  .site-infographic__dots > span:first-child { background: var(--rs-hi); }
  .site-infographic__address { display: flex; flex: 1; align-items: center; gap: 0.35em; min-inline-size: 0; padding: 0.35em 0.8em; border: var(--ig-line); border-radius: 999px; background: var(--rs-card); font-size: var(--ig-small); font-weight: 700; white-space: nowrap; }
  .site-infographic__address svg { inline-size: 1.1em; block-size: 1.1em; color: var(--rs-brand); }

  /* The top of the page: the name with the brand's forest underline and a line of text; the
     "Open" sign hangs from the address bar on two strings (hosting keeps the shop open). */
  .site-infographic__intro { grid-row: 3; display: flex; align-items: stretch; justify-content: space-between; gap: var(--rs-space-3); padding: 0 var(--ig-pad-in); }
  .site-infographic__intro-text { display: grid; align-content: center; gap: 0.5rem; padding-block: 1.1rem 1rem; }
  .site-infographic__name { font: 800 clamp(1.15rem, 5cqi, 1.75rem) / 1.05 var(--rs-font-display); letter-spacing: -0.03em; }
  .site-infographic__name::after { content: ""; display: block; inline-size: 2.2em; block-size: 3px; margin-block-start: 0.3em; border-radius: 999px; background: var(--rs-brand); }
  .site-infographic__lines { display: grid; gap: 0.35rem; }
  .site-infographic__lines > span { block-size: var(--ig-bar); border-radius: 999px; background: var(--rs-line-strong); }
  .site-infographic__lines > span:last-child { inline-size: 62%; }
  .site-infographic__intro .site-infographic__lines { inline-size: clamp(7rem, 30cqi, 11rem); }
  .site-infographic__sign { display: flex; flex: none; flex-direction: column; align-items: center; font-size: var(--ig-small); }
  .site-infographic__sign svg { flex: 1; inline-size: 3.75em; min-block-size: 0.75rem; }
  .site-infographic__sign::after { content: ""; flex: 1; }   /* as tall as the strings, so the board stays centred in the row */
  .site-infographic__sign-board { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.35em 0.65em; border: var(--ig-line); border-radius: var(--rs-radius-s); background: var(--rs-card); box-shadow: 0 3px 0 var(--rs-line-strong); color: var(--rs-brand); font: 800 1em / 1 var(--rs-font-display); letter-spacing: 0.1em; text-transform: uppercase; }
  .site-infographic__sign-board::before { content: ""; inline-size: 0.5em; block-size: 0.5em; border-radius: 50%; background: var(--rs-accent); }   /* the open light: the drawing's one poppy dot */

  /* Services: a short heading and three tiles. */
  .site-infographic__services { grid-row: 4; display: grid; gap: 0.6rem; padding: 0.75rem var(--ig-pad-in); }
  .site-infographic__kicker { inline-size: 4.5rem; block-size: var(--ig-bar); border-radius: 999px; background: var(--rs-brand); }
  .site-infographic__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .site-infographic__tiles > span { display: grid; gap: 0.45rem; padding: 0.6rem; border: var(--ig-stroke) solid var(--rs-line-strong); border-radius: var(--rs-radius-s); }
  .site-infographic__tiles > span::before { content: ""; inline-size: 1.4rem; block-size: 1.4rem; border: var(--ig-line); border-radius: 50%; background: var(--rs-hi); }
  .site-infographic__tiles > span::after { content: ""; block-size: calc(var(--ig-bar) * 2 + 0.3rem); background: linear-gradient(var(--rs-line-strong) 0 0) 0 0 / 100% var(--ig-bar) no-repeat, linear-gradient(var(--rs-line-strong) 0 0) 0 100% / 60% var(--ig-bar) no-repeat; }

  /* Trust: a photo of your work and a five-star review. */
  .site-infographic__trust { grid-row: 5; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0.5rem; padding: 0.75rem var(--ig-pad-in); }
  .site-infographic__photo { min-block-size: 4.75rem; overflow: hidden; border: var(--ig-line); border-radius: var(--rs-radius-s); background: var(--rs-brand-tint); }
  .site-infographic__photo svg { inline-size: 100%; block-size: 100%; }
  .site-infographic__sun { fill: var(--rs-hi); }
  .site-infographic__hill { fill: var(--rs-brand); }
  .site-infographic__review { display: grid; align-content: center; gap: 0.5rem; padding: 0.6rem; border: var(--ig-stroke) solid var(--rs-line-strong); border-radius: var(--rs-radius-s); }
  .site-infographic__art .site-infographic__stars { inline-size: min(100%, 5.5rem); fill: var(--rs-hi); stroke-width: 1.2px; }   /* a finer stroke keeps small stars crisp */
  .site-infographic__who { display: flex; align-items: center; gap: 0.4rem; }
  .site-infographic__who::before { content: ""; flex: none; inline-size: 1.1rem; block-size: 1.1rem; border: var(--ig-line); border-radius: 50%; background: var(--rs-brand-tint); }
  .site-infographic__who::after { content: ""; inline-size: 45%; block-size: var(--ig-bar); border-radius: 999px; background: var(--rs-ink-3); }

  /* The next step: a mint panel, a forest "Book now" (a pointer on it) and a "Call" button. */
  .site-infographic__next { grid-row: 6; padding: 0.5rem var(--ig-pad-in) var(--ig-pad); }
  .site-infographic__cta { display: grid; justify-items: start; gap: 0.6rem; padding: 0.75rem; border-radius: var(--rs-radius-s); background: var(--rs-brand-tint); }
  .site-infographic__buttons { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .site-infographic__btn { padding: 0.4em 0.95em; border: var(--ig-stroke) solid var(--rs-brand); border-radius: 999px; background: var(--rs-brand); box-shadow: 0 3px 0 var(--rs-brand-deep); color: var(--rs-card); font-size: var(--ig-small); font-weight: 700; white-space: nowrap; }
  .site-infographic__btn:first-child { position: relative; }
  .site-infographic__btn--ghost { border-color: var(--rs-ink); background: var(--rs-card); box-shadow: none; color: var(--rs-ink); }
  .site-infographic__art .site-infographic__cursor { position: absolute; inset-inline-end: -0.6em; inset-block-end: -1.1em; inline-size: 1.25em; fill: var(--rs-card); color: var(--rs-ink); }

  /* The sill the window stands on. */
  .site-infographic__sill { grid-row: 7; block-size: 0.5rem; margin-inline: calc(var(--ig-stripe) * -0.5); border-radius: 999px; background: var(--rs-brand); }

  /* Numbered pins on the window's edge (1–4 left, 5 and 6 right) and the lists' numbers: the
     same butter disc with an ink ring. */
  .site-infographic__pin { position: absolute; z-index: 3; inset-block-start: 50%; inset-inline-start: calc(var(--ig-pin) / -2); translate: 0 -50%; }
  .site-infographic__pin--end { inset-inline: auto calc(var(--ig-pin) / -2); }
  .site-infographic__chrome > .site-infographic__pin { inset-block-start: calc(50% + var(--ig-tongue) / 2); }   /* level with the pill, under the scallops */
  :is(.site-infographic__pin, .site-infographic__num) { display: grid; place-items: center; inline-size: var(--ig-pin); block-size: var(--ig-pin); border: var(--ig-line); border-radius: 50%; background: var(--rs-hi); color: var(--rs-ink); font: var(--rs-numeral-weight) var(--rs-step--1) / 1 var(--rs-numeral-font); font-variant-numeric: tabular-nums; }
  .site-infographic__num { --ig-pin: 2rem; }

  /* The lists. */
  .site-infographic__group { display: grid; align-content: start; gap: var(--rs-space-4); }
  .site-infographic__list { display: grid; gap: var(--rs-space-4); margin: 0; padding: 0; list-style: none; }
  .site-infographic__list > li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--rs-space-3); }
  .site-infographic__list strong { display: block; font: var(--rs-x-heading-weight) var(--rs-step-1) / 1.2 var(--rs-x-heading-font); letter-spacing: var(--rs-x-heading-tracking); }
  .site-infographic__list p { margin-block-start: var(--rs-space-1); color: var(--rs-fg-2); font-size: var(--rs-step--1); }
  .site-infographic__notes { display: grid; justify-items: start; gap: var(--rs-space-2); }
  .site-infographic__notes > p { font-size: var(--rs-step--1); font-weight: var(--rs-ui-weight); }
  .site-infographic__notes .sm-pill { background: var(--rs-card); }

  /* Tablets: the drawing centred, the two lists side by side under it. */
  @container site-ig (min-width: 36rem) {
    .site-infographic__body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rs-space-6) var(--rs-space-7); }
    .site-infographic__art { grid-column: 1 / -1; margin-inline: auto; }
  }

  /* Wide: the headings, then the drawing's seven rows, shared by the drawing and both lists. */
  @container site-ig (min-width: 58rem) {
    .site-infographic__body { --ig-gap: clamp(2rem, 3.5cqi, 3.5rem); grid-template-columns: [see] minmax(0, 1fr) [art] minmax(0, 1.45fr) [set] minmax(0, 1fr); grid-template-rows: repeat(8, auto); gap: 0 var(--ig-gap); }
    .site-infographic__art { --ig-pad-in: var(--ig-pad); grid-column: art; grid-row: 2 / -1; grid-template-rows: subgrid; inline-size: auto; margin: 0; }
    .site-infographic__pin { display: none; }   /* the leaders do their job */
    .site-infographic__group { grid-row: 1 / -1; grid-template-rows: subgrid; gap: 0; }
    .site-infographic__group--see { grid-column: see; }
    .site-infographic__group--set { grid-column: set; }
    .site-infographic__group > :is(h3, h4) { grid-row: 1; align-self: end; padding-block-end: var(--rs-space-2); }
    .site-infographic__group--see > :is(h3, h4) { grid-row: 1 / 4; }   /* each heading sits just above its first callout */
    .site-infographic__group > .site-infographic__list { grid-template-rows: subgrid; gap: 0; }
    .site-infographic__group--see > .site-infographic__list { grid-row: 4 / 8; }
    .site-infographic__group--set > .site-infographic__list { grid-row: 2 / 5; }
    .site-infographic__notes { grid-row: 5 / 8; align-self: end; padding-block-end: var(--rs-space-3); }   /* level with the next step */
    .site-infographic__list > li { align-self: center; align-items: center; padding-block: var(--rs-space-3); }
    /* The leader: from the callout, across the gap and the window's edge, to a dot on the part. */
    .site-infographic__list > li::after {
      content: ""; position: absolute; z-index: 4; inset-block-start: 50%; inset-inline-start: 100%;
      inline-size: calc(var(--ig-gap) + var(--ig-pad)); block-size: 0.5rem; translate: 0 -50%;
      background: radial-gradient(closest-side, var(--ig-leader) 92%, transparent) 100% 50% / 0.5rem 0.5rem no-repeat, linear-gradient(var(--ig-leader) 0 0) 0 50% / calc(100% - 0.25rem) var(--ig-stroke) no-repeat;
      transform-origin: 0 50%; pointer-events: none;
    }
    .site-infographic__group--set > .site-infographic__list > li::after { inset-inline: auto 100%; background-position: 0 50%, 100% 50%; transform-origin: 100% 50%; }
    /* 5 spans the awning and the address bar, so the bar stays slim. Its leader is set from the
       bar's bottom edge: the bar's padding and edge, then half the address pill. */
    .site-infographic__group--set > .site-infographic__list > li:first-child { grid-row: 1 / span 2; align-self: end; padding-block: 0; }
    .site-infographic__group--set > .site-infographic__list > li:first-child::after { inset-block: auto calc(var(--ig-chrome-pad) + var(--ig-stroke) * 2 + var(--ig-small) * 0.95); translate: 0 50%; }
  }
  /* Forced colours drop background images: keep the leaders (in the text colour) and the awning. */
  @media (forced-colors: active) {
    .site-infographic { --ig-leader: CanvasText; }
    .site-infographic__list > li::after, .site-infographic__awning { forced-color-adjust: none; }
  }
  /* A one-time reveal: the leaders draw in after the figure fades up (scripts.js adds .is-visible
     to [data-reveal]). No motion without scripts or when reduced motion is asked for. */
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .site-infographic[data-reveal] .site-infographic__list > li::after { transition: scale 500ms var(--rs-ease) 450ms; }
    .site-infographic[data-reveal]:not(.is-visible) .site-infographic__list > li::after { scale: 0 1; }
  }

  /* ── Product stack: the free guide as a thing you can hold (.site-product-stack) ── */
  /* The PDF's cover in front, pages 2 and 3 fanned out behind it so their edges and corners
     show there's more inside. Markup: three <picture>s in paint order (back page, middle page,
     cover), WebP with a JPEG fallback, from public/assets/guide/ (SOURCES.md there). The back
     pages are decorative (alt=""). Every offset is a share of the stack's own width, so it
     scales as one piece, stays sharp (1000/500 and 800/400 sources) and never leaves its box,
     hover included: no sideways scroll at 320. The cover is 66% of the stack; the rest is the
     fan. Set --site-stack-size for a bigger or smaller stack (and the images' sizes with it).
     Works on cream, tint and espresso bands: the ink edge (the 1.5px line photos and cards
     use) holds the cream cover apart from white pages and a cream ground, and the pages
     themselves carry it on a dark ground. */
  .site-product-stack {
    --stack-edge: 1.5px;
    --stack-radius: calc(var(--rs-radius-s) * 0.4);            /* paper, not a card */
    --stack-spread: 1;                                          /* the hover fans the pages a little wider */
    display: grid; grid-template-columns: 66%; place-content: center;
    inline-size: min(100%, var(--site-stack-size, 34rem)); aspect-ratio: 1 / 1.02; margin-inline: auto;
  }
  .site-product-stack > picture { display: contents; }
  .site-product-stack :where(img) {                             /* one class of weight, so the page modifiers below win */
    grid-area: 1 / 1; inline-size: 100%; block-size: auto;
    border-radius: var(--stack-radius); background: var(--rs-card);
    box-shadow: 0 0 0 var(--stack-edge) var(--rs-ink), var(--rs-shadow-2);
    translate: calc(var(--stack-x, 0%) * var(--stack-spread)) var(--stack-y, 0%);
    rotate: calc(var(--stack-turn, 0deg) * var(--stack-spread));
  }
  .site-product-stack__back { --stack-x: 16%; --stack-y: -3%; --stack-turn: 5deg; }      /* page 3, up and right: the prompt box's edge */
  .site-product-stack__mid { --stack-x: -17%; --stack-y: 4%; --stack-turn: -5deg; }      /* page 2, left: "Start here" and the numbered steps; low enough that its top corner never peeks over the cover's top edge */
  /* The cover sits on one more sheet (a white edge with its own ink line, down and to the
     right): the pile's thickness, drawn the Main Street way rather than a blurred glow. */
  .site-product-stack__cover {
    --stack-turn: -1deg;
    box-shadow: 0 0 0 var(--stack-edge) var(--rs-ink), 3px 4px 0 0 var(--rs-card), 3px 4px 0 var(--stack-edge) var(--rs-ink), var(--rs-shadow-3);
  }
  /* On hover the pages fan a little wider and the cover lifts, only where there is a mouse
     and motion is welcome. 1.1 is the widest fan that still fits the box. */
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .site-product-stack :where(img) { transition: translate 400ms var(--rs-ease), rotate 400ms var(--rs-ease); }
    .site-product-stack:hover { --stack-spread: 1.1; }
    .site-product-stack:hover .site-product-stack__cover { --stack-y: -1.5%; }
  }
  @media (forced-colors: active) { .site-product-stack :where(img) { outline: var(--stack-edge) solid CanvasText; } }   /* shadows drop out: keep each sheet's edge */
}