/**
 * ── THE MARKETING PAGES, IN THE HOMEPAGE'S OWN CLOTHES ──────────────────────────────────────────
 *
 * "Also the design colors thinhs like our homepage so its inline our header our footer. Our logo."
 *
 * This is the SECOND stylesheet on a marketing page. `newhome.css` is the first, and it is loaded
 * unchanged: the body carries `n-body`, the page carries `n-frame`, the bar is `n-hdr`/`n-bar` and
 * the footer is `n-foot` — the same classes, the same ground (#0A0A0A), the same accent (#C87F5E),
 * the same two faces. Not a copy of them. A copy is a second answer to "what colour is Clay", and
 * within a month the two disagree and one of them is on 190 pages.
 *
 * So everything here is what a marketing page has and the homepage does not: the sections a page
 * is composed of. Namespaced `s-`, because `n-` belongs to the page that owns it.
 *
 * ── AND EVERY PAGE IS A DIFFERENT COMPOSITION ───────────────────────────────────────────────────
 *
 * "to me all those seo pages look the same i really all want them to be different and really
 *  helpful not pseo.. you know what i mean?"
 *
 * One shell with a fixed order of six sections is what "they all look the same" IS. The fix is not
 * a second shell, it is a KIT: a dozen section types, and each page names the ones its subject
 * actually needs, in the order that subject wants them. A competitor page opens on the honest
 * paragraph and a table; a trade page opens on a photograph of that trade; a feature page opens on
 * the feature working. That is a real difference, and it is decided by the SUBJECT rather than by
 * a shuffle — the same rule the site's own bands obey (`fit()` in lib/designs/dials.js).
 */

/* ── the column ────────────────────────────────────────────────────────────────────────────── */
.s-wrap { width: min(1160px, 100% - 40px); margin: 0 auto; }
.s-narrow { width: min(760px, 100% - 40px); margin: 0 auto; }
.s-sec { padding: clamp(52px, 7cqw, 104px) 0; }
.s-sec.s-tight { padding: clamp(34px, 4.5cqw, 64px) 0; }

/**
 * A BAND IS A GROUND, and the page alternates between two of them. The homepage does the same
 * thing with `n-band`; a marketing page has more sections than the homepage and needs the seam to
 * read, or twelve sections in a row are one long grey scroll.
 */
