/* ---------------------------------------------------------------
   Pricing: the catalogue, the detail sheet and the packages.
   Kept out of ui.css because none of it is used anywhere else.
   --------------------------------------------------------------- */
  .pvbar { background: var(--carbon); color: #fff; font-family: var(--mono);
    font-size: 12px; padding: 10px 20px; text-align: center; letter-spacing: 0.04em; }
  .pvbar b { color: var(--stamp-lt); }
  /* no hero: the page opens on the packages, so the first band needs its own
     breathing room at the top rather than inheriting a hero's */
  #packages { padding-top: clamp(2.4rem, 1.6rem + 2.6vw, 3.8rem); }
  .pkg-top h1 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
    letter-spacing: -0.035em; margin: 0; }
  /* the row itself, made worth touching */
  .menu-row { grid-template-columns: auto 1fr auto; column-gap: 14px;
    border-radius: var(--radius-sm); padding-left: 10px; padding-right: 10px; margin: 0 -10px;
    transition: background 140ms ease; }
  .row-ic { width: 34px; height: 34px; border-radius: var(--radius); background: var(--field);
    border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto; margin-top: 2px; transition: background 140ms ease, border-color 140ms ease; }
  .row-ic svg { width: 17px; height: 17px; fill: none; stroke: var(--slate);
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    transition: stroke 140ms ease; }
  .menu-price { font-size: 1.06rem; }
  .menu-price em { font-size: 0.76rem; }
  @media (hover: hover) and (pointer: fine) {
    .menu-row:hover { background: var(--field); }
    .menu-row:hover .row-ic { background: var(--surface); border-color: var(--stamp-lt); }
    .menu-row:hover .row-ic svg { stroke: var(--stamp); }
  }
  details[open] .menu-more summary, .menu-more[open] summary { color: var(--stamp); }
  .menu-more summary::marker { color: var(--stamp); }
  .grp-num { font-family: var(--mono); font-size: max(0.72rem, 12px); color: var(--stamp); margin: 0 0 6px; }
  .menu-hook { display: block; font-size: 0.87rem; color: var(--text-2); margin-top: 3px; line-height: 1.45; }
  .menu-who { display: block; font-family: var(--mono); font-size: max(0.72rem, 12px);
    color: var(--text-2); margin-top: 4px; }
  .scope-lede { font-size: 0.9rem; color: var(--text-2); line-height: 1.55; margin: 10px 0 0; }
  .scope-yr { font-family: var(--mono); font-size: max(0.7rem, 12px); color: var(--text-2); margin: 12px 0 0; }
  /* scope lists inside a catalogue row */
  .scope { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-top: 10px; }
  .scope h4 { font-family: var(--mono); font-size: max(0.64rem, 12px); letter-spacing: 0.11em;
    text-transform: uppercase; color: var(--text-2); margin: 0 0 5px; font-weight: 700; }
  .scope .out h4 { color: var(--stamp); }
  .scope ul { margin: 0; padding-left: 1.05em; font-size: 0.86rem; line-height: 1.55; color: var(--text-2); }
  .scope li { margin-bottom: 3px; }
  .scope b { color: var(--text); font-weight: 600; }
  .menu-price em.yr { display: block; font-family: var(--mono); font-size: max(0.74rem, 12px);
    color: var(--text-2); margin-top: 3px; font-style: normal; font-weight: 400; }
  /* trade packages */
  .pkg-line { font-size: 0.86rem; color: var(--text-2); margin: 0 0 14px; line-height: 1.45; }
  /* what is in every price, as a list rather than six rows of prose */
  .tickets { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 26px; }
  .tickets li { break-inside: avoid; position: relative; padding-left: 24px;
    margin-bottom: 12px; font-size: 0.91rem; line-height: 1.5; }
  .tickets li::before { content: ""; position: absolute; left: 0; top: 0.28em;
    width: 14px; height: 8px; border-left: 2px solid var(--stamp);
    border-bottom: 2px solid var(--stamp); transform: rotate(-45deg); }
  @media (max-width: 620px) { .tickets { columns: 1; } }
  .menu-tight .menu-row { padding: 11px 0; }

  .trade-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-top: 2.6rem; }
  .trade-h h3 { font-size: 1.12rem; letter-spacing: -0.02em; margin: 0; }
  .trade-h span { font-family: var(--mono); font-size: max(0.72rem, 12px); color: var(--text-2); }
  @media (max-width: 860px) { .scope { grid-template-columns: 1fr; } }
  /* same 12px floor the rest of the site holds to */
  @media (max-width: 760px) {
  .scope-lede { font-size: max(0.9rem, 15px); }
  .hw-steps p { font-size: max(0.9rem, 15px); max-width: none; }
  .menu-hook { font-size: max(0.86rem, 14px); }
    .menu-hook { font-size: 0.92rem; }
  }

/* The row above sets three columns at every width. At phone width the price
   cannot sit beside the name, so it drops under it the way ui.css does. */
@media (max-width: 560px) {
  .menu-row { grid-template-columns: auto 1fr; row-gap: 10px; }
  .menu-row > div { grid-column: 2; }
  .menu-price { grid-column: 2; text-align: left; white-space: normal; }
  .menu-price em.yr, .menu-price em { display: inline; margin-left: 8px; }
}

/* ---------- catalogue row: a Details button, not a disclosure ---------- */

