/* ============================================================
   GMDS · services.css

   The price list and the single-service page. Loaded by services.php and
   service.php, and by nothing else.

   The page is drawn from data/services.json now, which the admin writes, but
   the shape it is drawn in is the one the six-industry page had: a numbered
   index that sticks under the bar and lights the section you are reading, and
   one full section per service with an outlined numeral and a name that stays
   put while the detail beside it is read.

   That shape was kept deliberately. It was built for six things a reader
   chooses between, one at a time, at length, and a price list is the same
   problem: nobody buys the third package by comparing three boxes, they read
   the one that sounds like them.

   No card, no tile, no icon anywhere on this page. The rule between sections
   is the separation, and the giant name is what catches a scanning eye.
   ============================================================ */

/* --- the reveal ---------------------------------------------------------

   The same two lines every other page of this site fades in on, repeated here
   rather than shared, because each page loads exactly one of these stylesheets
   and a shared file would be a third request to save nine lines.
   ---------------------------------------------------------------------- */

.will-in {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease);
}
.will-in.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .will-in { opacity: 1; transform: none; transition: none; }
}

/* --- the promise --------------------------------------------------------

   The second of the two statements, given a section of its own. It is four
   words and a sentence, and running it into the paragraph above would bury
   the promise inside the argument that leads to it.
   ---------------------------------------------------------------------- */

.fair {
  padding: clamp(2.6rem, 7vh, 4.5rem) 0 clamp(2rem, 5vh, 3rem);
  border-bottom: 1px solid var(--edge);
}

.fair__title {
  margin: 0 0 0.7rem;
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  font-weight: 800; font-stretch: 115%;
  line-height: 0.98; letter-spacing: -0.035em;
  color: var(--scarlet);
}

.fair__line {
  margin: 0;
  max-width: 42ch;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--paper-dim);
}

/* --- the jump row -------------------------------------------------------
   Six full sections is a long page, and somebody who runs a clinic should not
   have to scroll past five industries that are not theirs to find out whether
   you do the sixth. The link matching what is on screen lights up as you go,
   which also tells you roughly where you are without a progress bar.

   Sticky under the nav, so it is there when you want it and never in the way.
   ---------------------------------------------------------------------- */

.jump {
  /* Below the fixed nav, not under it. The nav measures 58 to 61px across
     every width this page is built for, so 3.9rem clears it without leaving a
     gap you can see the page scroll through. */
  position: sticky; top: 3.9rem; z-index: 4;
  display: flex; align-items: stretch;
  gap: clamp(0.4rem, 1.6vw, 1.6rem);
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  /* Solid, not a tinted blur. At 0.86 the industry headline scrolling under
     this row still read through it, and a row of six names with a paragraph
     ghosting behind them is unreadable twice over. */
  background: var(--void);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.jump::-webkit-scrollbar { display: none; }

.jump a {
  display: flex; align-items: center; gap: 0.5rem;
  flex: none;
  padding: 0.85rem 0.2rem;
  color: var(--paper-mut); text-decoration: none;
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 240ms var(--ease-out);
}
.jump a:hover { color: var(--paper-dim); }

/* Border and colour together, never colour alone: two people in twelve cannot
   separate these two greys by hue. */
.jump a.is-at {
  color: var(--paper);
  border-bottom-color: var(--violet);
}

.jump__n {
  font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--paper-mut);
  font-variant-numeric: tabular-nums;
  transition: color 240ms var(--ease-out);
}
.jump a.is-at .jump__n { color: var(--scarlet-lit); }

/* --- the search ---------------------------------------------------------

   Hidden in the markup and revealed by script, so a browser with script off
   never sees a box that cannot do anything. A search field that swallows what
   you type is worse than no search field.
   ---------------------------------------------------------------------- */

.find {
  display: grid;
  gap: 0.85rem;
  padding: clamp(1.8rem, 5vh, 2.8rem) 0 clamp(1.2rem, 3vh, 1.8rem);
}

/* Visually hidden, not absent. The box has a placeholder and an icon, both of
   which vanish or mean nothing to a screen reader, so the field still needs a
   name it can be announced by. */
.find__label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.find__box {
  display: flex; align-items: center; gap: 0.7rem;
  max-width: 34rem;
  padding: 0.85rem 1rem;
  background: var(--input);
  border: 1px solid var(--edge);
  color: var(--paper-mut);
  transition: border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}
