/* =============================================================================
   SERVICE AND CONTENT PAGES

   Built from the same primitives as the homepage. Pages differ through
   subject matter, photography and the order of their sections, not through
   a second design language.
   ============================================================================= */


/* ── Breadcrumbs ────────────────────────────────────────────────────────── */

.crumbs { display: flex; flex-wrap: wrap; gap: .3rem .5rem; list-style: none; margin: 0 0 1.1rem; padding: 0; font-size: var(--t-micro); }
.crumbs li { display: inline-flex; align-items: center; gap: .5rem; color: var(--on-warm-3); }
.crumbs li + li::before { content: "/"; opacity: .5; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Plan tiers ─────────────────────────────────────────────────────────
   A comparison, not a card grid: shared rules, aligned prices, one
   emphasised column. */

.tiers__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }

.tier {
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.5rem 1.75rem;
  background: var(--warm-lift);
  border: var(--rule);
  border-radius: var(--r-2);
}

.tier--pick { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple) inset; }

.tier__flag {
  align-self: flex-start;
  margin: 0 0 .85rem;
  padding: .25rem .6rem;
  border-radius: var(--r-1);
  background: var(--lilac);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand);
}

.tier__name { font-family: var(--serif); font-size: 1.375rem; }
.tier__blurb { margin: .5rem 0 0; font-size: var(--t-small); color: var(--on-warm-2); }

.tier__price { margin: 1.25rem 0 0; display: flex; align-items: baseline; gap: .3rem; }
.tier__price strong { font-family: var(--serif); font-size: 2.25rem; font-weight: 500; letter-spacing: -.02em; }
.tier__price span { font-size: var(--t-small); color: var(--on-warm-3); }

.tier__cta { margin-top: 1.25rem; width: 100%; }
.tier--pick .tier__cta { background: var(--brand-fill); color: #fff; border-color: var(--brand-fill); }
.tier--pick .tier__cta:hover { background: var(--brand-hover); }

.tier__inc {
  margin: 1.5rem 0 .75rem;
  padding-top: 1.25rem;
  border-top: var(--rule);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-warm-3);
}

.tier__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.tier__list li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-small); color: var(--on-warm); }
.tier__list .tick { flex: none; margin-top: .25em; color: var(--purple); }

.tiers__enquiry {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.75rem;
  background: var(--warm-lift);
  border: var(--rule);
  border-radius: var(--r-2);
}

.tiers__enquiry h3 { font-family: var(--serif); font-size: var(--d4); margin-bottom: .5rem; }
.tiers__enquiry p { margin: 0; font-size: var(--t-small); color: var(--on-warm-2); max-width: 56ch; }

@media (max-width: 940px) {
  .tiers__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── VPS comparison table ───────────────────────────────────────────────
   A real table on desktop, and labelled records on a small screen so a
   nine-row comparison stays readable. */

.vps__table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.vps__table caption { text-align: left; }

.vps__table th, .vps__table td { padding: .9rem .75rem; text-align: left; border-bottom: var(--rule); }
.vps__table thead th {
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--on-warm-3);
  border-bottom-width: 2px;
}

.vps__table tbody th { font-family: var(--serif); font-size: 1.0625rem; font-weight: 500; }
.vps__table tr.is-pick { background: var(--lilac); }
.vps__price strong { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; }
.vps__price span { font-size: var(--t-micro); color: var(--on-warm-3); }
.vps__go { text-align: right; }

.vps__flag {
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .45rem;
  border-radius: var(--r-1);
  background: var(--brand-fill);
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  vertical-align: middle;
}

.vps__common { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .6rem 1.5rem; }
.vps__common li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-small); color: var(--on-warm-2); }
.vps__common .tick { flex: none; margin-top: .25em; color: var(--purple); }

@media (max-width: 860px) {
  .vps__table, .vps__table tbody, .vps__table tr, .vps__table td, .vps__table th { display: block; }
  .vps__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .vps__table tr {
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border: var(--rule);
    border-radius: var(--r-2);
    background: var(--warm-lift);
  }
  .vps__table tr.is-pick { border-color: var(--purple); }
  .vps__table th, .vps__table td { border-bottom: 0; padding: .3rem 0; }
  .vps__table tbody th { font-size: 1.25rem; padding-bottom: .6rem; }
  .vps__table td[data-label] { display: flex; justify-content: space-between; gap: 1rem; border-top: var(--rule); padding: .55rem 0; }
  .vps__table td[data-label]::before { content: attr(data-label); color: var(--on-warm-3); }
  .vps__go { text-align: left; padding-top: .9rem !important; }
  .vps__go .btn { width: 100%; }
}

/* ── Responsibility split ───────────────────────────────────────────────── */

.duty__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }

.duty__col { padding: 1.6rem 1.5rem; border: var(--rule); border-radius: var(--r-2); background: var(--warm); }
.duty__col--us { background: var(--lilac); border-color: var(--lilac-line); }
.duty__col h3 { font-family: var(--serif); font-size: var(--d4); margin-bottom: 1rem; }
.duty__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.duty__col li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-small); }
.duty__col .tick { flex: none; margin-top: .25em; color: var(--purple); }

@media (max-width: 780px) { .duty__cols { grid-template-columns: minmax(0, 1fr); } }

/* ── Who it suits ───────────────────────────────────────────────────────── */

.suits__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .7rem 2rem; }
.suits__list li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-small); color: var(--on-warm-2); }
.suits__list .tick { flex: none; margin-top: .25em; color: var(--purple); }
.suits__note { margin: 1.75rem 0 0; font-size: var(--t-small); color: var(--on-warm-3); }

/* ── FAQs ───────────────────────────────────────────────────────────────── */

.faq__list { border-top: var(--rule); }
.faq__item { border-bottom: var(--rule); }

.faq__q {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  padding: 1.25rem 0;
  background: none;
  border: 0;
  font-family: var(--serif);
  font-size: var(--d4);
  font-weight: 400;
  letter-spacing: -.012em;
  text-align: left;
  color: var(--on-warm);
  cursor: pointer;
}

.faq__q span { flex: none; width: 18px; height: 18px; position: relative; }
.faq__q span::before,
.faq__q span::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  background: var(--brand-fill);
  transition: transform var(--base) var(--ease);
}
.faq__q span::after { transform: rotate(90deg); }
.faq__q[aria-expanded="true"] span::after { transform: rotate(0deg); }

.faq__a { padding: 0 0 1.4rem; max-width: 66ch; }
.faq__a p { margin: 0; color: var(--on-warm-2); }
.faq__a[hidden] { display: none; }

/* ── Onward routes ──────────────────────────────────────────────────────── */

.others__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }

.other {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.35rem 1.4rem;
  border: var(--rule);
  border-radius: var(--r-2);
  background: var(--warm-lift);
}

.other h3 { font-family: var(--serif); font-size: 1.1875rem; }
.other h3 span { display: block; font-family: var(--sans); font-size: var(--t-micro); font-weight: 600; color: var(--purple); margin-top: .15rem; }
.other p { margin: .6rem 0 0; font-size: var(--t-micro); color: var(--on-warm-2); }
.other a::after { content: ""; position: absolute; inset: 0; }