.menu-det { appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: max(0.72rem, 12px); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--stamp); padding: 7px 0 0; margin: 0;
  display: inline-flex; align-items: center; gap: 7px; min-height: 30px; }
.menu-det i { display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; background: var(--stamp);
  color: #fff; font-style: normal; font-size: 12px; line-height: 1;
  transition: transform 180ms ease; }
.menu-det:hover i, .menu-row:hover .menu-det i { transform: scale(1.18) rotate(90deg); }
.menu-det:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; border-radius: var(--radius-sm); }

/* ---------- the detail sheet ---------- */

.det { width: min(760px, calc(100vw - 32px)); max-height: min(86vh, 820px);
  padding: 0; border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--text);
  box-shadow: 0 32px 80px -24px rgba(22, 24, 28, 0.45); overflow: auto; }
.det::backdrop { background: rgba(22, 24, 28, 0.62); backdrop-filter: blur(2px); }
.det[open] { animation: detIn 220ms cubic-bezier(.2, .8, .3, 1); }
@keyframes detIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }

.det-x { position: sticky; top: 0; height: 0; text-align: right; z-index: 2; }
.det-x button { appearance: none; position: relative; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--rule); background: var(--surface); color: var(--text-2);
  font-size: 20px; line-height: 1; transition: background 140ms ease, color 140ms ease; }
.det-x button:hover { background: var(--carbon); color: #fff; border-color: var(--carbon); }

.det-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px;
  align-items: start; padding: 26px 62px 20px 28px; border-bottom: 1px solid var(--rule); }
.det-ic { width: 46px; height: 46px; border-radius: var(--radius-lg); background: #FDF3F2;
  border: 1px solid var(--stamp-lt); display: flex; align-items: center;
  justify-content: center; flex: 0 0 auto; }
.det-ic[hidden] { display: none; }
.det-ic svg { width: 23px; height: 23px; fill: none; stroke: var(--stamp);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.det-kicker { font-family: var(--mono); font-size: max(0.68rem, 12px); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-2); margin: 0 0 5px; }
.det h3 { font-size: 1.32rem; letter-spacing: -0.02em; margin: 0; }
.det-hook { font-size: 0.95rem; color: var(--text-2); margin: 5px 0 0; line-height: 1.5; }
.det-price { text-align: right; font-size: 1.28rem; font-weight: 650;
  letter-spacing: -0.02em; margin: 0; white-space: nowrap; }
.det-price em { display: block; font-family: var(--mono); font-size: max(0.68rem, 12px);
  font-style: normal; font-weight: 400; color: var(--text-2); margin-top: 4px; }

.det-body { padding: 22px 28px 24px; }
.det-body .scope-lede { font-size: 1rem; color: var(--text); line-height: 1.6;
  margin: 0 0 20px; max-width: 60ch; }
.det-body .scope { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0;
  border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.det-body .scope > div { padding: 18px 20px; background: var(--field); }
.det-body .scope > div + div { border-left: 1px solid var(--rule); background: #FDF3F2; }
.det-body .scope h4 { font-size: max(0.68rem, 12px); margin: 0 0 10px; }
.det-body .scope ul { font-size: 0.93rem; line-height: 1.6; padding-left: 0; list-style: none; }
.det-body .scope li { margin-bottom: 9px; padding-left: 22px; position: relative; }
.det-body .scope li::before { content: ""; position: absolute; left: 0; top: 0.46em;
  width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--slate); }
.det-body .scope .out li::before { border-color: var(--stamp); background: var(--stamp); }
.det-body .scope-yr { font-size: 0.86rem; color: var(--stamp); font-weight: 600;
  margin: 18px 0 0; padding: 11px 14px; background: #FDF3F2;
  border-radius: var(--radius-pill); display: inline-block; }

/* A system's detail: what is included, what costs extra as a price list, and
   the yearly option as a figure you can see rather than a sentence. The old
   "Costs more" column mixed prices, exclusions and cross-sells under one red
   heading; each now has its own place. */
.det-body .sc { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.det-body .sc h4 { font-family: var(--mono); font-size: max(0.68rem, 12px); letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--text-2); font-weight: 600; margin: 0 0 10px; }
.det-body .sc ul { list-style: none; padding: 0; margin: 0; font-size: 0.93rem; line-height: 1.5; }
.det-body .sc li { position: relative; padding-left: 24px; margin-bottom: 8px; }
.det-body .sc li::before { content: ""; position: absolute; left: 3px; top: 0.3em;
  width: 5px; height: 10px; border: solid var(--carbon); border-width: 0 2px 2px 0;
  transform: rotate(45deg); }
.det-body .sc dl { margin: 0; font-size: 0.93rem; border-top: 1px solid var(--rule); }
.det-body .sc dl > div { display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--rule); }
.det-body .sc dt { line-height: 1.4; }
.det-body .sc dd { margin: 0; text-align: right; white-space: nowrap; }
.det-body .sc dd b { font-weight: 650; }
.det-body .sc dd span { display: block; font-family: var(--mono); font-size: max(0.72rem, 12px);
  color: var(--text-2); margin-top: 2px; }
.det-body .sc-note { font-size: 0.86rem; color: var(--text-2); line-height: 1.5; margin: 12px 0 0; }

