/* ==========================================================================
   Laserglow clone — UTILITY PAGES
   /careers /distributors /manuals /manuals-fr /privacy-policy
   /warranty-service-and-repair and the shared parts of /contact-us,
   /set-up-meeting and /blog.

   Loaded AFTER site.css and forms.css, so it wins on equal specificity.

   Every value here was measured off the live page with
   `python tools/parity.py <slug> --outline`, not eyeballed. Where a number
   looks arbitrary it is live's number.

   Contrast floor on these light surfaces: text and icons 4.5:1, borders and
   large display type 3:1. Card surfaces are --surface, never white on white.

   RED TEXT USES --red-text, NOT --red-ui. UI Red #ff3a42 measures 3.54:1 on
   white: correct for a button fill, a border or a rule (the 3:1 component
   floor) and below the floor for anything a person has to read. forms.css set
   this precedent; these components follow it. Buttons, borders, focus rings
   and icons stay UI Red.
   ========================================================================== */

.usection, .uhero, .ucard, .ushow, .ufaq, .urow, .udoc {
  --red-text: #c81e25;    /* 5.72 on white, 5.25 on --surface, 5.21 on --red-tint */
}

/* --------------------------------------------------------------- utility hero
   Live's utility hero is LIGHT, not the dark full-bleed hero site.css ships.
   Copy sits low-left on white; the photograph occupies the upper right and
   bleeds off the right edge at its own aspect ratio.

   Measured on /careers at 1600: band 1088 tall, copy column x50 w629 starting
   at y396, photo 1402x994 natural, placed at x679 and running past the right
   edge. It is NOT cropped -- rendered ratio equals natural ratio -- so the
   photo is sized by width and allowed to overflow, never squeezed into a box.
   -------------------------------------------------------------------------- */
.uhero {
  position: relative;
  background: var(--page);
  color: var(--ink);
  overflow: hidden;
  display: flex;
  /* CENTRED, not bottom-aligned. `flex-end` pushed the whole hero to the foot
     of a band that is min(68vw, 1088px) tall, so on a laptop the copy sat below
     the fold and the top two-thirds of the band was empty. */
  align-items: center;
  min-height: min(68vw, 1088px);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.uhero__photo {
  position: absolute;
  top: 0;
  left: 42%;
  width: 90%;
  z-index: 0;
  pointer-events: none;
}
.uhero__photo img {
  display: block;
  width: 100%;
  height: auto;              /* natural ratio, always. No object-fit crop. */
}
/* feather the left edge so the photo dissolves into the white page instead of
   ending on a hard vertical seam over the copy column */
.uhero__photo--feather img {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 12%, #000 32%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 12%, #000 32%);
}
.uhero__inner { position: relative; z-index: 1; }
.uhero__copy { max-width: min(42rem, 44%); }
.uhero .eyebrow { color: var(--red); }
.uhero h1 {
  color: var(--ink);
  font-size: clamp(2.6rem, 4.9vw, 4.75rem);   /* live 74.3px at 1600 */
  line-height: .94;
  letter-spacing: -.02em;
  margin: 0 0 .42em;
}
.uhero p {
  color: var(--ink-2);
  font-size: clamp(1rem, .45vw + .88rem, 1.125rem);   /* live 18px */
  line-height: 1.6;
  max-width: 34rem;
}
.uhero .btn-row { margin-top: 2.1rem; }

/* a hero with no photograph (privacy policy, warranty) */
.uhero--plain { min-height: 0; display: block; padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem); }
.uhero--plain .uhero__copy { max-width: 52rem; }