/* ── Document pages ─────────────────────────────────────────────────────── */

.doc__wrap { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }

.doc__rail { position: sticky; top: calc(var(--head-h) + 1.5rem); align-self: start; }
.doc__rail h2 { font-family: var(--sans); font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-warm-3); margin-bottom: .5rem; }
.doc__rail ol { list-style: none; margin: 0; padding: 0; counter-reset: doc; }
.doc__rail a { display: flex; align-items: center; min-height: 40px; font-size: var(--t-small); color: var(--on-warm-2); text-decoration: none; }
.doc__rail a:hover { color: var(--purple); }

.doc__body { max-width: 68ch; }
.doc__sec + .doc__sec { margin-top: 2.75rem; padding-top: 2.75rem; border-top: var(--rule); }
.doc__sec h2 { font-size: var(--d4); margin-bottom: .9rem; }
.doc__sec p { margin: 0 0 1rem; color: var(--on-warm-2); }
.doc__sec p:last-child { margin-bottom: 0; }
.doc__list { margin: 0 0 1rem 1.15rem; padding: 0; }
.doc__list li { margin-bottom: .45rem; color: var(--on-warm-2); }
.doc__notice { padding: 1.1rem 1.35rem; border: var(--rule-lav); border-radius: var(--r-2); background: var(--lilac); margin-bottom: 2rem; }
.doc__notice p { margin: 0; font-size: var(--t-small); color: var(--text-on-lavender); }

@media (max-width: 900px) {
  .doc__wrap { grid-template-columns: minmax(0, 1fr); }
  .doc__rail { position: static; }
}

/* ── Capability section without a photograph ────────────────────────────
   The no-image case is a designed composition in its own right, not a
   half-width column with an empty track beside it: the heading holds the
   left, and the ruled list runs as two columns on the right. */

.split--nofig {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: start;
}

.split--nofig .split__body { display: contents; }

/* Both columns' items are auto-placed in one grid, so a two-line heading in
   column one was inflating the row its paragraph shared in column two and
   leaving the list stranded a long way below it. Pinning the rows puts the
   paragraph beside the eyebrow and the list beside the heading, which is
   what the composition was always meant to be. */
.split--nofig .split__body > .eyebrow { grid-column: 1; grid-row: 1; }
.split--nofig .split__body > h2       { grid-column: 1; grid-row: 2; }
.split--nofig .split__body > p        { grid-column: 2; grid-row: 1; }
.split--nofig .split__body > .ruled   { grid-column: 2; grid-row: 2; }
.split--nofig .split__body > .go,
.split--nofig .split__body > .btns    { grid-column: 2; }

.split--nofig .split__body > p { max-width: 62ch; margin-top: 0; }

.split--nofig .ruled {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: 1.5rem;
}

.split--nofig .ruled > li:nth-child(-n+2) { border-top: var(--rule); }
.split--nofig .ruled > li { border-top: 0; border-bottom: var(--rule); }

/* Three items in a two-column grid orphans the third, leaving it alone
   beside an empty cell. Exactly three reads better as a single column, with
   the border reset the same way the narrow layout below already does it.
   Only /contact/ renders a three-item ruled list; the six- and one-item
   lists elsewhere divide cleanly and are untouched. */
.split--nofig .ruled:has(> li:nth-child(3):last-child) {
  grid-template-columns: minmax(0, 1fr);
}
.split--nofig .ruled:has(> li:nth-child(3):last-child) > li:nth-child(-n+2) { border-top: 0; }
.split--nofig .ruled:has(> li:nth-child(3):last-child) > li:first-child { border-top: var(--rule); }

@media (max-width: 1024px) {
  .split--nofig { grid-template-columns: minmax(0, 1fr); }
  .split--nofig .split__body > .eyebrow,
  .split--nofig .split__body > h2,
  .split--nofig .split__body > p,
  .split--nofig .split__body > .ruled,
  .split--nofig .split__body > .go,
  .split--nofig .split__body > .btns { grid-column: 1; }
}

@media (max-width: 720px) {
  .split--nofig .ruled { grid-template-columns: minmax(0, 1fr); }
  .split--nofig .ruled > li:nth-child(-n+2) { border-top: 0; }
  .split--nofig .ruled > li:first-child { border-top: var(--rule); }
}

/* ── Section shells for the shared page components ──────────────────────
   These blocks predate the design system and carried their own wrappers.
   They now take the same measure, ground and rhythm as everything else. */

.tiers   { padding-block: var(--band); background: var(--warm); }
.suits   { padding-block: var(--band); background: var(--warm-lift); }
.faq     { padding-block: var(--band); background: var(--warm); }
.others  { padding-block: var(--band); background: var(--warm-lift); }
.mignote { padding-block: var(--band); background: var(--lilac); }
.note    { padding-block: var(--band); background: var(--warm); }
.pair    { padding-block: var(--band); background: var(--warm-lift); }
.journey { padding-block: var(--band); background: var(--warm); }
.offer   { padding-block: var(--band); background: var(--warm-lift); }
.cols    { padding-block: var(--band); background: var(--warm); }
.routes2 { padding-block: var(--band); background: var(--warm-lift); }
.quote   { padding-block: var(--band); background: var(--lilac); }
.claims  { padding-block: var(--band); background: var(--lilac); }
.tlds    { padding-block: var(--band); background: var(--lilac); }
.doc     { padding-block: var(--band); background: var(--warm); }
.values  { padding-block: var(--band); background: var(--warm-lift); }
.story   { padding-block: var(--band); background: var(--warm); }
.chooser { padding-block: var(--band); background: var(--warm); }
.routes  { padding-block: var(--band); background: var(--warm); }

.tiers__wrap, .suits__wrap, .faq__wrap, .others__wrap, .mignote__wrap,
.note__wrap, .pair__wrap, .journey__wrap, .offer__wrap, .cols__wrap,
.routes2__wrap, .quote__wrap, .claims__wrap, .tlds__wrap, .doc__wrap,
.values__wrap, .story__wrap, .chooser__wrap, .routes__wrap, .ghero__wrap {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tiers__head, .suits__head, .faq__head, .others__head, .cols__head,
.quote__lead, .story__lead {
  margin-bottom: clamp(2rem, 3.5vw, 3.25rem);
}

.tiers__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; }
.tiers__title, .suits__title, .faq__title, .others__title, .cols__title { font-size: var(--d3); }
.tiers__note, .cols__lede { font-size: var(--t-small); color: var(--on-warm-2); max-width: 46ch; }
.suits__title { margin-bottom: 1.5rem; }

@media (max-width: 860px) {
  .tiers__head { grid-template-columns: minmax(0, 1fr); }
}