/* The whole box lights, not the input inside it. focus-within is the only way
   to move a state from a child to the frame around it in CSS, and drawing the
   ring on the input alone would put it inside its own border. */
.find__box:focus-within {
  border-color: var(--violet-edge);
  background: var(--input-lit);
}

.find__box input {
  flex: 1 1 auto;
  min-width: 0;
  background: none; border: 0; outline: none;
  color: var(--paper);
  font: inherit;
  font-size: 1rem;
}
.find__box input::placeholder { color: var(--paper-mut); opacity: 1; }
/* The browser's own clear button, removed. There is one in the markup that
   matches the rest of the page and can be reached by keyboard. */
.find__box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.find__clear {
  flex: 0 0 auto;
  width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center;
  background: none; border: 0;
  color: var(--paper-mut);
  font-size: 1.2rem; line-height: 1;
  cursor: pointer;
  transition: color 160ms var(--ease-out);
}
.find__clear:hover { color: var(--paper); }

/* --- the category chips ------------------------------------------------- */

.find__cats { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.chip {
  padding: 0.42rem 0.85rem;
  background: none;
  border: 1px solid var(--edge);
  color: var(--paper-mut);
  font: inherit;
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out),
              background 180ms var(--ease-out);
}
.chip:hover { color: var(--paper); border-color: var(--edge-strong); }
.chip.is-on {
  background: var(--violet);
  border-color: var(--violet);
  color: var(--void);
}

.find__count {
  margin: 0;
  min-height: 1.2em;          /* so the list does not jump when it appears */
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--paper-mut);
}

/* --- one industry -------------------------------------------------------
   A section each, in full. The name is the anchor on the left and stays put
   while the detail beside it is read, so you always know which industry you
   are inside six screens down.

   No card, no tile, no icon. The rule between sections is the separation, and
   the giant name is the thing that catches a scanning eye.
   ---------------------------------------------------------------------- */

.ind {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: start;
  padding: clamp(2.5rem, 7vh, 4.5rem) 0;
  border-top: 1px solid var(--edge);
  scroll-margin-top: 7.6rem;             /* clears the nav and the jump row */
}
.ind:first-of-type { border-top: 0; padding-top: clamp(1rem, 3vh, 2rem); }

.ind__mark { position: sticky; top: 7.6rem; }

/* An outlined numeral, large enough to be a graphic rather than a label. It
   fills a column that was otherwise a name and a lot of nothing, and it is
   drawn in type rather than fetched as an image, which is what the rest of
   this site does too.

   A dim fill sits under the stroke, so a browser without text-stroke shows a
   numeral instead of an empty space. */
.ind__ghost {
  margin: 0 0 -0.12em;
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  font-weight: 800; font-stretch: 118%;
  line-height: 0.8; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ghost-svc);
  -webkit-text-stroke: 1px var(--ghost-line);
}

/* The width axis wide open. This is the word somebody is scanning for, and it
   is the only thing on the page set this large besides the page title. */
.ind__name {
  margin: 0;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 800; font-stretch: 118%;
  line-height: 0.98; letter-spacing: -0.035em;
  color: var(--paper);
}

/* One line saying who this actually is, because "Local businesses" covers a
   dentist and a car showroom and the reader needs to know which one you mean. */
.ind__who {
  margin: 0.9rem 0 0;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  color: var(--paper-mut);
}

.ind__body { display: grid; gap: 1.1rem; }

.ind__claim {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 800; font-stretch: 108%;
  line-height: 1.18; letter-spacing: -0.025em;
  color: var(--paper);
}

/* This was a single paragraph when the copy was written into the page. It is
   an editor's field now and can hold several, so the rules move onto the
   children and the wrapper only carries the measure. */
.ind__text {
  margin: 0;
  max-width: 36rem;
}
.ind__text p, .ind__text ul, .ind__text ol {
  margin: 0 0 0.9rem;
  font-size: clamp(0.95rem, 1.1vw, 1.04rem);
  line-height: 1.65;
  color: var(--paper-dim);
}
.ind__text > :last-child { margin-bottom: 0; }
.ind__text ul, .ind__text ol { padding-left: 1.2rem; }
.ind__text strong, .ind__text b { color: var(--paper); font-weight: 700; }
.ind__text a { color: var(--paper); text-underline-offset: 0.2em; }
.ind__text h2, .ind__text h3 {
  margin: 1.2rem 0 0.5rem;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 800; letter-spacing: -0.015em;
  color: var(--paper);
}

