/* ============================================================================
   PRP-Amped.com — visual design system
   ============================================================================

   Concept: "clean counter." The buyer here is a practice — a med spa, a
   dermatology or dental office — ordering consumables. What that buyer needs
   from a supply site is legibility of a 48-SKU catalogue and a reason to trust
   the source. So: a cool, clinical ground, hairline structure instead of
   shadowed boxes everywhere, and one accent used with restraint.

   The accent is not invented. It is Integrity PRP's own brand colour, sampled
   from their logo (a cyan-to-mint gradient, #35C8F7 → #43D2D2 → #51DDAF), and
   darkened to #0B6E78 where it has to carry text at readable contrast. The
   heading face, Outfit, is also Integrity's own. Both are deliberate: the Owner
   is a distributor and this site is an Integrity PRP offering, so it should
   read as kin to the parent brand rather than as an unrelated storefront — and
   it should not read as a copy of integrityprp.com either, which is why the
   body and figure faces (IBM Plex Sans / IBM Plex Mono) are ours, not theirs.

   Prices are set in mono with tabular figures. A catalogue is a document of
   numbers, and 48 of them should line up in a column.

   Production note: fonts are pulled with @import so the decision lives in the
   design system rather than in 11 page heads. If this ever goes live, move it
   to a <link rel="preconnect"> + <link rel="stylesheet"> in each head — an
   @import blocks rendering slightly longer.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* --- Tokens: light -------------------------------------------------------- */
:root {
  /* Ground is a cool near-white, biased very slightly toward the accent hue —
     chosen, not the browser default. */
  --ground:        #f7fafb;
  --surface:       #ffffff;
  --surface-sunk:  #eef4f6;

  --ink:           #10262b;   /* 14.9:1 on ground */
  --ink-soft:      #4a6670;   /*  5.9:1 on ground */
  --ink-faint:     #7e959d;

  --rule:          #dbe6e9;
  --rule-strong:   #b9ccd2;

  --accent-ink:    #0b6e78;   /* text weight — 6.0:1 on white */
  --accent:        #0fa3b1;   /* UI weight — buttons, marks, rules */
  --accent-bright: #43d2d2;   /* Integrity's literal mark colour; decorative */
  --accent-wash:   #e6f6f8;

  --flag:          #8a5a00;   /* draft / caution — deliberately not the accent */
  --flag-wash:     #fdf4e3;
  --flag-rule:     #e8cf9e;

  --shadow: 0 1px 2px rgba(16, 38, 43, 0.04), 0 4px 14px rgba(16, 38, 43, 0.05);

  --font-display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --measure: 66ch;
  --page:    1080px;
}

/* --- Tokens: dark --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:        #08191d;
    --surface:       #0e2429;
    --surface-sunk:  #0b1e23;

    --ink:           #e6f2f4;   /* 15.7:1 on ground */
    --ink-soft:      #a3bcc3;
    --ink-faint:     #6d8b93;

    --rule:          #1e3b42;
    --rule-strong:   #2d545e;

    --accent-ink:    #43d2d2;   /* 9.7:1 on ground — their mark reads best here */
    --accent:        #43d2d2;
    --accent-bright: #6fe0dc;
    --accent-wash:   #0d3238;

    --flag:          #e8b765;
    --flag-wash:     #2c2113;
    --flag-rule:     #4d3a1c;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
  }
}

:root[data-theme="dark"] {
  --ground:        #08191d;
  --surface:       #0e2429;
  --surface-sunk:  #0b1e23;
  --ink:           #e6f2f4;
  --ink-soft:      #a3bcc3;
  --ink-faint:     #6d8b93;
  --rule:          #1e3b42;
  --rule-strong:   #2d545e;
  --accent-ink:    #43d2d2;
  --accent:        #43d2d2;
  --accent-bright: #6fe0dc;
  --accent-wash:   #0d3238;
  --flag:          #e8b765;
  --flag-wash:     #2c2113;
  --flag-rule:     #4d3a1c;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* --- Base ----------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); font-weight: 600; line-height: 1.15; }
h2 { font-size: 1.45rem; font-weight: 600; margin: 2.5rem 0 0.85rem 0; }
h3 { font-size: 1.1rem;  font-weight: 600; margin: 1.75rem 0 0.6rem 0; }

p { margin: 0 0 1rem 0; }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Draft banner --------------------------------------------------------- */
/* Governance surface, not decoration: this site is a draft and must say so on
   every page. Designed so it reads as a deliberate stamp rather than an error. */
.draft-banner {
  background: var(--flag-wash);
  color: var(--flag);
  border-bottom: 1px solid var(--flag-rule);
  padding: 0.55rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

/* --- Header --------------------------------------------------------------- */
header.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0.9rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
}

a.site-title {
  text-decoration: none;
  color: inherit;
  display: block;
  line-height: 1.15;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: block;
}

/* The "-Amped" half carries the accent so the mark has a hinge, rather than
   the whole wordmark being tinted. */
.wordmark-amp { color: var(--accent-ink); }

/* The attribution rides with the logo on every page. The Owner's instruction
   was that this is an Integrity PRP offering and it should say so throughout —
   so it lives in the masthead, not only in the footer. */
.site-attrib {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.2rem;
}

nav.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.6rem;
  padding: 0;
  margin: 0;
}

