/* Axi Growth products: the overview (products.html) and the seven group pages (products/*.html).
   Loads after home.css, which supplies the tokens, the frame, the masthead, the .two layout,
   the .parts table, the title block and the footer. This file adds what these pages have and the home page does not. */

/* ---------- The top of every page: title and lead, blue ---------- */
.hero { min-height: 0; display: block; padding-bottom: 56px; }
.hero h1 { font-size: clamp(46px, 6.2vw, 88px); font-weight: 800; line-height: 0.9; letter-spacing: -0.015em; }
.hero h1 .l { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hero h1 .l > span { display: block; }
.crumb { margin: 0 0 24px; font-size: 15px; font-weight: 500; color: var(--bmute); }
.crumb a { display: inline-block; padding: 12px 0; margin: -12px 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: color 0.2s; }
.crumb a:hover { color: var(--white); }
.lead-row { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--bline); }
/* The lead is a caption to the title, about 45 words; anything longer belongs in the body */
.hero .lead { font-size: clamp(17px, 1.25vw, 19px); line-height: 1.5; max-width: 50ch; margin: 0; text-wrap: pretty; }
.hero .lead a.u, .hero .terms a.u { color: var(--white); }
.hero .lead a.u:hover, .hero .terms a.u:hover { color: var(--bmute); }
.hero .terms { font-size: 14px; line-height: 1.5; color: var(--bmute); max-width: 64ch; margin: 14px 0 0; }
.hero .terms#pay-note { color: var(--white); }
.hero .act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
/* A sector page: the text in the left eight columns, the sector's plate photograph in the right three, foot to foot */
.hero .grid { align-items: end; }
.hero .hero-text { grid-column: 1 / span 8; min-width: 0; }
.hero .plate { grid-column: 10 / span 3; margin: 0; align-self: end; }
.hero .plate img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.hero .plate figcaption { font-size: 13px; line-height: 1.4; color: var(--bmute); padding-top: 8px; text-wrap: pretty; }

/* ---------- The overview: seven groups, each a name, a sentence and its price list ---------- */
section { padding: 80px 0; }
.groups { padding: 64px 0 24px; }
.groups.docs { padding: 24px 0 88px; }
.groups .two { padding: 40px 0 56px; border-top: 1.5px solid var(--ink); row-gap: 24px; }
.two > .head { grid-column: 1 / span 4; position: static; }
.two > .body { grid-column: 5 / span 8; }
.groups h2 { font-size: clamp(32px, 3.1vw, 44px); line-height: 0.95; }
.groups h2 a { transition: color 0.2s; }
.groups h2 a:hover { color: var(--red); }
.groups .head p { margin: 16px 0 0; font-size: 16px; line-height: 1.5; max-width: 34ch; color: var(--ink-2); text-wrap: pretty; }
.groups.docs .body p { margin: 0; max-width: 64ch; font-size: 16px; line-height: 1.55; color: var(--ink-2); padding-top: 6px; text-wrap: pretty; }
.groups.docs .body p a { color: var(--ink); }

