/* ==========================================================================
   site6.css: shared editorial primitives and the chrome.

   Unlayered, loaded after modern.css on every page. Track A owns this file;
   page tracks use these class names and add page-scoped rules in their own
   sheets. Nothing here is renamed once a page track is using it.

   The voice: a build log, not a launch. Hairlines instead of borders, rows
   instead of cards, mono part labels, giant numerals, a quiet bar and a heavy
   footer. Skeuomorphism survives only on the objects that are objects: the
   hero device module, the glass over captures, the flasher console and the
   card-viewer enclosure. The chrome gives it up entirely.

   Hex literals appear in :root and nowhere else.
   ========================================================================== */

:root {
  --s6-hair: rgba(255, 255, 255, 0.09);
  --s6-hair-soft: rgba(255, 255, 255, 0.06);
  --s6-hair-strong: rgba(255, 255, 255, 0.14);
  --s6-num: rgba(255, 255, 255, 0.28);
  --s6-mute: rgba(255, 255, 255, 0.58);
  --s6-quiet: rgba(255, 255, 255, 0.50);
  --s6-faint: rgba(255, 255, 255, 0.12);
  --s6-ink: rgba(0, 0, 0, 0.55);

  /* Graph paper. Two 1px rules on a 24px pitch, faint enough to read as
     texture rather than as a grid you could measure against. Applied as a
     background on a hero, always with the mask below so it fades out instead
     of stopping at a hard edge. */
  --s6-grid-pitch: 24px;
  --s6-grid: repeating-linear-gradient(to right,
      var(--s6-grid-line) 0 1px, transparent 1px var(--s6-grid-pitch)),
    repeating-linear-gradient(to bottom,
      var(--s6-grid-line) 0 1px, transparent 1px var(--s6-grid-pitch));
  --s6-grid-line: rgba(255, 255, 255, 0.04);
  --s6-grid-mask: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0) 100%);
}

/* A hero or section that should read as drawn on paper. The texture is on a
   pseudo-element so the fade cannot touch the content sitting over it: a mask
   on the section itself takes the headline and the quantities line down with
   the ruling, which is what happened on the build hero before this hook was
   put to use. It rides ::after because a hero's ::before is the drifting bloom
   and ::after is already the inset box the old measuring grid used. */
.has-grid { position: relative; }
.has-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--s6-grid);
  -webkit-mask-image: var(--s6-grid-mask);
  mask-image: var(--s6-grid-mask);
}

/* ==========================================================================
   Part labels

   A stamp is the label printed on a part: mono, uppercase, boxed in one
   hairline. It never carries a link and never becomes a button.
   ========================================================================== */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25em 0.6em;
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--s6-mute);
  border: 1px solid var(--s6-hair);
  border-radius: 2px;
  white-space: nowrap;
}

.stamp-accent { color: var(--color-accent); border-color: var(--color-accent); }

/* The dated line at the head or foot of a log entry. No box: it is a note in
   the margin, not a label on a part. */
.log-date {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--s6-quiet);
  margin: 0;
}

/* ==========================================================================
   Rows: a hairline-divided list with a giant numeral
   ========================================================================== */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--s6-hair); }

.row {
  display: grid;
  grid-template-columns: minmax(3.5rem, 7rem) minmax(0, 1fr);
  grid-template-areas: "num head" "num body" "num media";
  column-gap: var(--step-6);
  row-gap: var(--step-2);
  padding-block: var(--step-6);
  border-bottom: 1px solid var(--s6-hair);
}

/* Optical alignment, not typographic. The numeral's cap sits a fraction above
   the heading's, so a small negative offset is what actually makes the two
   look like they start on the same line. */
.row-num {
  grid-area: num;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  line-height: 0.82;
  letter-spacing: -0.05em;
  color: var(--s6-num);
  font-variant-numeric: lining-nums tabular-nums;
  margin-top: -0.06em;
  transition: color var(--dur) var(--ease);
}

.row:hover .row-num,
.row:focus-within .row-num { color: var(--color-accent); }