/* --- what we build, what it changes -------------------------------------
   Two columns, because they answer two different questions, and running them
   together makes a deliverable read like an outcome. Divided by a hairline
   rather than boxed: there is no card anywhere else on this site.
   ---------------------------------------------------------------------- */

.ind__detail {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
  margin-top: clamp(0.4rem, 1.5vh, 0.9rem);
  padding-top: clamp(1.2rem, 3vh, 1.8rem);
  border-top: 1px solid var(--edge);
}

.ind__col { padding-right: clamp(1.2rem, 3vw, 2.4rem); }
.ind__col + .ind__col {
  padding-right: 0;
  padding-left: clamp(1.2rem, 3vw, 2.4rem);
  border-left: 1px solid var(--edge);
}

.ind__h {
  margin: 0 0 0.5rem;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.24em; text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--paper-mut);
}

.ind__list { list-style: none; margin: 0; padding: 0; }
.ind__list li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.5rem;
  border-top: 1px solid var(--edge);
  font-size: 0.9rem; line-height: 1.5;
  color: var(--paper-dim);
}
.ind__list li:first-child { border-top: 0; padding-top: 0.35rem; }
.ind__list li:first-child::before { top: 1.05rem; }

/* A short rule where a tick would go. Drawn, so there is no icon font to load
   and no emoji sitting in the middle of a sentence. */
/* Two pixels, not one. Rows are different heights because some items wrap, so
   a one-pixel rule lands on a different fraction of a device pixel in every
   row: half of them render solid and half render as a grey smear, which looks
   like a mistake rather than a list. */
.ind__list li::before {
  content: '';
  position: absolute; left: 0; top: 1.2rem;
  width: 0.7rem; height: 2px;
  background: oklch(64% 0.21 300);
}

/* The outcomes take the second colour, so the two columns separate at a
   glance and not only by reading their headings. */
.ind__list--out li::before { background: var(--scarlet-lit); }

/* Where the work usually starts. A specific, slightly opinionated answer,
   which is the part that reads like somebody who has done it before. */
.ind__start {
  margin: clamp(1.1rem, 3vh, 1.7rem) 0 0;
  padding-top: clamp(1rem, 2.4vh, 1.4rem);
  border-top: 1px solid var(--edge);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--paper-mut);
  max-width: 46rem;
}
/* One way in per industry. Six chances to start the conversation instead of
   one at the foot of a page this long, and each one already knows what it is
   about. Quiet, because it repeats. */
.ind__ask {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 0.2rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--violet-a40);
  color: var(--paper); text-decoration: none;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-indent: 0.14em;
  text-transform: uppercase;
  transition: border-color 240ms var(--ease-out), color 240ms var(--ease-out);
}
.ind__ask span { transition: transform 320ms var(--ease); }
.ind__ask:hover, .ind__ask:focus-visible { border-bottom-color: var(--violet); }
.ind__ask:hover span { transform: translateX(0.25rem); }

.ind__startlabel {
  display: inline-block;
  margin-right: 0.5rem;
  font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.2em; text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--scarlet-lit);
}

/* --- the price, inside a section ----------------------------------------

   Where the old page said what the work usually starts with, this says what
   it costs. Same slot, same rule above it, because it answers the question
   that comes at the same point in the reading: I recognise myself in this,
   now what.

   The figure is set once, large, with the base and the tax under it. A total
   on its own is a number the buyer has to take on trust, and "+ GST" on its
   own is a number they have to do arithmetic on.
   ---------------------------------------------------------------------- */

.ind__cost {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin: clamp(1.1rem, 3vh, 1.7rem) 0 0;
  padding-top: clamp(1rem, 2.4vh, 1.4rem);
  border-top: 1px solid var(--edge);
}

.ind__price {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.ind__price b {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 800; font-stretch: 110%;
  letter-spacing: -0.03em;
  color: var(--paper);
}
.ind__price span {
  margin-left: 0.45rem;
  font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-mut);
}

/* Struck through, and the saving named beside it. A crossed-out number with
   nothing next to it makes the reader do the subtraction. */
.ind__was {
  margin: 0;
  font-size: 0.9rem;
  color: var(--paper-mut);
  font-variant-numeric: tabular-nums;
}
.ind__save {
  margin-left: 0.5rem;
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--scarlet-a70);
  color: var(--scarlet-lit);
  font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}