@media (max-width: 1000px) {
  .uhero { display: block; min-height: 0; padding-top: 0; }
  .uhero__photo { position: relative; left: 0; width: 100%; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
  .uhero__photo--feather img { -webkit-mask-image: none; mask-image: none; }
  .uhero__copy { max-width: none; }
}

/* ---------------------------------------------------------- band background
   Live paints several of these bands with a wide, faint graphic that sits
   BEHIND the content. The extractor had lifted it as an ordinary <img> in a
   two-column split, which is what produced the grey placeholder box and the
   broken column on our /careers. It is a background, so it is set as one.
   -------------------------------------------------------------------------- */
.ubandbg { position: relative; overflow: hidden; }
.ubandbg > .wrap { position: relative; z-index: 1; }
/* Live carries this graphic as a real <img>, so ours is one too. A CSS
   background would look the same and be invisible to every check that reads
   the DOM -- including parity, which reported it missing. */
.ubandbg__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.ubandbg__art img {
  /* Live sets this graphic to object-fit:none at exactly its own 1563x500 and
     lets the band clip it. Sized by width with height:auto it keeps that
     natural ratio; stretching it to the band height distorted it, which the
     no-forced-images check caught (3.126 natural vs 2.649 rendered). */
  width: 100%;
  height: auto;
  display: block;
}

/* ------------------------------------------------------------------ section
   Utility bands are shorter than the marketing sections. Live's Available
   Positions band is 500px tall in total at 1600.
   -------------------------------------------------------------------------- */
.usection { padding-block: clamp(2.75rem, 5vw, 4.25rem); }
.usection--surface { background: var(--surface); }
.usection__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.usection__head h2,
.usection__head h3 {
  font-size: clamp(1.45rem, 1.35vw + 1rem, 1.9rem);   /* live 30px */
  margin: 0;
  letter-spacing: -.01em;
}
.usection__rule { border: 0; border-top: 1px solid var(--line); margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); }

/* ------------------------------------------------------------------- cards
   The one card shape the utility family reuses: /careers job cards,
   /distributors partner cards, /manuals product cards.

   --surface fill plus a --line border, because a white card on a white page
   is the light-theme failure this project keeps hitting.
   -------------------------------------------------------------------------- */
.ucards {
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  align-items: start;
}
.ucards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ucards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ucard {
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.15rem, 1.6vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-width: 0;
}
.ucard--surface { background: var(--surface); }
.ucard__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.16rem;              /* live 18.7px */
  line-height: 1.25;
  color: var(--red-text);          /* 5.72 on white. --red-deep measured 4.20 on
                                      a --surface card, under the 4.5 floor, and
                                      18.56px bold is just under the 18.66px
                                      large-text exemption -- so it needed 4.5 */
  margin: 0;
  letter-spacing: -.005em;
}
.ucard__where {
  /* wrap. A partner can cover four countries, and nowrap put all four on one
     line: flex shrank "Costa Rica" from 80px to 53px, which wrapped inside the
     span and dropped it 13px off the baseline of its neighbours. It did not
     overflow the card, so an overflow check could not see it. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: .15rem;
  gap: .45rem;
  font-weight: 700;
  font-size: 1rem;                 /* live 16px/700 */
  color: var(--ink);
  margin: 0;
}
.ucard__country { display: inline-block; }
.ucard__country + .ucard__country::before { content: ", "; }
.ucard__flag { width: 1.35rem; height: auto; flex: 0 0 auto; display: block; border-radius: 2px; }
.ucard__meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: .15rem 0 .2rem; }
.ucard__chip {
  font-family: var(--font-text);
  font-size: .875rem;              /* live 15px */
  line-height: 1;
  padding: .42rem .7rem;
  border-radius: 999px;
  background: var(--red-tint);
  border: 1px solid var(--red-line);
  color: var(--red-text);          /* 5.21 on --red-tint; --red-deep was 4.20 */
  white-space: nowrap;
}
.ucard__chip--plain { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); }
.ucard__body {
  font-size: .875rem;              /* live 14px */
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.ucard__foot { margin-top: auto; padding-top: .9rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* ------------------------------------------------------- show more / less
   Live clamps a job description and reveals the rest behind a Show More
   button. Without it our cards ran to three times live's height, which is
   what pushed the whole page 1400px past live's.
   -------------------------------------------------------------------------- */
.uclamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.uclamp.is-open { -webkit-line-clamp: unset; line-clamp: unset; display: block; }
.umore {
  align-self: flex-start;
  appearance: none;
  background: none;
  border: 0;
  padding: .35rem 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8125rem;             /* live 13px/700 */
  color: var(--red-text);          /* UI Red at 13px measures 3.54:1 */
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.umore:hover { color: var(--ink); }
.umore:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }

/* --------------------------------------------------------------- link list
   /distributors and /manuals are long lists of named rows with actions.
   -------------------------------------------------------------------------- */
.urows { display: grid; gap: .5rem; }
.urow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: .95rem 1.15rem;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.urow__name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink); margin: 0; }
.urow__meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .3rem 0 0; font-size: .875rem; color: var(--ink-2); }
.urow__meta a { color: var(--ink-2); }
.urow__acts { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }

@media (max-width: 720px) {
  .urow { grid-template-columns: 1fr; }
  .urow__acts { justify-content: flex-start; }
  .ucards--3, .ucards--4 { grid-template-columns: 1fr; }
}
@media (min-width: 721px) and (max-width: 1080px) {
  .ucards--3, .ucards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ chooser
   The red pill row live uses to filter a long list (regions on /distributors,
   product families on /manuals).
   -------------------------------------------------------------------------- */
.uchoose { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.5rem 0 0; }
.uchoose__btn {
  appearance: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .875rem;
  padding: .68rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--page);
  color: var(--ink);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.uchoose__btn:hover { border-color: var(--ink); }
.uchoose__btn[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.uchoose__btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.uchoose__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 .35rem;
  display: block;
}

/* --------------------------------------------------------------- long copy
   /privacy-policy is a legal document: one measure, numbered headings, lists.
   Live sets it at 16px on a single narrow column.
   -------------------------------------------------------------------------- */
.udoc { max-width: 52rem; }
.udoc h2 {
  font-size: clamp(1.25rem, .8vw + 1rem, 1.5rem);
  margin: 2.4rem 0 .7rem;
  letter-spacing: -.005em;
}
.udoc h2:first-child { margin-top: 0; }
.udoc h3 { font-size: 1.06rem; margin: 1.8rem 0 .55rem; }
.udoc p, .udoc li { font-size: 1rem; line-height: 1.68; color: var(--ink-2); }
.udoc p { margin: 0 0 1rem; }
.udoc ul { margin: 0 0 1.35rem; padding-left: 1.15rem; }
.udoc li { margin-bottom: .55rem; }
.udoc li strong, .udoc p strong { color: var(--ink); }
.udoc a { color: var(--red-text); text-underline-offset: 3px; }
.udoc__stamp {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--ink-3);
  margin: 0 0 2rem;
}

/* ------------------------------------------------------------------ langbar
   /manuals and /manuals-fr switch between each other.
   -------------------------------------------------------------------------- */
.langbar { display: flex; gap: .4rem; padding-top: 1.1rem; }
.langbar__link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8125rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  color: var(--ink-2);
  border: 1px solid transparent;
  text-decoration: none;
}
.langbar__link:hover { color: var(--ink); border-color: var(--line); }
.langbar__link--on { background: var(--surface-2); border-color: var(--line); color: var(--ink); }

/* ---------------------------------------------------------- partner cards */
.ucard__body .ucard__line {
  display: block;
  color: var(--ink-2);
  text-decoration: none;
  word-break: break-word;
}
.ucard__body .ucard__line + .ucard__line { margin-top: .2rem; }
.ucard__body .ucard__line:hover { color: var(--red-text); text-decoration: underline; }

/* ------------------------------------------------------------ select filter
   Live puts a state/province select above the North American lists. Its
   options come from the records themselves, so it can never drift from them.
   -------------------------------------------------------------------------- */
.upick { margin: 0 0 clamp(1.25rem, 2.5vw, 1.75rem); max-width: 22rem; }
.upick__select {
  width: 100%;
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--ink);
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .8rem 2.6rem .8rem 1.15rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%233f444d' d='M1 1.6 6 6.6l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: .75rem;
}
.upick__select:hover { border-color: var(--ink-3); }
.upick__select:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-color: var(--red); }

/* the region jump list in the distributors hero */
.uregions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem 1.5rem; margin-top: 1.1rem; max-width: 30rem; }
.uregions a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--ink);
  text-decoration: none;
  padding: .3rem 0;
  border-bottom: 1px solid transparent;
}
.uregions a:hover { color: var(--red-text); border-bottom-color: var(--red-line); }
.uhero__cue {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 1.6rem 0 0;
}
@media (max-width: 600px) { .uregions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------ /manuals cards
   Product cut-out above the name, then the PDF buttons. Live letterboxes the
   shot (object-fit:contain at 142x169 over a 127x169 photo); the scaffold had
   used cover and squeezed 0.75 into 1.329, cropping the product itself.
   -------------------------------------------------------------------------- */
.udoc-card { align-items: stretch; text-align: left; }
.udoc-card__shot {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  height: 11rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .75rem;
  margin-bottom: .3rem;
}
.udoc-card__shot img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.udoc-card__name { color: var(--ink); font-size: 1.06rem; }
.udoc-card__none { font-size: .8125rem; color: var(--ink-3); margin: auto 0 0; padding-top: .9rem; }
.udocs .ucard__foot { gap: .5rem; }
.udocs .btn { flex: 1 1 auto; justify-content: center; min-width: 0; }

/* the family jump list in the manuals hero */
.ufamilies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.5rem; margin-top: 1.1rem; max-width: 34rem; }
.ufamilies a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--ink);
  text-decoration: none;
  padding: .3rem 0;
  border-bottom: 1px solid transparent;
}
.ufamilies a:hover { color: var(--red-text); border-bottom-color: var(--red-line); }
@media (max-width: 600px) { .ufamilies { grid-template-columns: 1fr; } }