.row-head {
  grid-area: head;
  margin: 0;
  font-size: var(--size-xl);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.row-head a { color: inherit; }

.row-body {
  grid-area: body;
  margin: 0;
  max-width: 62ch;
  color: var(--color-text-muted);
}

.row-body + .row-body { margin-top: var(--step-3); }

.row-media { grid-area: media; margin: var(--step-4) 0 0; }
.row-media img { display: block; width: 100%; height: auto; border-radius: 2px; }
.row-media figcaption {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-label);
  color: var(--s6-quiet);
  margin-top: var(--step-2);
}

@media (min-width: 60rem) {
  .row.has-media {
    grid-template-columns: minmax(3.5rem, 7rem) minmax(0, 1fr) minmax(15rem, 21rem);
    grid-template-areas: "num head media" "num body media";
    align-items: start;
  }
  .row.has-media .row-media { margin: 0; }
}

@media (max-width: 40rem) {
  .row {
    grid-template-columns: 1fr;
    grid-template-areas: "num" "head" "body" "media";
    row-gap: var(--step-2);
    padding-block: var(--step-5);
  }
  .row-num { font-size: 2.25rem; margin-bottom: var(--step-1); }
}

@media (prefers-reduced-motion: reduce) {
  .row-num { transition: none; }
}

/* ==========================================================================
   Spec: a two-column definition list
   ========================================================================== */
.spec { margin: 0; border-top: 1px solid var(--s6-hair); }

.spec > div {
  display: grid;
  grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr);
  gap: var(--step-4);
  padding-block: var(--step-4);
  border-bottom: 1px solid var(--s6-hair);
}

.spec dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--s6-mute);
}

.spec dd { margin: 0; max-width: 62ch; }
.spec dd + dd { margin-top: var(--step-2); }

@media (max-width: 40rem) {
  .spec > div { grid-template-columns: 1fr; gap: var(--step-1); padding-block: var(--step-3); }
}

/* ==========================================================================
   Bill of materials

   The same hairline rows as .spec, but the left column is a quantity and is
   right-aligned so the figures form a column you can read down. Markup is a
   <ul> of <li>, each holding .bom-qty, .bom-item and an optional .bom-note.
   ========================================================================== */
.bom { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--s6-hair); }

.bom > li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  grid-template-areas: "qty item" ". note";
  column-gap: var(--step-4);
  row-gap: var(--step-1);
  padding-block: var(--step-3);
  margin: 0;
  border-bottom: 1px solid var(--s6-hair);
}

/* The three parts are usually paragraphs, and a paragraph's own margin would
   add a gap the grid has already decided. */
.bom > li > p { margin: 0; }

.bom-qty {
  grid-area: qty;
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--s6-mute);
}

.bom-item { grid-area: item; }
.bom-note { grid-area: note; font-size: var(--size-sm); color: var(--color-text-muted); }

@media (min-width: 48rem) {
  .bom > li {
    grid-template-columns: 3.5rem minmax(0, 18rem) minmax(0, 1fr);
    grid-template-areas: "qty item note";
    align-items: baseline;
  }
}

/* ==========================================================================
   Tools: a short inline list with square bullets
   ========================================================================== */
.tools {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--step-2) var(--step-5);
  margin: 0;
  padding: 0;
  font-size: var(--size-sm);
  color: var(--color-text-muted);
}

.tools > li { display: flex; align-items: baseline; gap: var(--step-2); margin: 0; }

.tools > li::before {
  content: '';
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--s6-num);
  transform: translateY(-0.1em);
}

/* ==========================================================================
   Pull quote
   ========================================================================== */
.pullquote {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--step-5);
  max-width: 58rem;
  margin: 0;
}