/* The price list: a parts list, numbered like the home page's. Item, what it is, price */
.list { width: 100%; border-collapse: collapse; counter-reset: item; }
.list th, .list td { padding: 18px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; font-size: 16px; line-height: 1.45; text-align: left; font-weight: inherit; }
.list tr:first-child th, .list tr:first-child td { padding-top: 6px; }
.list th.n { width: 30%; padding-left: 46px; padding-right: 24px; font-weight: 500; color: var(--ink); text-wrap: pretty; position: relative; }
/* The counter is set in the text face: the display face loses its counters below 22px */
.list th.n::before { counter-increment: item; content: counter(item); position: absolute; left: 0; top: 23px; font-family: var(--text); font-weight: 500; font-size: 13px; line-height: 1; letter-spacing: 0.02em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.list tr:first-child th.n::before { top: 11px; }
.list th.n a { transition: color 0.2s; }
.list th.n a:hover { color: var(--red); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.list td.w { color: var(--ink-2); font-size: 15px; padding-right: 24px; text-wrap: pretty; }
/* The price: a figure on the first line, the term beneath it, so the figures line up down the column */
.list td.p { width: 26%; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-size: 16px; font-weight: 500; }
.list td.p b { display: block; font-weight: 500; white-space: nowrap; }
.list td.p small { display: block; font-size: 13px; line-height: 1.4; color: var(--ink-3); white-space: normal; max-width: 18ch; margin: 2px 0 0 auto; text-wrap: pretty; }
.list tr:target th.n a { color: var(--red); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.list tr:target th.n::before, .list tr:target td.p { color: var(--red); }

/* ---------- A group page: the list of what is on it, then the entries ---------- */
.entries { padding: 72px 0 96px; }
.entries .two > .head { grid-column: 1 / span 4; position: sticky; top: calc(var(--head) + var(--frame) + 32px); }
.entries .two > .body { grid-column: 5 / span 8; }
.entries .two > .head .cap { margin: 0; padding: 10px 0 9px; font-size: 14px; font-weight: 500; color: var(--ink-3); border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule); max-width: none; }
.side ul { list-style: none; margin: 0; padding: 0; }
.side li { border-bottom: 1px solid var(--rule); }
.side a { display: block; padding: 9px 0; transition: color 0.2s; }
.side .n { display: block; font-size: 15px; line-height: 1.4; font-weight: 500; }
.side .p { display: block; font-size: 14px; line-height: 1.4; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-top: 1px; }
.side li > .n { padding: 9px 0; color: var(--ink-2); } /* a row that is not a link: a section listed for the reader with nowhere to go */
.side a:hover .n, .side a[aria-current] .n { color: var(--red); }
.side a[aria-current] .n { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.entries .head .all { margin: 18px 0 0; font-size: 14px; font-weight: 500; }

.parts { border-top: 1.5px solid var(--ink); }
.parts td:first-child { padding-right: 40px; }
.parts td:last-child { width: 300px; padding-right: 0; }
.parts td { padding: 30px 0; }
.parts tr:first-child td { padding-top: 20px; }
.parts h2 { font-size: clamp(28px, 2.8vw, 40px); line-height: 0.95; letter-spacing: -0.01em; text-wrap: balance; }
.parts td p { max-width: 64ch; margin-top: 12px; }
.parts td p, dl.kv dd, .parts label.opt small { text-wrap: pretty; }
/* The entry a link landed on is marked by a rule, not by red type; red is kept for the entry the service sent back unpaid */
.parts tr:target td:first-child, .parts tr.mark td:first-child { border-left: 1.5px solid var(--blue); padding-left: 22px; }
.parts tr.at .price, .parts tr.at h2 { color: var(--red); }
dl.kv { margin: 14px 0 0; display: grid; gap: 4px; max-width: 58ch; }
dl.kv > div { display: grid; grid-template-columns: 116px 1fr; gap: 12px; font-size: 14px; line-height: 1.4; }
dl.kv dt { color: var(--ink-3); font-weight: 500; }
dl.kv dd { margin: 0; color: var(--ink-2); }
.parts .ref { margin-top: 14px; }
/* The price printed under the heading on small screens only, so it is read before the description; the buy cell keeps the live figure on desktop */
.price-line { display: none; }

/* A sample of a report, set as the document it stands for (the same rules as pages.css, for the group pages, which do not load it) */
.sample { margin-top: 18px; padding: 22px 24px; border: 1.5px solid var(--ink); background: var(--white); font-size: 14.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; font-family: var(--text); overflow-x: auto; }
.sample b { font-weight: 600; }
.sample + .note { margin-top: 12px; }
.sample table { white-space: normal; width: auto; margin: 0.7em 0 1em; font-size: inherit; line-height: inherit; border-collapse: collapse; }
.sample th, .sample td { padding: 2px 32px 2px 0; border: 0; vertical-align: baseline; text-align: left; font-weight: inherit; }
.sample thead th { font-size: 13px; color: var(--ink-3); }
.sample tbody th { width: auto; font-weight: inherit; color: inherit; }
.sample td { color: var(--ink-2); }
.sample td:last-child, .sample th:last-child { padding-right: 0; }
.parts td .sample { max-width: 64ch; }
.parts td .sample + .note { display: block; font-size: 14px; line-height: 1.5; color: var(--ink-3); max-width: 64ch; }

/* The buy cell: price, then everything that changes it, then one button */
.buy { position: relative; display: grid; gap: 12px; text-align: left; }
.buy .price { display: block; text-align: right; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; padding-top: 8px; letter-spacing: -0.01em; }
.buy .price small { display: block; font-family: var(--text); font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--ink-3); margin-top: 8px; letter-spacing: 0; }
.buy fieldset { border: 0; margin: 0; padding: 12px 0 0; min-width: 0; display: grid; gap: 9px; border-top: 1px solid var(--rule); }
.buy fieldset.one { display: none; }
.buy legend { padding: 0; font-size: 14px; color: var(--ink-3); font-weight: 500; float: left; width: 100%; margin-bottom: 2px; }
.buy legend + label { clear: both; }
.parts label.opt { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.4; cursor: pointer; color: var(--ink-2); }
.parts label.opt input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ink); }
.parts label.opt b { display: block; color: var(--ink); font-weight: 600; text-wrap: balance; }
.parts label.opt small { display: block; font-size: 14px; line-height: 1.4; color: var(--ink-3); }
.buy .sel, .buy .qty { display: grid; gap: 6px; font-size: 14px; color: var(--ink-3); font-weight: 500; }
.buy .sel { padding-top: 12px; border-top: 1px solid var(--rule); }
.buy .qty { grid-template-columns: auto 88px; align-items: center; justify-content: start; gap: 12px; }
.buy select, .buy input[type=number] { height: 44px; border: 1.5px solid var(--ink); background: var(--white); padding: 0 10px; font: 15px var(--text); color: var(--ink); border-radius: 0; width: 100%; }
.buy input[type=number] { width: 88px; }
.buy .total { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.buy .total:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.buy .btn { width: 100%; }
.buy .note { font-size: 14px; line-height: 1.4; color: var(--ink-3); }
.buy .note.pay { color: var(--red); }

/* ---------- Bundles: the saving on each, drawn to one scale ---------- */
.ladder { margin-top: 48px; }
.ladder .row { padding-top: 14px; }
.ladder .row + .row { margin-top: 22px; }
.ladder .fig-n { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.01em; display: flex; gap: 14px; align-items: baseline; margin-bottom: 8px; }
.ladder .fig-n span { font-size: 14px; font-weight: 500; font-family: var(--text); color: var(--ink-3); text-wrap: pretty; }
.ladder .dim-wrap + .dim-wrap { margin-top: 4px; }
.ladder .rr svg line.dim { stroke: var(--ink-3); }
.ladder .rr svg polygon { fill: var(--ink-3); }
.ladder .dim-wrap { min-width: 22px; }
.ladder svg { display: block; width: 100%; height: 26px; overflow: visible; }
.ladder svg line { stroke: var(--ink); stroke-width: 1.5; }
.ladder svg .ext { stroke: var(--ink-3); }
.ladder svg polygon { fill: var(--ink); }
.ladder .note { font-size: 14px; color: var(--ink-3); margin-top: 24px; }

/* ---------- The close: the audit, the terms and how to order, blue ---------- */
#order { padding: 96px 0 104px; }
#order .grid { row-gap: 56px; align-items: start; }
#order .say { grid-column: 1 / span 6; }
#order h2 { font-size: clamp(44px, 7.2vw, 112px); font-weight: 800; line-height: 0.88; letter-spacing: -0.015em; }
#order h2 .l { display: block; overflow: hidden; padding-bottom: 0.2em; margin-bottom: -0.2em; }
#order h2 .l > span { display: block; }
#order .say p { margin-top: 28px; max-width: 46ch; text-wrap: pretty; }
#order .say p + p { margin-top: 16px; }
#order .say p.act { margin-top: 36px; }
#order .say p.act + p { margin-top: 24px; }
/* The facts in one column beside the heading, each under its own rule, so the measure is prose and not a triptych */
.tblock { grid-column: 8 / span 5; }
.tblock .r.first { grid-template-columns: 1fr; }
.tblock .r.first .c + .c { margin-top: 18px; }
.tblock .r.first .v { max-width: 52ch; text-wrap: pretty; }

/* ---------- The footer's index: the current page is marked ---------- */
.idx td a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- The order form, in the drawer ---------- */
.order { padding: 14px 0 0; display: grid; gap: 16px; }
.order .k { display: block; font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.order .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.order label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.order input:not([type=hidden]), .order textarea { width: 100%; background: var(--white); border: 1.5px solid var(--ink); color: var(--ink); padding: 0 12px; font: 16px var(--text); border-radius: 0; }
.order input:not([type=hidden]) { height: 48px; }
.order textarea { min-height: 96px; padding: 12px; resize: vertical; line-height: 1.45; }
.order input::placeholder, .order textarea::placeholder { color: var(--ink-3); opacity: 1; }
.order input:focus-visible, .order textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.order input[aria-invalid="true"] { border-color: var(--red); border-width: 2px; }
.order .err { display: block; font-size: 13px; line-height: 1.4; color: var(--red); margin-top: 6px; }
.order .acts { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 4px; }
.order .acts .note { font-size: 14px; line-height: 1.45; color: var(--ink-3); max-width: 36ch; }
.order .acts .btn.onblue { background: var(--ink); color: var(--white); border-color: var(--ink); }
.order .acts .btn.onblue:hover { background: var(--red); border-color: var(--red); }
.order .form-error { color: var(--red); font-size: 14.5px; margin: 0; }
.order .form-error a { color: var(--ink); }
.drawer { position: fixed; inset: calc(var(--frame) + 1.5px); z-index: 59; display: none; }
.drawer.open { display: block; }
.drawer .veil { position: absolute; inset: 0; background: rgba(11,12,14,0.55); }
.drawer .panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--paper); color: var(--ink); border-left: 1.5px solid var(--ink); overflow: auto; padding: 24px 32px 40px; }
.drawer .panel:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.drawer .ph { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1.5px solid var(--ink); padding-bottom: 12px; margin-bottom: 4px; }
.drawer .ph b { font-family: var(--display); font-size: 28px; font-weight: 700; line-height: 1; }
button.u { background: none; border: 0; padding: 0; font: 500 15px var(--text); color: var(--ink); cursor: pointer; }
.drawer button.u { color: inherit; padding: 12px; margin: -12px; }
.drawer .facts { margin: 14px 0 0; border-top: 1.5px solid var(--ink); }
.drawer .facts > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.4; }
.drawer .facts dt { color: var(--ink-3); font-size: 13px; font-weight: 500; }
.drawer .facts dd { margin: 0; }
.drawer .ok { padding-top: 18px; }
.drawer .ok p { max-width: 46ch; margin: 0 0 10px; }
body.drawer-open { overflow: hidden; }