/* package sheets: each system is a row that opens its own sheet */
.det-body .sc ul.sc-sys { border-top: 1px solid var(--rule); }
.det-body .sc-sys li { padding: 0; margin: 0; border-bottom: 1px solid var(--rule); }
.det-body .sc-sys li::before { display: none; }
.sys-b { appearance: none; width: 100%; display: grid; grid-template-columns: 1fr auto;
  align-items: center; column-gap: 12px; padding: 10px 4px; margin: 0; border: 0;
  background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
  border-radius: var(--radius-sm); transition: background 140ms ease; min-height: 44px; }
.sys-b b { font-weight: 600; font-size: 0.93rem; }
.sys-b span { grid-column: 1; font-size: 0.84rem; color: var(--text-2); margin-top: 1px; }
.sys-b::after { content: ""; grid-column: 2; grid-row: 1 / span 2; width: 7px; height: 7px;
  border: solid var(--stamp); border-width: 2px 2px 0 0; transform: rotate(45deg); margin-right: 6px; }
.sys-b:hover { background: var(--field); }
.sys-b:focus-visible, .sys-link:focus-visible, .det-back:focus-visible {
  outline: 2px solid var(--stamp); outline-offset: 2px; }
.det-body .sc-plus { font-size: 0.86rem; color: var(--text-2); margin: 10px 0 0; }
.det-body .sc ul.sc-only { margin-bottom: 20px; }
.sys-link { appearance: none; border: 0; background: none; padding: 0; font: inherit;
  color: var(--stamp); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.det-back { appearance: none; border: 0; background: none; padding: 6px 0 6px 16px; margin: -4px 0 14px;
  font-family: var(--mono); font-size: max(0.72rem, 12px); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--stamp); cursor: pointer; position: relative; min-height: 32px; }
.det-back::before { content: ""; position: absolute; left: 2px; top: 50%; width: 6px; height: 6px;
  border: solid var(--stamp); border-width: 0 0 2px 2px; transform: translateY(-50%) rotate(45deg); }