/* A note beside a small supporting photograph. */
.note__wrap, .mignote__wrap {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.note__wrap:not(:has(.note__art)),
.mignote__wrap:not(:has(.mignote__art)) { grid-template-columns: minmax(0, 1fr); max-width: 72ch; }

.note__art, .mignote__art { margin: 0; width: 200px; }
.note__art .ph, .mignote__art .ph { display: block; border-radius: var(--r-2); overflow: hidden; }
.note__art .ph img, .mignote__art .ph img { width: 100%; height: auto; }

.note__body h2, .mignote__body h2 { font-size: var(--d3); margin-bottom: 1rem; }
.note__body p, .mignote__body p { margin: 0 0 1rem; color: var(--on-warm-2); max-width: 62ch; }

@media (max-width: 720px) {
  .note__wrap, .mignote__wrap { grid-template-columns: minmax(0, 1fr); }
  .note__art, .mignote__art { width: 160px; }
}

/* Two-up editorial pair. */
.pair__wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.pair__item h2 { font-size: var(--d4); margin-bottom: .75rem; }
.pair__item p { margin: 0 0 1rem; font-size: var(--t-small); color: var(--on-warm-2); }

@media (max-width: 780px) { .pair__wrap { grid-template-columns: minmax(0, 1fr); } }

/* The legacy arrow link matches the system's onward route. */
.arrow {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px;
  font-family: var(--sans); font-size: var(--t-small); font-weight: 600;
  color: var(--purple); text-decoration: none;
}
.arrow:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Legacy button names still used by a few templates. */
.btn--solid { background: var(--brand-fill); color: #fff; border-color: var(--brand-fill); }
.btn--solid:hover { background: var(--brand-hover); }
.btn--line { background: var(--warm-lift); color: var(--on-warm); border-color: var(--warm-line); }
.btn--line:hover { border-color: var(--purple); color: var(--purple); }
.btn--dark { background: var(--ink); color: #fff; border-color: var(--ink); }

.eyebrow--dark { color: var(--purple); }

/* ── Ellistone terminal ─────────────────────────────────────────────────
   Ellistone is the one page where a shell prompt is the honest
   illustration. It is set as a labelled block in the page, not inside an
   imitation application window. */

.terminal { padding-block: var(--band); background: var(--ink); color: var(--on-ink); }
.terminal__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter);
}

.terminal .eyebrow { color: var(--accent); }
.terminal__title { font-size: var(--d3); margin-bottom: 1rem; }
.terminal__copy p { color: var(--on-ink-2); max-width: 52ch; }
.terminal__list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .6rem; }
.terminal__list li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--t-small); color: var(--on-ink-2); }
.terminal__list .tick { flex: none; margin-top: .25em; color: var(--lavender); }

.terminal__label {
  margin: 0 0 .6rem;
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-ink-3);
}

.terminal__code {
  margin: 0;
  padding: 1.25rem 1.4rem;
  border: var(--rule-ink);
  border-radius: var(--r-2);
  background: var(--black);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8125rem;
  line-height: 1.75;
  color: var(--text-on-ink-2);
  overflow-x: auto;
}

.terminal__code .c-p { color: #9BE7A8; }
.terminal__code .c-d { color: #8FB6F5; }
.terminal__code .c-m { color: var(--lavender); }
.terminal__code .c-c { color: var(--text-on-ink-3); }
.terminal__code .c-cur { color: var(--accent); }

@media (max-width: 900px) {
  .terminal__wrap { grid-template-columns: minmax(0, 1fr); }
}

/* ── Domain search band ─────────────────────────────────────────────────
   The same treatment as the homepage band, with the verified extension
   marks. It posts to the real domain checker and claims no availability. */

.finder { background: var(--lilac); padding-block: clamp(2.25rem, 4vw, 3.5rem); }

.finder__wrap {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter);
}

.finder__title { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.25rem); }
.finder__copy p { margin: .65rem 0 0; font-size: var(--t-small); color: var(--text-on-lavender); max-width: 30ch; }

.finder__tabs { display: flex; gap: 1.5rem; border-bottom: var(--rule-lav); margin-bottom: 1rem; }

.ftab { position: relative; display: inline-flex; }
.ftab input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

.ftab span {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .35rem 0 .7rem; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: var(--t-small); font-weight: 600; color: var(--text-on-lavender);
}

.ftab input:checked + span { color: var(--purple); border-bottom-color: var(--purple); }
.ftab input:focus-visible + span { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: var(--r-1); }

.finder__row { display: flex; gap: .6rem; }

.finder__input {
  flex: 1 1 auto; min-width: 0; min-height: 52px;
  padding: .8rem 1.05rem;
  border: 1px solid var(--lilac-line); border-radius: var(--r-1);
  background: var(--warm-lift);
  font-family: var(--sans); font-size: var(--t-body); color: var(--on-warm);
}

.finder__input::placeholder { color: var(--text-muted); }
.finder__go { min-height: 52px; padding-inline: 1.7rem; }

.finder__tlds {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  margin: 1rem 0 0; padding: 0; list-style: none;
}

.finder__tlds li {
  display: inline-flex; align-items: center;
  padding: .4rem .7rem;
  background: var(--warm-lift); border: 1px solid var(--lilac-line); border-radius: var(--r-1);
}

.finder__tlds img { display: block; width: auto; height: 20px; }

.finder__note {
  display: flex; align-items: center; gap: .5rem;
  margin: 1rem 0 0; font-size: var(--t-micro); color: var(--text-on-lavender);
}

.finder__tag { display: inline-flex; color: var(--purple); }

@media (max-width: 860px) {
  .finder__wrap { grid-template-columns: minmax(0, 1fr); }
  .finder__copy p { max-width: none; }
}

@media (max-width: 520px) {
  .finder__row { flex-direction: column; }
  .finder__go { width: 100%; }
}

/* The sustainability share section is the deep-ink band that owns the badge
   on that page. */
.share { padding-block: var(--band); background: var(--warm-lift); }
.share__wrap {
  display: grid; grid-template-columns: minmax(0, 1fr);
  max-width: 72ch;
  gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
  width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter);
}
.share__title { font-size: var(--d3); margin-bottom: 1rem; }
.share p { color: var(--on-warm-2); max-width: 54ch; }
.share .offer__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.share__use { margin-top: 1.5rem; font-size: var(--t-small); color: var(--on-warm-2); }
.share__use summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }

@media (max-width: 860px) { .share__wrap { grid-template-columns: minmax(0, 1fr); } }

/* ── Capability section on the lavender ground ──────────────────────────
   The ruled list inverts its rule colour so the dividers stay visible, and
   the section takes the tighter rhythm because it is a supporting band
   rather than a major transition. */

.sec--lav { background: var(--lilac); }
.sec--lav .ruled > li,
.sec--lav .ruled > li:last-child { border-color: var(--lilac-line); }
.sec--lav .ruled p { color: var(--text-on-lavender); }
.sec--lav .split__body > p { color: var(--text-on-lavender); }
.sec--lav .split__fig { background: var(--lilac-deep); }

/* ── Suitability section ────────────────────────────────────────────────
   An editorial heading column on the left, a ruled two-by-two list on the
   right, and the onward route beneath it. Replaces four short labels
   stretched across the full page width. */