.pullquote blockquote {
  position: relative;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

/* Hung in the left margin where there is room for it, so the first line of the
   quote still starts on the text's own edge. */
.pullquote blockquote::before {
  content: '\201C';
  color: var(--color-accent);
  margin-right: 0.1em;
}

@media (min-width: 60rem) {
  .pullquote blockquote::before {
    position: absolute;
    right: 100%;
    margin-right: 0.06em;
  }
}

.pullquote-who {
  display: flex;
  align-items: center;
  gap: var(--step-3);
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-label);
  color: var(--s6-mute);
}

.pullquote-who img {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border-radius: 2px;
  flex: none;
}

/* ==========================================================================
   Bleed right: a two-column block whose image runs off the right edge
   ========================================================================== */
.bleed-right {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--step-7);
  align-items: center;
}

@media (min-width: 60rem) {
  .bleed-right { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--step-8); }
  /* Out to the viewport edge and no further. A percentage margin on a grid
     item resolves against that item's own track, so the bleed cannot be a
     margin on the image. Instead the container itself is let out to the
     viewport and its left padding rebuilt to where the container would have
     started, which lands the image exactly on the right edge at any width. */
  .container.bleed-right {
    max-width: none;
    padding-left: max(var(--space-gutter), env(safe-area-inset-left), calc((100% - var(--container)) / 2));
    padding-right: 0;
  }
  .bleed-right > :last-child { margin-right: 0; }
}

.bleed-right img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { border-top: 1px solid var(--s6-hair); }
.faq details { border-bottom: 1px solid var(--s6-hair); }

.faq summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.5rem;
  gap: var(--step-4);
  align-items: start;
  padding-block: var(--step-4);
  font-size: var(--size-lg);
  font-weight: 600;
  line-height: 1.3;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--s6-quiet);
  text-align: right;
  transition: color var(--dur) var(--ease);
}

/* A true minus sign, not a hyphen: at this size a hyphen reads as a stray
   mark rather than as the other half of the plus. */
.faq details[open] summary::after { content: '\2212'; color: var(--color-accent); }

.faq summary:hover::after { color: var(--color-text); }

.faq details > :not(summary) {
  padding-bottom: var(--step-5);
  max-width: 62ch;
  color: var(--color-text-muted);
}

.faq summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}

/* ==========================================================================
   Uneven photo grid
   ========================================================================== */
.grid-uneven {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--step-4);
}

.grid-uneven > * { grid-column: span 12; margin: 0; }
.grid-uneven img { display: block; width: 100%; height: auto; border-radius: 2px; }

@media (min-width: 48rem) {
  .grid-uneven > .span-4 { grid-column: span 4; }
  .grid-uneven > .span-5 { grid-column: span 5; }
  .grid-uneven > .span-6 { grid-column: span 6; }
  .grid-uneven > .span-7 { grid-column: span 7; }
  .grid-uneven > .span-8 { grid-column: span 8; }
}

.grid-uneven figcaption {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-label);
  color: var(--s6-quiet);
  margin-top: var(--step-2);
}

/* Eyebrows lose the number plate; section numbers live on .row-num now. */
.eyebrow .eyebrow-index { display: none; }

/* Wherever the number does still show, it is a printed label on the part, not
   a plate bolted to it: the same flat mono box as .stamp. The sheets above
   this one still hand it a moulded face, a 10px radius and a three-layer
   inset, which is the last of that treatment left in a hero. */
.eyebrow-index {
  padding: 0.25em 0.6em;
  font-size: var(--size-2xs);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--tracking-label);
  color: var(--s6-mute);
  text-shadow: none;
  background-color: transparent;
  background-image: none;
  border: 1px solid var(--s6-hair);
  border-radius: 2px;
  box-shadow: none;
}
.eyebrow { color: var(--s6-quiet); }
.eyebrow::after { background: var(--s6-hair); }

/* ==========================================================================
   THE BAR

   60px, solid ground at 94%, one hairline along the bottom and nothing else.
   The skin sheets dress it as a moulded strip with a lit chamfer; all of that
   is switched off here. The device module, the glass over captures and the
   flasher console keep theirs.
   ========================================================================== */