/* ---------- Load choreography: the lead rises with the title and the crumb fades in, from first paint, in CSS alone.
   The text is never hidden, so the largest paint does not wait for a script; reduced motion drops the anim class. ---------- */
@keyframes lead-rise { from { transform: translateY(12px); } to { transform: none; } }
@keyframes crumb-fade { from { opacity: 0; } to { opacity: 1; } }
html.anim .lead-row { animation: lead-rise 0.4s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
html.js.anim .crumb { animation: crumb-fade 0.4s 0.6s both; }

/* ---------- Responsive ---------- */
@media (min-width: 1101px) and (max-height: 660px) {
  .entries .two > .head { position: static; }
}
@media (max-width: 1100px) {
  section { padding: 80px 0; }
  .two > .head, .entries .two > .head { grid-column: 1 / span 12; position: static; }
  .two > .body, .entries .two > .body { grid-column: 1 / span 12; }
  .groups .two { row-gap: 20px; }
  .groups h2 br { display: none; }
  .groups .head p { max-width: 60ch; }
  .entries .two { row-gap: 40px; }
  .side { max-width: 480px; }
  #order .say, .tblock { grid-column: 1 / span 12; }
  .parts td:last-child { width: 280px; }
  dl.kv > div { grid-template-columns: 110px 1fr; }
}
@media (max-width: 900px) {
  .hero { padding-bottom: 32px; }
  .hero h1 { font-size: clamp(38px, 11.3vw, 76px); }
  .hero .lead { font-size: 16px; }
  .hero .hero-text { grid-column: 1 / span 12; }
  .hero .plate { display: none; }
  .crumb { margin-bottom: 18px; }
  section, .groups, .entries { padding: 56px 0; }
  .groups.docs { padding: 0 0 64px; }
  .groups .two { padding: 32px 0 40px; }
  .list tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
  .list tr:first-child { padding-top: 2px; }
  .list th.n { padding-left: 32px; }
  .list th.n::before { top: 6px; font-size: 13px; }
  .list tr:first-child th.n::before { top: 6px; }
  .list th, .list td { display: block; padding: 0; border: 0; }
  .list tr:first-child th, .list tr:first-child td { padding-top: 0; }
  .list th.n { width: auto; padding-right: 0; grid-column: 1; grid-row: 1; }
  .list td.p { width: auto; grid-column: 2; grid-row: 1; max-width: 22ch; text-align: right; font-size: 14px; }
  .list td.p small { font-size: 12px; }
  .list td.w { grid-column: 1 / span 2; grid-row: 2; font-size: 14px; padding-left: 32px; }
  .list th.n a { display: inline-block; vertical-align: top; padding: 12px 0; margin: -12px 0; }
  /* The "On this page" list two-up, so the first entry is a screen nearer */
  .side { max-width: none; }
  .side ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .side li { border-bottom: 1px solid var(--rule); }
  .side a, .side li > .n { padding: 8px 0; }
  .side .n { font-size: 14px; }
  .side .p { font-size: 13px; }
  .parts td { padding: 0; }
  .parts tr:first-child td { padding-top: 0; }
  .parts td:first-child, .parts td:last-child { padding-right: 0; }
  .parts tr { padding: 22px 0; }
  dl.kv { margin-top: 10px; }
  .buy { margin-top: 16px; gap: 10px; }
  .buy .price { text-align: left; font-size: 26px; padding-top: 0; }
  /* The price under the heading, and the buy cell's copy of it hidden where the row carries one */
  .price-line { display: block; margin: 8px 0 0; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -0.01em; }
  .price-line small { display: block; font: 500 14px/1.4 var(--text); color: var(--ink-3); margin-top: 4px; letter-spacing: 0; }
  .parts tr:has(.price-line) .buy .price { display: none; }
  .parts tr:target td:first-child, .parts tr.mark td:first-child { padding-left: 16px; }
  .parts label.opt { min-height: 40px; }
  .parts label.opt:not(:has(small)) { align-items: center; }
  .entries .head .all a, .parts .ref, .foot .legal a { padding: 12px 0; }
  .buy input[type=number] { width: 88px; }
  .ladder { margin-top: 32px; }
  .ladder .fig-n { flex-wrap: wrap; gap: 6px 12px; font-size: 26px; }
  #order { padding: 64px 0 72px; }
  #order .grid { row-gap: 40px; }
  #order .say { grid-column: 1 / span 12; }
  #order h2 { font-size: clamp(44px, 12vw, 64px); }
  .tblock { grid-column: 1 / span 12; }
  .tblock .r.first .v { max-width: none; }
  .order .pair { grid-template-columns: 1fr; }
  .drawer .panel { padding: 20px 20px 40px; }
}

@media print {
  .drawer { display: none !important; }
  .buy .btn { display: none; }
  html.js .lead-row, html.js .crumb, html.js .ladder * { opacity: 1 !important; animation: none !important; transform: none !important; stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }
  html.js #order h2 .l > span { transform: none !important; }
  .entries .two > .head { position: static; }
}

/* ---------- The basket: the Add to basket buttons on the group pages, the masthead link and basket.html ----------
   The html element carries has-cart when cart.js is present; the .basket rules below are basket.html's section. */
.nav .basket { font-weight: 600; }
/* Add to basket is the line button under Buy, so the pair reads as one control at two weights */
.add-btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 18px; margin: 0; justify-self: stretch; background: none; border: 1.5px solid var(--ink); font: 700 18px var(--display); letter-spacing: 0.01em; color: var(--ink); text-align: center; text-decoration: none; cursor: pointer; transition: background 0.2s, color 0.2s; }
.add-btn:hover { background: var(--ink); color: var(--white); }
.add-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
html.js .add-btn { display: none; }
html.js.has-cart .add-btn { display: inline-flex; }
.buy .basket-go { justify-self: start; font-size: 15px; font-weight: 500; }