.fits { padding-block: clamp(3.25rem, 5vw, 5.5rem); background: var(--warm); }

.fits__wrap {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}

.fits__lead h2 { font-size: var(--d3); }
.fits__intro { margin: 1rem 0 0; color: var(--on-warm-2); max-width: 34ch; }

.fits__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 3vw, 3rem);
  border-top: var(--rule);
}

.fits__item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0 .5rem;
  padding: 1.15rem 0;
  border-bottom: var(--rule);
}

.fits__no {
  font-family: var(--serif);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--purple);
  padding-top: .1rem;
}

.fits__item h3 {
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--on-warm);
}

.fits__item p { margin: .3rem 0 0; font-size: var(--t-small); line-height: 1.55; color: var(--on-warm-2); }

.fits__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem 1.5rem;
  align-items: center;
  margin-top: 1.75rem;
}

.fits__cta p { margin: 0; font-size: var(--t-small); color: var(--on-warm-2); }

@media (max-width: 1024px) {
  .fits__wrap { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .fits__intro { max-width: 58ch; }
}

@media (max-width: 720px) {
  .fits__list { grid-template-columns: minmax(0, 1fr); }
}

/* ── Film ───────────────────────────────────────────────────────────────
   lmh_video() returns an absolutely positioned film that fills whichever
   positioned box holds it. The hero system's media column is that box now;
   the .vhero it used to sit in has gone with the rest of the old heroes. */

.vfilm { position: absolute; inset: 0; overflow: hidden; background: var(--warm-sub); }

.vfilm__poster,
.vfilm__poster img,
.vfilm__v {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

/* The video fades in only once it is genuinely playing, so the poster is
   never swapped for an empty frame. */
.vfilm__v { opacity: 0; transition: opacity var(--slow) var(--ease); }
.vfilm.is-playing .vfilm__v { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .vfilm__v { display: none; }
}

@media (max-width: 900px) {
  .vfilm__poster img, .vfilm__v { object-position: 50% 50%; }
}

/* ── Evidence strip ─────────────────────────────────────────────────────── */

.ev { padding-block: clamp(2.5rem, 4vw, 4rem); background: var(--warm); }
.ev__wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.ev__item { padding-top: 1.15rem; border-top: 2px solid var(--purple); }
.ev__no { display: block; font-family: var(--serif); font-size: var(--t-small); color: var(--purple); margin-bottom: .4rem; }
.ev__item h2 { font-family: var(--sans); font-size: var(--t-body); font-weight: 700; letter-spacing: 0; }
.ev__item p { margin: .5rem 0 0; font-size: var(--t-small); color: var(--on-warm-2); }

@media (max-width: 820px) { .ev__wrap { grid-template-columns: minmax(0, 1fr); } }

/* A short credit line under an illustrative photograph. */
.figcredit { margin: -1.5rem auto 0; padding-top: 1rem; font-size: var(--t-micro); color: var(--on-warm-3); }

/* ── What the claim means ───────────────────────────────────────────────── */

.means__wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: start; }
.means__lead h2 { font-size: var(--d3); }
.means__intro { margin: 1rem 0 0; color: var(--on-warm-2); max-width: 36ch; }
.means__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }

.means__col { padding: 1.5rem 1.6rem; border-radius: var(--r-2); }
.means__col--is   { background: var(--lilac); }
.means__col--isnt { background: var(--warm); border: var(--rule); }
.means__col h3 { font-family: var(--sans); font-size: var(--t-small); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1rem; }
.means__col--is h3   { color: var(--brand); }
.means__col--isnt h3 { color: var(--on-warm-3); }
.means__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.means__col li { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--t-small); line-height: 1.55; }
.means__col .tick { flex: none; margin-top: .3em; color: var(--purple); }

.means__x { flex: none; width: 16px; height: 16px; margin-top: .25em; position: relative; }
.means__x::before, .means__x::after {
  content: ""; position: absolute; inset: 50% 1px auto; height: 2px;
  background: var(--on-warm-3); border-radius: 1px;
}
.means__x::before { transform: rotate(45deg); }
.means__x::after  { transform: rotate(-45deg); }

@media (max-width: 1024px) { .means__wrap { grid-template-columns: minmax(0, 1fr); } .means__intro { max-width: 60ch; } }
@media (max-width: 720px)  { .means__cols { grid-template-columns: minmax(0, 1fr); } }

/* ── Badge section ──────────────────────────────────────────────────────── */

.badge { padding-block: var(--band); background: var(--lilac); }
.badge__wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: start; }
.badge__body h2 { font-size: var(--d3); margin-bottom: 1rem; }
.badge__body > p { margin: 0; color: var(--text-on-lavender); max-width: 58ch; }
.badge__rules { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .7rem; }
.badge__rules li { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--t-small); color: var(--text-on-lavender); }
.badge__rules .tick { flex: none; margin-top: .3em; color: var(--purple); }
.badge .btns { margin-top: 1.75rem; }
.badge .btn--secondary { background: transparent; border-color: var(--lilac-line); }

@media (max-width: 760px) { .badge__wrap { grid-template-columns: minmax(0, 1fr); } }

/* ── Service directory ──────────────────────────────────────────────────
   A ruled two-column directory rather than six identical product cards. */

.dir { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3.5rem); border-top: var(--rule); }
/* Five other families in two columns strands the fifth beside an empty cell.
   An odd final item spans both columns so the list closes on a full row. */
.dir > .dir__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.dir__item { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) 1.5rem; gap: .5rem 1.25rem; align-items: baseline; padding: 1.25rem 0; border-bottom: var(--rule); }
.dir__name h3 { font-family: var(--serif); font-size: 1.1875rem; }
.dir__name h3 a { color: inherit; text-decoration: none; }
.dir__name h3 a::after { content: ""; position: absolute; inset: 0; }
.dir__item:hover .dir__name h3 a { color: var(--purple); }
.dir__cat { margin: .15rem 0 0; font-size: var(--t-micro); font-weight: 600; color: var(--purple); }
.dir__why { margin: 0; font-size: var(--t-small); color: var(--on-warm-2); }
.dir__go { color: var(--purple); justify-self: end; align-self: center; }

@media (max-width: 900px) { .dir { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .dir__item { grid-template-columns: minmax(0, 1fr) 1.5rem; } .dir__why { grid-column: 1 / -1; } }

.ops { margin-top: 2rem; }

/* ── Holding the name ───────────────────────────────────────────────────
   Two substantial panels. Neither depends on an image, so neither can
   collapse if optional artwork is absent. */

.hold { padding-block: var(--band); background: var(--warm-lift); }
.hold__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.25rem); }

.hold__panel {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.85rem 1.85rem;
  border: var(--rule);
  border-radius: var(--r-2);
  background: var(--warm);
}

.hold__no { margin: 0 0 .75rem; font-family: var(--serif); font-size: 1.125rem; color: var(--purple); }
.hold__panel h3 { font-size: var(--d4); margin-bottom: .85rem; }
.hold__panel > p { margin: 0; color: var(--on-warm-2); }