nav.site-nav a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
}

nav.site-nav a:hover { color: var(--ink); }

nav.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* The enrollment CTA is the one place the accent is filled, because it is the
   one page the whole site plan calls the point of the site. */
nav.site-nav a.nav-cta {
  background: var(--accent-ink);
  color: #ffffff;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  border-bottom: none;
}
nav.site-nav a.nav-cta:hover { background: var(--accent); color: #05242a; }
nav.site-nav a.nav-cta[aria-current="page"] {
  background: var(--accent);
  color: #05242a;
  border-bottom: none;
}

/* --- Products drop-down --------------------------------------------------- */
/* The parent stays a real link to /products/, and the caret beside it is a
   separate button. That way a click on the word still goes to the hub page,
   the caret opens the menu, and neither behaviour has to guess which one was
   meant. Opened on focus-within as well as by the button, so tabbing into it
   works without JavaScript. */
.has-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.dropdown-toggle {
  background: none;
  border: none;
  padding: 0.35rem 0.25rem;
  margin: 0;
  cursor: pointer;
  color: var(--ink-soft);
  line-height: 1;
  font-size: 0.7rem;
  border-radius: 3px;
}
.dropdown-toggle:hover { color: var(--ink); }
.dropdown-toggle .caret { display: inline-block; transition: transform 0.15s ease; }
.dropdown-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* Specificity matters here and it bit once already: `nav.site-nav ul` (0,1,2)
   outranks a bare `ul.dropdown-menu` (0,1,1) and forced the panel to
   display:flex, leaving the menu permanently hanging open over the page. Every
   rule below is scoped through nav.site-nav so it actually wins. */
nav.site-nav ul.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 40;
  min-width: 15rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  display: none;
  flex-direction: column;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: var(--shadow);
}

nav.site-nav .has-dropdown:focus-within ul.dropdown-menu,
nav.site-nav .dropdown-toggle[aria-expanded="true"] + ul.dropdown-menu {
  display: flex;
}

nav.site-nav ul.dropdown-menu li { margin: 0; }

nav.site-nav ul.dropdown-menu a {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ink);
  border-bottom: none;
  white-space: nowrap;
}
nav.site-nav ul.dropdown-menu a:hover { background: var(--accent-wash); color: var(--accent-ink); }
nav.site-nav ul.dropdown-menu a[aria-current="page"] {
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-weight: 600;
}

.dropdown-sep {
  height: 1px;
  background: var(--rule);
  margin: 0.35rem 0.2rem;
}

@media (max-width: 640px) {
  /* No room to float a panel on a phone: show it inline instead of overlapping
     the page underneath. */
  nav.site-nav ul.dropdown-menu {
    position: static;
    min-width: 0;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--rule);
    border-radius: 0;
    padding: 0.2rem 0 0.2rem 0.6rem;
    margin-top: 0.3rem;
  }
  nav.site-nav ul { flex-direction: column; align-items: flex-start; }
  .has-dropdown { flex-wrap: wrap; }
}

/* --- Enlarged photograph -------------------------------------------------- */
a.product-zoom {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
  border-radius: 3px;
}
a.product-zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A quiet affordance: the photograph lifts slightly, so it reads as something
   you can act on without plastering an icon over every product. */
@media (prefers-reduced-motion: no-preference) {
  a.product-zoom img { transition: transform 0.18s ease; }
  a.product-zoom:hover img, a.product-zoom:focus-visible img { transform: scale(1.06); }
}

body.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  background: rgba(6, 20, 24, 0.88);
}

/* Halved on the Owner's instruction (2026-09-04): the first version filled the
   screen, which is more than you need to judge a product box and swamps the
   page behind it. 820px -> 410px, and the picture's height cap comes down with
   it. The viewport-width term stays generous so a phone still uses its screen. */
.lightbox-figure {
  margin: 0;
  max-width: min(86vw, 410px);
  max-height: 62vh;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
}

/* White ground under the picture in both themes: these are Integrity's real
   product shots and they are photographed on white. */
.lightbox-img {
  max-width: 100%;
  max-height: 38vh;
  object-fit: contain;
  background: #ffffff;
  border-radius: 6px;
  padding: 0.5rem;
}