:root { --nav-height: 3.75rem; }
@media (min-width: 60rem) { :root { --nav-height: 3.75rem; } }

.masthead {
  --nav-height: 3.75rem;
  background-image: none;
  background-color: color-mix(in srgb, var(--color-page) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--s6-hair);
  box-shadow: none;
}

.masthead::before,
.masthead::after { content: none; }

.masthead.is-condensed {
  --nav-height: 3.25rem;
  border-bottom-color: var(--s6-hair);
}

.masthead-inner { gap: var(--step-5); }

/* Reading order in the markup is logo, search, menu button, navigation, call
   to action. Reading order along the bar is logo, navigation, search, call to
   action, menu button. Order properties reconcile the two rather than moving
   anything in the markup, where the current sequence is the one that makes
   sense to a screen reader and to a keyboard. */
.masthead-inner > nav { order: 10; }
.masthead .nav-search { order: 20; flex: none; }
.masthead .nav-cta { order: 30; }
.masthead .nav-toggle { order: 40; }

@media (min-width: 60rem) {
  /* The navigation takes the slack so the auto margin on the quiet run has
     something to push against. */
  .masthead-inner > nav { flex: 1 1 auto; min-width: 0; }
  .masthead .nav-list { width: 100%; }
}

/* The auto margin moves off the wordmark and onto the quiet run, which is what
   puts the primary links beside the logo instead of hard against the search
   button. */
.masthead .wordmark {
  margin-right: 0;
  font-weight: 700;
  font-size: var(--size-base);
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-shadow: none;
  transform: none;
}

.masthead.is-condensed .wordmark { transform: none; }

/* A lamp, not a glowing bead. It is the only lit thing left in the bar. */
.masthead .wordmark-mark {
  width: 0.375rem;
  height: 0.375rem;
  background: var(--color-accent);
  background-image: none;
  box-shadow: none;
  animation: none;
}

.wordmark-stamp {
  color: var(--s6-quiet);
  border-color: var(--s6-hair);
  font-size: 0.5625rem;
  padding: 0.15em 0.45em;
}

@media (max-width: 59.999rem) { .wordmark-stamp { display: none; } }

.masthead .nav-list a {
  font-size: var(--size-sm);
  font-weight: 500;
  color: var(--s6-mute);
}

.masthead .nav-list a:hover,
.masthead .nav-list a[aria-current='page'] { color: var(--color-text); }

.masthead .nav-details > summary {
  font-size: var(--size-sm);
  font-weight: 500;
  color: var(--s6-mute);
}

@media (min-width: 60rem) {
  /* The auto margin belongs to whichever quiet item comes first, and only to
     that one. :first-of-type would match the first <li> in the whole bar. */
  .nav-quiet { margin-left: auto; }
  .nav-quiet + .nav-quiet { margin-left: 0; }
  .nav-quiet a { color: var(--s6-quiet) !important; }
  .nav-quiet a:hover,
  .nav-quiet a[aria-current='page'] { color: var(--color-text) !important; }
  /* The drawer's copy of the call to action; the bar has its own pill. */
  .nav-drawer-cta { display: none; }
  .nav-panel {
    background: var(--color-page);
    border: 1px solid var(--s6-hair-strong);
    border-radius: 3px;
    box-shadow: 0 18px 40px -24px var(--s6-ink);
  }
  .nav-panel a { border-radius: 2px; }
}

/* The search control: an icon in the bar, its key hint kept for the palette. */
.masthead .nav-search {
  background: none;
  border: 1px solid var(--s6-hair);
  border-radius: 3px;
  box-shadow: none;
  color: var(--s6-quiet);
}

.masthead .nav-search:hover { color: var(--color-text); border-color: var(--s6-hair-strong); }

.masthead .nav-search-key {
  background: none;
  border: 1px solid var(--s6-hair);
  box-shadow: none;
  color: var(--s6-quiet);
}

/* Only the icon shows. The word is hidden rather than removed: it is the
   control's accessible name, and display:none would leave the name to fall
   back to the title attribute, which says something else entirely. */