.hold__marks {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  list-style: none; margin: 1.75rem 0 0; padding: 0;
}
.hold__marks li {
  display: inline-flex; align-items: center; padding: .4rem .7rem;
  background: var(--warm-lift); border: var(--rule); border-radius: var(--r-1);
}
.hold__marks img { display: block; width: auto; height: 20px; }

.hold__spec { margin: 1.75rem 0 0; }
.hold__spec > div {
  display: flex; flex-wrap: wrap; gap: .25rem 1.25rem;
  justify-content: space-between; align-items: baseline;
  padding: .6rem 0; border-bottom: var(--rule);
}
.hold__spec > div:first-child { border-top: var(--rule); }
.hold__spec dt { font-size: var(--t-small); color: var(--on-warm-3); }
.hold__spec dd { margin: 0; font-size: var(--t-small); font-weight: 600; text-align: right; }

.hold__panel .go { margin-top: auto; padding-top: 1.25rem; align-self: flex-start; }

@media (max-width: 860px) { .hold__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) {
  .hold__spec > div { flex-direction: column; gap: .1rem; }
  .hold__spec dd { text-align: left; }
}

/* The onward-range directory carries a price column as well. */
.others { padding-block: var(--band); background: var(--warm-lift); }
.others .dir__item { grid-template-columns: minmax(0, .72fr) minmax(0, 1.1fr) minmax(0, .34fr) 1.5rem; }
.dir__price { margin: 0; font-size: var(--t-small); color: var(--on-warm-2); white-space: nowrap; text-align: right; }
.dir__price strong { font-family: var(--serif); font-size: 1.0625rem; font-weight: 500; color: var(--on-warm); }

@media (max-width: 900px) {
  .others .dir__item { grid-template-columns: minmax(0, 1fr) minmax(0, .4fr) 1.5rem; }
  .others .dir__why { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .others .dir__item { grid-template-columns: minmax(0, 1fr) 1.5rem; }
  .dir__price { text-align: left; grid-column: 1 / 2; }
}

/* ── Conditional-image layouts must not leave empty tracks ──────────────
   Every component here can render without its photograph. When the picture
   is absent the grid collapses to a single column and the copy takes a
   deliberate two-column editorial shape instead of sitting in a narrow
   strip beside an empty track. */

/* Note bands: heading in the left column, body in the right, so a short
   passage reads as a designed section rather than a stranded paragraph. */
.note__wrap:not(:has(.note__art)),
.mignote__wrap:not(:has(.mignote__art)) {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  /* Was `none`, which dropped these bands out of the shell and started
     every caveat on the site 100px to the left of everything above and
     below it. The two-column composition is worth keeping; running full
     bleed to get it was not. */
  max-width: var(--shell);
  align-items: start;
  /* One gap was serving both axes, so the link under the passage sat a full
     column gutter below it and read as stranded. The columns keep the wide
     gutter; the rows take a paragraph's worth. */
  gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
}

.note__wrap:not(:has(.note__art)) .note__body,
.mignote__wrap:not(:has(.mignote__art)) .mignote__body { display: contents; }

.note__wrap:not(:has(.note__art)) h2,
.mignote__wrap:not(:has(.mignote__art)) h2 { grid-column: 1; grid-row: 1; margin-bottom: 0; }

.note__wrap:not(:has(.note__art)) > .note__body > :not(h2),
.mignote__wrap:not(:has(.mignote__art)) > .mignote__body > :not(h2) { grid-column: 2; }

@media (max-width: 780px) {
  .note__wrap:not(:has(.note__art)),
  .mignote__wrap:not(:has(.mignote__art)) { grid-template-columns: minmax(0, 1fr); }
  .note__wrap:not(:has(.note__art)) h2,
  .mignote__wrap:not(:has(.mignote__art)) h2 { grid-row: auto; margin-bottom: 1rem; }
  .note__wrap:not(:has(.note__art)) > .note__body > :not(h2),
  .mignote__wrap:not(:has(.mignote__art)) > .mignote__body > :not(h2) { grid-column: 1; }
}

/* The no-photograph capability composition on a deep-ink ground. */
.sec--ink .split--nofig .ruled > li,
.sec--ink .split--nofig .ruled > li:nth-child(-n+2) { border-color: var(--ink-line); }
.sec--ink .split--nofig .split__body > p { color: var(--on-ink-2); }

/* ── Support router ─────────────────────────────────────────────────────
   A ruled directory of ordinary links. No cards, no chat styling, and it
   needs no JavaScript to work. */

.router__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--border);
}

.router__item {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: .5rem 1rem;
  align-items: start;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--border);
  transition: background var(--fast) var(--ease);
}

.router__item:hover { background: var(--brand-soft); }

.router__ico { display: grid; place-items: center; width: 34px; height: 34px; color: var(--brand); }
.router__ico svg { width: 22px; height: 22px; }

.router__body h3 { font-family: var(--sans); font-size: var(--t-body); font-weight: 700; letter-spacing: 0; }
.router__body h3 a { color: var(--text); text-decoration: none; }
.router__body h3 a::after { content: ""; position: absolute; inset: 0; }
.router__item:hover h3 a { color: var(--brand); }
.router__body p { margin: .3rem 0 0; font-size: var(--t-small); color: var(--text-soft); max-width: 46ch; }

.router__cta {
  grid-column: 2 / -1;
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .5rem;
  font-size: var(--t-small); font-weight: 600; color: var(--brand);
}

@media (max-width: 860px) { .router__list { grid-template-columns: minmax(0, 1fr); } }

/* ── FAQ accordion ──────────────────────────────────────────────────────
   Adapted from @anubra266's plus/minus accordion on 21st.dev and rebuilt
   natively. Fine rules rather than rounded cards, the mark turning from a
   plus to a minus, and every answer present in the HTML so the section is
   complete with JavaScript off. */

.faq__wrap {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}

.faq__title { font-size: var(--d3); }
.faq__note { margin: 1rem 0 1.5rem; font-size: var(--t-small); color: var(--text-soft); max-width: 34ch; }

.faq__list { border-top: 1px solid var(--border); }

.qa { border-bottom: 1px solid var(--border); }

.qa summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 1.25rem;
  align-items: center;
  min-height: var(--tap);
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
}

.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--r-1); }

.qa__q {
  font-family: var(--serif);
  font-size: var(--d4);
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1.25;
  color: var(--text);
}

/* Plus turning to minus: two rules, one of which rotates away. */
.qa__mark { position: relative; width: 18px; height: 18px; }
.qa__mark::before,
.qa__mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  margin-top: -1px;
  border-radius: 1px;
  background: var(--brand);
  transition: transform var(--base) var(--ease), opacity var(--base) var(--ease);
}
.qa__mark::after { transform: rotate(90deg); }
.qa[open] .qa__mark::after { transform: rotate(0deg); opacity: 0; }