.ind__split {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.8rem;
  color: var(--paper-mut);
  font-variant-numeric: tabular-nums;
}

/* Two ways on from a section: the enquiry, and the whole page about it. The
   first is the ind__ask the old page had; the second is quieter, because it
   is the one that keeps you on the site rather than starting the
   conversation. */
.ind__ways {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(0.9rem, 3vw, 1.8rem);
  margin-top: 0.2rem;
}

.ind__more {
  color: var(--paper-mut); text-decoration: none;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-indent: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.3rem;
  transition: color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.ind__more:hover, .ind__more:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--edge-strong);
}

/* A section the search has filtered out, and the rule above the one that
   follows it. Without this the first visible section keeps the hairline that
   belonged to a hidden one above it, and the list starts with a stray rule. */
.ind[hidden] { display: none; }

/* --- nothing to show ---------------------------------------------------- */

.srv__empty,
.srv__none {
  margin: clamp(1.6rem, 5vh, 2.6rem) 0 0;
  max-width: 46ch;
  line-height: 1.65;
  color: var(--paper-dim);
}
.srv__empty a, .srv__none a { color: var(--paper); }

/* A button that has to read as prose, because it sits inside a sentence.
   Styled from scratch rather than reset, so it cannot inherit a system button
   look on a browser that draws one. */
.linky {
  padding: 0;
  background: none; border: 0;
  color: var(--paper);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.linky:hover { color: var(--scarlet-lit); }

/* --- the closing line --------------------------------------------------- */

.srv__end {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: clamp(2rem, 5vh, 3rem);
  padding: clamp(1.6rem, 4vh, 2.4rem) 0 clamp(3rem, 8vh, 5rem);
  border-top: 1px solid var(--edge);
}
.srv__end p {
  margin: 0;
  max-width: 44ch;
  line-height: 1.6;
  color: var(--paper-mut);
  font-size: 0.94rem;
}

/* ========================================================================
   One service.

   Single column, narrower than the list, because this page is read rather
   than scanned.
   ==================================================================== */

.one__head {
  max-width: 46rem;
  padding: clamp(5.5rem, 13vh, 8rem) 0 clamp(1.4rem, 3.5vh, 2rem);
}

.one__back {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-bottom: clamp(1.4rem, 4vh, 2.4rem);
  color: var(--paper-mut); text-decoration: none;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.24em; text-indent: 0.24em;
  text-transform: uppercase;
  transition: color 200ms var(--ease-out);
}
.one__back:hover { color: var(--paper); }
.one__back span[aria-hidden] { text-indent: 0; }

.one__cat {
  margin: 0 0 0.8rem;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.28em; text-indent: 0.28em;
  text-transform: uppercase;
  color: var(--scarlet-lit);
}

.one__name {
  margin: 0 0 0.9rem;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800; font-stretch: 116%;
  line-height: 0.98; letter-spacing: -0.035em;
}

.one__line {
  margin: 0;
  max-width: 48ch;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--paper-dim);
}

/* --- the price and the ask ---------------------------------------------- */

.one__deal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(1.2rem, 4vw, 2.5rem);
  max-width: 46rem;
  padding: clamp(1.4rem, 4vh, 2rem) clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid var(--edge);
  background:
    radial-gradient(90% 140% at 12% 0%, var(--wash-1b), transparent 68%),
    var(--surface-2);
}

.one__cost { min-width: 0; }

.one__was {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 0.3rem;
  font-size: 0.92rem;
  color: var(--paper-mut);
  font-variant-numeric: tabular-nums;
}
.one__save {
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--scarlet-a70);
  color: var(--scarlet-lit);
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}

.one__price { margin: 0; font-variant-numeric: tabular-nums; }
.one__price b {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 800; font-stretch: 110%;
  letter-spacing: -0.03em;
  color: var(--paper);
}
.one__price span {
  margin-left: 0.5rem;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-mut);
}

.one__split {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  color: var(--paper-mut);
  font-variant-numeric: tabular-nums;
}

.one__cta {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.95rem 1.6rem;
  background: var(--violet);
  color: var(--void); text-decoration: none;
  font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.12em; text-indent: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--violet-edge);
  transition: background 220ms var(--ease-out), transform 200ms var(--ease-out);
}
.one__cta:hover { background: var(--violet-lit-b); }
.one__cta:active { transform: translateY(1px); background: var(--violet-press); }
.one__cta span[aria-hidden] { text-indent: 0; }