.masthead .nav-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ONE pill, and it is an outline. A filled accent button in a 60px bar is the
   loudest thing on every page of the site at once. */
.masthead .nav-cta {
  min-height: 2rem;
  padding-inline: var(--step-4);
  font-size: var(--size-sm);
  font-weight: 500;
  color: var(--color-accent);
  background: none;
  background-image: none;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  box-shadow: none;
  transform: none;
}

.masthead .nav-cta:hover {
  color: var(--color-page);
  background: var(--color-accent);
  box-shadow: none;
  transform: none;
}

.masthead .nav-cta.is-current {
  color: var(--s6-quiet);
  background: none;
  border-color: var(--s6-hair);
}

.masthead .nav-cta.is-current:hover { color: var(--color-text); background: none; }

.masthead .nav-toggle {
  background: none;
  background-image: none;
  border: 1px solid var(--s6-hair);
  border-radius: 3px;
  box-shadow: none;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--s6-mute);
}

.masthead .nav-toggle::before { content: none; }
.masthead .nav-toggle:active { transform: none; box-shadow: none; }

/* --------------------------------------------------------------------------
   The drawer
   -------------------------------------------------------------------------- */
@media (max-width: 59.999rem) {
  /* The bar carries the logo, the search control, the pill and the menu
     button, in that order, so the call to action sits just left of the menu
     at the top right. The drawer keeps its own full-width copy as well. */
  .masthead .nav-cta {
    order: 30;
    padding: 0.4rem 0.85rem;
    font-size: var(--size-sm);
    white-space: nowrap;
  }
  .masthead .nav-toggle { order: 40; margin-left: 0; }
  .masthead .nav-search { order: 20; }

  .masthead .nav-list {
    background: var(--color-page);
    border-bottom: 1px solid var(--s6-hair);
    border-radius: 0;
    box-shadow: 0 24px 40px -28px var(--s6-ink);
  }

  .masthead .nav-list a { font-size: var(--size-base); }

  .nav-group,
  .nav-list > li { border-bottom: 1px solid var(--s6-hair-soft); }
  .nav-list > li:last-child { border-bottom: 0; }

  .nav-drawer-cta { margin-top: var(--step-4); }

  .nav-drawer-cta a {
    display: block !important;
    text-align: center;
    padding: var(--step-3) var(--step-5) !important;
    color: var(--color-accent) !important;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-pill);
  }

  /* Inline, not a floating card. The skin gives the panel a surface and a
     radius, which is right where it floats under a wide bar and wrong inside
     the drawer, where it reads as a second menu on top of the first. */
  .masthead .nav-panel {
    background: none;
    border: 0;
    border-left: 1px solid var(--s6-hair);
    border-radius: 0;
    box-shadow: none;
  }
  .masthead .nav-panel a { background: none; border-radius: 0; }
  .masthead .nav-panel a[aria-current='page'] { color: var(--color-accent) !important; }

  .masthead .nav-search { padding-inline: var(--step-3); }
  .masthead .nav-search-key { display: none; }
}

/* The bar carries four things at every width and the drawer's hidden list is a
   fifth flex item, so on a 320px screen four 24px gaps plus the pill put the
   menu button 31px past the right edge. The row is not optional content, so
   the gaps and the pill's padding tighten instead. */
@media (max-width: 26rem) {
  .masthead-inner { gap: var(--step-3); }
  .masthead .nav-cta { padding-inline: var(--step-3); }
}

/* --------------------------------------------------------------------------
   The desktop bar, sixteen rems earlier

   The shared sheets swap to the drawer below 66rem, which put a laptop at 1024
   behind a menu button while the bar had room to spare. The site6 rules above
   switch at 60rem instead; this band releases the layered drawer rules that
   still apply between the two, so the text links show from 60rem with no
   wrapping and no overflow.
   -------------------------------------------------------------------------- */