/* separately against the package, as a small table rather than a sentence */
.sc-vs { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.sc-vs th, .sc-vs td { padding: 8px 0; border-bottom: 1px solid var(--rule); text-align: right; }
.sc-vs thead th { font-family: var(--mono); font-size: max(0.68rem, 12px); font-weight: 400;
  color: var(--text-2); padding-top: 0; }
.sc-vs tbody th { text-align: left; font-weight: 400; color: var(--text-2); }
.sc-vs s { color: var(--text-2); }
.sc-vs td:last-child { font-weight: 650; padding-left: 16px; }
.sc-vs .sc-vs-save th, .sc-vs .sc-vs-save td { color: var(--stamp); font-weight: 650; border-bottom: 0; }

/* what is out of scope, and what is worth knowing: marked, not bulleted */
.det-body .sc ul.sc-no li::before { width: 10px; height: 2px; border: 0; background: var(--slate);
  transform: none; top: 0.68em; left: 2px; }
.det-body .sc ul.sc-info li::before { width: 6px; height: 6px; border: 0; border-radius: 50%;
  background: var(--slate); transform: none; top: 0.55em; left: 3px; }

.det-body .sc-yr { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 20px; margin-top: 24px; padding: 16px 20px;
  border: 1.5px solid var(--carbon); border-radius: var(--radius-lg); background: var(--field); }
.det-body .sc-yr p { margin: 0; }
.det-body .sc-yr p:first-child { display: grid; grid-template-columns: auto auto;
  justify-content: start; align-items: baseline; column-gap: 8px; }
.det-body .sc-yr-save { display: flex; }
.det-body .sc-yr-k { grid-column: 1 / -1; margin-bottom: 2px; font-family: var(--mono); font-size: max(0.68rem, 12px);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.det-body .sc-yr b { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; }
.det-body .sc-yr-per { font-family: var(--mono); font-size: 0.78rem; color: var(--text-2); }
.det-body .sc-yr-save { flex-direction: column; align-items: flex-end; gap: 2px;
  padding: 9px 14px; border-radius: var(--radius); background: var(--stamp); color: #fff; }
.det-body .sc-yr-save b { font-size: 1rem; letter-spacing: -0.01em; }
.det-body .sc-yr-save span { font-family: var(--mono); font-size: max(0.7rem, 12px); opacity: .9; }

.det-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 18px 28px 24px; border-top: 1px solid var(--rule); background: var(--field); }
.det-foot span { font-family: var(--mono); font-size: max(0.72rem, 12px); color: var(--text-2); }

@media (max-width: 720px) {
  .det { width: 100%; max-width: 100%; max-height: 92vh; margin: auto auto 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; }
  .det-head { grid-template-columns: auto 1fr; padding: 22px 54px 18px 18px; }
  .det-price { grid-column: 1 / -1; text-align: left; }
  .det-body { padding: 18px; }
  .det-body .scope { grid-template-columns: 1fr; }
  .det-body .scope > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .det-foot { padding: 16px 18px 22px; }
  .det-body .scope ul, .det-body .scope-lede { font-size: 0.95rem; }
  .det-kicker, .det-price em, .det-foot span, .det-body .scope-yr,
  .det-body .scope h4, .menu-det { font-size: max(0.72rem, 12px); }
  .det-body .sc { grid-template-columns: 1fr; gap: 22px; }
  .det-body .sc ul, .det-body .sc dl { font-size: 0.95rem; }
  .det-body .sc h4, .det-body .sc dd span, .det-body .sc-yr-k, .det-body .sc-yr-per,
  .det-body .sc-yr-save span { font-size: max(0.72rem, 12px); }
  .det-body .sc-yr { padding: 14px 16px; column-gap: 12px; }
  .sys-b span, .det-body .sc-plus, .sc-vs, .det-body .sc-note { font-size: 0.9rem; }
  .sc-vs thead th, .det-back { font-size: max(0.72rem, 12px); }
  .det-body .sc-yr b { font-size: 1.36rem; }
  .det-body .sc-yr-save { padding: 8px 12px; }
  .det-body .sc-yr-save b { font-size: 0.95rem; }
}

/* ---------- packages ---------- */

.pkg-top { text-align: center; max-width: 680px; margin: 0 auto 34px; }
.pkg-top h2 { margin: 0; }
.pkg-top .fc-sub { margin: 10px auto 0; }

.billsw { position: relative; display: flex; width: max-content; max-width: 100%;
  gap: 4px; padding: 4px; margin: 24px auto 0;
  border: 1px solid var(--rule); border-radius: var(--radius-pill); background: var(--surface); }
.bill-b { appearance: none; cursor: pointer; border: 0; background: none; font: inherit;
  font-size: 0.86rem; color: var(--text-2); padding: 10px 24px; border-radius: var(--radius-pill);
  min-height: 44px; transition: background 160ms ease, color 160ms ease; }
.bill-b.is-on { background: var(--carbon); color: #fff; font-weight: 600; }

.pkgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.pkg { position: relative; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 26px 22px 22px; display: flex; flex-direction: column;
  transition: border-color 200ms ease, box-shadow 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .pkg:hover { border-color: var(--slate);
    box-shadow: 0 1px 2px rgba(22, 24, 28, .04), 0 20px 44px -34px rgba(22, 24, 28, .55); }
}
.pkg-best { border-color: var(--stamp); }
.pkg-max { border-color: var(--carbon); }

.pkg-ribbon { position: absolute; left: 22px; top: -11px; font-family: var(--mono);
  font-size: max(0.64rem, 12px); letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--stamp); color: #fff; padding: 5px 12px; border-radius: var(--radius-pill); }
.pkg-ribbon-dark { background: var(--carbon); }

.pkg h3 { font-size: 1.16rem; letter-spacing: -0.025em; margin: 0; }
.pkg-line { font-size: 0.89rem; color: var(--text-2); margin: 6px 0 0; line-height: 1.5; }

.pkg-price { margin-top: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); }
.pkg-p { font-size: 1.44rem; font-weight: 650; letter-spacing: -0.03em; margin: 0;
  display: flex; align-items: baseline; gap: 8px; }
.pkg-p span { font-family: var(--mono); font-size: max(0.68rem, 12px); font-weight: 400;
  letter-spacing: 0; color: var(--text-2); }
.pkg-p + .pkg-p { margin-top: 6px; }
.pkg-run { color: var(--stamp); }
.pkg-run span { color: var(--stamp); opacity: .8; }

.pkg-in { list-style: none; margin: 18px 0 0; padding: 0; font-size: 0.89rem; }
.pkg-in li { position: relative; padding-left: 20px; margin-bottom: 9px; line-height: 1.45; }
.pkg-in li::before { content: ""; position: absolute; left: 0; top: 0.42em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--stamp); }
.pkg-in li.plus { color: var(--text-2); }
.pkg-in li.plus::before { background: none; border: 1.5px solid var(--slate); width: 8px; height: 8px; }

/* The saving used to be a sentence in 11px mono. It is a number, so it is
   set as one: a label, the figure, and what it is measured against. */
.pkg-save { margin-top: auto; padding-top: 18px; }
.pkg-save i { display: block; font-style: normal; font-family: var(--mono);
  font-size: max(0.66rem, 12px); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-2); }
.pkg-save b { display: block; font-size: 1.32rem; font-weight: 700;
  letter-spacing: -0.03em; color: var(--stamp); margin-top: 2px; }
.pkg-save span { display: block; font-size: 0.84rem; color: var(--text-2);
  line-height: 1.45; margin-top: 3px; }

/* The terms were four facts inside one small paragraph. Each is now a figure
   with a line under it, which is what they actually are. */
.terms { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); overflow: hidden; margin: 30px 0 0; padding: 0; }
.terms li { background: var(--surface); padding: 22px 20px 24px; }
.terms b { display: block; font-size: 1.62rem; font-weight: 700;
  letter-spacing: -0.035em; line-height: 1; }
.terms b i { font-style: normal; font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.04em; color: var(--text-2); margin: 0 5px; vertical-align: 0.22em; }
.terms li:first-child b, .terms li:nth-child(2) b { color: var(--stamp); }
.terms span { display: block; font-size: 0.88rem; color: var(--text-2);
  line-height: 1.5; margin-top: 10px; }
@media (max-width: 900px) { .terms { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .terms { grid-template-columns: 1fr; } }
.pkg-act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 14px; }
.pkg-det { appearance: none; background: none; border: 0; cursor: pointer; padding: 0;
  font-family: var(--mono); font-size: max(0.7rem, 12px); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--stamp);
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; }
.pkg-det i { display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; background: var(--stamp); color: #fff;
  font-style: normal; font-size: 12px; line-height: 1; transition: transform 180ms ease; }
.pkg-det:hover i { transform: rotate(90deg); }
.pkg-det:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; border-radius: var(--radius-sm); }