/* A doc button live ships disabled. Grey, but still 4.5:1 against its fill --
   a disabled control still has to be readable. */
.btn.is-off,
.btn.is-off:hover {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--ink-3);
  cursor: not-allowed;
  box-shadow: none;
}

/* visually hidden, still read aloud */
.u-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------- /contact-us shows
   Five show cards in a row. Live marks the two upcoming ones apart from the
   three completed ones with the status word above the name.
   -------------------------------------------------------------------------- */
.ushows__head { max-width: 46rem; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.ushows__title {
  font-size: clamp(1.6rem, 1.9vw + 1rem, 2.45rem);   /* live 39px */
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin: 0 0 .7rem;
}
.ushows__intro { color: var(--ink-2); font-size: 1rem; line-height: 1.6; margin: 0; }
.ushows {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(.9rem, 1.4vw, 1.35rem);
  align-items: start;
}
.ushow {
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1rem, 1.4vw, 1.35rem);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.ushow__status {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .875rem;             /* live 16px/800 */
  letter-spacing: .06em;
  color: var(--ink-3);
  margin: 0;
}
.ushow__status--on { color: var(--red-text); }
.ushow__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;             /* live 16.3px */
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.ushow__booth { display: flex; gap: .4rem; align-items: baseline; margin: 0; font-size: 1.02rem; }
.ushow__booth span:first-child { color: var(--ink-3); font-size: .8125rem; letter-spacing: .06em; }
.ushow__booth span:last-child { font-weight: 700; color: var(--ink); }
.ushow__when,
.ushow__where {
  margin: 0;
  font-size: .8125rem;            /* live 13px */
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.ushow__link {
  margin-top: auto;
  padding-top: .7rem;
  font-size: .75rem;              /* live 11.4px, lifted to 12 for contrast */
  color: var(--ink-3);
  word-break: break-all;
  text-decoration: none;
}
.ushow__link:hover { color: var(--red-text); text-decoration: underline; }

@media (max-width: 1200px) { .ushows { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .ushows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .ushows { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ /contact-us find us
   Four detail columns beside the parking photograph. Live keeps each address
   line whole; the scaffold had split "USA:" from its street.
   -------------------------------------------------------------------------- */
.ufind { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42%); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.ufind__title { font-size: clamp(1.7rem, 2.3vw + 1rem, 3.05rem); text-transform: uppercase; letter-spacing: -.02em; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.ufind__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.ufind__head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9375rem;            /* live 16px */
  letter-spacing: .05em;
  color: var(--ink);
  margin: 0 0 .6rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.ufind__line {
  margin: 0 0 .35rem;
  font-size: .8125rem;            /* live 12.4px, lifted to 13 for contrast */
  line-height: 1.5;
  color: var(--ink-2);
}
.ufind__media img { width: 100%; height: auto; display: block; border-radius: var(--r); }
@media (max-width: 1100px) { .ufind { grid-template-columns: 1fr; } .ufind__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .ufind__grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- /contact-us FAQ
   Live keeps every answer but the first collapsed. Ours had all nineteen open,
   which alone put the page 1600px past live's and pushed everything below it
   out of position.
   -------------------------------------------------------------------------- */
.ufaq { max-width: 62rem; }
.ufaq__title { font-size: clamp(1.5rem, 1.4vw + 1rem, 2rem); margin: 0 0 1.25rem; }
.ufaq__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .9rem;
  margin-bottom: .35rem;
  border-bottom: 1px solid var(--line);
}
.ufaq__cat { margin: 0; font-size: 1rem; font-weight: 700; color: var(--ink); }
.ufaq__find {
  font-family: var(--font-text);
  font-size: .9375rem;
  color: var(--ink);
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .6rem 1.1rem;
  min-width: min(100%, 18rem);
}
.ufaq__find::placeholder { color: var(--ink-3); }
.ufaq__find:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-color: var(--red); }

.ufaq__item { border-bottom: 1px solid var(--line-soft); }
.ufaq__item[hidden] { display: none; }
.ufaq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.1rem 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;          /* live 20px */
  line-height: 1.35;
  color: var(--ink);
}
.ufaq__q::-webkit-details-marker { display: none; }
.ufaq__q::after {
  content: "";
  flex: 0 0 auto;
  width: .7rem; height: .7rem;
  margin-top: .35rem;
  border-right: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.ufaq__item[open] > .ufaq__q::after { transform: rotate(-135deg); }
.ufaq__q:hover { color: var(--red-text); }
.ufaq__a { padding: 0 0 1.25rem; }
.ufaq__a p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--ink-2); max-width: 68ch; }

/* live sets this headline on two lines, as two elements */
.cform__line { display: block; }

/* the oversized section word live sets behind the trade shows band */
.uwatermark {
  position: absolute;
  left: 0; right: 0; top: -.18em;
  z-index: 0;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(6rem, 28vw, 28rem);
  line-height: .8;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--surface-2);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
}
.usection--water { position: relative; overflow: hidden; padding-top: clamp(4rem, 12vw, 11rem); }
.usection--water > .wrap { position: relative; z-index: 1; }

/* ==========================================================================
   /manuals and /manuals-fr: scaled to the reference (user, 2026-08-24)
   Scoped to [class*="u-manuals"] so nothing here reaches /careers, /distributors or
   /privacy-policy, which share every class name in this stylesheet.
   ========================================================================== */

/* ---- hero ---------------------------------------------------------------
   Bigger heading, bigger copy, and a wider copy column so three heading lines
   sit comfortably. The photo keeps its natural ratio; only the fade changes. */
/* The copy column is widened and the photo pushed right, so the heading can
   grow AND still hold its three authored lines. Sizing the type alone made
   it smaller than before, which is the opposite of what was asked. */
[class*="u-manuals"] .uhero__copy { max-width: min(60rem, 64%); }
[class*="u-manuals"] .uhero__photo { left: 52%; width: 84%; }
/* Sized to FIT the authored line breaks. At 5.9vw the heading re-wrapped to
   four lines in English and five in French, which is the opposite of the point
   of setting the breaks. `text-wrap: balance` is deliberately NOT used: it
   would re-flow the lines and undo them. */
[class*="u-manuals"] .uhero h1 {
  font-size: clamp(2.6rem, 5.2vw, 5rem);
  line-height: .96;
  margin-bottom: .4em;
  text-wrap: nowrap;
}
/* French says the same thing in more words, so it gets its own step down
   rather than forcing the English heading smaller to suit it. */
.u-manuals-fr .uhero h1 { font-size: clamp(2.2rem, 4vw, 3.85rem); }
@media (max-width: 900px) {
  [class*="u-manuals"] .uhero h1,
  .u-manuals-fr .uhero h1 { text-wrap: wrap; font-size: clamp(2.2rem, 7vw, 3rem); }
}
[class*="u-manuals"] .uhero p {
  font-size: clamp(1.05rem, .5vw + .92rem, 1.22rem);
  line-height: 1.7;
  max-width: 38rem;
}

/* A longer, gentler ramp than the shared one: the copy column is wider here,
   so the photo has to start dissolving further right or it runs under the
   heading. Full transparency to 22%, fully opaque only by 55%. */
[class*="u-manuals"] .uhero__photo--feather img {
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,.45) 38%, #000 55%);
  mask-image: linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,.45) 38%, #000 55%);
}