@media (min-width: 60rem) and (max-width: 65.999rem) {
  .masthead .nav-toggle { display: none; }

  .masthead .nav-list {
    position: static;
    inset: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--step-4);
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    max-height: none;
    overflow: visible;
  }

  .masthead-inner > nav { flex: 1 1 auto; min-width: 0; }

  .nav-group,
  .masthead .nav-list > li:not(.nav-drawer-cta) {
    display: flex;
    align-items: center;
    margin: 0;
    border-bottom: 0;
  }

  /* The drawer's own copy of the call to action. The bar has its own pill, and
     the row does not have the width to carry both. */
  .masthead .nav-drawer-cta { display: none; }

  .masthead .nav-list a {
    display: inline;
    position: relative;
    padding-block: 0;
    font-size: var(--size-sm);
    white-space: nowrap;
    border-bottom: 0;
  }

  .masthead .nav-details > summary {
    justify-content: flex-start;
    padding-block: 0;
    font-size: var(--size-sm);
    white-space: nowrap;
    color: var(--color-text-muted);
  }
  .masthead .nav-details > summary:hover,
  .masthead .nav-details[open] > summary,
  .masthead .nav-details > summary.is-current { color: var(--color-text); }

  .masthead .nav-panel {
    position: absolute;
    top: calc(100% + var(--step-3));
    left: 0;
    z-index: 60;
    width: max-content;
    max-width: min(22rem, 90vw);
    padding: var(--step-4);
    margin-left: 0;
    background: var(--color-page);
    border: 1px solid var(--s6-hair-strong);
    border-radius: 3px;
    box-shadow: 0 18px 40px -24px var(--s6-ink);
  }
  .masthead .nav-panel a { display: block; padding: var(--step-2) var(--step-3); border-radius: 2px; }

  .masthead .nav-search-key { display: inline-block; }
  .masthead .nav-cta { padding: 0.45rem 1rem; font-size: var(--size-sm); }
}

/* ==========================================================================
   THE FOOT

   A heavy block: a status line of part labels, five columns of links, the
   wordmark at display size cropped by the bottom of the page, then the legal
   and trademark text. One hairline along the top; the moulded underside, the
   printed label and the cast shadow the skins put here are all switched off.
   ========================================================================== */
.footer {
  position: relative;
  overflow: hidden;
  background-image: none;
  background-color: var(--color-page);
  border-top: 1px solid var(--s6-hair);
  box-shadow: none;
  padding-block: var(--step-8) 0;
}

.footer::before,
.footer::after { content: none; }

.footer > .container { position: relative; z-index: 1; }

.footer-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--step-3);
  padding-bottom: var(--step-7);
  margin-bottom: var(--step-7);
  border-bottom: 1px solid var(--s6-hair);
}

/* The moved counter. It is a stamp with a lamp in it now, the same box as the
   labels beside it, so the three read as one line of project status rather
   than as a control that wandered down from the bar. */
.footer-status .devices-online {
  min-height: 0;
  padding: 0.25em 0.6em;
  font-size: var(--size-2xs);
  color: var(--s6-mute);
  background: none;
  background-image: none;
  border: 1px solid var(--s6-hair);
  border-radius: 2px;
  box-shadow: none;
}

.footer-status .devices-online:hover { color: var(--color-text); border-color: var(--color-accent); }

.footer-status .online-dot {
  width: 0.375rem;
  height: 0.375rem;
  box-shadow: none;
  animation: none;
}

.footer-status .devices-label { display: inline; }

.footer-cols {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  gap: var(--step-7) var(--step-6);
}

.footer h2 {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--s6-quiet);
  text-shadow: none;
  margin-bottom: var(--step-4);
}

.footer a { color: var(--s6-mute); }
.footer a:hover { color: var(--color-text); }
.footer li + li { margin-top: var(--step-2); }

.footer .faint { max-width: 70ch; color: var(--s6-quiet); font-size: var(--size-xs); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--step-2) var(--step-6);
  margin-top: var(--step-7);
  padding-top: var(--step-5);
  border-top: 1px solid var(--s6-hair);
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--s6-quiet);
}