@media (max-width: 1080px) { .pkgs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) {
  .pkgs { grid-template-columns: 1fr; }
  /* One card to a row leaves room for setup and the running fee side by
     side; stacked, they cost a line on every card. They wrap if they must. */
  .pkg-price { display: flex; flex-wrap: wrap; align-items: baseline;
    column-gap: 22px; row-gap: 6px; }
  .pkg-p + .pkg-p { margin-top: 0; }
  /* the label sits beside the figure it names, not on a line of its own */
  .pkg-save i { display: inline; margin-right: 10px; }
  .pkg-save b { display: inline; }
}
@media (max-width: 760px) {
  .pkg-p span, .pkg-save i, .pkg-ribbon, .pkg-det { font-size: max(0.7rem, 12px); }
  .pkg { padding: 24px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .det[open] { animation: none; }
  .pkg, .menu-det i, .pkg-det i { transition: none; }
}

/* ================================================================
   Option C: starter, plans, and one catalogue that is tiles on a
   desktop and a list on a phone. Same markup both ways; only the
   layout changes, so there is one copy of every sheet in the page.
   ================================================================ */

/* ---------- starter: the $499 way in ---------- */
.menu-row.starter { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center;
  gap: 18px; margin: 26px 0 0; padding: 18px 22px; border: 1px solid var(--carbon);
  border-radius: var(--radius-lg); background: var(--carbon); color: #fff; }
.starter .row-ic { width: 42px; height: 42px; border-radius: var(--radius-lg); margin: 0;
  background: var(--stamp); border-color: var(--stamp); }
.starter .row-ic svg { stroke: #fff; width: 20px; height: 20px; }
.starter .st-main b { display: block; font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; }
.starter .menu-hook { color: #C9CED4; margin-top: 3px; font-size: 0.9rem; }
.starter .menu-price { display: none; }
.starter .st-go { display: flex; align-items: center; gap: 16px; }
.starter .menu-det { color: #fff; padding: 0; }
.starter .menu-det i { background: var(--stamp); }
@media (hover: hover) and (pointer: fine) { .menu-row.starter:hover { background: var(--carbon); } }
@media (max-width: 760px) {
  .menu-row.starter { grid-template-columns: auto 1fr; gap: 12px 14px; padding: 18px; }
  .starter .st-go { grid-column: 1 / -1; justify-content: space-between; }
}
.billsw { margin-top: 30px; }

/* ---------- plans ---------- */
.pp-head { text-align: center; max-width: 680px; margin: 0 auto; }
.pp-head .fc-sub { margin: 10px auto 0; }
.pp-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.pp-plan { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 24px 22px 22px; display: flex; flex-direction: column; text-align: left; }
.pp-mid { border: 2px solid var(--stamp); }
.pp-tag { font-family: var(--mono); font-size: max(0.66rem, 12px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.pp-mid .pp-tag { color: var(--stamp); }
.pp-plan h3 { font-size: 1.2rem; letter-spacing: -0.02em; margin: 8px 0 0; }
.pp-who { font-size: 0.9rem; color: var(--text-2); margin: 6px 0 0; line-height: 1.5; }
.pp-p { font-size: 2rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin: 18px 0 0; }
.pp-p span { display: block; font-size: 0.82rem; font-weight: 400; letter-spacing: 0; color: var(--text-2); margin-top: 8px; }
.pp-plan ul { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--rule); }
.pp-plan li { position: relative; padding-left: 22px; font-size: 0.92rem; margin-bottom: 9px; line-height: 1.45; }
.pp-plan li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 12px; height: 7px;
  border-left: 2px solid var(--stamp); border-bottom: 2px solid var(--stamp); transform: rotate(-45deg); }
.pp-x { margin: auto 0 0; padding-top: 14px; font-size: 0.86rem; color: var(--text-2); }

.pp-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; text-align: left; }
.pp-run, .pp-chg { background: var(--field); border-radius: var(--radius-lg); padding: 22px; }
.pp-foot h3 { font-size: 1rem; letter-spacing: -0.01em; margin: 0; }
.pp-run ul { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 0; padding: 0; }
.pp-run li { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px; }
.pp-run li b { display: block; font-size: 1.18rem; letter-spacing: -0.03em; }
.pp-run li span { display: block; font-size: 0.8rem; color: var(--text-2); line-height: 1.35; margin-top: 3px; }
.pp-run p { font-size: 0.88rem; color: var(--text-2); line-height: 1.55; margin: 12px 0 0; }
.pp-chg dl { margin: 10px 0 0; }
.pp-chg dl div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule); }
.pp-chg dl div:first-child { border-top: 0; }
.pp-chg dt { font-weight: 650; font-size: 0.9rem; }
.pp-chg dd { margin: 0; font-size: 0.88rem; color: var(--text-2); line-height: 1.5; }

/* ---------- catalogue: filter ---------- */
.cat-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px 0 22px; }
.cat-b { appearance: none; cursor: pointer; font: inherit; font-size: 0.86rem; background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius-pill); color: var(--text-2); padding: 10px 18px; min-height: 44px;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease; }
.cat-b:hover { border-color: var(--slate); color: var(--text); }
.cat-b.is-on { background: var(--carbon); border-color: var(--carbon); color: #fff; font-weight: 600; }

/* ---------- catalogue: tiles, from 800px up ---------- */
.cat-list { list-style: none; margin: 0; padding: 0; text-align: left;
  /* minmax(0, 1fr) rather than 1fr: a bare 1fr track will not shrink below
     its content's min-content width, so a long system name pushed the row
     past the 1100px container and put a horizontal scrollbar on the page
     between roughly 1210px and 1330px - which includes 1280, a very common
     laptop width. minmax(0, ...) lets the track shrink and the text wrap. */
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cat-list .cat-head { display: none; }
.cat-list .cat-item { margin: 0; gap: 0; display: flex; flex-direction: column; position: relative; min-width: 0;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 20px 18px 14px;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.cat-list .cat-item[hidden], .cat-list .cat-head[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cat-list .cat-item:hover { background: var(--surface); border-color: var(--slate); transform: translateY(-3px);
    box-shadow: 0 1px 2px rgba(22,24,28,.04), 0 18px 38px -30px rgba(22,24,28,.55); }
}
.cat-item .row-ic { margin: 0 0 12px; }
.cat-g { position: absolute; right: 16px; top: 18px; font-family: var(--mono); font-size: max(0.64rem, 12px);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2);
  border: 1px solid var(--rule); border-radius: var(--radius-pill); padding: 3px 9px; }
.cat-main b { display: block; font-size: 0.98rem; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; }
.cat-main .menu-badge { margin-left: 4px; }
.cat-main .menu-hook { display: block; font-size: 0.86rem; color: var(--text-2); line-height: 1.45; margin: 5px 0 12px; }
.cat-list .cat-item .menu-price { margin-top: auto; align-self: stretch; text-align: left; white-space: normal;
  padding-top: 12px; border-top: 1px solid var(--rule); font-size: 1.12rem; font-weight: 650; letter-spacing: -0.02em; }
.cat-list .cat-item .menu-price em { display: block; font-family: var(--mono); font-style: normal; font-size: 0.76rem;
  font-weight: 400; color: var(--stamp); margin: 3px 0 0; }
.cat-list .cat-item .menu-det { align-self: flex-start; margin-top: 4px; }
/* twenty-nine systems: five across where there is room, so the grid stays six rows */
@media (min-width: 1200px) { .cat-list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .cat-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- catalogue: one list, under 800px ---------- */
@media (max-width: 799px) {
  .cat-list { display: block; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
  .cat-list .cat-head { display: block; font-family: var(--mono); font-size: max(0.72rem, 12px); letter-spacing: 0.1em;
    text-transform: uppercase; background: var(--field); padding: 11px 16px; border-bottom: 1px solid var(--rule); }
  .cat-list .cat-head i { font-style: normal; color: var(--stamp); margin-right: 10px; }
  .cat-list .cat-item { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 4px 12px;
    border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 14px 16px; transform: none; box-shadow: none; }
  .cat-list .cat-item:last-child { border-bottom: 0; }
  .cat-item .row-ic { grid-row: 1 / span 2; margin: 2px 0 0; width: 32px; height: 32px; }
  .cat-g { display: none; }
  .cat-main { grid-column: 2; }
  .cat-main .menu-hook { margin: 3px 0 0; }
  .cat-list .cat-item .menu-price { grid-column: 3; grid-row: 1; margin: 0; padding: 0; border: 0; text-align: right; font-size: 1rem;
    white-space: normal; max-width: 118px; }
  /* ui.css keeps price notes on one line; in a list row that pushed the column past the screen */
  .cat-list .cat-item .menu-price em { white-space: normal; line-height: 1.35; }
  .cat-list .cat-item .menu-price em { font-size: max(0.7rem, 12px); }
  .cat-list .cat-item .menu-det { grid-column: 2 / -1; margin: 2px 0 0; }
}
@media (max-width: 960px) {
  .pp-plans, .pp-foot { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .pp-run ul { grid-template-columns: repeat(2, 1fr); }
  .pp-tag, .cat-g, .cat-list .cat-item .menu-price em { font-size: max(0.7rem, 12px); }
}

/* ---------- how it works: the only hero, and short on purpose ---------- */
.hw { padding-top: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); padding-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.2rem); }
.hw h1 { text-align: center; font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.9rem); letter-spacing: -0.035em;
  line-height: 1.1; margin: 0 auto; max-width: 20ch; }
.hw-steps { list-style: none; margin: 30px 0 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: left; }
/* one rule joining the four numbers, drawn behind them */
.hw-steps::before { content: ""; position: absolute; left: 20px; right: 20px; top: 19px;
  border-top: 1px dashed var(--rule); }
.hw-steps li { position: relative; }
.hw-n { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; background: var(--carbon); color: #fff;
  font-weight: 700; font-size: 0.95rem; box-shadow: 0 0 0 6px var(--field); } /* plain bands show the page grey */
.hw-opt .hw-n { background: var(--surface); color: var(--text); border: 1.5px dashed var(--slate); }
.hw-steps b { display: block; font-size: 1.02rem; letter-spacing: -0.015em; margin-top: 14px; }
.hw-steps p { font-size: 0.9rem; color: var(--text-2); line-height: 1.5; margin: 5px 0 0; max-width: 30ch; }
.hw-steps a { color: var(--text); text-decoration: underline; text-decoration-color: var(--stamp);
  text-underline-offset: 3px; }
.hw-steps a:hover { color: var(--stamp); }
.hw-menu { margin-top: 26px; }
@media (max-width: 860px) {
  .hw-steps { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .hw-steps::before { display: none; }
}
@media (max-width: 440px) {
  .hw-steps { grid-template-columns: 1fr; gap: 16px; }
  .hw-steps li { display: grid; grid-template-columns: 38px 1fr; column-gap: 14px; }
  .hw-n { grid-row: 1 / span 2; }
  .hw-steps b { margin-top: 0; align-self: center; }
}

/* ---------- starter card sits on carbon ----------
   .menu-row.starter has a dark ground, so --text-2 (#5A6470) lands at 2.96:1
   on it and fails AA. Same light-token-on-dark-ground trap as the marquee
   separators and the .eyebrow. rgba(255,255,255,.72) gives 9.6:1 and matches
   what the rest of the site uses for muted text on carbon. */
.menu-row.starter .scope-lede,
.menu-row.starter .menu-price em,
.menu-row.starter .menu-det { color: rgba(255, 255, 255, .72); }

/* Audit, 21 September 2026: the buttons that open every detail sheet were
   30px tall on a phone, and the optimisation labels rendered at 11.5px. */
@media (max-width: 760px) {
  .menu-det, .pkg-det { min-height: 44px; }
  .menu-who { font-size: max(0.72rem, 12px); }
}

/* A system's name is a heading (so each of the 29 is a real h3 in the page
   outline, and the sheet's h4s sit under it), but it keeps the look of the
   bold label it replaced. */
.row-h { margin: 0; font: inherit; letter-spacing: inherit; line-height: inherit; color: inherit; }

/* ---------- a la carte as tabs ----------
   One group at a time. Up to five cards sit in a single row; a group of six
   takes two rows of three, so no card is ever left alone on a row. */
.cat-list .cat-head { display: none; }
.cat-b i { font-style: normal; font-size: max(0.74rem, 12px); font-weight: 600; margin-left: 6px;
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: var(--radius-pill); background: var(--field); color: var(--text-2); }
.cat-b.is-on i { background: rgba(255,255,255,.18); color: #fff; }
@media (min-width: 800px) {
  .cat-list[data-n="1"] { grid-template-columns: minmax(0, 360px); justify-content: center; }
  .cat-list[data-n="2"] { grid-template-columns: repeat(2, 1fr); }
  .cat-list[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
  .cat-list[data-n="4"] { grid-template-columns: repeat(4, 1fr); }
  .cat-list[data-n="5"] { grid-template-columns: repeat(5, 1fr); }
  .cat-list[data-n="6"] { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 800px) and (max-width: 1100px) {
  .cat-list[data-n="4"], .cat-list[data-n="5"] { grid-template-columns: repeat(3, 1fr); }
}
/* On a phone the tabs scroll sideways instead of stacking into four rows. */
@media (max-width: 799px) {
  .cat-filter { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
    margin-left: -16px; margin-right: -16px; padding: 2px 16px 6px; scrollbar-width: none;
    /* 739px of the filter sat off-screen with no scrollbar and no edge. */
    background:
    linear-gradient(to right,var(--surface) 30%,rgba(255,255,255,0)) left / 32px 100% no-repeat local,
    linear-gradient(to left,var(--surface) 30%,rgba(255,255,255,0)) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.13),rgba(0,0,0,0)) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.13),rgba(0,0,0,0)) right / 12px 100% no-repeat scroll; }
  .cat-filter::-webkit-scrollbar { display: none; }
  .cat-b { flex: 0 0 auto; }
}

/* ---------- ways to save ---------- */
.terms-k { font-family: var(--mono); font-size: max(0.72rem, 12px); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-2); margin: 34px 0 0; }
.terms-k + .terms { margin-top: 12px; }
.terms b { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); color: var(--stamp); }
.terms li:first-child b, .terms li:nth-child(2) b { color: var(--stamp); }
.terms span { margin-top: 6px; font-size: 0.92rem; }
@media (max-width: 760px) { .terms-k { font-size: max(0.72rem, 12px); } }