/* --- the picture, the prose --------------------------------------------- */

.one__shot {
  max-width: 46rem;
  margin: clamp(1.8rem, 5vh, 2.8rem) 0 0;
  border: 1px solid var(--edge);
  background: var(--surface);
  overflow: hidden;
}
.one__shot img { display: block; width: 100%; height: auto; }

.one__body {
  max-width: 42rem;
  padding: clamp(2rem, 6vh, 3.2rem) 0 0;
}
.one__body p {
  margin: 0 0 1.1rem;
  line-height: 1.75;
  color: var(--paper-dim);
}
.one__body p:last-child { margin-bottom: 0; }
.one__body h2, .one__body h3 {
  margin: clamp(1.6rem, 4vh, 2.2rem) 0 0.7rem;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  font-weight: 800; font-stretch: 110%;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.one__body ul, .one__body ol {
  margin: 0 0 1.1rem;
  padding-left: 1.2rem;
  line-height: 1.7;
  color: var(--paper-dim);
}
.one__body li { margin-bottom: 0.35rem; }
.one__body strong, .one__body b { color: var(--paper); font-weight: 700; }
.one__body a { color: var(--paper); text-underline-offset: 0.2em; }

/* --- the four lists -----------------------------------------------------

   Two columns on a wide screen, because the pair a buyer weighs against each
   other is "included" and "not included", and side by side is the only
   arrangement where that comparison is free.
   ---------------------------------------------------------------------- */

.one__lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(1.6rem, 4vw, 3rem);
  max-width: 52rem;
  margin-top: clamp(2.4rem, 7vh, 4rem);
  padding-top: clamp(1.8rem, 5vh, 2.6rem);
  border-top: 1px solid var(--edge);
}

.one__list h2 {
  margin: 0 0 0.3rem;
  font-size: 1.02rem; font-weight: 800;
  letter-spacing: -0.012em;
  color: var(--paper);
}
.one__note {
  margin: 0 0 0.9rem;
  font-size: 0.76rem;
  color: var(--paper-mut);
}
.one__list ul {
  list-style: none;
  margin: 0; padding: 0;
}
.one__list li {
  position: relative;
  padding: 0.42rem 0 0.42rem 1.1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--paper-dim);
}
/* A dash, not a tick. Ticks would have to become crosses on the "not
   included" list, and a page with green ticks and red crosses on it is a
   comparison table pretending to be a description. */
.one__list li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.05em;
  width: 0.55rem; height: 1px;
  background: var(--ghost-line);
}

/* --- how long ----------------------------------------------------------- */

.one__when {
  max-width: 52rem;
  margin-top: clamp(2.4rem, 6vh, 3.4rem);
  padding-top: clamp(1.6rem, 4vh, 2.2rem);
  border-top: 1px solid var(--edge);
}
.one__when h2 {
  margin: 0 0 1.1rem;
  font-size: 1.02rem; font-weight: 800;
  letter-spacing: -0.012em;
}
.one__when dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1.2rem;
  margin: 0;
}
.one__when dt {
  margin-bottom: 0.3rem;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--paper-mut);
}
.one__when dd {
  margin: 0;
  font-size: 1.05rem; font-weight: 700;
  color: var(--paper);
}

/* --- narrow -------------------------------------------------------------

   After the base rules, not before them. Two rules of equal specificity are
   resolved by document order, so an override written above the rule it
   overrides is a rule that never applies.
   ---------------------------------------------------------------------- */

@media (max-width: 820px) {
  /* The name stops being a column and becomes a heading over the detail.
     Seventeen rem of it beside a paragraph does not survive here, and sticky
     on a stacked layout would pin a heading to the top of a section it has
     already scrolled past. */
  .ind { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .ind__mark { position: static; }
}

@media (max-width: 620px) {
  .ind__detail { grid-template-columns: minmax(0, 1fr); row-gap: 1.6rem; }
  .ind__col { padding-right: 0; }
  .ind__col + .ind__col {
    padding-left: 0; border-left: 0;
    padding-top: 1.6rem; border-top: 1px solid var(--edge);
  }

  .one__deal { flex-direction: column; align-items: flex-start; }
  .one__cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ind__ask, .ind__ask span, .ind__more, .chip, .find__box,
  .one__cta, .find__clear, .linky, .jump a, .jump__n { transition: none; }
}