.s-band { background: #101010; border-block: 1px solid rgba(255,255,255,0.06); }
.s-band-w { background: #14120F; border-block: 1px solid rgba(200,127,94,0.16); }

.s-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 10px;
  border-radius: 999px; background: rgba(200,127,94,0.12); border: 1px solid rgba(200,127,94,0.28);
  color: #E0A583; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.s-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: #C87F5E; }

.s-h2 { font-family: "Bricolage Grotesque", Figtree, sans-serif; font-weight: 700;
  font-size: clamp(27px, 3.4cqw, 42px); line-height: 1.08; letter-spacing: -0.025em;
  margin: 0 0 14px; text-wrap: balance; }
.s-h3 { font-family: "Bricolage Grotesque", Figtree, sans-serif; font-weight: 700;
  font-size: 18px; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 7px; }
.s-note { margin: 0 0 30px; font-size: 16px; line-height: 1.6; color: #A6A19B; max-width: 62ch; }
.s-lede { font-size: clamp(17px, 1.6cqw, 20px); line-height: 1.62; color: #D7D2CC; max-width: 68ch; margin: 0; }
.s-p { font-size: 16.5px; line-height: 1.68; color: #A6A19B; max-width: 68ch; margin: 0 0 16px; }
.s-p b, .s-p strong { color: #EDE9E4; font-weight: 600; }
.s-p:last-child { margin-bottom: 0; }

/* ── THE HEAD ──────────────────────────────────────────────────────────────────────────────── */
.s-hero { padding: clamp(40px, 6cqw, 92px) 0 clamp(30px, 4cqw, 56px); }
.s-hero-in { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4cqw, 72px);
  align-items: center; }
.s-hero-l > * + * { margin-top: 20px; }
.s-h1 { font-family: "Bricolage Grotesque", Figtree, sans-serif; font-weight: 700;
  font-size: clamp(34px, 5.2cqw, 62px); line-height: 1.02; letter-spacing: -0.035em;
  margin: 0; text-wrap: balance; }
/* one word of the headline in the accent, so the shape of the sentence is the design */
.s-h1 em { font-style: normal; color: #C87F5E; }

/* THE HERO'S PICTURE IS A REAL PHOTOGRAPH OF THAT TRADE, from our own library — never a stranger's
   CDN and never a stock-photo watermark. A page whose library has nothing for it draws no picture
   rather than the wrong one, which is the same rule the generator's own photo plan follows. */
.s-shot { position: relative; border-radius: 22px; overflow: hidden; background: #171512;
  border: 1px solid rgba(255,255,255,0.08); aspect-ratio: 4/3; }
.s-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-shot::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.55), transparent 52%); pointer-events: none; }
.s-shot-cap { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex;
  align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: #fff; }
.s-shot-cap i { width: 7px; height: 7px; border-radius: 50%; background: #7FDCA9; flex: none; }

/**
 * …AND WHERE THE LIBRARY HAS NO PHOTOGRAPH OF THIS SUBJECT, THE HEAD SHOWS THE PRODUCT.
 *
 * A live `/demo/frame` in the same 4/3 box, mounted by the same `mountShots` the examples rail
 * uses (public/seo.js). The box the script measures has to FILL the frame, so it is taken out of
 * the rail's own 4/3 and pinned to the edges of this one — otherwise there are two aspect ratios
 * fighting and the frame is sized against the wrong one.
 */
.s-shot-live .s-ex-shot { position: absolute; inset: 0; aspect-ratio: auto; background: none; }
.s-shot-live iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0;
  pointer-events: none; }
/**
 * AND THE CAPTION CARRIES ITS OWN GROUND HERE. Over a photograph a gradient is enough; over a live
 * page it is not, because what the label is lying on is somebody's WEBSITE and the foot of one of
 * those is as likely to be white paper as anything. A gradient tuned to be readable over white is
 * a black bar over a dark theme. A pill is right over both.
 */
.s-shot-live::after { background: linear-gradient(to top, rgba(10,10,10,0.55), transparent 30%); }
.s-shot-live .s-shot-cap { right: auto; max-width: calc(100% - 28px); left: 14px; bottom: 12px;
  padding: 7px 13px; border-radius: 999px; background: rgba(10,10,10,0.74);
  backdrop-filter: blur(7px); }

/* THE CENTRED HEAD — the one a page draws when it has neither. Everything on it is centred,
   INCLUDING the search box, which stayed at the left edge under a centred headline because its
   own `max-width` is a width and not an alignment. "this is not centered.." */
.s-mid { text-align: center; }
.s-mid .s-lede, .s-mid .s-cta-in, .s-mid .s-note { margin-inline: auto; }
.s-mid .s-eyebrow { justify-content: center; }

/* ── THE SEARCH BOX, on every page, because it is the one thing to do here ──────────────────── */
.s-cta { display: block; }
.s-cta-in { display: flex; align-items: center; gap: 8px; padding: 7px 7px 7px 16px;
  background: #FFFFFF; border-radius: 999px; max-width: 520px; }
.s-cta-in svg { width: 19px; height: 19px; color: #57534E; flex: none; }
.s-cta-in input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none;
  font-size: 16px; color: #0A0A0A; padding: 12px 2px; }
.s-cta-go { flex: none; border: 0; border-radius: 999px; padding: 13px 22px; background: #0A0A0A;
  color: #fff; font-size: 15px; font-weight: 600; }
.s-cta-go:hover { background: #262220; }
.s-cta-note { margin-top: 11px; font-size: 13.5px; color: #8B857F; }

/* ── STEPS ─────────────────────────────────────────────────────────────────────────────────── */
.s-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.s-step { padding: 26px 24px 28px; border-radius: 20px; background: #161412;
  border: 1px solid rgba(255,255,255,0.07); position: relative; }
.s-step b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: rgba(200,127,94,0.16); color: #E0A583; font-size: 14px; font-weight: 700;
  margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.s-step p { margin: 0; font-size: 15px; line-height: 1.6; color: #A6A19B; }

/* ── A TICKED LIST ─────────────────────────────────────────────────────────────────────────── */
.s-ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; }
.s-tick { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.5;
  color: #D7D2CC; }
.s-tick i { flex: none; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 7px; background: rgba(18,183,106,0.15); color: #12B76A; margin-top: 1px; }
.s-tick svg { width: 13px; height: 13px; }

/* ── CARDS ─────────────────────────────────────────────────────────────────────────────────── */
.s-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 16px; }
.s-card { padding: 24px 22px 26px; border-radius: 20px; background: #161412;
  border: 1px solid rgba(255,255,255,0.07); }
.s-card p { margin: 0; font-size: 14.8px; line-height: 1.58; color: #A6A19B; }
.s-card-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: rgba(255,255,255,0.06); color: #E0A583; margin-bottom: 15px; }
.s-card-ic svg { width: 19px; height: 19px; }
/**
 * A CARD WITH A PHOTOGRAPH — the trade pages' own shape.
 *
 * EVERY PICTURE IS THE SAME HEIGHT, AND THAT IS WHY `flex: none` IS ON THE FIGURE. A row of cards
 * is one object repeated (see docs/design-rules.md), and the thing that says so is the title
 * starting at the same line in each. It did not: the card is a flex column stretched by the grid
 * to the tallest card in the row, and a figure that can flex absorbed whatever slack its own card
 * had left over — so a card with a short caption grew its picture 11px taller than its neighbour
 * and dropped its heading 11px lower. Reported twice on the same day, from two pages: "one now the
 * image is way smaller.. so text is off not in line with others cards" and "cards need to be
 * better inline with each other .. on most seo pages".
 *
 * The figure is now exactly 16/10 of the card's width in every card, the body takes the slack, and
 * the headings sit on one line whatever the copy under them does.
 */
.s-card.s-card-pic { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* `min-height: 0` is the other half: a flex item's automatic minimum is its CONTENT, and the
   content is a photograph whose own ratio is whatever the library holds — a 3:2 shot forced the
   figure 11px past the 16/10 it was asked for. `overflow: hidden` so the crop happens here. */
.s-card-pic figure { margin: 0; flex: none; min-height: 0; overflow: hidden;
  aspect-ratio: 16/10; background: #0F0E0C; }
.s-card-pic figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-card-pic .s-card-b { flex: 1 1 auto; padding: 20px 20px 22px; }

/**
 * ── THE TOOLS THIS TRADE WOULD SWITCH ON ───────────────────────────────────────────────────────
 *
 * A row of links that are cards: the name, what it does in one line, and an arrow — because every
 * one of them IS a page, and a card that is a link has to look like one or nobody presses it.
 * Auto-fit at 236px so four sit across a desk, two on a tablet and one on a phone, and the arrow
 * is pinned to the floor of the card so it is on the same line whatever the copy above it does.
 */
/* FOUR, AND THE COLUMNS DIVIDE IT AT EVERY WIDTH — four, two, one. `auto-fit` would give three at
   a tablet and leave the fourth alone, which is the "no gaps" rule broken by the one thing that
   was supposed to keep it. `toolsFor` in lib/content.js is the other half: the list is always 4. */
.s-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .s-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.s-tool { display: flex; flex-direction: column; gap: 7px; padding: 19px 20px 20px;
  border-radius: 18px; background: #161412; border: 1px solid rgba(255,255,255,0.07);
  color: inherit; }
.s-tool:hover { border-color: rgba(200,127,94,0.45); background: #191614; }
/* the arrow sits ON the name's line, not at the floor of the card: the grid stretches every card
   to the tallest and a floor-pinned arrow leaves a hole in the middle of the short ones */
.s-tool-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.s-tool-h i { font-style: normal; flex: none; font-size: 15px; color: #C87F5E; }
.s-tool-n { font-family: "Bricolage Grotesque", Figtree, sans-serif; font-weight: 700;
  font-size: 16.5px; line-height: 1.2; letter-spacing: -0.015em; color: #EDE9E4; }
.s-tool-l { font-size: 14.4px; line-height: 1.5; color: #A6A19B; }

/**
 * ── THE COMPARISON TABLE ───────────────────────────────────────────────────────────────────────
 *
 * "this design is very bad.. example: https://clay.site/linktree-alternative"
 *
 * AND THE REASON WAS ONE MISSING RULE: nothing sized the tick. An inline <svg> with a viewBox and
 * no width is as wide as its box lets it be, so the 20×20 glyph rendered at 132px and every row of
 * the table was 167px tall — a nine-row table nine hundred pixels longer than it should be, with
 * one enormous green tick per row and the sentence it belongs to marooned at the left. Measured at
 * 1440 before the fix: 47px header, 167px rows, 132px ticks.
 *
 * Everything else here is the same table, drawn properly now that the row is a row: the two
 * verdict columns are the width of the words in them, ours is tinted the accent so the eye knows
 * which side is which without reading the header twice, and a row lights on hover.
 */
.s-cmp { border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,0.09);
  background: #141210; }
.s-cmp-r { --pad: 13px; display: grid; grid-template-columns: 1fr 116px 116px;
  align-items: center; gap: 10px; padding: var(--pad) 20px;
  border-top: 1px solid rgba(255,255,255,0.06); }
.s-cmp-r:first-child { border-top: 0; }
.s-cmp-h { --pad: 12px; background: rgba(255,255,255,0.04); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #8B857F; }
.s-cmp-h .s-us { color: #E0A583; }
.s-cmp-f { font-size: 15.3px; line-height: 1.4; color: #D7D2CC; }
.s-cmp-v { display: flex; align-items: center; justify-content: center; min-height: 26px;
  text-align: center; font-size: 14px; color: #8B857F; font-weight: 600; }
/* THE TICK IS 19 PIXELS. Nothing said so, and an inline svg with no width fills its column. */
.s-cmp-v svg { width: 19px; height: 19px; flex: none; }
.s-cmp-v.y { color: #12B76A; }
.s-cmp-v.n { color: #57534E; font-size: 17px; }
/* OUR column is tinted for its WHOLE HEIGHT, so which side is which is a fact about the table
   rather than something the reader carries down from the header row. The cell stretches past the
   row's own padding so the stripe is continuous — tinting the cell inside its padding gives a
   column of separate pills, which reads as eight buttons rather than as one column. */
.s-cmp-r > *:nth-child(2) { background: rgba(200,127,94,0.07); align-self: stretch;
  margin-block: calc(-1 * var(--pad)); padding-block: var(--pad); }
.s-cmp-r:nth-child(odd) { background: rgba(255,255,255,0.014); }
.s-cmp-r:not(.s-cmp-h):hover { background: rgba(255,255,255,0.04); }

/* ── A NUMBER, SAID ONCE ───────────────────────────────────────────────────────────────────── */
.s-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.s-stat { padding: 26px 22px; border-radius: 20px; background: #161412;
  border: 1px solid rgba(255,255,255,0.07); }
.s-stat b { display: block; font-family: "Bricolage Grotesque", Figtree, sans-serif;
  font-size: clamp(30px, 3.4cqw, 42px); line-height: 1; letter-spacing: -0.03em; color: #fff;
  margin-bottom: 9px; font-variant-numeric: tabular-nums; }
.s-stat span { font-size: 14.5px; line-height: 1.5; color: #A6A19B; }

/* ── A PHOTOGRAPH STRIP ────────────────────────────────────────────────────────────────────── */
.s-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.s-strip figure { margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 1;
  background: #141210; border: 1px solid rgba(255,255,255,0.06); }
.s-strip figure:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }
.s-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── QUESTIONS ─────────────────────────────────────────────────────────────────────────────── */
.s-faq { border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,0.09);
  background: #141210; }
.s-faq details { border-top: 1px solid rgba(255,255,255,0.06); }
.s-faq details:first-child { border-top: 0; }
.s-faq summary { list-style: none; cursor: pointer; padding: 19px 22px; font-size: 16.5px;
  font-weight: 600; color: #EDE9E4; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after { content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2px solid #8B857F; border-bottom: 2px solid #8B857F; transform: rotate(45deg);
  margin-top: -4px; transition: transform .2s ease; }
.s-faq details[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.s-faq details p { margin: -4px 22px 20px; font-size: 15.6px; line-height: 1.65; color: #A6A19B;
  max-width: 72ch; }

/* ── THE EXAMPLES RAIL ─────────────────────────────────────────────────────────────────────── */
.s-exrail { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.s-ex { display: block; text-align: left; padding: 0; border-radius: 20px; overflow: hidden;
  background: #161412; border: 1px solid rgba(255,255,255,0.08); color: inherit; }
.s-ex:hover { border-color: rgba(200,127,94,0.5); }
.s-ex-shot { display: block; aspect-ratio: 4/3; background: #0F0E0C; position: relative;
  overflow: hidden; }
.s-ex-shot iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0;
  pointer-events: none; }
.s-ex-b { display: block; padding: 14px 16px 16px; }
.s-ex-dom { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600;
  color: #EDE9E4; }
.s-ex-dom i { width: 6px; height: 6px; border-radius: 50%; background: #7FDCA9; flex: none; }
.s-ex-pro { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 7px; border-radius: 6px; background: rgba(200,127,94,0.18); color: #E0A583; }
.s-ex-tr { display: block; margin-top: 4px; font-size: 13px; color: #8B857F; }

.s-exveil { position: fixed; inset: 0; z-index: 300; background: rgba(4,4,6,0.72);
  backdrop-filter: blur(5px); }
.s-exmodal { position: fixed; inset: 0; z-index: 301; display: grid; place-items: center;
  padding: 18px; }
.s-exmodal-in { width: min(1080px, 100%); height: min(84vh, 900px); display: flex;
  flex-direction: column; border-radius: 22px; overflow: hidden; background: #141210;
  border: 1px solid rgba(255,255,255,0.12); }
.s-exmodal-top { display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08); }
.s-exmodal-h { min-width: 0; display: flex; flex-direction: column; }
.s-exmodal-h b { font-size: 15px; color: #fff; }
.s-exmodal-h span { font-size: 12.5px; color: #8B857F; }
.s-exmodal-frame { flex: 1 1 auto; min-height: 0; display: grid; place-items: center;
  background: #0A0A0A; overflow: hidden; }
.s-exmodal-frame iframe { border: 0; width: 100%; height: 100%; background: #fff;
  transition: width .42s cubic-bezier(.22,1,.36,1), border-radius .42s ease; }
.s-exmodal-frame.phone iframe { width: 400px; border-radius: 18px; }
.s-exmodal-foot { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.08); }
.s-exdev { display: flex; gap: 4px; margin-left: auto; padding: 3px; border-radius: 999px;
  background: rgba(255,255,255,0.06); }
.s-exdev button { border: 0; background: none; border-radius: 999px; padding: 7px 11px;
  color: #8B857F; display: grid; place-items: center; }
.s-exdev button svg { width: 17px; height: 17px; }
.s-exdev button.on { background: rgba(255,255,255,0.12); color: #fff; }
.s-x { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 0;
  border-radius: 50%; background: rgba(255,255,255,0.08); color: #fff; font-size: 19px; }
.s-x:hover { background: rgba(255,255,255,0.16); }

/* ── THE CLOSE ─────────────────────────────────────────────────────────────────────────────── */
.s-close { text-align: center; padding: clamp(56px, 7cqw, 108px) 0; }
.s-close .s-cta-in { margin-left: auto; margin-right: auto; }
.s-close .s-h2 { margin-bottom: 10px; }
.s-close .s-note { margin-left: auto; margin-right: auto; margin-bottom: 26px; }

/* ── INTERNAL LINKS — every page points at the ones next to it ─────────────────────────────── */
.s-links { display: flex; flex-wrap: wrap; gap: 9px; }
.s-links a { padding: 9px 15px; border-radius: 999px; font-size: 14px; font-weight: 500;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); color: #D7D2CC; }
.s-links a:hover { background: rgba(200,127,94,0.14); border-color: rgba(200,127,94,0.4);
  color: #E0A583; }
.s-areas { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.s-areas span { padding: 6px 12px; border-radius: 999px; font-size: 13px; color: #8B857F;
  background: rgba(255,255,255,0.04); }

/* ── THE LANGUAGE ROW ──────────────────────────────────────────────────────────────────────── */
.s-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.s-langs b { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #6F6A65;
  margin-right: 3px; }
.s-langs a { font-size: 13.5px; color: #8B857F; padding: 5px 10px; border-radius: 999px; }
.s-langs a.on { background: rgba(255,255,255,0.08); color: #EDE9E4; }

/* ── A BAND WHERE A THING IS SHOWN WORKING ─────────────────────────────────────────────────── */
.s-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4cqw, 64px);
  align-items: center; }
.s-split.s-flip .s-split-l { order: 2; }
.s-split-l > * + * { margin-top: 18px; }

/* the little drawings: a menu, a booking week, a shop shelf — one per feature page */
.s-demo { border-radius: 20px; border: 1px solid rgba(255,255,255,0.09); background: #141210;
  padding: 18px; }
.s-demo-h { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 12px;
  letter-spacing: .05em; text-transform: uppercase; color: #6F6A65; }
.s-demo-h i { width: 7px; height: 7px; border-radius: 50%; background: #C87F5E; }
.s-row { display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-top: 1px solid rgba(255,255,255,0.06); }
.s-row:first-of-type { border-top: 0; }
.s-row figure { margin: 0; width: 44px; height: 44px; border-radius: 11px; overflow: hidden;
  flex: none; background: #1C1A17; }
.s-row figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-row-t { flex: 1 1 auto; min-width: 0; }
.s-row-t b { display: block; font-size: 14.5px; color: #EDE9E4; font-weight: 600; }
.s-row-t span { display: block; font-size: 13px; color: #8B857F; }
.s-row-p { flex: none; font-size: 14px; font-weight: 600; color: #E0A583;
  font-variant-numeric: tabular-nums; }
/* a week of times, for the booking pages */
.s-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.s-week span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 9px;
  font-size: 12px; color: #8B857F; background: rgba(255,255,255,0.04); }
.s-week span.on { background: rgba(200,127,94,0.2); color: #E0A583; font-weight: 600; }
.s-week span.no { color: #3A3733; }
.s-slots { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.s-slots b { padding: 8px 13px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,0.05); color: #D7D2CC; }
.s-slots b.on { background: #C87F5E; color: #0A0A0A; }

/* ── the reveal. Written here rather than in the client, so a page with JS off still reads ──── */
[data-rev] { will-change: opacity, transform; }
@media (prefers-reduced-motion: reduce) { [data-rev] { opacity: 1 !important; transform: none !important; } }

/* ── THE PHONE IS THE SAME DRAWING, NARROWER — one branch, like newhome.css ────────────────── */
@media (max-width: 879.98px) {
  .s-hero-in, .s-split { grid-template-columns: 1fr; }
  .s-split.s-flip .s-split-l { order: 0; }
  .s-steps { grid-template-columns: 1fr; }
  .s-ticks { grid-template-columns: 1fr; }
  .s-cmp-r { grid-template-columns: 1fr 76px 76px; padding: 13px 14px; gap: 6px; }
  .s-cmp-f { font-size: 14px; }
  .s-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-strip { grid-template-columns: repeat(2, 1fr); }
  .s-strip figure:first-child { grid-column: span 2; grid-row: span 1; aspect-ratio: 16/10; }
  .s-exmodal-in { height: 88vh; }
  .s-exmodal-frame.phone iframe { width: 100%; border-radius: 0; }
  .s-wrap, .s-narrow { width: calc(100% - 32px); }
}

/* two across down to a phone, then one — four items over one, two or four columns, never a gap */
@media (max-width: 560px) {
  .s-tools { grid-template-columns: 1fr; }
}

/**
 * ══ SEVERAL DRAWINGS OF ONE SECTION ═════════════════════════════════════════════════════════════
 *
 * "deploy some agents to really make different layouts per pages type and even within that. So its
 *  really fitting.."
 *
 * A section may have more than one whole drawing, and the page's KIND names one (`DRAWS` in
 * lib/seo.js) unless the page overrules it (`draws` on the page). A drawing here is a DIFFERENT
 * OBJECT, not the standard one restyled: if switching it off gives you back the same shape with
 * different padding, it should not have been a version.
 *
 * Every rule below is inside a `.s-`-prefixed class of its own, so a version that nobody names
 * costs a reader nothing and cannot reach a page that did not ask for it.
 */

/* ── hero: poster ─── the picture is the column, and the words stand on it ─────────────────── */
.s-hero-post { padding: clamp(28px, 4cqw, 56px) 0 clamp(30px, 4cqw, 56px); }
.s-post { position: relative; border-radius: 26px; overflow: hidden; background: #0F0E0C;
  border: 1px solid rgba(255,255,255,0.08); aspect-ratio: 16/8.4; }
.s-post > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; }
/* the words need a ground of their own or a pale photograph eats them */
.s-post-in { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column;
  align-items: flex-start; gap: 15px; padding: clamp(24px, 4cqw, 48px) clamp(22px, 3.4cqw, 46px)
  clamp(44px, 5cqw, 62px);
  background: linear-gradient(to top, rgba(10,10,10,0.94) 12%, rgba(10,10,10,0.72) 52%, rgba(10,10,10,0) 100%); }
.s-post-in .s-h1 { max-width: 17ch; }
.s-post-under { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px clamp(24px, 3cqw, 48px); margin-top: clamp(20px, 2.4cqw, 30px); }
.s-post-under .s-lede { max-width: 56ch; flex: 1 1 380px; }
@media (max-width: 760px) {
  /* ON A PHONE IT IS A DIFFERENT DRAWING, NOT A NARROWER ONE — the poster goes tall, because a
     16:8.4 band at 390 wide is a 205px letterbox with a headline crushed into it. */
  .s-post { aspect-ratio: 4/4.6; border-radius: 20px; }
  .s-post-in .s-h1 { max-width: none; }
  .s-post-under { display: block; }
  .s-post-under .s-lede { margin-bottom: 18px; }
}

/* ── features: rows ─── an argument that reads down, one point at a time ───────────────────── */
.s-rows { display: flex; flex-direction: column; gap: 14px; }
.s-row { display: grid; grid-template-columns: 1fr auto; gap: clamp(20px, 3cqw, 48px);
  align-items: center; padding: clamp(20px, 2.4cqw, 30px) clamp(20px, 2.4cqw, 30px);
  border-radius: 20px; background: #161412; border: 1px solid rgba(255,255,255,0.07); }
.s-row-t { display: flex; align-items: flex-start; gap: clamp(16px, 2cqw, 28px); }
.s-row-t > b { font-family: "Bricolage Grotesque", Figtree, sans-serif; font-weight: 700;
  font-size: clamp(22px, 2.4cqw, 30px); line-height: 1; letter-spacing: -0.03em; color: #C87F5E;
  flex: none; padding-top: 2px; font-variant-numeric: tabular-nums; }
.s-row p { margin: 0; font-size: 15.4px; line-height: 1.62; color: #A6A19B; max-width: 64ch; }
.s-row-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: rgba(255,255,255,0.06); color: #E0A583; flex: none; }
.s-row-ic svg { width: 22px; height: 22px; }
.s-row.s-row-pic { padding: 0; overflow: hidden; grid-template-columns: 1fr minmax(0, 42%); }
.s-row-pic .s-row-t { padding: clamp(22px, 2.6cqw, 34px) 0 clamp(22px, 2.6cqw, 34px)
  clamp(22px, 2.6cqw, 34px); }
.s-row-pic figure { margin: 0; min-height: 0; overflow: hidden; aspect-ratio: 16/10;
  background: #0F0E0C; }
.s-row-pic figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the picture takes the other side every other row, so the list has a rhythm rather than an edge */
.s-row-pic.s-row-flip { grid-template-columns: minmax(0, 42%) 1fr; }
.s-row-pic.s-row-flip figure { order: -1; }
.s-row-pic.s-row-flip .s-row-t { padding: clamp(22px, 2.6cqw, 34px) clamp(22px, 2.6cqw, 34px)
  clamp(22px, 2.6cqw, 34px) 0; }
@media (max-width: 760px) {
  /* one column, picture on top, and the number stays beside the heading where it reads as a list */
  .s-row, .s-row.s-row-pic, .s-row-pic.s-row-flip { grid-template-columns: 1fr; }
  .s-row-pic figure, .s-row-pic.s-row-flip figure { order: -1; aspect-ratio: 16/9; }
  .s-row-pic .s-row-t, .s-row-pic.s-row-flip .s-row-t { padding: 20px 20px 22px; }
  .s-row-ic { display: none; }
}

/* ── splits: stack ─── a chapter opens with the thing, then tells you about it ─────────────────
 *
 * The standard drawing is one `<section>` per split, two columns, sides alternating, the ground
 * alternating with them. This is ONE section, banded once: a full-width plate, then the words in a
 * narrow measure under it. The ground is the same for every chapter and is stated in the markup
 * (`s-sec s-band`), so a chapter cannot come out looking different because of where it landed —
 * and the plate is dressed exactly as `.s-card` is dressed inside a band (#161412, 20px, the 0.07
 * hairline), which is the relationship this page already proves in `features`. It is deliberately
 * NOT the hero poster's dress: `.s-post` is a bespoke 26px plate at 16/8.4 with the headline lying
 * on it, and on a feature page the two are 300px apart on the same screen. */
.s-stacks { display: flex; flex-direction: column; gap: clamp(56px, 6.5cqw, 100px); }

.s-stk-plate { position: relative; border-radius: 20px; overflow: hidden; background: #161412;
  border: 1px solid rgba(255,255,255,0.07); aspect-ratio: 21/9; }
.s-stk-plate > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  display: block; }

/* A DEMO IS NOT STRETCHED, IT IS STOOD ON SOMETHING. `.s-demo` is a drawing with its own type
   sizes; blown to 1160px a four-row menu reads as a table of nothing. So the plate becomes a stage
   and the drawing keeps the width it was drawn at.
   AND THE CARD'S DRESS COMES OFF ON THE STAGE. `.s-demo` carries its own 20px radius, its own
   hairline and its own #141210 ground; inside a plate that has all three you get a box in a box,
   two grounds five RGB units apart, and a pair of radii that cannot nest at any padding. One
   frame, one ground: the plate's. */
.s-stk-stage { aspect-ratio: auto; display: grid; justify-items: center;
  padding: clamp(24px, 3.2cqw, 52px); }
.s-stk-stage > * { width: min(560px, 100%); }
.s-stk-stage .s-demo { background: none; border: 0; border-radius: 0; padding: 0; }

/* ONE AXIS PER CHAPTER, AND IT IS THE PLATE'S LEFT EDGE. Everything in the words column — the
   eyebrow, the heading, the prose, the ticks — hangs off it. A centred heading over left-set
   paragraphs and left-set ticks is three alignments in one 640px column, and alignment belongs to
   the arrangement (docs/design-rules.md), which cannot give two answers. `.s-p` keeps its own 68ch
   measure: the column is a width, the cap is the rule, and the cap is the one that must be stated. */
.s-stk-in { width: min(640px, 100%); }
.s-stk-plate + .s-stk-in { margin-top: clamp(22px, 2.6cqw, 34px); }
.s-stk-in > * + * { margin-top: 18px; }
.s-stk .s-ticks { grid-template-columns: 1fr; }
/* the drawing a chapter carries when the list could not be plated — the same width it stands at on
   a stage, in the words' own column, where that chapter's ticks would be */
.s-stk-fig { max-width: 560px; }

@media (max-width: 760px) {
  /* A 21:9 plate at 390 wide is a 167px letterbox, which is a strip rather than the thing the
     chapter opens with. It goes 4:3 tall — and it stays INSIDE the page gutter, which is what the
     poster two sections above it does, so a phone gets one answer to "what does a full-width plate
     do here" rather than a framed hero and an unframed everything-else. */
  .s-stacks { gap: 44px; }
  .s-stk-plate { aspect-ratio: 4/3; }
  .s-stk-stage { aspect-ratio: auto; padding: 18px 16px; }
  .s-stk-stage > * { width: 100%; }
  .s-stk-plate + .s-stk-in { margin-top: 20px; }
}

/* ── compare: duel ─── the question takes the whole line, the two answers face each other under it
 *
 * The table gives the question a third of the width and the verdicts two thirds of it; on a phone
 * that is 166px for a sentence and 76px for a tick. This turns the row on its side: the question
 * reads across the column, the pair sits beneath it, and the column itself is narrow (`.s-narrow`
 * in the markup) because a pair of answers only needs to be as wide as the answers.
 *
 * Nothing here says who WON — the data does not say, and a raised panel would be this drawing
 * inventing a verdict out of a value. Ours is tinted the same accent the table already tints its
 * second column with, which answers "which side is this" and nothing else.
 *
 * The question is `.s-cmp-f` and the verdicts are `.s-cmp-v`, the standard's own two atoms — one
 * answer to what a question looks like, one to what a verdict looks like, and the tick keeps the
 * width rule that the table's history is made of.
 */
.s-duels { display: flex; flex-direction: column; }
/* the head and every pair share one grid, so the two names stand over the two answers */
.s-duel-h, .s-duel-p { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.s-duel-h { padding-bottom: 9px; }
.s-duel-h span { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #8B857F; overflow-wrap: anywhere; }
.s-duel-h .s-us { color: #E0A583; }
.s-duel { display: flex; flex-direction: column; gap: 7px; padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.06); }
/* `.s-cmp-f` carries the type; this only makes the span a line of its own */
.s-duel-q { display: block; }
.s-duel-a { padding: 7px 12px; border-radius: 11px; min-width: 0;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); }
.s-duel-us { background: rgba(200,127,94,0.07); border-color: rgba(200,127,94,0.16); }
/* "Separate mobile editor", "Host + theme + plugins" — the long side needs the rule as much as
   the short one, and it is the side that has half a column instead of a whole one */
.s-duel-a .s-cmp-v { overflow-wrap: break-word; }
/* the name lives in the markup on every row and is drawn only on a phone */
.s-duel-w { display: none; }

@media (max-width: 760px) {
  /* ON A PHONE THE NAMES COME DOWN INTO THE ROW AND THE HEAD GOES AWAY. A head at the top of a
     1,100px list is off the screen by the fourth question, and a centred tick under nothing is a
     tick that means nothing — the one fault this drawing exists to fix, reintroduced at the width
     it matters at. So each answer carries its own name, and the head is switched off rather than
     saying the same thing twice on one screen. That is the phone's whole cost: eleven eleven-pixel
     labels, in place of a header the reader cannot see. */
  .s-duel-h { display: none; }
  .s-duel-w { display: block; margin-bottom: 4px; text-align: center; font-size: 11px;
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8B857F;
    overflow-wrap: anywhere; }
  .s-duel-us .s-duel-w { color: #E0A583; }
  .s-duel-p { gap: 8px; }
  .s-duel { padding: 11px 0; }
  .s-duel-a { padding: 8px 10px; }
}

/* ── steps: timeline ─── a sequence read DOWN, hung off one line ───────────────────────────── */
/**
 * TWO NUMBERS, AND THE GRID DERIVES THE REST. `--tl-w` is the rail column and the node's own
 * diameter; `--tl-gap` is the air between two steps, which is the same thing as the length of line
 * between two nodes. Nothing else is measured. The node fills row 1, so the heading is CENTRED on
 * it by `align-self` rather than by half of a line-height somebody typed — change `.s-h3` and this
 * still lines up. The connector is a grid item spanning the rows under the node, so its height is
 * whatever the step turned out to be: a step with no description leaves row 2 empty and the line
 * is still exactly `--tl-gap` long. The drawing cannot depend on how long a sentence is, and
 * nothing here can compute a negative height or overhang the step it belongs to.
 *
 * IT SITS IN THE READING COLUMN, `s-narrow`, and the heading narrows with it. A 1160px wrap with
 * an 820px list in it is one band on the page with a ragged empty third down its right side under
 * a full-width h2 — the section would be the only thing not filling the column its neighbours fill.
 */
.s-tl { --tl-w: 34px; --tl-gap: clamp(20px, 2.4cqw, 30px);
  list-style: none; margin: 0; padding: 0; }
.s-tl-step { display: grid; grid-template-columns: var(--tl-w) minmax(0, 1fr);
  grid-template-rows: auto auto var(--tl-gap); column-gap: clamp(14px, 1.8cqw, 22px); }
.s-tl-step:last-child { grid-template-rows: auto auto 0; }

/* the node is the kit's own numeral box (`.s-step b`) made round — 34px, tabular, and the accent
   at 0.16, which is the one treatment in this file that is actually visible at this size. A
   #161412 disc on #0A0A0A measures ~1.2:1 and reads as a floating number with no node under it. */
.s-tl-n { grid-area: 1 / 1; align-self: start; display: grid; place-items: center;
  width: var(--tl-w); height: var(--tl-w); border-radius: 50%;
  background: rgba(200,127,94,0.16); color: #E0A583; font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
/* THE LAST NODE IS FILLED: a sequence has an end, and that end is what the reader is scanning for.
   One selector, on the node itself, so the phone keeps it without a second rule. */
.s-tl-step:last-child .s-tl-n { background: #C87F5E; color: #0A0A0A; }

/**
 * THE CONNECTOR IS AN ELEMENT AND ONE FLAT COLOUR. A gradient fails twice here: it is drawn per
 * SEGMENT, so three steps read as three dashes rather than one line, and its far stop is the
 * ground it is painted on, so each dash fades to nothing before it reaches the next node. A line
 * whose whole argument is "these are joined" may not end in the ground's own colour.
 */
.s-tl-line { grid-area: 2 / 1 / -1 / 2; justify-self: center; width: 2px; border-radius: 2px;
  background: rgba(200,127,94,0.4); }
.s-tl-step:last-child .s-tl-line { display: none; }

.s-tl .s-h3 { grid-area: 1 / 2; align-self: center; margin: 0; }
.s-tl p { grid-area: 2 / 2; margin: 6px 0 0; font-size: 15.4px; line-height: 1.62; color: #A6A19B; }

/**
 * ON A PHONE THE RAIL GOES AND THE WORDS TAKE THE WIDTH — and it happens at the breakpoint the
 * PAGE collapses at (879.98px, the one branch in this file), not 120px later, or between 761 and
 * 879 the timeline is the only thing left drawn wide on a page that has already stacked.
 *
 * A rail costs its own width plus a gutter, and it is telling the reader something that is
 * already the only thing on the screen: one step after another, nothing beside them. So the line
 * goes, the paragraph comes out from behind the rail and runs the full width of the column, and
 * the numbered node stands in front of its heading — the two-column body becomes one, and each
 * step is divided from the next by a hairline so it is its own block rather than a paragraph in a
 * scroll. The node keeps its number and the LAST ONE IS STILL FILLED, so the end of the sequence
 * survives the change. Nothing is moved between parents and nothing is re-derived by hand: the
 * same four grid items, placed differently.
 */
@media (max-width: 879.98px) {
  .s-tl { --tl-w: 30px; }
  .s-tl-step, .s-tl-step:last-child { grid-template-rows: auto auto; padding: 17px 0;
    border-top: 1px solid rgba(255,255,255,0.06); }
  .s-tl-step:first-child { padding-top: 0; border-top: 0; }
  .s-tl-step:last-child { padding-bottom: 0; }
  .s-tl-line { display: none; }
  .s-tl p { grid-column: 1 / -1; margin-top: 10px; }
}

/* ── faq: open ─── the answers standing open beside their questions ────────────────────────── */
/**
 * `faq: "open"`. Every rule is under `.s-qa`, the section class this version puts on itself, so a
 * page that did not ask for it meets the standard card exactly as before.
 *
 * IT IS THE STANDARD'S OWN OBJECT, RE-LAID. The <details>, the <summary>, the chevron, the hairline
 * between two items, the 16.5px question and the 15.6px answer are the rules under QUESTIONS
 * above, untouched — this block changes the GEOMETRY and nothing else. Type, colour and the line
 * between two questions are each stated once in this stylesheet, up there, and a second statement
 * of any of them here would be a second answer to a question seo.css has already answered.
 *
 * THE COLUMN IS THE ONE NEW NUMBER, AND IT IS ARGUED FOR. 760 (`s-narrow`) cannot hold two things
 * side by side. 1160 (`s-wrap`) can, but then the answer runs ~89ch and the 72ch cap above stops
 * it short of its own column, which is a block with two right edges. 1000 puts the answer at
 * ~71ch, so the COLUMN is the measure, the cap never binds, and there is one edge. The heading
 * shares that column rather than the page's, or the section has two left-to-right measures.
 *
 * NO GROUND OF ITS OWN. What runs before the questions is not fixed — a page with no showcased
 * site draws no `examples` band, so the section above is sometimes a band and sometimes the page's
 * own ground — and a drawing may not depend on which. The air above it is the section's padding
 * plus the block's own margin, so the heading is never the lid of the first question.
 *
 * `details` IS THE GRID CONTAINER. Chrome wraps the answer in `::details-content` and the older
 * model hands the <p> straight over; either way it is the second thing in the row, which is why
 * this sets the columns on the row and never on the children.
 */
.s-qa .s-wrap { width: min(1000px, 100% - 40px); }
.s-qa .s-faq { border: 0; border-radius: 0; overflow: visible; background: none;
  margin-top: clamp(18px, 2.2cqw, 28px); }
.s-qa .s-faq details { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 0 clamp(24px, 3.4cqw, 56px); align-items: start; padding: clamp(18px, 2.2cqw, 26px) 0; }
.s-qa .s-faq summary { padding: 0; }
.s-qa .s-faq details p { margin: 0; }

@media (max-width: 879.98px) {
  /* THE PAGE IS ONE COLUMN FROM HERE — `.s-hero-in`, `.s-split`, `.s-steps` and `.s-ticks` all
     collapse at this width — so the questions collapse with it, or they are the last two-column
     thing on a one-column page. The answer keeps the 72ch cap it has above: a 848px line of 15.6px
     prose is 109 characters. */
  .s-qa .s-wrap { width: calc(100% - 32px); }
  .s-qa .s-faq details { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 760px) {
  /* ON A PHONE IT IS A DIFFERENT DRAWING, NOT A NARROWER ONE. On a desk the COLUMN says which
     words are a question and which are its answer; stacked, only the rhythm can say it. So the
     item's own air grows and the space between a question and its answer closes: 9px inside an
     item, 48px between two of them. Said the other way round — an even gap — a page of open
     answers is one grey column with faint marks across it, which is the thing a phone reader
     thumbs past without finding the question they came for. */
  .s-qa .s-faq details { gap: 9px; padding: 24px 0; }
}

/* ── ticks: ledger ─── the claims as one ruled column, beside the question they answer ─────── */

/* The heading is a COLUMN here, not a lid. That is the whole difference from the standard grid:
   a checklist has its title on top and its items in a field below it; a contents list has the
   thing named on one side and what is in it on the other. `minmax(0, …)` on both tracks so a long
   unbroken claim shrinks the column instead of widening the page. */
.s-ldg { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(24px, 4cqw, 76px); align-items: start; }
/* .s-h2 carries a bottom margin for a heading that sits over something; this one sits beside */
.s-ldg-h { margin: 0; max-width: 15ch; }

/* ONE hairline value, used for every rule in the object — over the first row, between each pair,
   under the last. Two alphas meeting makes the first line of a list a third stronger than the
   identical lines under it, which reads as a table header the list does not have. */
.s-ldg-l { list-style: none; margin: 0; padding: 0;
  border-top: 1px solid rgba(255,255,255,0.08); }
.s-ldg-i { display: flex; gap: clamp(13px, 1.4cqw, 20px); padding: clamp(14px, 1.7cqw, 21px) 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: clamp(16.5px, 1.5cqw, 19.5px); line-height: 1.45; color: #EDE9E4; }
/* the claim is its own flex item so it can be told to shrink and to break: these strings are
   somebody's copy, and one unbreakable token in one language must not scroll the body sideways */
.s-ldg-i > span { min-width: 0; overflow-wrap: anywhere; text-wrap: pretty; }
/* the marker is a rule, not a chip. Its offset is in EM, so it keeps its place on the first line
   at every size the row is set at — a pixel offset here is right at one font size and wrong at
   the other two, and no padding anywhere in this block is doing an alignment's job. */
.s-ldg-i::before { content: ""; flex: none; align-self: flex-start; margin-top: 0.72em;
  width: clamp(16px, 1.8cqw, 26px); height: 1px; background: #C87F5E; }

@media (max-width: 760px) {
  /* THE PHONE IS A DIFFERENT DRAWING, NOT A NARROWER ONE. "Beside" is not available at 390: the
     column is 358px, and the marker plus its gap is 12% of that, which takes the longest claims
     in the data (69 characters) from two lines to three on every row.

     So the heading comes up on top and the marker goes with it — the hairlines already say these
     are separate things, which was the marker's only job — and the rows tighten, because four
     claims at the desk's rhythm is most of a screen for a list nobody came to read. */
  .s-ldg { display: block; }
  .s-ldg-h { max-width: none; margin: 0 0 6px; }
  .s-ldg-i { font-size: 16.5px; padding: 13px 0; }
  .s-ldg-i::before { display: none; }
}

/* ── ticks: aside ─── the heading beside the list, and the list is one column of rows ───────── */
/**
 * Two columns for the BAND, one column for the list. The head is about a third and the lines get
 * the rest, which at 1160 is ~615px — 70 characters at 17px, and the longest bullet in the kit is
 * 69. So a line is a line, and the hairline between two of them is what says where one ends.
 *
 * THE FIRST ROW HAS NO RULE ABOVE IT. The head's own cap-height is the top edge of the band on
 * this side; a rule there would cut across the two columns at a height that belongs to neither.
 * The last row has no padding under it either — the band's own padding closes the list.
 *
 * The mark is the file's own answer to "what colour is a yes" (#12B76A, the same green as
 * `.s-tick i` and `.s-cmp-v.y`), drawn bare in the gutter rather than in a chip: a chip is a badge
 * on a small line in a grid, and these lines are full rows with a rule under them.
 */
.s-aside { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
  gap: clamp(28px, 4.5cqw, 72px); }
/* the h2's 14px bottom margin separates it from what follows it in a stacked band; nothing follows
   it in this column — the phone block below puts it back when something does */
.s-aside > .s-h2 { margin: 0; }
.s-aside-l { list-style: none; margin: 0; padding: 0; }
.s-aside-line { display: flex; gap: 14px; padding: 14px 0; font-size: 17px; line-height: 1.55;
  color: #D7D2CC; border-top: 1px solid rgba(255,255,255,0.08); }
.s-aside-line:first-child { padding-top: 0; border-top: 0; }
.s-aside-line:last-child { padding-bottom: 0; }
/* `flex: none` or the 17px mark shrinks under a line that wants the width; the margin sits it on
   the first line's cap rather than in the middle of a wrapped row */
.s-aside-line i { flex: none; color: #12B76A; margin-top: 4px; }
.s-aside-line svg { display: block; width: 17px; height: 17px; }

/**
 * ON A PHONE IT IS A DIFFERENT DRAWING, NOT A NARROWER ONE — and the difference is the band's
 * shape, not the list's. A head beside a list is impossible at 390: the head would be 160px and
 * the lines eleven characters. So the band stops being horizontal and becomes vertical, and the
 * list has to close itself, because the two edges it was borrowing are gone. On a desk the head's
 * cap-height is the list's top edge and the two-column band is its bottom one; stacked, the head
 * is far above and the last line dangles into the band's padding — so the list takes a rule of its
 * own at each end and becomes a bounded block, and the first row gets its padding back.
 *
 * IT STACKS AT 879.98px, WHICH IS THE PAGE'S OWN STACKING POINT, not at the 760 the other versions
 * use — those are objects with their own geometry, this one is a two-column band on a page where
 * `.s-hero-in`, `.s-split`, `.s-steps` and `.s-ticks` have all already gone to one column and
 * `.s-wrap` has narrowed to `calc(100% - 32px)`. Stacking later would leave this the only
 * two-across thing on a page that is otherwise a single column.
 */
@media (max-width: 879.98px) {
  .s-aside { grid-template-columns: 1fr; gap: 0; }
  .s-aside > .s-h2 { margin: 0 0 22px; }
  .s-aside-l { border-block: 1px solid rgba(255,255,255,0.08); }
  .s-aside-line { font-size: 16px; }
  .s-aside-line:first-child { padding-top: 14px; }
  .s-aside-line:last-child { padding-bottom: 14px; }
}