section.basket { padding: 64px 0 24px; }
.basket .two { padding: 40px 0 56px; border-top: 1.5px solid var(--ink); row-gap: 24px; }
.basket .two > .head { position: static; }
.basket .head .cap { margin: 0; font-size: 14px; font-weight: 500; color: var(--ink-3); }
.basket .head .count { margin: 6px 0 0; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.01em; color: var(--ink); }
.basket .head .all { margin: 18px 0 0; font-size: 14px; font-weight: 500; max-width: none; text-wrap: pretty; color: var(--ink); }
.basket .head .all + .all { margin-top: 8px; }
.basket .head h2 { font-size: clamp(32px, 3.1vw, 44px); line-height: 0.95; }
.basket .body > p { max-width: 64ch; font-size: 16px; line-height: 1.55; color: var(--ink-2); margin: 0 0 12px; }
.basket .empty .lead { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 18px; }
.basket .empty p { margin: 0 0 10px; font-size: 15px; font-weight: 500; }
/* An empty basket already offers the products page above the close, so the close's button goes */
html.js:has(.basket .empty) #order .say .act { display: none; }
.lines { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lines th, .lines td { text-align: left; vertical-align: top; padding: 18px 0; border-bottom: 1px solid var(--rule); font-weight: inherit; }
.lines thead th { padding: 0 0 9px; font-size: 14px; font-weight: 500; color: var(--ink-3); vertical-align: baseline; }
.lines th.m, .lines td.m { text-align: right; width: 16%; padding-left: 24px; white-space: nowrap; }
.lines th.x, .lines td.x { text-align: right; width: 10%; padding-left: 24px; }
.lines td.it { padding-right: 24px; }
.lines .name { display: block; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -0.01em; }
.lines .detail { display: block; margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--ink-2); max-width: 60ch; }
.lines .change { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 500; }
.lines .qty { display: grid; grid-template-columns: auto 88px; align-items: center; justify-content: start; gap: 12px; margin-top: 12px; font-size: 14px; color: var(--ink-3); font-weight: 500; }
.lines .qty input { height: 44px; width: 88px; border: 1.5px solid var(--ink); background: var(--white); padding: 0 10px; font: 15px var(--text); color: var(--ink); border-radius: 0; }
.lines .fig { display: block; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -0.01em; }
.lines .after { display: block; margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--ink-3); white-space: normal; }
.lines tr:focus { outline: 3px solid var(--focus); outline-offset: 4px; }
.lines tr:focus:not(:focus-visible) { outline: 0; }
.kv.totals { margin-top: 20px; max-width: none; gap: 0; }
.kv.totals > div { grid-template-columns: 1fr auto; gap: 24px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 16px; align-items: baseline; }
.kv.totals dt { color: var(--ink-3); }
.kv.totals dd { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -0.01em; color: var(--ink); text-align: right; }
.basket .body > .terms { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }
.basket .body > .terms + .terms { margin-top: 6px; }
.basket .acts { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 20px; }
.basket .acts a.u { font-size: 15px; font-weight: 500; }
.checkout { display: grid; gap: 14px; justify-items: start; }
.checkout .btn { min-width: 260px; }
.checkout > .terms { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); max-width: 64ch; }
.checkout .alt { margin: 0; }
.checkout button.u:disabled { text-decoration: none; color: var(--ink-3); cursor: default; }
.checkout .order { width: 100%; max-width: 640px; padding-top: 8px; }
.checkout .facts { margin: 0 0 4px; border-top: 1.5px solid var(--ink); }
.checkout .facts > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.4; }
.checkout .facts dt { color: var(--ink-3); font-size: 13px; font-weight: 500; }
.checkout .facts dd { margin: 0; }
.basket .ok { padding-top: 6px; }
.basket .ok .lead { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.01em; margin: 0 0 14px; }
.basket .ok p { max-width: 46ch; margin: 0 0 10px; }
@media (max-width: 1100px) {
  .basket .two > .head, .basket .two > .body { grid-column: 1 / span 12; }
  .basket .head .all { max-width: none; }
}
@media (max-width: 900px) {
  section.basket { padding: 48px 0 8px; }
  .basket .two { padding: 32px 0 40px; }
  .lines thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lines, .lines tbody { display: block; width: 100%; }
  .lines tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
  .lines th, .lines td { display: block; padding: 0; border: 0; width: auto; }
  .lines td.it { grid-column: 1 / span 2; padding: 0; }
  .lines th.m, .lines td.m, .lines th.x, .lines td.x { width: auto; padding: 0; }
  .lines td.m { text-align: left; white-space: normal; }
  .lines td.m::before { display: block; font-size: 13px; font-weight: 500; color: var(--ink-3); margin-bottom: 4px; }
  .lines td.m:nth-child(2)::before { content: "On order"; }
  .lines td.m:nth-child(3)::before { content: "A month"; }
  .lines td.x { grid-column: 1 / span 2; text-align: left; padding: 0; }
  .lines .name { font-size: 24px; }
  .lines .fig { font-size: 22px; }
  .kv.totals dd { font-size: 22px; }
  .checkout .btn { width: 100%; min-width: 0; }
  .lines button.u, .lines .change, .checkout button.u { display: inline-flex; align-items: center; min-height: 40px; }
  .lines tbody tr:first-child { border-top: 1px solid var(--rule); }
}
@media print {
  .checkout .btn, .lines td.x, .basket .acts { display: none; }
}