.lightbox-cap {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: #f2fbfc;
  text-align: center;
  text-wrap: balance;
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-close:hover { background: rgba(0, 0, 0, 0.7); }
.lightbox-close:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* --- Main ----------------------------------------------------------------- */
main {
  max-width: var(--page);
  margin: 0 auto;
  padding: 2.25rem 1.25rem 4.5rem 1.25rem;
}

/* Prose keeps a readable measure. Grids get the full page width — they want
   opposite things, so they are constrained separately rather than together. */
main > p,
main > ol,
main > ul:not([class]),
main > .section-status,
main > .catalogue-updated { max-width: var(--measure); }

nav[aria-label="Breadcrumb"] {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-bottom: 1.1rem;
}
nav[aria-label="Breadcrumb"] a { color: var(--ink-soft); text-decoration: none; }
nav[aria-label="Breadcrumb"] a:hover { color: var(--accent-ink); text-decoration: underline; }

/* --- Status / governance notes -------------------------------------------- */
.section-status {
  background: var(--flag-wash);
  border: 1px solid var(--flag-rule);
  border-left: 3px solid var(--flag);
  border-radius: 0 4px 4px 0;
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  color: var(--ink);
  margin: 0 0 1.75rem 0;
}
.section-status strong { color: var(--flag); }
.section-status code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--surface);
  border: 1px solid var(--flag-rule);
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
}

.catalogue-updated {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--ink-faint);
  margin: 0 0 1.5rem 0;
  padding-left: 0.85rem;
  border-left: 2px solid var(--rule-strong);
}

/* --- Homepage hero -------------------------------------------------------- */
.hero {
  padding: 1rem 0 2.5rem 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
}

.hero .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 0.7rem 0;
}

.hero h1 { max-width: 18ch; }

.hero .lede {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0.9rem 0 0 0;
}

/* A hairline in Integrity's actual gradient — the one decorative use of their
   literal mark colours on the page, and the only gradient anywhere. */
.brand-rule {
  height: 3px;
  border: none;
  margin: 1.4rem 0 0 0;
  max-width: 200px;
  background: linear-gradient(90deg, #35c8f7, #43d2d2, #51ddaf);
  border-radius: 2px;
}

/* --- Category tiles ------------------------------------------------------- */
ul.category-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.category-tile a {
  display: block;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.1rem 1.2rem 1.2rem 1.2rem;
  text-decoration: none;
  color: inherit;
}

.category-tile a:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.category-tile .cat-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  display: block;
  margin-bottom: 0.3rem;
}

.category-tile .cat-desc {
  font-size: 0.88rem;
  color: var(--ink-soft);
  display: block;
}

.category-tile .cat-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-top: 0.7rem;
}

/* --- Product rows --------------------------------------------------------- */
/* Rows, not small cards. Once every product carries a paragraph of Integrity's
   own description, a grid sized for a name and a price goes ragged — so the
   photo sits beside the text and each entry reads as a catalogue line. Two
   columns where there is room, one where there isn't. Every row shares the
   same edges, photo size and inner padding, so 48 of them read as one
   catalogue. The photo keeps a white ground in both themes, because these are
   Integrity's real product shots and they are photographed on white. */
ul.product-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
  gap: 1.1rem;
}

.product-row {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.product-row-media {
  flex: 0 0 116px;
  width: 116px;
  aspect-ratio: 1 / 1;
  background: #ffffff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.product-row-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.product-noimg {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9bb0b7;
  text-align: center;
}

/* min-width:0 lets a long product name wrap instead of forcing the row wide. */
.product-row-body { flex: 1; min-width: 0; }

h3.product-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  margin: 0;
}

.product-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0.3rem 0 0.5rem 0;
}

.product-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  color: var(--accent-ink);
}

/* Integrity's words, not ours — set slightly back from the name and price,
   which are facts, so the distinction is visible as well as stated. */
.product-desc {
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.product-desc p { margin: 0 0 0.6rem 0; }
.product-desc p:last-child { margin-bottom: 0; }
.product-desc strong { color: var(--ink); font-weight: 600; }

.product-desc-none {
  font-style: italic;
  color: var(--ink-faint);
}

.product-badge {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--flag);
  background: var(--flag-wash);
  border: 1px solid var(--flag-rule);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
}

/* --- Enrollment steps ----------------------------------------------------- */
/* Numbered because this genuinely is a sequence — the seven steps run in order
   and step 6 cannot happen before step 3. */
ol.enrollment-steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0 0;
  max-width: var(--measure);
}

ol.enrollment-steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.4rem 3rem;
  border-left: 1px solid var(--rule);
  margin-left: 0.9rem;
}

ol.enrollment-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }

ol.enrollment-steps li::before {
  content: counter(step);
  position: absolute;
  left: -0.95rem;
  top: 0;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Buttons -------------------------------------------------------------- */
.btn-primary, .btn-secondary {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 4px;
  padding: 0.6rem 1.15rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--accent-ink);
  color: #ffffff;
}
.btn-primary:hover:not(:disabled) { background: var(--accent); color: #05242a; }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-secondary {
  background: var(--surface);
  color: var(--accent-ink);
  border-color: var(--rule-strong);
}
.btn-secondary:hover { border-color: var(--accent); }

/* --- Request form --------------------------------------------------------- */
.request-form {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.25rem;
  max-width: 30rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}

.form-notice {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--flag);
  background: var(--flag-wash);
  border: 1px solid var(--flag-rule);
  border-radius: 4px;
  padding: 0.5rem 0.7rem;
  margin: 0;
}

.field { display: flex; flex-direction: column; gap: 0.3rem; }

.field label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.field input {
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  padding: 0.5rem 0.65rem;
}
.field input:disabled { opacity: 0.6; cursor: not-allowed; }

.request-form .btn-primary { align-self: flex-start; }

.contact-direct { margin: 0.75rem 0 0.5rem 0; }

.contact-note {
  font-size: 0.85rem;
  color: var(--ink-faint);
  font-style: italic;
}

/* Honeypot. Must be reachable in the DOM for the spam trap to work, and must
   never be seen or focused by a person — so it is moved out of view rather than
   display:none'd, and taken out of the tab order in the markup. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Training page ------------------------------------------------------- */
ul.plain-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem 0;
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

ul.plain-list li {
  padding-left: 1.15rem;
  position: relative;
}

/* A rule rather than a bullet: these are conditions and inclusions, and a row
   of dots would read as decoration. */
ul.plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.6rem;
  height: 1px;
  background: var(--accent);
}

/* The eligibility conditions are the part a practice most needs to read before
   spending, so they are set apart rather than buried in the run of the page. */
.requirement {
  max-width: var(--measure);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 1.1rem 1.25rem;
  margin: 0 0 1.75rem 0;
  font-size: 0.94rem;
}
.requirement p:last-child { margin-bottom: 0; }

/* --- Footer --------------------------------------------------------------- */
footer.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
}

.footer-inner {
  max-width: var(--page);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 2rem 1.25rem;
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
}

.footer-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 0.4rem 0;
}

.footer-brand p:last-child {
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin: 0;
  max-width: 34ch;
}

a.contact-mail,
a.contact-phone {
  color: var(--accent-ink);
  font-weight: 500;
}

/* The phone number is a real number people will read aloud and dial, so it is
   set in the figure face with tabular digits rather than the body face. */
a.contact-phone { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.footer-head {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.7rem 0;
}

footer.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

footer.site-footer ul a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.88rem;
}
footer.site-footer ul a:hover { color: var(--accent-ink); text-decoration: underline; }

.footer-legal {
  max-width: var(--page);
  margin: 0 auto;
  padding: 1.1rem 1.25rem 2rem 1.25rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.footer-legal p { margin: 0; }

/* --- Motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .category-tile a, .product-card, nav.site-nav a {
    transition: border-color 0.15s ease, box-shadow 0.15s ease,
                background 0.15s ease, color 0.15s ease;
  }
}

@media (max-width: 640px) {
  .header-inner { align-items: flex-start; }
  nav.site-nav ul { gap: 0.4rem 1.1rem; }
}

/* ---------------------------------------------------------- comparison --- *
 * The starter-package table. Wide content scrolls INSIDE its own container:
 * six columns cannot shrink to a phone, and a table that makes the whole page
 * scroll sideways breaks every other page the visitor came from.
 */
.table-scroll {
  overflow-x: auto;
  margin: 1.6rem 0;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
table.compare {
  border-collapse: collapse;
  width: 100%;
  min-width: 46rem;          /* below this the columns stop being readable */
  font-size: 0.95rem;
}
table.compare caption {
  caption-side: top;
  text-align: left;
  padding: 0.9rem 1rem 0.7rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.45;
  border-bottom: 1px solid var(--rule);
}
table.compare th,
table.compare td {
  padding: 0.7rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
table.compare thead th {
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}
table.compare tbody th[scope="row"] {
  font-weight: 600;
  color: var(--ink);
  min-width: 15rem;
}
table.compare tbody tr:last-child th,
table.compare tbody tr:last-child td { border-bottom: 0; }
table.compare tbody tr:hover { background: var(--accent-wash); }

/* Named products called out inside a practice-type page. Not a catalogue
   listing — a short list of specific products a sentence just referred to. */
ul.named-products {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 1.4rem;
}
ul.named-products li {
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  margin-bottom: 0.4rem;
  color: var(--ink-soft);
}
ul.named-products li a { font-weight: 600; color: var(--accent-ink); }
p.footnote {
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
  margin-top: 1.6rem;
}