/* The printed sticker the skin applies to the last line. There is no moulding
   to stick it to any more. */
.footer-base > span:last-child {
  background: none;
  background-image: none;
  color: inherit;
  text-shadow: none;
  box-shadow: none;
  padding: 0;
}

/* --------------------------------------------------------------------------
   The wordmark.

   Full bleed rather than inside the container, and pulled down by its own
   descender space so the letters are cut by the bottom of the page instead of
   sitting on it. line-height:0.78 is measured against the face: it crops into
   the letterform rather than into the gap under it.
   -------------------------------------------------------------------------- */
/* The skin sheets reserve 4rem under the body as clearance for a fixed look
   switch. Nothing renders that switch here, and the reserved strip is what the
   wordmark would otherwise be cropped by instead of by the page itself. */
body { padding-block-end: 0; }

.footer-mark {
  position: relative;
  z-index: 0;
  margin-top: var(--step-7);
  margin-bottom: -0.26em;
  padding-inline: var(--space-gutter);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(6rem, 18vw, 14rem);
  line-height: 0.78;
  letter-spacing: -0.045em;
  text-align: center;
  color: rgb(255 255 255 / 12%);
  user-select: none;
  pointer-events: none;
  text-shadow: none;
}

@media (max-width: 40rem) {
  .footer-status { gap: var(--step-2); }
  .footer-mark { letter-spacing: -0.06em; }
}

/* ==========================================================================
   Skin chrome that fights the new look

   Restricted to the bar and the foot. The rim light, the moulded chamfer and
   the debossed text on the chrome's own labels go; every device-like object on
   a page keeps its skin, because those are the things that are meant to look
   like objects.
   ========================================================================== */
.masthead .wordmark,
.masthead .nav-list a,
.masthead .nav-details > summary,
.footer h2,
.footer-base,
.footer-status .stamp { text-shadow: none; }

/* ==========================================================================
   THE FACTS LINE, EVERYWHERE

   The moulded readout plate is the last piece of instrument panel left on a
   page body. Flattened here rather than in a page sheet, because the strip
   appears on the home page, on all three provider pages, on both use pages and
   on the gallery, and only the home page had de-plated it.
   ========================================================================== */
.facts {
  background: none;
  background-image: none;
  border: 0;
  border-block: 1px solid var(--s6-hair);
  border-radius: 0;
  box-shadow: none;
}

.facts::before { content: none; }

.facts > * {
  background: none;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Quantities off a parts list, not backlit figures in a well. */
.facts .fact-value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--size-base);
  font-variant-numeric: tabular-nums;
  padding: 0;
  margin-inline: 0;
  max-width: none;
  background: none;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-text);
  text-shadow: none;
}

.facts .fact-label { text-shadow: none; }

/* ==========================================================================
   THE PAGE FOOT: SEQUENCE AND WHERE NEXT

   Two moulded keys and a row of pills at the bottom of every page. They are
   navigation, not controls, so they become a two-column row under one hairline
   and a line of plain links.
   ========================================================================== */
.pager {
  gap: 0;
  border-top: 1px solid var(--s6-hair);
}

.pager a {
  background: none;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  padding-inline: 0;
  padding-block: var(--step-5);
}

@media (min-width: 40rem) {
  /* The second column keeps its own left hairline so the pair reads as two
     cells of one row rather than as two loose blocks. Qualified by the anchor
     because the rule above that strips the padding and the border is itself an
     anchor rule, and a bare class cannot outrank it. */
  .pager a.pager-next { padding-left: var(--step-5); border-left: 1px solid var(--s6-hair); }
}

@media (max-width: 39.999rem) {
  .pager a.pager-next { border-top: 1px solid var(--s6-hair); }
}

.pager a:hover .pager-title { color: var(--color-accent); }
.pager-dir { color: var(--s6-quiet); }

.related a {
  display: inline;
  min-height: 0;
  padding: 0;
  background: none;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  transform: none;
  color: var(--color-text);
  border-bottom: 1px solid transparent;
}