/* ---- product selector: red pills, two rows of five -----------------------
   Was a plain two-column list of text links. */
/* THREE across on a desktop, matching live. Five made every long label wrap
   to two lines inside its pill, which is what a pill must never do. */
[class*="u-manuals"] .ufamilies {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  margin-top: 1rem;
  max-width: 52rem;
}
[class*="u-manuals"] .ufamilies a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: .8125rem;
  line-height: 1.2;
  color: #fff;
  background: var(--red-ui, #ff3a42);
  border: 0;
  border-bottom: 0;
  border-radius: 999px;
  padding: .68rem 1rem;
  text-decoration: none;
  text-align: center;
  /* ONE line, always. The label is centred with the arrow beside it, and a
     name that will not fit is shrunk by the clamp above rather than wrapped. */
  white-space: nowrap;
}
[class*="u-manuals"] .ufamilies a::after {
  content: "\2198";                 /* the same down-right arrow as .btn__arrow */
  font-size: .95em;
  flex: 0 0 auto;
  opacity: .95;
}
[class*="u-manuals"] .ufamilies a:hover {
  background: #e02b33;
  color: #fff;
  border-bottom-color: transparent;
}
[class*="u-manuals"] .ufamilies a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

@media (max-width: 1100px) {
  [class*="u-manuals"] .ufamilies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  [class*="u-manuals"] .ufamilies { grid-template-columns: 1fr; }
}