.qa__body { padding: 0 0 1.35rem; max-width: 66ch; }
.qa__body p { margin: 0; color: var(--text-soft); }

/* The answer slides rather than snapping, where the browser supports it and
   the visitor has not asked for less motion. */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .qa { interpolate-size: allow-keywords; }
    .qa::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size var(--base) var(--ease), content-visibility var(--base) allow-discrete;
    }
    .qa[open]::details-content { block-size: auto; }
  }
}

@media (max-width: 1024px) {
  .faq__wrap { grid-template-columns: minmax(0, 1fr); }
  .faq__note { max-width: 58ch; }
}


/* ── Section boundaries ──────────────────────────────────────────────────
   One rule, applied consistently across the site and already used on the
   homepage: a band is separated from its neighbour by a change of ground,
   and a hairline is drawn ONLY where two consecutive bands share a ground
   and would otherwise blur into one another.

   Each selector below is an adjacent-sibling pair measured as sharing a
   ground in the rendered page, so no rule is drawn speculatively. */
.tiers    + .note,
.fits     + .faq,
.terminal + .band,
.cols     + .note,
.note     + .faq,
.values   + .offer,
.sec--warm + .sec--warm,
.sec--lift + .sec--lift,
.sec--ink  + .sec--ink { border-top: 1px solid var(--warm-line); }


/* =============================================================================
   SCROLL JOURNEY
   Ported from "Scroll Reveal Content A" by @abui on 21st.dev
   https://21st.dev/@abui/components/scroll-reveal-content-a

   The source's shape: a tall scroll track containing a sticky, viewport-tall
   stage; a two-column split with numbered steps left and stacked media right;
   and a per-step vertical rail that fills as scroll progress crosses that
   step's own third of the track.
   ============================================================================= */

.jr { background: var(--warm); }
.jr__intro { padding-block: var(--band) 0; }
.jr__intro h2 { margin: .35rem 0 0; }
.jr__lede {
  margin-top: .9rem; font-size: var(--t-body); line-height: 1.65;
  color: var(--on-warm-2); max-width: 56ch;
}

/* Stacked fallback: no track, no stickiness, every step with its own picture.
   This is what renders below the breakpoint, without scripting, and under
   reduced motion. */
.jr__track { padding-block: var(--band); }
.jr__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.5rem, 6vw, 4rem); }
.jr__step { display: grid; grid-template-columns: auto 1fr; gap: 0 1rem; align-items: start; }
.jr__no {
  grid-column: 1 / -1; margin: 0 0 .6rem;
  font-family: var(--serif); font-size: 1.05rem; color: var(--on-warm-3);
  font-variant-numeric: tabular-nums;
}
.jr__rail { position: relative; width: 2px; height: 100%; background: var(--warm-line); border-radius: 2px; }
.jr__rail span { position: absolute; inset: 0 0 auto; height: 0; width: 2px; background: var(--purple); border-radius: 2px; }
.jr__body h3 { margin: 0 0 .5rem; font-size: var(--t-h3, 1.35rem); }
.jr__body > p { margin: 0; font-size: var(--t-body); line-height: 1.65; color: var(--on-warm-2); max-width: 46ch; }
.jr__points { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .45rem; }
.jr__points li { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--t-small); color: var(--on-warm-2); }
.jr__points svg { color: var(--purple); margin-top: .15rem; }
.jr__body .arrow { margin-top: 1rem; }
.jr__inline { margin: 1.25rem 0 0; grid-column: 1 / -1; border-radius: var(--r-2); overflow: hidden; }
.jr__inline .ph, .jr__inline img { display: block; width: 100%; height: auto; }
.jr__media { display: none; }

/* The scroll-driven composition. */
@media (min-width: 1000px) {
  html.js .jr__track { position: relative; height: 300vh; padding: 0; }   /* the source's 300vh track */
  html.js .jr__stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
  html.js .jr__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem); align-items: center; width: 100%;
  }
  /* Three steps must sit inside one viewport-tall stage, so the stack is
     tightened here rather than letting the column overflow the sticky frame. */
  html.js .jr__steps { gap: clamp(1rem, 2.2vw, 1.75rem); }
  html.js .jr__no { margin-bottom: .3rem; font-size: .95rem; }
  html.js .jr__body h3 { font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); margin-bottom: .35rem; }
  html.js .jr__body > p { font-size: var(--t-small); line-height: 1.55; max-width: 44ch; }
  html.js .jr__points { margin-top: .6rem; gap: .3rem; }
  html.js .jr__points li { font-size: var(--t-micro); }
  html.js .jr__body .arrow { margin-top: .6rem; font-size: var(--t-micro); }
  html.js .jr__step {
    grid-template-columns: 2px 1fr; gap: 0 1.25rem;
    opacity: .72;                       /* the source uses .5; these carry facts */
    transition: opacity var(--base) var(--ease);
  }
  html.js .jr__step.is-live { opacity: 1; }
  html.js .jr__no { grid-column: 1 / -1; }
  html.js .jr__inline { display: none; }

  html.js .jr__media { display: block; position: relative; aspect-ratio: 4 / 3; }
  html.js .jr__shot {
    position: absolute; inset: 0; opacity: 0;
    border-radius: var(--r-2); overflow: hidden;
    transition: opacity .3s linear;
  }
  html.js .jr__shot.is-live { opacity: 1; }
  html.js .jr__shot .ph, html.js .jr__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .jr__track { position: static; height: auto; padding-block: var(--band); }
  html.js .jr__stage { position: static; height: auto; }
  html.js .jr__step { opacity: 1; transition: none; }
  html.js .jr__shot { transition: none; }
  .jr__rail span { transition: none; }
}

/* Short desktop windows: the three steps must still sit inside one
   viewport-tall stage, so the stack tightens again rather than clipping. */
@media (min-width: 1000px) and (max-height: 880px) {
  html.js .jr__steps { gap: .8rem; }
  html.js .jr__body h3 { font-size: 1.02rem; }
  html.js .jr__body > p { font-size: var(--t-micro); line-height: 1.5; }
  html.js .jr__points { margin-top: .45rem; }
  html.js .jr__points li:nth-child(n+3) { display: none; }
  html.js .jr__no { font-size: .85rem; margin-bottom: .2rem; }
}

/* =============================================================================
   RESPONSIBILITY COLUMNS
   Ported from "Us vs Them Comparison" by @7ovr
   https://21st.dev/@7ovr/components/comparison-2
   ============================================================================= */

.duty2 { padding-block: var(--band); background: var(--warm-lift); }
.duty2__head { max-width: 62ch; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.duty2__head h2 { margin: .35rem 0 0; }
.duty2__lede { margin-top: .9rem; font-size: var(--t-small); line-height: 1.6; color: var(--on-warm-2); }

.duty2__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); }
.duty2__col {
  display: flex; flex-direction: column;
  border: 1px solid var(--warm-line); border-radius: var(--r-2);
  background: var(--warm); overflow: hidden;
}
/* The source rings its primary column; ours marks the side we carry. */
.duty2__col--us { border-color: color-mix(in srgb, var(--purple) 38%, var(--warm-line)); }