/* ---------- The finder on the products overview (#find): a sentence the visitor completes ----------
   "We are having trouble with" and, at rest, a grey example phrase; the visitor types over it, grey ghost text completes
   the phrase and Enter or Tab accepts it. The only caret is the browser's own, while the field is focused. Unique class
   names (find-*) so nothing here inherits the .say/.entry/.ask grids used elsewhere. It routes to one of the seven
   problems and drives the hidden radios pick.js listens to, so the recommendation, the prices and the basket all come
   from the one engine. JavaScript off: the noscript list of links. */
#problem { padding: 4px 0; }
.find-line { margin: 0; max-width: 26ch; font-family: var(--display); font-weight: 700; font-size: clamp(32px, 3.8vw, 58px); line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance; }
.find-pre { color: var(--ink); }
.find-in { outline: none; color: var(--ink); caret-color: var(--ink); }
.find-in:focus { outline: none; }
.find-ghost { color: var(--ink-3); pointer-events: none; }
.find-eg { margin: 30px 0 0; max-width: 62ch; font-family: var(--text); font-size: clamp(17px, 1.5vw, 21px); font-weight: 500; line-height: 1.6; letter-spacing: 0; color: var(--ink-3); }
.find-eg button { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; text-decoration-color: var(--rule); transition: color 0.2s, text-decoration-color 0.2s; }
.find-eg button:hover, .find-eg button:focus-visible { color: var(--red); text-decoration-color: var(--red); outline: none; }
.find-eg .sep { color: var(--rule); margin: 0 10px; }
@media (max-width: 900px) {
  .find-line { max-width: none; font-size: clamp(30px, 8.4vw, 46px); }
  .find-eg { margin-top: 20px; }
}