/* ---- language switch: flags ---------------------------------------------- */
[class*="u-manuals"] .langbar { display: flex; gap: .7rem; align-items: center; margin-top: .7rem; }
[class*="u-manuals"] .langbar__link {
  display: inline-flex;
  padding: .3rem;
  border: 2px solid transparent;
  border-radius: 6px;
  line-height: 0;
  background: none;
}
[class*="u-manuals"] .langbar__flag {
  width: 2.6rem;
  height: auto;
  display: block;
  border-radius: 3px;
  /* a 1px inset edge, so a white flag still has a boundary on a white page */
  box-shadow: 0 0 0 1px rgba(16, 17, 20, .22);
}
[class*="u-manuals"] .langbar__link--on { border-color: var(--red-ui, #ff3a42); }
[class*="u-manuals"] .langbar__link:hover { border-color: var(--ink-3); }
[class*="u-manuals"] .langbar__link:focus-visible { outline: 3px solid var(--red-ui, #ff3a42); outline-offset: 2px; }

/* ---- product cards: bigger, centred, red names ---------------------------- */
[class*="u-manuals"] .udocs.ucards--4 { gap: clamp(1.1rem, 1.8vw, 1.75rem); }
[class*="u-manuals"] .udoc-card {
  text-align: center;
  align-items: stretch;
  border-radius: 20px;
  padding: clamp(1.4rem, 2vw, 2rem);
  background: #fff;
  border: 1px solid var(--line-soft);
  box-shadow: 0 10px 28px rgba(16, 17, 20, .09);
}
[class*="u-manuals"] .udoc-card__shot {
  height: 17rem;                    /* was 11rem */
  padding: 1.1rem;
  border-radius: 16px;
  margin-bottom: .9rem;
  /* WHITE, not the grey surface. Every product shot is a cut-out on a white
     field, so a grey box left a visible white rectangle floating inside it. */
  background: #fff;
  border-color: var(--line);
}
/* The shared rule caps these at their natural size (127x169), so a bigger box
   just added grey around an unchanged photo. Driving off the HEIGHT lets a
   small source fill the card, which is what "increase the images" needs. */
[class*="u-manuals"] .udoc-card__shot img {
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
[class*="u-manuals"] .udoc-card__name {
  /* MEASURED off live: rgb(255, 58, 66), UI Red. Matching live is the
     instruction; the site-wide red-text contrast question is parked. */
  color: var(--red-ui, #ff3a42);
  font-weight: 800;
  font-size: 1.24rem;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 1.1rem;
}
[class*="u-manuals"] .udoc-card__none { text-align: center; }
[class*="u-manuals"] .udocs .ucard__foot { gap: .6rem; justify-content: center; margin-top: auto; }
[class*="u-manuals"] .udocs .ucard__foot .btn { border-radius: 999px; padding-inline: 1.1rem; }

@media (max-width: 1000px) {
  [class*="u-manuals"] .udoc-card__shot { height: 14rem; }
}

/* "CHOOSE A PRODUCT..." and "SELECT LANGUAGE :" are RED on live, not ink.
   MEASURED off live: rgb(255, 58, 66), which is UI Red, not the darker
   --red-text token. Matching live exactly is the instruction here; the
   site-wide red-text contrast question is a separate, parked decision. */
[class*="u-manuals"] .uhero__cue { color: var(--red-ui, #ff3a42); font-size: 1rem; }
/* live's eyebrow is 22.2px, ours was 16.8px */
[class*="u-manuals"] .uhero .eyebrow { font-size: clamp(1.05rem, .6vw + .88rem, 1.32rem); }

/* ==========================================================================
   /privacy-policy: sizes measured off live, 2026-08-24
   Live sets the numbered section headings at the SAME 16px as the body. It
   reads oddly for a heading, but a legal page that does not match live is the
   thing being fixed here.
   ========================================================================== */
.u-privacy-policy .udoc h2 { font-size: 1rem; margin: 2rem 0 .6rem; }
.u-privacy-policy .udoc h3 { font-size: 1rem; }
.u-privacy-policy .uhero h1 { font-size: clamp(2.2rem, 3.9vw, 3.75rem); }   /* live 60px */
.u-privacy-policy .uhero .eyebrow { font-size: clamp(1.1rem, .8vw + .9rem, 1.53rem); }  /* live 24.5px */
/* live puts the closing consent sentence in UI Red */
.u-privacy-policy .udoc p:last-of-type { color: var(--red-ui, #ff3a42); }
.u-privacy-policy .udoc a { color: var(--red-ui, #ff3a42); }


/* ==========================================================================
   /distributors: matched to the user's live screenshots, 2026-08-24
   Built from the SCREENSHOTS, not from a computed-style probe. Wix paints its
   card background as a separate sibling element, so walking the ancestor chain
   reports "transparent, no shadow, no corner" for a card that is plainly white
   and rounded on screen. A probe stripped the cards on that false reading and
   had to be reverted; the picture is the authority here.
   ========================================================================== */

/* the region jump list is red pills, FOUR across */
.u-distributors .uregions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
  max-width: 46rem;
  margin-top: 1rem;
}
.u-distributors .uregions a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: .8125rem;
  color: #fff;
  background: var(--red-ui, #ff3a42);
  border: 0;
  border-bottom: 0;
  border-radius: 999px;
  padding: .68rem 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.u-distributors .uregions a::after { content: "\2198"; font-size: .95em; opacity: .95; }
.u-distributors .uregions a:hover { background: #e02b33; color: #fff; border-bottom-color: transparent; }
@media (max-width: 900px) { .u-distributors .uregions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* "CLICK HERE TO CONNECT..." is red on live */
.u-distributors .uhero__cue { color: var(--red-ui, #ff3a42); }
.u-distributors .uhero .eyebrow { font-size: clamp(1.05rem, .6vw + .88rem, 1.39rem); }

/* Company names and region headings are TITLE CASE on live, not uppercase.
   The site-wide h2/h3 rule uppercases both. */
.u-distributors .usection__head h2,
.u-distributors .ucard__title { text-transform: none; }
.u-distributors .ucard__title { color: var(--red-ui, #ff3a42); }

/* the state/province sits on its own line as plain text, not in a grey pill */
.u-distributors .ucard__chip,
.u-distributors .ucard__chip--plain {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--ink);
  font-size: 1rem;
}
.u-distributors .ucard__meta { gap: 0; }

/* The picker is INSIDE .usection__head now (see section() in
   utility_page.py), so it only needs to sit on the line, not be dragged there
   by order and a negative margin. */
/* The shared rule is `justify-content: space-between`, which parks the picker
   at the far right of the row. Here the heading and the picker are one group,
   so the row packs from the left instead. */
.u-distributors .usection__head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .8rem;
  flex-wrap: wrap;
}
.u-distributors .usection__head h2::after { content: " -"; }
.u-distributors .upick { margin: 0; }

/* ---- phone tap targets, added 2026-08-25 -------------------------------
   A distributor's phone number and website are tel: and http: links and the
   whole point of /distributors, and they measured 22px tall on a phone: 144 of
   them on that one page. Grown to 44px under 1080px. The desktop layout, where
   a mouse pointer is exact, is untouched. */
@media (max-width: 1079.98px) {
  /* flex, NOT inline-flex. A distributor's phone number and its website are two
     separate lines; inline-flex let them sit side by side on one row as soon as
     both fitted, which is what happened on /distributors after the tap-target
     pass. A block-level flex keeps each on its own line and still gives the
     44px hit area. */
  .ucard__body .ucard__line {
    display: flex; width: fit-content; align-items: center; min-height: 44px;
  }
  .ucard__body .ucard__line + .ucard__line { margin-top: 0; }
}