/* ---------- ways to save, drawn ----------
   Each saving is a small picture first, then the value, then two or three
   words of condition. Nothing here needs reading to be understood. */
.terms-v li { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 20px 20px; }
.terms-v .tv { display: block; height: 52px; width: auto; max-width: 100%; margin-bottom: 14px; overflow: visible; }
.terms-v b { margin: 0; }
.terms-v span { margin-top: 4px; font-family: var(--mono); font-size: max(0.74rem, 12px); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2); }
.tv-on { fill: var(--rule); }
.tv-hot { fill: var(--stamp); }
.tv-t { fill: #fff; font-family: var(--sans); font-size: 12px; font-weight: 700; text-anchor: middle; }
.tv-line path { fill: none; stroke: var(--slate); stroke-width: 2; stroke-dasharray: 3 4; }
.tv-line circle { fill: var(--carbon); }
.tv-lock rect { fill: var(--stamp); }
.tv-lock path { fill: none; stroke: var(--stamp); stroke-width: 3; stroke-linecap: round; }
.tv-card { fill: var(--surface); stroke: var(--carbon); stroke-width: 2; }
/* the two free months arrive last, so the eye lands on them */
@media (prefers-reduced-motion: no-preference) {
  .terms-v .tv-hot { animation: tvIn .5s ease .25s both; transform-box: fill-box; transform-origin: center; }
  @keyframes tvIn { from { opacity: 0; transform: scale(.6); } }
}
@media (max-width: 760px) { .terms-v span { font-size: max(0.74rem, 12px); } }
@media (max-width: 760px) {
  .terms.terms-v { grid-template-columns: 1fr 1fr; }
  .terms-v li { padding: 18px 14px 16px; border-right: 1px solid var(--rule); }
  .terms-v li:nth-child(2n) { border-right: 0; }
  .terms-v .tv { height: 38px; margin-bottom: 10px; }
  .terms-v b { font-size: 1.05rem; }
}

/* ---------- package bill ----------
   The package sheet reads like a bill: what each line costs, the discount as
   its own line, and the total. Setup on the left, every month on the right. */
.bill { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.det-body .bill h4 { display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 8px; font-size: 1rem; font-family: inherit; letter-spacing: 0; text-transform: none; color: var(--carbon); }
.det-body .bill h4 span { font-family: var(--mono); font-size: max(0.72rem, 12px); font-weight: 400; color: var(--text-2); }
.det-body .bill-l { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--carbon); }
.det-body .bill-l li { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0; padding: 0; min-height: 52px; border-bottom: 1px solid var(--rule); }
.det-body .bill-l li::before { display: none; }
.bill-l li > span { display: flex; flex-direction: column; font-size: 0.93rem; font-weight: 600; padding: 8px 0; }
.bill-l small { font-size: 0.8rem; font-weight: 400; color: var(--text-2); }
.bill-l em { font-style: normal; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bill-l .sys-b { flex: 1; padding: 8px 18px 8px 0; background: none; }
.bill-l .bill-off span, .bill-l .bill-off em { color: var(--stamp); }
.bill-tot { display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding: 12px 0 0; }
.bill-tot span { font-weight: 600; }
.bill-tot b { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.bill-col:last-child .bill-tot b::after { content: "/mo"; font-size: 0.9rem; font-weight: 500; color: var(--text-2); margin-left: 2px; }
.bill-yr { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 24px 0 0;
  padding: 14px 18px; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--field); }
.bill-yr span { font-weight: 600; margin-right: auto; }
.bill-yr s { color: var(--text-2); font-variant-numeric: tabular-nums; }
.bill-yr b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.bill-yr b::after { content: "/yr"; font-size: 0.85rem; font-weight: 500; color: var(--text-2); margin-left: 2px; }
.bill-yr i { font-style: normal; font-size: 0.8rem; font-weight: 700; color: #fff; background: var(--stamp);
  padding: 4px 10px; border-radius: var(--radius-pill); }
@media (max-width: 760px) {
  .bill { grid-template-columns: 1fr; gap: 24px; }
  .det-body .bill h4 span, .bill-l small { font-size: max(0.8rem, 12px); }
  .bill-yr span { width: 100%; }
  .bill-tot b { font-size: 1.35rem; }
  .bill-tot { padding-right: 2px; }
}

/* Tile price lines wrap inside the card instead of running past its edge
   when five tiles share a row. */
.cat-list .cat-item { min-width: 0; }
.cat-list .cat-item .menu-price, .cat-list .cat-item .menu-price em { white-space: normal; overflow-wrap: break-word; max-width: 100%; }

/* ---------- changes included, drawn ----------
   Each plan shows its monthly changes as a row of squares, so the difference
   between none, six and twenty is seen before it is read. */
.pp-m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 14px 0 4px; }
.pp-m i { width: 10px; height: 10px; border-radius: var(--radius-sm); background: var(--stamp); }
.pp-m span:not(.sr-only) { width: 100%; margin-top: 6px; font-family: var(--mono); font-size: max(0.72rem, 12px); color: var(--text-2); }
.pp-m0 i { background: none; border: 1.5px dashed var(--slate); }

/* system sheets: what happens after launch, the two ways, side by side */
.det-body .sc-after { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.det-body .sc-after-k { grid-column: 1 / -1; margin: 0; font-family: var(--mono); font-size: max(0.7rem, 12px);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.det-body .sc-after p:not(.sc-after-k) { margin: 0; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--field); display: flex; flex-direction: column; }
.det-body .sc-after b { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
.det-body .sc-after span { font-size: 0.86rem; color: var(--text-2); }
.pp-run ul { grid-template-columns: 1fr 1fr; }

/* The starter row sits on carbon, so an accent button (carbon on carbon)
   had no visible shape at all, and its focus ring was carbon on carbon:
   1:1, invisible to anyone using a keyboard. */
.menu-row.starter .btn,
.menu-row.starter .btn-accent { background: var(--field); color: var(--carbon); border-color: var(--field); }
.menu-row.starter .btn:focus-visible,
.menu-row.starter .menu-det:focus-visible { outline: 2px solid var(--field); outline-offset: 2px; }
.cat-b { border-color: var(--slate); }

/* ---------- measure ----------
   The catalogue rows ran the full 1,260px container, so a hook line measured
   115 characters at 1280 and 117 at 1440, against the 68 the rest of the site
   reads at. It is the only over-wide block of prose on the site. The column
   keeps its position in the grid; only the text stops before the price. */
.menu-hook, .st-main .menu-hook, .cat-main .menu-hook { display: block; max-width: 68ch; }
.row-h { max-width: 68ch; }

/* The price unit is 0.76rem on purpose, which is 12.16px: above the floor,
   so the floor has no business touching it. It was in the flat list above
   and got clamped to 12, and the content.css copy of this restoration could
   not reach it because this file loads later. */
.menu-price em, .det-price em { font-size: 0.76rem; }