.duty2__top { padding: clamp(1.1rem, 2.2vw, 1.5rem); border-bottom: 1px solid var(--warm-line); }
.duty2__top h3 { margin: 0 0 .3rem; font-size: var(--t-body); }
.duty2__top p { margin: 0; font-size: var(--t-micro); line-height: 1.5; color: var(--on-warm-3, var(--on-warm-2)); }

.duty2__list { list-style: none; margin: 0; padding: clamp(1.1rem, 2.2vw, 1.5rem); display: grid; gap: .75rem; flex: 1 1 auto; }
.duty2__list li { display: flex; align-items: flex-start; gap: .75rem; font-size: var(--t-small); line-height: 1.5; color: var(--on-warm); }
.duty2__col--you .duty2__list li { color: var(--on-warm-2); }

/* The source's small filled square mark, kept at its 16px size. */
.duty2__mark {
  flex: none; width: 16px; height: 16px; margin-top: .18rem; border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--warm-line);
}
.duty2__mark--yes { background: var(--purple); color: #fff; }
.duty2__mark--yes svg { width: 12px; height: 12px; }

.duty2__foot { padding: clamp(.9rem, 2vw, 1.25rem) clamp(1.1rem, 2.2vw, 1.5rem); border-top: 1px solid var(--warm-line); }

@media (max-width: 820px) { .duty2__cols { grid-template-columns: minmax(0, 1fr); } }

/* =============================================================================
   TABBED WORKFLOW
   Ported from "Tabs" by @ddoemonn — https://21st.dev/@ddoemonn/components/tabs
   ============================================================================= */

.tflow { padding-block: var(--band); background: var(--warm); }
.tflow__head { max-width: 62ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.tflow__head h2 { margin: .35rem 0 0; }
.tflow__lede { margin-top: .9rem; font-size: var(--t-small); line-height: 1.6; color: var(--on-warm-2); }

/* The source's tablist: a rail with a travelling indicator behind the tabs. */
.tflow__tabs {
  position: relative; display: flex; gap: .25rem; overflow-x: auto;
  border-bottom: 1px solid var(--warm-line); scrollbar-width: none;
}
.tflow__tabs::-webkit-scrollbar { display: none; }
.tflow__ind {
  position: absolute; bottom: -1px; left: 0; width: 0; height: 2px;
  background: var(--purple); border-radius: 2px;
  transition: left var(--base) var(--ease), width var(--base) var(--ease);
}
html:not(.js) .tflow__ind { display: none; }

.tflow__tab {
  position: relative; display: inline-flex; align-items: baseline; gap: .55rem;
  padding: .8rem 1rem; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--t-small); color: var(--on-warm-2);
  white-space: nowrap; transition: color var(--fast) var(--ease);
}
.tflow__tab:hover { color: var(--on-warm); }
.tflow__tab.is-on { color: var(--on-warm); font-weight: 600; }
.tflow__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; border-radius: 6px; }
.tflow__no { font-family: var(--serif); font-size: .9rem; color: var(--on-warm-3, var(--on-warm-2)); font-variant-numeric: tabular-nums; }
.tflow__tab.is-on .tflow__no { color: var(--purple); }

.tflow__panels { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.tflow__panel {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
.tflow__stage { margin: 0 0 .5rem; font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--on-warm-3, var(--on-warm-2)); }
.tflow__body h3 { margin: 0 0 .5rem; }
.tflow__text { margin: 0; font-size: var(--t-body); line-height: 1.65; color: var(--on-warm-2); max-width: 46ch; }
.tflow__body .arrow { margin-top: 1rem; }
.tflow__fig { margin: 0; border-radius: var(--r-2); overflow: hidden; }
.tflow__fig .ph, .tflow__fig img { display: block; width: 100%; height: auto; }

/* With scripting, one panel at a time and the source's directional entry. */
html.js .tflow__panel { display: none; }
html.js .tflow__panel.is-on {
  display: grid;
  animation: tflow-in var(--base) var(--ease) both;
}
@keyframes tflow-in { from { opacity: 0; transform: translateX(var(--tflow-dx, 12px)); } to { opacity: 1; transform: none; } }

/* Without scripting every stage is present and stacked, so nothing is hidden
   behind a control that cannot be pressed. */
html:not(.js) .tflow__panel + .tflow__panel { margin-top: clamp(2rem, 4vw, 3rem); }

@media (max-width: 900px) { .tflow__panel { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .tflow__ind { transition: none; }
  html.js .tflow__panel.is-on { animation: none; }
}

/* =============================================================================
   TIER PROGRESSION  (Ellistone)
   The nine tiers in their verified catalogue order, read as one ascending
   ladder rather than nine equal rows. Each rung shows its resources as
   proportional bars against the largest tier, so the progression is visible
   rather than something the reader has to compute from the numbers.
   No grouping or taxonomy is invented: the order is the catalogue's own.
   ============================================================================= */

.ladder { padding-block: var(--band); background: var(--warm-lift); }
.ladder__head { max-width: 62ch; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.ladder__head h2 { margin: .35rem 0 0; }
.ladder__lede { margin-top: .9rem; font-size: var(--t-small); line-height: 1.6; color: var(--on-warm-2); }

.ladder__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--warm-line); }
.ladder__row {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, .5fr) auto;
  gap: .5rem clamp(1rem, 2.5vw, 2rem); align-items: center;
  padding: clamp(.85rem, 1.8vw, 1.15rem) 0;
  border-bottom: 1px solid var(--warm-line);
  transition: background var(--fast) var(--ease);
}
.ladder__row:hover { background: var(--warm); }
.ladder__row.is-pick { background: color-mix(in srgb, var(--purple) 7%, transparent); }

.ladder__name { display: flex; align-items: baseline; gap: .6rem; min-width: 0; }
.ladder__name h3 { margin: 0; font-family: var(--serif); font-size: 1.0625rem; font-weight: 500; }
.ladder__flag {
  font-size: var(--t-micro); color: var(--purple);
  border: 1px solid color-mix(in srgb, var(--purple) 40%, transparent);
  border-radius: 4px; padding: 0 .35rem;
}

/* Three proportional bars: cores, memory, storage. */
.ladder__bars { display: grid; gap: .3rem; min-width: 0; }
.ladder__bar { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: .6rem; align-items: center; }
.ladder__bar span:first-child { font-size: var(--t-micro); color: var(--on-warm-3, var(--on-warm-2)); }
.ladder__track { position: relative; height: 5px; border-radius: 3px; background: var(--warm-line); overflow: hidden; }
.ladder__fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--purple); }
.ladder__bar > b { font-size: var(--t-micro); font-weight: 500; color: var(--on-warm); white-space: nowrap; font-variant-numeric: tabular-nums; }

.ladder__price { font-size: var(--t-small); text-align: right; white-space: nowrap; }
.ladder__price strong { font-family: var(--serif); font-size: 1.0625rem; font-weight: 500; }
.ladder__price span { color: var(--on-warm-2); }
.ladder__go { justify-self: end; }