.related a:hover,
.related a:focus-visible {
  transform: none;
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  text-decoration: none;
}

.related ul { gap: var(--step-3) var(--step-6); }

/* A row of inline links needs its own hit area back, since the pill that used
   to supply one is gone. */
.related li { padding-block: var(--step-2); }

/* ==========================================================================
   NOTES, TABLES AND CONSENT

   Everything in a page body that was a moulded plate becomes a hairline. The
   page sheets narrow these further for their own surfaces; this is the floor,
   so no page is left with an instrument panel in the middle of its prose.
   ========================================================================== */
.section-note {
  padding: 0;
  background: none;
  background-image: none;
  border: 0;
  border-left: 1px solid var(--s6-hair);
  border-radius: 0;
  box-shadow: none;
  padding-left: var(--step-4);
  text-shadow: none;
  color: var(--s6-quiet);
}

.section-note::after { content: none; }

.table-wrap {
  background: none;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.callout {
  background: none;
  background-image: none;
  border: 1px solid var(--s6-hair);
  border-left: 3px solid var(--color-accent);
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
}

.callout::after { content: none; }

.callout-title { color: var(--color-text); text-shadow: none; }

.callout-safety { border-left-color: var(--glucose-high); }

/* The one warning about damage with no way back keeps every bit of its weight:
   a full edge and the glow outside it, unchanged. */
.callout-danger {
  border: 2px solid var(--signal-orange);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--signal-red) 70%, transparent),
    0 0 0 7px color-mix(in srgb, var(--signal-red-deep) 60%, transparent),
    0 0 18px 10px color-mix(in srgb, var(--signal-red-deep) 40%, transparent),
    0 0 40px 18px color-mix(in srgb, var(--signal-red-deep) 15%, transparent);
}

/* The two-part selector is not belt and braces: the skin and the flasher sheet
   both style this through a parent, which outranks a bare class. */
.consent,
.consent-set .consent,
.flash-install .consent {
  background: none;
  background-image: none;
  border: 1px solid var(--s6-hair);
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
}

/* ==========================================================================
   THE TWO KEYS IN A PAGE BODY

   The flasher console is a real panel and keeps real keys; everywhere else a
   button is a flat pill. Primary is a solid accent fill with dark text, and
   secondary is the same shape drawn in one hairline.
   ========================================================================== */
.btn-primary:not(.flash-panel *) {
  background-image: none;
  background-color: var(--color-accent);
  color: var(--color-page);
  border-color: transparent;
  box-shadow: none;
  text-shadow: none;
}

.btn-primary:not(.flash-panel *)::before,
.btn-primary:not(.flash-panel *)::after { content: none; }

.btn-primary:not(.flash-panel *):hover {
  background-color: color-mix(in srgb, var(--color-accent) 84%, white);
  color: var(--color-page);
  box-shadow: none;
  transform: none;
}

.btn-secondary:not(.flash-panel *) {
  background-image: none;
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid var(--s6-hair-strong);
  box-shadow: none;
  text-shadow: none;
}

.btn-secondary:not(.flash-panel *)::before,
.btn-secondary:not(.flash-panel *)::after { content: none; }

.btn-secondary:not(.flash-panel *):hover {
  background-color: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: none;
  transform: none;
}

/* The first thing a keyboard reader sees is not a moulded key either. The
   accent fill and the dark text on it are untouched; only the bevel goes. */
.skip-link {
  background-image: none;
  background-color: var(--color-accent);
  color: var(--color-page);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
}

@media (forced-colors: active) {
  .rows,
  .row,
  .spec > div,
  .bom > li,
  .faq,
  .faq details,
  .stamp,
  .footer-status,
  .footer-base { border-color: CanvasText; }

  .masthead { border-bottom: 1px solid CanvasText; }
  .footer { border-top: 1px solid CanvasText; }
  .footer-mark { color: CanvasText; }
  .has-grid::after { display: none; }
}