.ladder__note { margin-top: 1.25rem; font-size: var(--t-micro); color: var(--on-warm-2); }
.ladder__common { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.ladder__common li { display: flex; gap: .45rem; align-items: center; font-size: var(--t-micro); color: var(--on-warm-2); }
.ladder__common svg { color: var(--purple); }

@media (max-width: 940px) {
  .ladder__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: .75rem; }
  .ladder__bars { grid-column: 1 / -1; }
  .ladder__go { grid-column: 2; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) { .ladder__row { transition: none; } }

/* =============================================================================
   MAILBOX SCALE  (Hawthorne)
   Adapted from "Feature Comparison Table" by @7ovr
   https://21st.dev/@7ovr/components/comparison-3
   ============================================================================= */

.mbx { padding-block: var(--band); background: var(--warm-lift); }
.mbx__head { max-width: 64ch; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.mbx__head h2 { margin: .35rem 0 0; }
.mbx__lede { margin-top: .9rem; font-size: var(--t-small); line-height: 1.6; color: var(--on-warm-2); }

/* The source's full-width group label above a band of rows. */
.mbx__group {
  margin: 0 0 .9rem; font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--on-warm-3, var(--on-warm-2));
  padding-bottom: .6rem; border-bottom: 1px solid var(--warm-line);
}

.mbx__cols { list-style: none; margin: 0 0 clamp(2rem, 4vw, 3rem); padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.75rem, 2vw, 1.25rem); }
.mbx__col {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--warm-line); border-radius: var(--r-2); background: var(--warm);
}
.mbx__col.is-pick { border-color: color-mix(in srgb, var(--purple) 42%, var(--warm-line)); background: color-mix(in srgb, var(--purple) 6%, var(--warm)); }

.mbx__n { margin: 0; font-family: var(--serif); font-size: clamp(2.6rem, 2rem + 2.4vw, 4rem); line-height: 1; font-weight: 500; color: var(--on-warm); font-variant-numeric: tabular-nums; }
.mbx__unit { margin: .2rem 0 0; font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--on-warm-3, var(--on-warm-2)); }
.mbx__name { margin: 1rem 0 .2rem; font-size: var(--t-small); font-weight: 600; color: var(--on-warm); }
.mbx__flag { font-size: var(--t-micro); font-weight: 500; color: var(--purple); border: 1px solid color-mix(in srgb, var(--purple) 40%, transparent); border-radius: 4px; padding: 0 .3rem; }
.mbx__price { margin: 0 0 1.1rem; font-size: var(--t-small); color: var(--on-warm-2); }
.mbx__price strong { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; color: var(--on-warm); }
.mbx__go { margin-top: auto; }

.mbx__list { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem clamp(1.5rem, 4vw, 3rem); }
.mbx__list li { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--t-small); color: var(--on-warm-2); }
.mbx__list svg { color: var(--purple); margin-top: .15rem; }

@media (max-width: 860px) {
  .mbx__cols { grid-template-columns: minmax(0, 1fr); }
  .mbx__list { grid-template-columns: minmax(0, 1fr); }
}

/* =============================================================================
   CARE SCOPE  (Ripley)
   Ported from "How It Works Timeline" by @7ovr
   https://21st.dev/@7ovr/components/how-it-works-2
   ============================================================================= */

.scope { padding-block: var(--band); background: var(--warm-lift); }
.scope__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.scope__head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.scope__head h2 { margin: .35rem 0 0; }
.scope__lede { margin-top: .9rem; font-size: var(--t-small); line-height: 1.6; color: var(--on-warm-2); max-width: 52ch; }

.scope__list { list-style: none; margin: 0; padding: 0; }
.scope__item { display: flex; gap: clamp(1rem, 2vw, 1.5rem); }
/* The source's rail: a bordered square mark with a hairline running to the next. */
.scope__rail { display: flex; flex-direction: column; align-items: center; }
.scope__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--warm-line); border-radius: var(--r-3, 8px);
  background: var(--warm); color: var(--purple);
}
.scope__line { margin-top: .25rem; width: 1px; flex: 1 1 auto; background: var(--warm-line); }
.scope__body { padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.scope__item.is-last .scope__body { padding-bottom: 0; }
.scope__body h3 { margin: .4rem 0 .35rem; font-size: var(--t-body); }
.scope__body p { margin: 0; font-size: var(--t-small); line-height: 1.6; color: var(--on-warm-2); max-width: 52ch; }

/* The boundary panel. Sticky beside the list so the allowance and what falls
   outside it are never off screen while the scope is read. */
.scope__edge { position: sticky; top: calc(var(--head-h, 86px) + 1.5rem); }
.scope__card { border: 1px solid var(--warm-line); border-radius: var(--r-2); background: var(--warm); padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.scope__card h3 { margin: .35rem 0 .6rem; font-size: var(--t-body); }
.scope__card p { margin: 0 0 .8rem; font-size: var(--t-small); line-height: 1.6; color: var(--on-warm-2); }
.scope__quote { font-style: italic; color: var(--on-warm-3, var(--on-warm-2)) !important; }

@media (max-width: 940px) {
  .scope__grid { grid-template-columns: minmax(0, 1fr); }
  .scope__edge { position: static; order: -1; }
}
@media (prefers-reduced-motion: reduce) { .scope__edge { position: static; } }


/* ── A pictureless band stops floating ──────────────────────────────────
   `.band--nopic .band__wrap` keeps the shell's width but centres a 78ch box
   inside the viewport, so the block floats free of every section around it.
   The measure is right; where it starts was not. Same single column, same
   width, beginning at the shell's left edge like everything else.

   The rule it corrects lives in assets/css/photography.css, which is still
   uncommitted work in this tree and is not this pass's to commit. Written
   here at a higher specificity so load order cannot undo it, and to be
   folded back into photography.css the moment that file lands.           */
.band.band--nopic .band__wrap { grid-template-columns: minmax(0, 78ch); max-width: var(--shell); }

/* ── A tall picture in a stacked band ───────────────────────────────────
   Below 900px the band collapses to one column, so a portrait asset runs
   the full width and stands 125% of it tall — 959px on an 834px tablet,
   which pushes the whole passage off the screen. Between the breakpoint
   and the width where the 4:3 mobile derivative takes over, the frame is
   held to the same 4:3 the mobile crop uses.

   Written here rather than beside .band__fig in photography.css, which is
   uncommitted work in this tree; fold it back when that file lands.      */
@media (max-width: 900px) {
  .band .band__fig .ph,
  .band .band__fig picture { display: block; }
  .band .band__fig img { aspect-ratio: 4 / 3; height: auto; width: 100%; object-fit: cover; }
}

/* Annual billing, stated under the monthly price where it is enabled. */
.tier__annual, .mbx__annual {
  margin: .35rem 0 0; font-size: var(--t-micro); line-height: 1.4; color: var(--on-warm-2);
}
.tier__annual strong, .mbx__annual strong { font-weight: 600; color: var(--on-warm); }