/** Shopify CDN: Minification failed

Line 1736:0 Unexpected "}"

**/
/*! uj-sections — layout for the uj-* section library.
    One global file so a section added in the theme editor renders
    correctly on first paint. */

/* ============================================================
   Utility bar
   ============================================================ */

.uj-util { font-size: var(--uj-fs-micro); }
.uj-util__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--uj-space-4);
  min-height: 3.6rem;
  padding-block: var(--uj-space-2);
}
.uj-util__rating, .uj-util__right a, .uj-util__right {
  display: flex; align-items: center; gap: var(--uj-space-2);
  color: inherit; text-decoration: none;
}
.uj-util__stars { display: inline-flex; gap: 1px; }
.uj-util__stars .uj-icon { fill: currentColor; }
.uj-util__center { font-weight: var(--uj-weight-medium); text-align: center; }
.uj-util__center a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }

@media screen and (max-width: 989px) {
  .uj-util__center, .uj-util__right { display: none; }
  .uj-util__inner { justify-content: center; }
}

/* ============================================================
   Floating pill header
   ============================================================ */

.uj-hdr { position: relative; z-index: 6; }
.uj-hdr--overlay { position: absolute; left: 0; right: 0; top: var(--uj-hdr-offset, 0); }
.uj-hdr--sticky.uj-hdr--scrolled { position: fixed; top: 0; left: 0; right: 0; }

.uj-hdr__bar {
  position: relative;
  /* Three columns with the logo in flow in the middle one.
     Absolute centring was tried first and fails as soon as the menu grows:
     out of flow, the logo is invisible to the nav, which runs straight
     underneath it. It was patched once by tightening the right cluster,
     which only moves the breaking point -- adding four menu items put the
     wordmark back under "Track Your Order".
     Equal 1fr columns fail too, because the right cluster is far wider
     than the left. auto in the middle with 1fr either side keeps the logo
     at the true centre while the sides can never reach it. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--uj-space-5);
  align-items: center;
  gap: var(--uj-space-4);
  margin-top: var(--uj-space-4);
  padding: var(--uj-space-3) var(--uj-space-6);
  border-radius: var(--uj-r-md);
  background-color: rgba(var(--color-background), 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  transition: background-color var(--uj-dur) var(--uj-ease);
}
.uj-hdr--scrolled .uj-hdr__bar {
  background-color: rgb(var(--color-background));
  box-shadow: var(--uj-shadow-2);
}

/* Direct children only. As a descendant selector this reached every ul
   inside the nav -- including the country picker's 237-item list, which
   it laid out as one horizontal row running ~32,000px off-screen. The
   panel looked blank because its contents were nowhere near it. */
.uj-hdr__nav > ul {
  display: flex; align-items: center; gap: var(--uj-space-5);
  list-style: none; margin: 0; padding: 0;
}
/* The right cluster runs 580px against the left's 255px, so absolute
   centring put the logo's right edge 11px inside the right nav. Tighten
   the cluster rather than moving the logo off centre. */
.uj-hdr__nav--right > ul { justify-content: flex-end; gap: var(--uj-space-4); }
/* Only the menu wraps. Letting the right cluster wrap dropped search,
   account and cart onto a second line and doubled the height of the bar --
   those are controls with fixed positions people reach for, not a list that
   can reflow. The menu is the part that grows, so the menu is the part that
   takes a second line. */
/* min-width: 0 was the overlap. It lets a grid auto track shrink below its
   own content, so when the bar ran short the menu's column collapsed while
   the links inside it kept their width -- and they spilled out of the column
   onto whatever came next. That is why "Lighting" sat on top of "Track Your
   Order" at some widths and not others, and why no breakpoint fixed it: the
   shrinking is the fault, not the threshold.

   max-content forbids the collapse. If there is genuinely not enough room the
   bar overflows, which the shedding rules below are there to prevent, and an
   overflow is at least visible rather than two words printed over each
   other. */
.uj-hdr__nav--left { min-width: max-content; }
.uj-hdr__nav--right { min-width: max-content; }
/* The menu does not wrap. A second line of links under the first is the
   thing that reads as broken -- worse than any single link being absent --
   so when the bar runs out of room the header sheds weight instead, in the
   media queries below. */
.uj-hdr__nav--left > ul { flex-wrap: nowrap; }
.uj-hdr__nav--right > ul { flex-wrap: nowrap; }

/* The utility cluster holds its width; the menu column absorbs the pressure.
   Without this the right column is sized by its content and squeezes the
   menu into wrapping long before it needs to. */
.uj-hdr__nav--right { white-space: nowrap; }
/* A cart icon with a count is unambiguous; the word costs ~40px right
   where the collision happens. */
.uj-hdr__cart-label { display: none; }
.uj-hdr__link {
  display: inline-flex; align-items: center; gap: var(--uj-space-1);
  font-size: var(--uj-fs-sm); font-weight: var(--uj-weight-medium);
  color: rgb(var(--color-foreground)); text-decoration: none;
  padding: var(--uj-space-2) 0; cursor: pointer; white-space: nowrap; list-style: none;
}
.uj-hdr__link::-webkit-details-marker { display: none; }
.uj-hdr__link:hover { opacity: 0.7; }
.uj-hdr__link--active { border-bottom: 1px solid currentColor; }

.uj-hdr__caret {
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--uj-dur) var(--uj-ease);
}
.uj-hdr__details[open] .uj-hdr__caret { transform: rotate(-135deg) translateY(-2px); }

/* Dawn underlines links globally; the wordmark is a link but reads as a
   logo, so it must not carry one. */
.uj-hdr__logo {
  display: block; line-height: 0; text-decoration: none;
  justify-self: center;
}
/* Left-aligned logo. A centred wordmark splits the menu into two clusters
   that grow toward each other, so every item added brings the collision
   closer; anchoring it to one edge gives the menu the whole remaining width
   and it simply extends. The markup order stays logical -- menu, logo,
   utilities -- and only the visual order changes. */
/* auto auto 1fr, not auto 1fr auto. As a 1fr the menu column could be
   narrower than the menu, and with wrapping off the links simply ran out of
   their column into the utilities -- "Lighting" ended up touching "Track
   Your Order". Sized to its content instead, the menu can never be squeezed,
   and all the slack collects in the last column where it belongs. */
.uj-hdr--logo-left .uj-hdr__bar { grid-template-columns: auto auto minmax(var(--uj-space-7), 1fr); }
.uj-hdr--logo-left .uj-hdr__logo { order: -1; justify-self: start; }
.uj-hdr--logo-left .uj-hdr__nav--left > ul { justify-content: flex-start; }
.uj-hdr--logo-left .uj-hdr__nav--right { justify-self: end; }

/* Shedding order, measured on the live bar: support links are 259px and the
   country picker 184px of a 543px cluster, against 100px of actual controls.
   They go first because they are the parts a shopper is least likely to want
   and the parts already reachable from the footer. Search, account and cart
   never go.

   The breakpoints are derived, not chosen. Measured from the live bar: logo
   130, menu 413, gaps 32, utility cluster 543 -- so everything shown needs
   1118px of bar and collides below roughly a 1330px viewport. Dropping the
   country picker at 1400 clears that with margin to spare; dropping the
   support links at 1200 holds until about 890.

   Selectors match by structure rather than class, because these links come
   from the customer's own menu and carry none. Both were checked against the
   live DOM: one matches the country picker alone, the other the three text
   links and not the account icon beside them. */
@media screen and (max-width: 1400px) {
  .uj-hdr__nav--right > ul > li:has(.localization-form) { display: none; }
}
@media screen and (max-width: 1200px) {
  .uj-hdr__nav--right > ul > li:has(> .uj-hdr__link:not(.uj-hdr__cart)):not(:has(svg)) {
    display: none;
  }
}

.uj-hdr__logo:hover { text-decoration: none; }
.uj-hdr__logo img { display: block; height: auto; }
.uj-hdr__wordmark {
  font-size: var(--uj-fs-h4); font-weight: var(--uj-weight-medium);
  letter-spacing: -0.02em; color: rgb(var(--color-foreground)); line-height: 1;
}

.uj-hdr__icon-item svg, .uj-hdr__cart svg { width: 18px; height: 18px; }
/* The cart icon is drawn at the family's own scale now (uj-icon-cart), so
   it needs no transform. Scaling was always a compromise: it fixed the size
   and multiplied the line weight in the same gesture. */

.uj-hdr__cart { position: relative; }
.uj-hdr__cart-label { font-size: var(--uj-fs-sm); }
.uj-hdr__cart-count { font-size: 1.1rem; font-weight: 600; }
/* Dawn's country button is sized for a full-width header bar. Inside the
   pill it wrapped "Canada | CAD $" onto two lines and pushed the bar
   taller than the logo needed. Keep it on one line. */
.uj-hdr__loc .localization-form { padding: 0; }
.uj-hdr__loc .localization-form__select { min-width: 0; }
.uj-hdr__loc .disclosure__button {
  font-size: var(--uj-fs-sm);
  white-space: nowrap;
  padding: 0.4rem 0.6rem;
  min-height: 0;
}
.uj-hdr__search .header__search { display: flex; }
.uj-hdr__search .header__icon--search {
  height: auto; width: auto; padding: var(--uj-space-2);
  color: rgb(var(--color-foreground));
}

.uj-hdr__burger { display: none; background: none; border: 0; padding: var(--uj-space-2); cursor: pointer; }
.uj-hdr__burger span {
  display: block; width: 22px; height: 1.5px; margin: 4px 0;
  background: rgb(var(--color-foreground));
  transition: transform var(--uj-dur) var(--uj-ease), opacity var(--uj-dur) var(--uj-ease);
}
.uj-hdr--open .uj-hdr__burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.uj-hdr--open .uj-hdr__burger span:nth-child(2) { opacity: 0; }
.uj-hdr--open .uj-hdr__burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---- Mega panel ---- */
.uj-hdr__details { position: static; }
.uj-mega { position: absolute; left: 0; right: 0; top: calc(100% + var(--uj-space-2)); padding: 0 var(--uj-space-4); z-index: 20; }
.uj-mega__inner {
  background: var(--uj-paper); border-radius: var(--uj-r-md);
  box-shadow: var(--uj-shadow-3); padding: var(--uj-space-7);
  max-height: 76vh; overflow-y: auto;
}
.uj-mega__row {
  display: grid; grid-template-columns: 160px minmax(190px, 1fr) 2fr;
  gap: var(--uj-space-6); align-items: start;
  padding: var(--uj-space-5) 0; border-bottom: 1px solid var(--uj-rule);
}
.uj-mega__row:last-of-type { border-bottom: 0; }
.uj-mega__media img, .uj-mega__ph {
  display: block; width: 100%; height: 110px; object-fit: cover;
  border-radius: var(--uj-r-sm); background: var(--uj-linen);
}
.uj-mega__badge {
  display: inline-block; font-size: var(--uj-fs-micro); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--uj-oak-deep); background: var(--uj-oak-tint);
  border-radius: var(--uj-r-xs); padding: 3px 8px; margin-bottom: var(--uj-space-2);
}
.uj-mega__name { margin: 0 0 var(--uj-space-2); font-size: var(--uj-fs-h5); font-weight: var(--uj-weight-medium); }
.uj-mega__price { display: block; margin-bottom: var(--uj-space-3); font-size: var(--uj-fs-sm); }
.uj-mega__price s { color: var(--uj-muted); margin-right: var(--uj-space-2); }
.uj-mega__cta { min-height: 3.8rem; padding: 0 1.8rem; font-size: 1.3rem; }
.uj-mega__specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--uj-space-2) var(--uj-space-4); list-style: none; margin: 0 0 var(--uj-space-3); padding: 0;
}
.uj-mega__specs li { font-size: var(--uj-fs-micro); font-weight: var(--uj-weight-medium); color: var(--uj-muted); }
.uj-mega__copy { margin: 0; font-size: var(--uj-fs-sm); line-height: 1.55; color: rgba(var(--uj-ink-rgb), 0.85); }
.uj-mega__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--uj-space-4); margin-top: var(--uj-space-5);
  padding-top: var(--uj-space-5); border-top: 1px solid var(--uj-rule);
}
.uj-mega__foot-text { margin: 0; font-size: var(--uj-fs-sm); max-width: 52ch; }
.uj-mega__foot-cta { display: flex; gap: var(--uj-space-3); }
.uj-mega__foot-cta .button { min-height: 4rem; padding: 0 2rem; font-size: 1.3rem; }

/* ---- Mobile ---- */
.uj-hdr__mobile { display: none; }
@media screen and (max-width: 989px) {
  /* Three columns here too. The logo was absolutely centred at up to 46vw
     wide, so on a narrow screen it simply lay across the cart icon -- the
     same fault as the desktop bar, in the same shape: out of flow, nothing
     else can see it. In flow in its own column, it cannot reach either
     side, and 34vw leaves the icons room to breathe. */
  /* Scoped with .uj-hdr for the same reason the logo rule below is: the
     desktop rule .uj-hdr--logo-left .uj-hdr__bar is two classes deep and
     lives outside this media query, so a bare .uj-hdr__bar lost to it and
     mobile kept rendering the desktop's auto auto 1fr -- which is what put
     the wordmark against the burger instead of on the centre line.

     burger | logo | icons, with equal 1fr side columns so the wordmark lands
     on the true centre of the bar rather than merely between the two
     clusters -- the burger and the icon pair are different widths, so an
     auto middle column would sit the logo off-centre. In flow throughout, so
     it cannot reach either side however narrow the screen. */
  .uj-hdr .uj-hdr__bar {
    grid-template-columns: 1fr auto 1fr;
    padding: var(--uj-space-3) var(--uj-space-4);
    min-height: 5.6rem;
    column-gap: var(--uj-space-4);
  }
  /* Scoped with .uj-hdr so it outranks .uj-hdr--logo-left .uj-hdr__logo,
     which sets order: -1 for the desktop bar and was leaking down here --
     that rule is two classes deep, so a bare .uj-hdr__logo lost to it and
     the wordmark jumped ahead of the burger. */
  .uj-hdr .uj-hdr__logo {
    position: static;
    transform: none;
    order: 2;
    justify-self: center;
    max-width: 34vw;
  }
  .uj-hdr__logo img { max-width: 100%; }
  .uj-hdr__burger { display: block; order: 1; justify-self: start; }
  /* The menu column must not be squeezed below its content here either --
     min-width: max-content on the wrappers is what stops a column collapsing
     while its contents keep their width and spill across the next one. */
  .uj-hdr .uj-hdr__nav--right { min-width: max-content; }

  /* Even hit areas, even gaps. The cart count sat beside the bag as its own
     element, so that item was wider than the search beside it and the spacing
     read as uneven when it was only unequal. As a badge on the bag, every
     control is the same square and the rhythm comes back.

     4.4rem squares also give each icon a proper touch target, which 18px of
     svg with a little padding did not. */
  .uj-hdr .uj-hdr__nav--right > ul { gap: var(--uj-space-2); }
  .uj-hdr .uj-hdr__icon-item > a,
  .uj-hdr .uj-hdr__icon-item .header__icon--search {
    display: grid;
    place-items: center;
    width: 4.4rem;
    height: 4.4rem;
    padding: 0;
  }
  .uj-hdr .uj-hdr__cart-count {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    min-width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    padding: 0 0.4rem;
    border-radius: var(--uj-r-pill);
    background: var(--uj-oak);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
  }
  /* Scoped like the two rules above. The desktop logo-left block also
     targets these two, and today it sets different properties so nothing
     collides -- but a bare rule here loses the moment either side gains a
     property the other has, which is how the bar and the logo both broke. */
  .uj-hdr .uj-hdr__nav--left { display: none; }
  .uj-hdr .uj-hdr__nav--right { order: 3; display: block; justify-self: end; }
  .uj-hdr__nav--right .uj-hdr__item:not(.uj-hdr__icon-item) { display: none; }
  .uj-hdr__loc { display: none; }
  .uj-hdr__cart-label { display: none; }

  .uj-hdr__mobile {
    display: block; margin: var(--uj-space-2) var(--uj-space-4) 0;
    border-radius: var(--uj-r-md); padding: var(--uj-space-5); box-shadow: var(--uj-shadow-2);
  }
  .uj-hdr__mobile[hidden] { display: none; }
  .uj-hdr__mobile ul { list-style: none; margin: 0; padding: 0; }
  .uj-hdr__mobile > ul > li > a {
    display: block; padding: var(--uj-space-3) 0;
    font-size: var(--uj-fs-body); font-weight: var(--uj-weight-medium);
    color: rgb(var(--color-foreground)); text-decoration: none;
    border-bottom: 1px solid rgba(var(--color-foreground), 0.15);
  }
  .uj-hdr__mobile ul ul a {
    display: block; padding: var(--uj-space-2) 0 var(--uj-space-2) var(--uj-space-4);
    font-size: var(--uj-fs-sm); color: rgba(var(--color-foreground), 0.8); text-decoration: none;
  }
}
@media screen and (max-width: 749px) {
  .uj-mega__row { grid-template-columns: 90px 1fr; }
  .uj-mega__detail { grid-column: 1 / -1; }
  .uj-mega__inner { padding: var(--uj-space-5); }
}

/* ============================================================
   Shared media + heading
   ============================================================ */

.uj-section { display: block; }
.uj-media { position: relative; overflow: hidden; border-radius: var(--uj-r-md); background: rgba(var(--uj-ink-rgb), 0.03); }
.uj-media::before { content: ''; display: block; padding-top: var(--uj-media-ratio, 66.6%); }
/* Empty media slot: a quiet tinted panel with a faint diagonal, so it is
   legible as a gap to fill rather than as finished art. */
.uj-media__empty {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg,
      rgba(var(--uj-ink-rgb), 0.022) 0 12px,
      rgba(var(--uj-ink-rgb), 0.045) 12px 24px),
    var(--uj-linen, #efedea);
}

.uj-media > img, .uj-media > video, .uj-media > picture, .uj-media > picture > img, .uj-media > .placeholder-svg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--uj-media-fit, cover);
}

.uj-heading { margin-bottom: var(--uj-space-7); }
.uj-heading--center { text-align: center; }
.uj-heading--center .uj-lede { margin-inline: auto; }
.uj-heading__title { margin: 0; }
.uj-heading__lede { margin-top: var(--uj-space-4); }
.uj-icon { flex: 0 0 auto; display: block; }

/* ============================================================
   Hero
   ============================================================ */

.uj-hero { position: relative; display: flex; align-items: center; }
.uj-hero__media { position: absolute; inset: 0; z-index: 0; }
.uj-hero__media .uj-media { height: 100%; border-radius: 0; }
.uj-hero__media .uj-media::before { display: none; }
.uj-hero__media::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.uj-hero__media--full::after { background: rgba(15, 18, 16, var(--uj-hero-overlay, 0.35)); }
/* A bottom-weighted scrim leaves centred text over the brightest part of
   the frame. This keeps the middle covered as well as the base. */
.uj-hero__media--scrim::after {
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%,
      rgba(15,18,16, calc(var(--uj-hero-overlay,0.4) * 1.25)) 0%,
      rgba(15,18,16, calc(var(--uj-hero-overlay,0.4) * 0.45)) 100%),
    linear-gradient(to top,
      rgba(15,18,16, calc(var(--uj-hero-overlay,0.4) * 1.5)) 0%,
      rgba(15,18,16, calc(var(--uj-hero-overlay,0.4) * 0.7)) 55%,
      rgba(15,18,16, calc(var(--uj-hero-overlay,0.4) * 0.85)) 100%);
}

.uj-hero__body { position: relative; z-index: 1; width: 100%; padding-block: var(--uj-space-10); }
.uj-hero__content { max-width: var(--uj-hero-content-width, 72rem); }
.uj-hero__content--center { margin-inline: auto; text-align: center; }
.uj-hero__content--right { margin-left: auto; }
.uj-hero__content--center .uj-hero__cta,
.uj-hero__content--center .uj-hero__rating { justify-content: center; }
.uj-hero__content--center .uj-hero__text { margin-inline: auto; }
.uj-hero__heading { margin: 0; }
.uj-hero__text { margin-top: var(--uj-space-5); max-width: 58ch; }
.uj-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uj-space-4); margin-top: var(--uj-space-7); }
.uj-hero__rating { display: flex; align-items: center; gap: var(--uj-space-3); margin-top: var(--uj-space-5); font-size: var(--uj-fs-sm); }
.uj-hero__stars { display: inline-flex; gap: 2px; color: var(--uj-oak); }
.uj-hero__stars .uj-icon { fill: currentColor; }

.uj-hero--h-small  { min-height: min(56vh, 560px); }
.uj-hero--h-medium { min-height: min(72vh, 720px); }
/* Fixed, not viewport-capped. Measured in the same 827px-tall window,
   the reference hero is 978px -- deliberately taller than the viewport,
   so the fold cuts mid-image and the page reads as continuing. A vh cap
   can never reach that, which is why this sat 250px short. Phones keep a
   vh rule below. */
.uj-hero--h-large  { min-height: 978px; }
.uj-hero--h-adapt  { min-height: 0; }

/* Text over photography needs its own contrast floor */
.uj-hero__media ~ .uj-hero__body,
.uj-hero__media ~ .uj-hero__body .uj-hero__heading { color: #fff; }
.uj-hero__media ~ .uj-hero__body .uj-hero__text { color: rgba(255,255,255,0.9); }
.uj-hero__media ~ .uj-hero__body .uj-eyebrow { color: rgba(255,255,255,0.82); }
.uj-hero__media ~ .uj-hero__body .uj-hero__heading { text-shadow: 0 2px 28px rgba(15,18,16,0.45); }
.uj-hero__media ~ .uj-hero__body .dim { color: rgba(255,255,255,0.8); }
.uj-hero__media ~ .uj-hero__body .uj-hero__text { text-shadow: 0 1px 16px rgba(15,18,16,0.4); }

/* The floating header overlays the hero; content must clear it */
.uj-hdr--overlay ~ * .uj-hero__body,
.uj-hero__body { padding-top: 11rem; }

@media screen and (max-width: 749px) {
  .uj-hero--h-large { min-height: 78vh; }
  .uj-hero--h-medium { min-height: 66vh; }
  .uj-hero__body { padding-top: 9rem; }
  .uj-hero__cta .button { width: 100%; }
  .uj-hero__cta { width: 100%; }
}

/* ============================================================
   Promo strip
   ============================================================ */

.uj-promo { font-size: var(--uj-fs-sm); font-weight: var(--uj-weight-medium); }
.uj-promo__inner {
  display: flex; align-items: center; justify-content: center; gap: var(--uj-space-2);
  min-height: 6.6rem; text-align: center;
}
.uj-promo a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }

/* ============================================================
   Trust features
   ============================================================ */

.uj-trust--ruled { border-block: 1px solid var(--uj-rule); }
.uj-trust {
  display: grid; grid-template-columns: 1fr;
  gap: var(--uj-space-5) var(--uj-space-6);
  list-style: none; margin: 0; padding: 0;
}
.uj-trust__item { display: flex; align-items: center; gap: var(--uj-space-3); }
.uj-trust--stacked .uj-trust__item { flex-direction: column; text-align: center; }
.uj-trust__icon { color: var(--uj-oak); display: flex; }
.uj-trust__body { display: flex; flex-direction: column; }
.uj-trust__l1 { font-size: var(--uj-fs-sm); font-weight: var(--uj-weight-medium); line-height: 1.3; }
.uj-trust__l2 { font-size: var(--uj-fs-sm); color: var(--uj-muted); line-height: 1.3; }

@media screen and (min-width: 750px) {
  .uj-trust { grid-template-columns: repeat(var(--uj-trust-cols, 4), minmax(0, 1fr)); justify-items: center; }
}
@media screen and (max-width: 749px) {
  .uj-trust { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Press logos
   ============================================================ */

.uj-logos__quote {
  margin: 0 auto var(--uj-space-7);
  max-width: 62ch; text-align: center;
  font-family: var(--uj-font-display);
  font-size: var(--uj-fs-h4); font-weight: var(--uj-weight-display);
  line-height: 1.45; border: 0; padding: 0;
}
.uj-logos__heading { text-align: center; margin-bottom: var(--uj-space-5); }
.uj-logos {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--uj-space-6) var(--uj-space-9); list-style: none; margin: 0; padding: 0;
}
.uj-logos__item img {
  height: var(--uj-logo-h, 32px); width: auto; display: block; opacity: 0.5;
  transition: opacity var(--uj-dur) var(--uj-ease), filter var(--uj-dur) var(--uj-ease);
}
.uj-logos--grey .uj-logos__item img { filter: grayscale(1); }
.uj-logos__item img:hover { opacity: 0.85; filter: grayscale(0); }
.uj-logos__empty {
  text-align: center; font-size: var(--uj-fs-sm); color: var(--uj-muted);
  padding: var(--uj-space-6) 0; border: 1px dashed var(--uj-rule-strong); border-radius: var(--uj-r-md);
}
@media screen and (max-width: 749px) {
  .uj-logos { gap: var(--uj-space-5) var(--uj-space-6); }
  .uj-logos__item img { height: calc(var(--uj-logo-h, 32px) * 0.75); }
}

/* ============================================================
   Split
   ============================================================ */

.uj-split { display: grid; gap: var(--uj-space-7); align-items: center; }
.uj-split--align-top { align-items: start; }
.uj-split__inner > * + * { margin-top: var(--uj-space-5); }
.uj-split__inner > .uj-eyebrow + * { margin-top: var(--uj-space-3); }
.uj-split__heading { margin: 0; }
.uj-split__cta { display: flex; flex-wrap: wrap; gap: var(--uj-space-4); }
.uj-split--no-media .uj-split__content { max-width: 72rem; }
.uj-split--text-center.uj-split--no-media .uj-split__content { margin-inline: auto; text-align: center; }
.uj-split--text-center.uj-split--no-media .uj-split__cta { justify-content: center; }

.uj-chips {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--uj-space-2) var(--uj-space-5);
  list-style: none; margin: 0; padding: 0;
}
.uj-chips li { display: flex; align-items: center; gap: var(--uj-space-2); font-size: var(--uj-fs-sm); white-space: nowrap; }
.uj-chips .uj-icon { color: var(--uj-oak); }
.uj-chips li + li { padding-left: var(--uj-space-5); border-left: 1px solid var(--uj-rule); }

.uj-checklist { list-style: none; margin: 0; padding: 0; }
.uj-checklist li {
  display: flex; align-items: flex-start; gap: var(--uj-space-3);
  padding: var(--uj-space-2) 0; font-size: var(--uj-fs-body); line-height: 1.5;
}
.uj-checklist__mark { color: var(--uj-oak); margin-top: 0.15em; }

@media screen and (min-width: 750px) {
  .uj-split { grid-template-columns: 1fr var(--uj-split-media-width, 55%); gap: 0; align-items: stretch; }
  .uj-split--media-left { grid-template-columns: var(--uj-split-media-width, 55%) 1fr; }
  .uj-split--media-left .uj-split__media { order: -1; }
  .uj-split--no-media { grid-template-columns: 1fr; }

  /* text on a panel, media bleeding off the opposite edge */
  .uj-split--bleed { padding-inline: 0; }
  .uj-split--bleed .uj-split__content {
    display: flex; align-items: center;
    background: var(--uj-linen);
    padding: var(--uj-space-10) var(--uj-space-9);
    border-radius: var(--uj-r-md);
  }
  .uj-split--bleed .uj-split__media .uj-media { height: 100%; border-radius: var(--uj-r-md); }
  .uj-split--bleed .uj-split__media .uj-media::before { padding-top: 0; min-height: 46rem; }
}
@media screen and (max-width: 749px) {
  .uj-split--bleed .uj-split__content { padding-inline: 1.5rem; }
  .uj-chips li + li { padding-left: 0; border-left: 0; }
}

/* ============================================================
   Hotspots
   ============================================================ */

.uj-split__media { position: relative; }
.uj-hs__pin { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.uj-hs__dot {
  display: grid; place-items: center; width: 26px; height: 26px;
  padding: 0; border: 0; border-radius: var(--uj-r-pill);
  background: rgba(255,255,255,0.94); box-shadow: 0 2px 10px rgba(15,18,16,0.28);
  cursor: pointer; transition: transform var(--uj-dur) var(--uj-ease);
}
.uj-hs__dot span { font-size: 1.2rem; font-weight: 600; line-height: 1; color: var(--uj-oak-deep); }
.uj-hs__dot::after {
  content: ''; position: absolute; inset: -8px; border-radius: var(--uj-r-pill);
  border: 1px solid rgba(255,255,255,0.5); opacity: 0; transition: opacity var(--uj-dur) var(--uj-ease);
}
.uj-hs__pin:hover .uj-hs__dot, .uj-hs__pin.is-open .uj-hs__dot { transform: scale(1.12); }
.uj-hs__pin:hover .uj-hs__dot::after, .uj-hs__pin.is-open .uj-hs__dot::after { opacity: 1; }
.uj-hs__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.uj-hs__callout {
  position: absolute; top: 50%; transform: translateY(-50%);
  min-width: 16rem; max-width: 24rem;
  padding: var(--uj-space-3) var(--uj-space-4);
  background: var(--uj-paper); border-radius: var(--uj-r-sm);
  box-shadow: var(--uj-shadow-2);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--uj-dur) var(--uj-ease);
}
.uj-hs__pin--right .uj-hs__callout { left: calc(100% + 14px); }
.uj-hs__pin--left .uj-hs__callout { right: calc(100% + 14px); }
.uj-hs__callout::before { content: ''; position: absolute; top: 50%; width: 14px; height: 1px; background: rgba(255,255,255,0.7); }
.uj-hs__pin--right .uj-hs__callout::before { right: 100%; }
.uj-hs__pin--left .uj-hs__callout::before { left: 100%; }
.uj-hs__pin:hover .uj-hs__callout,
.uj-hs__pin:focus-within .uj-hs__callout,
.uj-hs__pin.is-open .uj-hs__callout { opacity: 1; visibility: visible; pointer-events: auto; }

.uj-hs__label { display: block; font-size: var(--uj-fs-sm); font-weight: var(--uj-weight-medium); color: var(--uj-ink-strong); }
.uj-hs__text { display: block; margin-top: 2px; font-size: var(--uj-fs-micro); line-height: 1.45; color: var(--uj-muted); }
.uj-hs__list { display: none; }

@media screen and (max-width: 749px) {
  /* floating callouts cover the thing they describe at phone width */
  .uj-hs__callout { display: none; }
  .uj-hs__dot { width: 24px; height: 24px; }
  .uj-hs__dot span { font-size: 1.1rem; }
  .uj-hs__list {
    display: grid; gap: var(--uj-space-3); list-style: none;
    margin: var(--uj-space-5) 0 0; padding: 0;
  }
  .uj-hs__list li { display: grid; grid-template-columns: 24px 1fr; gap: var(--uj-space-3); align-items: start; font-size: var(--uj-fs-sm); }
  .uj-hs__list-num {
    display: grid; place-items: center; width: 22px; height: 22px;
    border-radius: var(--uj-r-pill); background: var(--uj-oak-tint);
    color: var(--uj-oak-deep); font-size: var(--uj-fs-micro); font-weight: 600;
  }
}

/* ============================================================
   Product grid
   ============================================================ */

.uj-pg__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--uj-space-4); margin-bottom: var(--uj-space-7);
}
.uj-pg__head .uj-heading { margin-bottom: 0; }

.uj-pg { display: grid; grid-template-columns: 1fr; gap: var(--uj-space-6); }
.uj-pg__card { display: flex; flex-direction: column; }
/* No bottom margin: the image is the LAST thing in the card now, so this
   left a white strip between the photo and the card's rounded edge. */
.uj-pg__media { position: relative; display: block; }
.uj-pg__media img { transition: transform 600ms var(--uj-ease); }
.uj-pg__card:hover .uj-pg__media img { transform: scale(1.03); }

.uj-pg__flag {
  position: absolute; left: var(--uj-space-3); bottom: var(--uj-space-3);
  background: var(--uj-ink-strong); color: #fff;
  font-size: var(--uj-fs-micro); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--uj-r-xs);
}
.uj-pg__badge {
  display: inline-block; align-self: flex-start;
  font-size: var(--uj-fs-micro); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--uj-oak-deep); background: var(--uj-oak-tint);
  padding: 4px 9px; border-radius: var(--uj-r-xs);
  margin-bottom: var(--uj-space-2);
}
.uj-pg__name { margin: 0 0 var(--uj-space-2); font-size: var(--uj-fs-h4); font-weight: var(--uj-weight-medium); }
.uj-pg__name a { color: inherit; text-decoration: none; }
.uj-pg__name a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.uj-pg__price { margin: 0 0 var(--uj-space-4); font-size: var(--uj-fs-body); }
.uj-pg__price strong { font-weight: var(--uj-weight-medium); }
.uj-pg__price s { color: var(--uj-muted); margin-left: var(--uj-space-2); }
.uj-pg__from { color: var(--uj-muted); font-size: var(--uj-fs-sm); }

.uj-pg__specs { list-style: none; margin: 0 0 var(--uj-space-5); padding: 0; display: grid; gap: var(--uj-space-2); }
.uj-pg__specs li { display: flex; align-items: flex-start; gap: var(--uj-space-2); font-size: var(--uj-fs-sm); line-height: 1.4; color: rgba(var(--uj-ink-rgb), 0.85); }
.uj-pg__specs .uj-icon { color: var(--uj-oak); margin-top: 0.2em; }

.uj-pg__cta { display: flex; flex-wrap: wrap; gap: var(--uj-space-3); margin-top: auto; }
.uj-pg__cta .button { flex: 1 1 auto; min-height: 4.6rem; font-size: 1.4rem; padding: 0 2rem; }

@media screen and (min-width: 750px) {
  .uj-pg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (min-width: 990px) {
  .uj-pg { grid-template-columns: repeat(var(--uj-pg-cols, 3), minmax(0, 1fr)); }
}

/* ============================================================
   Image mosaic
   ============================================================ */

.uj-mos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--uj-space-4); }
.uj-mos__tile { position: relative; }
.uj-mos__caption {
  position: absolute; left: var(--uj-space-4); bottom: var(--uj-space-4);
  color: #fff; font-size: var(--uj-fs-sm); font-weight: var(--uj-weight-medium);
  text-shadow: 0 1px 12px rgba(15,18,16,0.5);
}
.uj-mos__stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--uj-space-6) var(--uj-space-4);
  margin: var(--uj-space-8) 0 0;
}
.uj-mos__stat { text-align: center; }
.uj-mos__value {
  font-family: var(--uj-font-display); font-weight: var(--uj-weight-display);
  font-size: var(--uj-fs-h2); line-height: 1; letter-spacing: var(--uj-ls-h2);
}
.uj-mos__label {
  margin: var(--uj-space-2) 0 0; font-size: var(--uj-fs-micro);
  font-weight: var(--uj-weight-medium); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--uj-muted);
}

@media screen and (min-width: 750px) {
  .uj-mos { grid-template-columns: repeat(3, 1fr); gap: var(--uj-space-5); }

  /* Fixed row height rather than per-tile aspect ratio. With a square
     feature tile the block was 1285px against the reference's 794 --
     spanning two columns made it 860px wide, so a 1:1 ratio forced an
     860px-tall row. Sizing the rows instead keeps the mosaic's height
     independent of how wide the grid happens to be. */
  .uj-mos { grid-auto-rows: 20rem; }
  .uj-mos--feature .uj-mos__tile:first-child { grid-column: span 2; grid-row: span 2; }
  .uj-mos__tile, .uj-mos__tile .uj-media { height: 100%; }
  .uj-mos__tile .uj-media::before { padding-top: 0; }
  .uj-mos__stats { grid-template-columns: repeat(var(--uj-mos-stats, 3), 1fr); }
}

/* ============================================================
   Lifestyle band
   ============================================================ */

.uj-band { position: relative; overflow: hidden; display: flex; align-items: center; }
.uj-band--h-medium { min-height: min(62vh, 640px); }
/* Same: the reference lifestyle band is a fixed 1100px, not a viewport
   fraction. */
.uj-band--h-large { min-height: 1100px; }
.uj-band--h-adapt { min-height: 0; }
.uj-band__bg { position: absolute; inset: 0; z-index: 0; }
.uj-band__bg .uj-media { height: 100%; border-radius: 0; }
.uj-band__bg .uj-media::before { display: none; }
.uj-band__bg::after { content: ''; position: absolute; inset: 0; background: rgba(15,18,16, var(--uj-band-overlay, 0.45)); }
.uj-band__body { position: relative; z-index: 1; width: 100%; }
.uj-band__inner { max-width: 78rem; }
.uj-band__inner--center { margin-inline: auto; text-align: center; }
.uj-band__inner--center .uj-band__cta { justify-content: center; }
.uj-band__inner--center .uj-band__text { margin-inline: auto; }
.uj-band__heading { margin: 0; }
.uj-band__text { margin-top: var(--uj-space-5); max-width: 56ch; }
.uj-band__cta { display: flex; flex-wrap: wrap; gap: var(--uj-space-4); margin-top: var(--uj-space-7); }
.uj-band__fine { margin-top: var(--uj-space-4); font-size: var(--uj-fs-sm); opacity: 0.75; }
.uj-band--has-image, .uj-band--has-image .uj-band__heading { color: #fff; }
.uj-band--has-image .uj-band__text { color: rgba(255,255,255,0.9); }
.uj-band--has-image .uj-eyebrow { color: rgba(255,255,255,0.82); }

@media screen and (max-width: 749px) {
  .uj-band--h-large { min-height: 70vh; }
  .uj-band__cta .button { width: 100%; }
  .uj-band__cta { width: 100%; }
}

/* ============================================================
   Supply chain comparison

   Cards joined by dot-line-dot connectors. The short route reads as a
   few generous cards; the long route as many cramped ones with the
   redundant steps tinted -- that tint carries the argument.
   ============================================================ */

.uj-cmp { display: grid; gap: var(--uj-space-4); max-width: 92rem; margin-inline: auto; }
.uj-cmp__row { display: grid; gap: var(--uj-space-3); }
.uj-cmp__row-label {
  text-align: center; font-size: var(--uj-fs-micro); font-weight: 600;
  letter-spacing: var(--uj-ls-caps); text-transform: uppercase; color: var(--uj-muted);
}
.uj-cmp__row--ours .uj-cmp__row-label { color: var(--uj-oak-deep); }

.uj-cmp__chain { display: flex; align-items: stretch; justify-content: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.uj-cmp__node {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: var(--uj-space-2); flex: 1 1 0; min-width: 0;
  padding: var(--uj-space-5) var(--uj-space-4);
  background: var(--uj-paper); border-radius: var(--uj-r-md);
  font-size: var(--uj-fs-body); text-align: center;
}
.uj-cmp__node .uj-icon { color: var(--uj-oak-deep); opacity: 0.8; }
.uj-cmp__node + .uj-cmp__node { margin-left: var(--uj-space-7); }
.uj-cmp__node + .uj-cmp__node::before {
  content: ''; position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
  width: var(--uj-space-7); height: 5px;
  background:
    radial-gradient(circle at 2.5px 50%, var(--uj-oak-deep) 2.5px, transparent 2.6px),
    radial-gradient(circle at calc(100% - 2.5px) 50%, var(--uj-oak-deep) 2.5px, transparent 2.6px),
    linear-gradient(var(--uj-oak-deep), var(--uj-oak-deep)) center / calc(100% - 12px) 1px no-repeat;
  background-repeat: no-repeat; opacity: 0.55;
}
.uj-cmp__row--ours .uj-cmp__node--mark {
  font-size: var(--uj-fs-h4); font-weight: var(--uj-weight-medium);
  color: var(--uj-oak-deep); letter-spacing: -0.02em;
}
.uj-cmp__row--ours .uj-cmp__node--mark .uj-icon { display: none; }

.uj-cmp__chain--muted .uj-cmp__node {
  flex-direction: column; gap: var(--uj-space-2);
  padding: var(--uj-space-4) var(--uj-space-2);
  font-size: var(--uj-fs-micro); color: var(--uj-muted); line-height: 1.25;
}
.uj-cmp__chain--muted .uj-cmp__node + .uj-cmp__node { margin-left: var(--uj-space-5); }
.uj-cmp__chain--muted .uj-cmp__node + .uj-cmp__node::before { width: var(--uj-space-5); }
.uj-cmp__chain--muted .uj-cmp__node--mark { background: var(--uj-oak-tint); color: var(--uj-oak-deep); }

.uj-cmp__vs {
  display: flex; align-items: center; gap: var(--uj-space-4);
  margin: var(--uj-space-2) 0; font-size: var(--uj-fs-sm);
  color: var(--uj-muted); white-space: nowrap;
}
.uj-cmp__vs::before, .uj-cmp__vs::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--uj-rule); }
.uj-cmp__foot { margin: var(--uj-space-6) 0 0; text-align: center; font-size: var(--uj-fs-sm); color: var(--uj-muted); }

@media screen and (max-width: 749px) {
  /* A chain you have to drag sideways is a chain nobody reads -- and the
     length of the long route IS the argument. Wrap instead. */
  .uj-cmp__chain { flex-wrap: wrap; gap: var(--uj-space-3); }
  .uj-cmp__node { flex: 1 1 100%; padding: var(--uj-space-4); margin-left: 0; }
  .uj-cmp__node + .uj-cmp__node { margin-left: 0; }
  .uj-cmp__node + .uj-cmp__node::before { display: none; }
  .uj-cmp__chain--muted { display: grid; grid-template-columns: repeat(2, 1fr); }
  .uj-cmp__chain--muted .uj-cmp__node { flex: 0 0 auto; margin-left: 0; }
}

/* ============================================================
   Customer proof
   ============================================================ */

.uj-proof__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--uj-space-4); margin-bottom: var(--uj-space-7);
}
.uj-proof__head .uj-heading { margin-bottom: 0; }

.uj-proof { display: grid; gap: var(--uj-space-5); grid-template-columns: 1fr; }
.uj-proof__item { margin: 0; display: flex; flex-direction: column; gap: var(--uj-space-3); }
.uj-proof__media { position: relative; border-radius: var(--uj-r-md); overflow: hidden; background: rgba(var(--uj-ink-rgb), 0.05); }
.uj-proof__media video { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.uj-proof__mark {
  position: absolute; top: var(--uj-space-3); left: var(--uj-space-3);
  color: #fff; font-size: var(--uj-fs-sm); font-weight: var(--uj-weight-medium);
  text-shadow: 0 1px 10px rgba(15,18,16,0.5); pointer-events: none;
}
.uj-proof__stars { display: inline-flex; gap: 2px; color: var(--uj-oak); }
.uj-proof__stars .uj-icon { fill: currentColor; }
.uj-proof__quote {
  margin: 0; padding: 0; border: 0;
  font-size: var(--uj-fs-body); line-height: 1.55;
  color: rgba(var(--uj-ink-rgb), 0.9);
}
.uj-proof__quote p { margin: 0; }
.uj-proof__by { display: flex; flex-direction: column; margin-top: auto; }
.uj-proof__author { font-size: var(--uj-fs-sm); font-weight: var(--uj-weight-medium); }
.uj-proof__role { font-size: var(--uj-fs-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--uj-muted); }

/* A quote with no media reads better on a tinted panel than floating */
.uj-proof__item:not(.uj-proof__item--video):not(:has(.uj-proof__media)) {
  background: rgba(var(--uj-ink-rgb), 0.035);
  padding: var(--uj-space-6); border-radius: var(--uj-r-md);
}

@media screen and (min-width: 750px) {
  .uj-proof--grid { grid-template-columns: repeat(var(--uj-proof-cols, 3), minmax(0, 1fr)); }
  .uj-proof--scroll {
    /* The base .uj-proof sets grid-template-columns: 1fr. Left in place
       that stays an EXPLICIT column, so the first card lands in it and
       takes only the leftover width (measured 147px against 260px) while
       every other card uses grid-auto-columns. Clear it. */
    grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: minmax(26rem, 1fr);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding-bottom: var(--uj-space-2);
  }
  .uj-proof--scroll::-webkit-scrollbar { display: none; }
  .uj-proof--scroll .uj-proof__item { scroll-snap-align: start; }
}
@media screen and (max-width: 749px) {
  .uj-proof--scroll {
    grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: 78vw;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .uj-proof--scroll::-webkit-scrollbar { display: none; }
}

/* ============================================================
   Editorial row
   ============================================================ */

.uj-ed__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--uj-space-4); margin-bottom: var(--uj-space-7);
}
.uj-ed__head .uj-heading { margin-bottom: 0; }
.uj-ed { display: grid; gap: var(--uj-space-5); list-style: none; margin: 0; padding: 0; grid-template-columns: 1fr; }
.uj-ed__link { display: block; color: inherit; text-decoration: none; }
.uj-ed__media { margin-bottom: var(--uj-space-3); }
.uj-ed__media img { transition: transform 600ms var(--uj-ease); }
.uj-ed__item:hover .uj-ed__media img { transform: scale(1.03); }
.uj-ed__date {
  display: block; margin-bottom: var(--uj-space-1);
  font-size: var(--uj-fs-micro); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--uj-muted);
}
.uj-ed__title { margin: 0; font-size: var(--uj-fs-h5); font-weight: var(--uj-weight-medium); line-height: 1.35; }
.uj-ed__item:hover .uj-ed__title { text-decoration: underline; text-underline-offset: 0.2em; }
.uj-ed__empty {
  font-size: var(--uj-fs-sm); color: var(--uj-muted); text-align: center;
  padding: var(--uj-space-6); border: 1px dashed var(--uj-rule-strong); border-radius: var(--uj-r-md);
}

@media screen and (min-width: 750px) {
  .uj-ed--grid { grid-template-columns: repeat(var(--uj-ed-cols, 4), minmax(0, 1fr)); }
  .uj-ed--scroll {
    /* .uj-ed sets grid-template-columns: 1fr. Left in place that stays an
       EXPLICIT track, so the first card takes the leftover width and
       wraps one character per line while the rest size normally. */
    grid-template-columns: none;
    grid-auto-flow: column; grid-auto-columns: minmax(24rem, 1fr);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--uj-space-2);
  }
  .uj-ed--scroll::-webkit-scrollbar { display: none; }
  .uj-ed--scroll .uj-ed__item { scroll-snap-align: start; }
}
@media screen and (max-width: 749px) {
  .uj-ed--scroll { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74vw; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .uj-ed--scroll::-webkit-scrollbar { display: none; }
}

/* ============================================================
   Email capture
   ============================================================ */

.uj-signup { display: grid; grid-template-columns: 1fr; }
.uj-signup__panel { display: flex; align-items: center; padding: var(--uj-space-10) var(--uj-space-6); }
.uj-signup__inner { max-width: 52rem; margin-inline: auto; width: 100%; }
.uj-signup__heading { margin: 0 0 var(--uj-space-4); }
.uj-signup__text { margin-bottom: var(--uj-space-6); }
.uj-signup__text p { margin: 0; }
.uj-signup__row { display: flex; gap: var(--uj-space-3); flex-wrap: wrap; }
.uj-signup__input {
  flex: 1 1 22rem; min-height: 5.2rem; padding: 0 var(--uj-space-4);
  font-family: var(--uj-font-body); font-size: var(--uj-fs-body);
  color: var(--uj-ink-strong); background: var(--uj-paper);
  border: 1px solid transparent; border-radius: var(--uj-r-md);
}
.uj-signup__input:focus-visible { outline: 2px solid var(--uj-paper); outline-offset: 2px; }
.uj-signup__submit { flex: 0 0 auto; }
.uj-signup__fine { margin: var(--uj-space-4) 0 0; font-size: var(--uj-fs-micro); opacity: 0.75; }
.uj-signup__error, .uj-signup__ok { display: block; margin-top: var(--uj-space-3); font-size: var(--uj-fs-sm); }
.uj-signup__media .uj-media { height: 100%; border-radius: 0; }
/* Stacked on phones, so a 66.6% ratio put a 260px band under the form
   and pushed the section to 795px. Shallower reads as a banner, not a
   second panel. */
.uj-signup__media .uj-media::before { padding-top: 44%; }

@media screen and (min-width: 750px) {
  .uj-signup { grid-template-columns: 1fr 1fr; }
  .uj-signup--media-left .uj-signup__media { order: -1; }
  .uj-signup__panel { padding: var(--uj-space-11) var(--uj-space-9); }
  /* 42rem forced the section to 909px against a 380px reference. Let the
     copy panel set the row height; this is only a floor. */
  .uj-signup__media .uj-media::before { padding-top: 0; height: 100%; min-height: 26rem; }
}

/* ============================================================
   Footer — Dawn's, retoned to the system

   Kept rather than replaced: it already carries policy links, payment
   icons, social and localization, and rebuilding it would mean
   reimplementing all of that for a visual change.
   ============================================================ */

.footer { border-top: 1px solid var(--uj-rule); }
.footer__content-top { padding-bottom: var(--uj-space-8); }
.footer-block__heading {
  font-family: var(--uj-font-body);
  font-size: var(--uj-fs-micro);
  font-weight: 600;
  letter-spacing: var(--uj-ls-caps);
  text-transform: uppercase;
  color: var(--uj-oak-deep);
  margin-bottom: var(--uj-space-4);
}
.footer-block__details-content .list-menu__item--link { font-size: var(--uj-fs-sm); padding: 0.5rem 0; }
.footer__content-bottom { border-top: 1px solid var(--uj-rule); }
.footer__copyright { font-size: var(--uj-fs-micro); color: var(--uj-muted); }
.footer .newsletter-form__field-wrapper .field__input { border-radius: var(--uj-r-md); }


/* The logo is centred absolutely, so the only way it can be hit is if a
   side cluster grows past the midpoint. Shed the least important items
   first, well before that happens. */
@media screen and (max-width: 1150px) {
  .uj-hdr__loc { display: none; }
}


/* Phones: the right cluster (search + account + cart) ran 142px against
   the burger's 38px, so a truly centred logo was overlapped by 27px. It
   read as off-centre when it was not. Drop the account icon -- it moves
   into the drawer -- so the cluster can no longer reach the middle. */
@media screen and (max-width: 749px) {
  .uj-hdr__account { display: none; }
  .uj-hdr__logo { max-width: 40vw; }
  /* 9px of clearance at 390px is not breathing room; tighten the icons. */
  .uj-hdr__nav--right ul { gap: var(--uj-space-2); }
  .uj-hdr__icon-item svg, .uj-hdr__cart svg { width: 17px; height: 17px; }
  
}


/* ---- country picker inside the pill ----
   Dawn opens this panel upward (bottom: 100%) and only flips it down for
   a `.header-localization` ancestor, which this header does not have, so
   it rendered above the top of the page. Its fade-in also sat at frame 0,
   leaving opacity 0. Pin the geometry and drop the animation rather than
   depend on Dawn's wrapper classes -- a picker that works beats one that
   fades. */
.uj-hdr__loc .disclosure { position: relative; }
/* Three classes, not two. Dawn's `.localization-selector +
   .disclosure__list-wrapper` is also two classes, and component CSS is
   injected by the section AFTER this file, so at equal specificity Dawn
   wins on order and the panel stayed at opacity 0. */
.uj-hdr .uj-hdr__loc .disclosure__list-wrapper {
  bottom: auto;
  top: calc(100% + 0.8rem);
  right: 0;
  left: auto;
  transform: none;
  opacity: 1;
  animation: none;
  max-height: 34rem;
  overflow: hidden;
  z-index: 6;
}
/* belt and braces: nothing inside the panel should inherit nav layout */
.uj-hdr__loc .disclosure__list-wrapper ul { display: block; gap: normal; }
.uj-hdr__loc .disclosure__list { max-height: 30rem; overflow-y: auto; }


/* ---- predictive search inside the pill ----
   Dawn's search modal is built to overlay a full-width header bar, not to
   sit in a narrow list item. Constrained to the icon's `li` its form
   collapsed to zero width, so the absolutely-positioned results panel
   measured 122px wide and spilled to 4706px tall.

   Rather than fight it into a small dropdown, let it do what it was built
   for: `.uj-hdr__search` stays STATIC so the modal anchors to
   `.uj-hdr__bar` (the nearest positioned ancestor) and expands across the
   pill, with results dropping beneath the bar at full width. */
.uj-hdr__search { position: static; }
.uj-hdr__search .search-modal {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  background: rgb(var(--color-background));
  border-radius: var(--uj-r-md);
  padding: 0 var(--uj-space-6);
  z-index: 6;
}
.uj-hdr__search .search-modal__content {
  position: static;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0;
}
.uj-hdr__search .search-modal__form { position: static; width: 100%; }
.uj-hdr__search .predictive-search--header {
  position: absolute;
  top: calc(100% + 0.8rem);
  left: 0;
  right: 0;
  width: auto;
  max-height: 60vh;
  overflow-y: auto;
  border-radius: var(--uj-r-md);
  z-index: 7;
}


/* Editorial placeholder cards: the row keeps its shape before any posts
   exist, rather than collapsing and leaving the heading over blank space. */
.uj-ed__item--empty { pointer-events: none; }
.uj-ed__placeholder-line {
  display: block;
  height: 1.2rem;
  margin-top: var(--uj-space-3);
  border-radius: 100px;
  background: rgba(var(--uj-ink-rgb), 0.07);
}
.uj-ed__placeholder-line--short { width: 55%; }


/* ---- press row as a rotating tab list ----
   The active logo must read as the source of the quote on screen, so the
   contrast between selected and unselected has to be obvious: the others
   stay greyed and receded, the active one comes fully forward. */
.uj-logos__quotes { position: relative; }
.uj-logos__quote[hidden] { display: none; }
.uj-logos__cite {
  display: block;
  margin-top: var(--uj-space-3);
  font-size: var(--uj-fs-micro);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--uj-oak-deep, #6b5741);
}

.uj-logos--tabs .uj-logos__tab {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0.38;
  filter: grayscale(1);
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}
.uj-logos--tabs .uj-logos__tab:hover { opacity: 0.7; }
.uj-logos--tabs .uj-logos__tab.is-active {
  opacity: 1;
  filter: none;
  transform: translateY(-2px);
}
.uj-logos--tabs .uj-logos__tab:focus-visible {
  outline: 2px solid var(--uj-oak, #877052);
  outline-offset: 6px;
  border-radius: 4px;
}
/* The row-level greyscale would otherwise fight the active state. */
.uj-logos--grey.uj-logos--tabs .uj-logos__tab.is-active img { filter: none; }

@media (prefers-reduced-motion: reduce) {
  .uj-logos--tabs .uj-logos__tab { transition: none; }
  .uj-logos--tabs .uj-logos__tab.is-active { transform: none; }
}


/* ---- product grid: reference card ----
   Measured from the reference: card panel #fff on the page ground with a
   14px radius, the highlighted card #ECEBEB, badges and buttons at 5px
   (not pills -- the rest of this system is rounder than they are), body
   copy 12/18 centred, and the photograph flush to the bottom edge. */
.uj-pg__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  text-align: center;
}
.uj-pg__card--featured { background: #ecebeb; }

.uj-pg__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--uj-space-3);
  padding: var(--uj-space-6) var(--uj-space-5) var(--uj-space-5);
  /* the image is pinned to the bottom, so the copy takes the slack and
     cards in a row keep their photographs on a common line */
  flex: 1 1 auto;
}

.uj-pg__badge {
  padding: 6px 8px;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground));
  background: #eeeeeb;
  border-radius: 5px;
}
.uj-pg__card--featured .uj-pg__badge {
  color: #fff;
  background: var(--uj-oak-deep, #6b5741);
}

.uj-pg__name {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.uj-pg__name a { text-decoration: none; color: inherit; }
.uj-pg__name .dim { color: rgba(var(--color-foreground), 0.45); }

.uj-pg__price {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  font-size: 1.5rem;
}
.uj-pg__from { color: rgba(var(--color-foreground), 0.6); }
.uj-pg__price strong { font-weight: 500; }
.uj-pg__price s { color: rgba(var(--color-foreground), 0.45); }
.uj-pg__save {
  padding: 4px 8px;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: #1c3a17;
  background: #dcefd8;
  border-radius: 5px;
}
.uj-pg__save--flat { color: rgb(var(--color-foreground)); background: #eeeeeb; }

.uj-pg__text {
  margin: 0;
  max-width: 38ch;
  font-size: 1.2rem;
  line-height: 1.5;
  color: rgba(var(--color-foreground), 0.72);
}

.uj-pg__cta {
  display: flex;
  gap: var(--uj-space-2);
  width: 100%;
  justify-content: center;
  margin-top: var(--uj-space-2);
}
.uj-pg__cta .button {
  flex: 0 1 15rem;
  min-height: 4rem;
  padding: 0 1.4rem;
  font-size: 1.4rem;
  border-radius: 5px;
}

/* spec row: icon above a short caption, evenly divided */
.uj-pg__specs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--uj-space-3);
  width: 100%;
  margin: var(--uj-space-3) 0 0;
  padding: 0;
  list-style: none;
}
.uj-pg__specs li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  line-height: 1.35;
  color: rgba(var(--color-foreground), 0.75);
}
.uj-pg__specs svg { opacity: 0.8; }

.uj-pg__media { display: block; margin-top: auto; }
/* Square off the top so it meets the copy, and inherit the card's radius
   at the bottom so the photo IS the rounded edge. */
.uj-pg__media .uj-media {
  border-radius: 0 0 14px 14px;
  background: transparent;
}
/* With 'fit the whole image' the frame is taller than the photo, so the
   letterboxed strips must match the card rather than showing the default
   tinted media background. */
.uj-pg__media .uj-media > img { background: transparent; }

@media screen and (max-width: 749px) {
  /* four icon columns are unreadable on a phone */
  .uj-pg__specs { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .uj-pg__name { font-size: 2.1rem; }
  .uj-pg__cta { flex-wrap: wrap; }
}


/* ---- comparison: split, diagram over the photograph ----
   Measured from the reference: copy column ~493px with a 36px heading and
   16/24 body, two 240x46 buttons at 8px radius, photograph filling the
   other ~54%, and the diagram centred over it near the top. Their diagram
   is a flat SVG; this is markup sized to read the same way. */
.uj-cmp-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--uj-space-7);
  align-items: center;
}
.uj-cmp__copy { display: flex; flex-direction: column; }
.uj-cmp__text {
  margin-top: var(--uj-space-4);
  max-width: 52ch;
  font-size: 1.6rem;
  line-height: 1.5;
  color: rgba(var(--color-foreground), 0.78);
}
.uj-cmp__text p { margin: 0 0 var(--uj-space-3); }
.uj-cmp__cta { display: flex; flex-wrap: wrap; gap: var(--uj-space-3); margin-top: var(--uj-space-6); }
.uj-cmp__cta .button { min-width: 20rem; min-height: 4.6rem; border-radius: 8px; }

.uj-cmp__media { position: relative; }
.uj-cmp__media .uj-media { border-radius: var(--uj-r-md); }
.uj-cmp__overlay {
  position: absolute;
  top: var(--uj-space-5);
  left: 50%;
  transform: translateX(-50%);
  width: min(90%, 60rem);
}
.uj-cmp__diagram-img { display: block; width: 100%; height: auto; }

/* The chain sits on a photograph, so each row needs its own surface to
   stay legible over whatever is behind it. */
.uj-cmp__overlay .uj-cmp {
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-2);
  padding: var(--uj-space-4);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
}
.uj-cmp__overlay .uj-cmp__row-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(var(--uj-ink-rgb), 0.5);
}
.uj-cmp__overlay .uj-cmp__chain {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.uj-cmp__overlay .uj-cmp__node {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.6rem 0.3rem;
  font-size: 0.95rem;
  line-height: 1.2;
  text-align: center;
  background: #fff;
  border-radius: 6px;
}
.uj-cmp__overlay .uj-cmp__row--ours .uj-cmp__node { font-size: 1.15rem; padding: 0.9rem 0.4rem; }
.uj-cmp__overlay .uj-cmp__node--mark { font-weight: 500; color: var(--uj-oak-deep, #6b5741); }
/* A tinted step is a step you are paying for twice -- it has to read as a
   cost, which taupe does not. */
.uj-cmp__overlay .uj-cmp__chain--muted .uj-cmp__node--mark {
  background: #f7e2e2;
  color: #7a3b3b;
  font-weight: 400;
}
.uj-cmp__overlay .uj-cmp__vs {
  margin: 0;
  font-size: 1rem;
  text-align: center;
  color: rgba(var(--uj-ink-rgb), 0.5);
}
.uj-cmp__foot {
  margin: var(--uj-space-6) 0 0;
  font-size: var(--uj-fs-sm);
  text-align: center;
  color: rgba(var(--color-foreground), 0.6);
}

@media screen and (min-width: 750px) {
  .uj-cmp-split { grid-template-columns: 1fr 1.2fr; gap: var(--uj-space-9); }
  .uj-cmp-split--media-left .uj-cmp__media { order: -1; }
}
@media screen and (max-width: 749px) {
  /* Seven chips cannot survive a phone width in one row. */
  .uj-cmp__overlay {
    position: static;
    transform: none;
    width: 100%;
    margin-top: calc(var(--uj-space-6) * -1);
    padding-inline: var(--uj-space-3);
  }
  /* Wrapping a flex row sized every chip by its own text, so the rows
     came out ragged and misaligned. A fixed grid keeps them even. */
  .uj-cmp__overlay .uj-cmp__chain {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  .uj-cmp__overlay .uj-cmp__row--ours .uj-cmp__chain { grid-template-columns: repeat(3, 1fr); }
  /* The chips carry flex sizing for the desktop row, which a grid cell
     ignores -- so they sat at their content width inside a wider cell and
     the columns looked ragged. Make them fill the cell outright. */
  .uj-cmp__overlay .uj-cmp__node {
    flex: none;
    width: 100%;
    justify-self: stretch;
    margin: 0;
  }
  /* Seven steps leaves one alone on the last row; let the destination
     span the full width rather than sit lopsided. */
  .uj-cmp__overlay .uj-cmp__chain--muted > li:last-child { grid-column: 1 / -1; }
  .uj-cmp__cta .button { min-width: 0; flex: 1 1 auto; }
}


/* A logo pill: the mark replaces the word, so the chip has to size to the
   image rather than to a line of text, and stay optically level with the
   text pills either side of it. */
.uj-cmp__node-logo {
  display: block;
  height: var(--uj-node-logo-h, 18px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.uj-cmp__overlay .uj-cmp__node:has(.uj-cmp__node-logo) { padding-block: 0.7rem; }


/* ---- product grid: swipeable on phones ----
   Three stacked cards is a very long scroll on a phone, and these cards
   are tall. A snapping row lets the range be browsed in place. */
@media screen and (max-width: 749px) {
  .uj-pg {
    /* Clear the explicit column first: left in place it stays an explicit
       track and the first card sizes differently from the rest -- the
       exact fault that made the first review card 147px wide. */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Full-bleed the track so cards run to the screen edge, while the
       first and last still line up with the page gutter. */
    /* 1.5rem is Dawn's .page-width padding at this breakpoint; there is
       no gutter token to reference, so match it literally. */
    margin-inline: -1.5rem;
    padding-inline: 1.5rem;
    scroll-padding-inline: 1.5rem;
  }
  .uj-pg::-webkit-scrollbar { display: none; }
  .uj-pg__card { scroll-snap-align: start; }
}


/* ---- scroll rail ----
   A hairline, not a scrollbar. The visible track is 2px; the touch target
   is the padding around it, so it is comfortable to drag without drawing
   a heavy bar across the page. Centred and narrow so it reads as a
   progress mark rather than as browser chrome. */
.uj-rail {
  --uj-rail-h: 2px;
  position: relative;
  width: min(22rem, 60%);
  margin: var(--uj-space-6) auto 0;
  padding-block: var(--uj-space-3); /* the hit area */
  cursor: pointer;
  touch-action: none;               /* let a drag move the rail, not the page */
}
.uj-rail[hidden] { display: none; }
.uj-rail::before {
  content: '';
  display: block;
  height: var(--uj-rail-h);
  border-radius: 100px;
  background: rgba(var(--uj-ink-rgb), 0.12);
}
.uj-rail__thumb {
  position: absolute;
  left: 0;
  top: 50%;
  height: var(--uj-rail-h);
  min-width: 3rem;
  margin-top: calc(var(--uj-rail-h) / -2);
  border-radius: 100px;
  background: var(--uj-oak, #877052);
  transition: height 0.2s ease, margin-top 0.2s ease, background 0.2s ease;
  will-change: transform;
}
/* Thicken under the finger rather than moving anything, so the gesture
   gets feedback without the row appearing to jump. */
.uj-rail:hover .uj-rail__thumb,
.uj-rail.is-dragging .uj-rail__thumb {
  height: 4px;
  margin-top: -2px;
  background: var(--uj-oak-deep, #6b5741);
}

/* The product grid only scrolls on phones, so the rail has no business
   taking space on the desktop grid even before the script hides it. */
@media screen and (min-width: 750px) {
  .uj-rail--pg { display: none; }
}

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


/* ---- mosaic and stats on phones ----
   Both run two columns, and both carry three items, so each left a single
   orphan hanging in the left column with dead space beside it. Let a
   trailing odd item take the full width: it fills the row instead of
   pointing at the gap, and the rule holds for any odd count. */
@media screen and (max-width: 749px) {
  .uj-mos__tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .uj-mos__tile:last-child:nth-child(odd) .uj-media::before { padding-top: 56%; }
  .uj-mos__stats { gap: var(--uj-space-6) var(--uj-space-3); }
  .uj-mos__stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}


/* ---- PDP feature rows ----
   Repeated image/text rows alternating down the section, the shape the
   reference uses for the long run below its buy box. */
.uj-feat__head { margin-bottom: var(--uj-space-8); }
.uj-feat {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--uj-space-6);
  align-items: center;
}
.uj-feat + .uj-feat { margin-top: var(--uj-space-9); }
.uj-feat__media .uj-media { border-radius: var(--uj-r-md); }
.uj-feat__copy { display: flex; flex-direction: column; align-items: flex-start; }
.uj-feat__heading {
  margin: var(--uj-space-2) 0 0;
  font-size: var(--uj-fs-h3, 2.4rem);
  font-weight: var(--uj-weight-heading);
  line-height: var(--uj-lh-heading);
  letter-spacing: -0.01em;
}
.uj-feat__heading .dim { color: rgba(var(--color-foreground), 0.45); }
.uj-feat__text {
  margin-top: var(--uj-space-4);
  max-width: 54ch;
  font-size: 1.6rem;
  line-height: 1.6;
  color: rgba(var(--color-foreground), 0.78);
}
.uj-feat__text p { margin: 0 0 var(--uj-space-3); }
.uj-feat__specs {
  display: grid;
  gap: var(--uj-space-3);
  margin: var(--uj-space-5) 0 0;
  padding: 0;
  list-style: none;
}
.uj-feat__specs li {
  display: flex;
  align-items: center;
  gap: var(--uj-space-3);
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.82);
}
.uj-feat__specs svg { flex: 0 0 auto; opacity: 0.75; }

@media screen and (min-width: 750px) {
  .uj-feat { grid-template-columns: 1fr 1fr; gap: var(--uj-space-8); }
  /* Only the side moves; the copy always follows in source order, so the
     reading order stays correct when the columns are stacked or read out. */
  .uj-feat--media-right .uj-feat__media { order: 2; }
  .uj-feat__specs { grid-template-columns: 1fr 1fr; }
}

/* ---------- Comparison table -------------------------------------------
   The argument the page makes just before the ask, so it is built to be read
   at a glance rather than studied: the winning column is a continuous tinted
   panel with its own rounded ends, and the marks do the talking.

   border-collapse: separate is what makes that possible -- a collapsed table
   cannot round a cell corner, so the column could not be a panel.
   ---------------------------------------------------------------------- */
.uj-cmpt__scroll {
  margin-top: var(--uj-space-8);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--uj-space-2);
}

.uj-cmpt {
  width: 100%;
  min-width: 62rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--uj-fs-body);
}

.uj-cmpt th,
.uj-cmpt td {
  padding: var(--uj-space-5) var(--uj-space-4);
  text-align: center;
  vertical-align: middle;
}

/* Feature names read as a list down the left, so they are left-aligned and
   carry slightly more weight than the marks beside them. Sticky, because a
   row of marks with its label scrolled away means nothing. */
.uj-cmpt__rowhead {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 24rem;
  text-align: left;
  font-size: var(--uj-fs-sm);
  font-weight: var(--uj-weight-medium);
  color: rgb(var(--uj-ink-rgb));
  background: rgb(var(--color-background));
}

.uj-cmpt tbody tr:not(:last-child) .uj-cmpt__rowhead,
.uj-cmpt tbody tr:not(:last-child) .uj-cmpt__cell:not(.is-ours) {
  border-bottom: 1px solid var(--uj-rule);
}

.uj-cmpt__col {
  padding-bottom: var(--uj-space-6);
  font-size: var(--uj-fs-micro);
  font-weight: var(--uj-weight-medium);
  letter-spacing: var(--uj-ls-caps);
  text-transform: uppercase;
  color: var(--uj-muted);
}

/* The product's own column, lifted into a panel: tinted its whole height,
   rounded at both ends, and capped with an oak rule so it reads as one
   object rather than as a run of highlighted cells. */
.uj-cmpt__col.is-ours,
.uj-cmpt__cell.is-ours {
  background: var(--uj-oak-tint);
}

.uj-cmpt__col.is-ours {
  border-radius: var(--uj-r-lg) var(--uj-r-lg) 0 0;
  border-top: 2px solid var(--uj-oak);
  padding-top: var(--uj-space-5);
  color: var(--uj-oak-deep);
  font-weight: 600;
}

.uj-cmpt tbody tr:last-child .uj-cmpt__cell.is-ours {
  border-radius: 0 0 var(--uj-r-lg) var(--uj-r-lg);
}

/* Marks. A filled disc advances, a hollow ring recedes -- the winning column
   is legible without a word being read. */
.uj-cmpt__mark {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
}

.uj-cmpt__mark--yes {
  background: var(--uj-oak);
  color: #fff;
}

.uj-cmpt__mark--no {
  border: 1px solid var(--uj-rule-strong);
  color: var(--uj-cross);
}

/* "Mostly", "Varies", "Short-term" -- the hedges that make the table read as
   information rather than as marketing, so they are legible rather than
   buried. */
.uj-cmpt__qual {
  display: inline-block;
  padding: 0.4rem var(--uj-space-3);
  border-radius: var(--uj-r-pill);
  background: rgba(var(--uj-ink-rgb), 0.05);
  font-size: var(--uj-fs-micro);
  letter-spacing: 0.02em;
  color: var(--uj-muted);
}

.uj-cmpt__cell.is-ours .uj-cmpt__qual {
  background: rgba(255, 255, 255, 0.6);
  color: var(--uj-oak-deep);
}

.uj-cmpt__cta {
  margin-top: var(--uj-space-8);
  text-align: center;
}

.uj-cmpt__fine {
  margin: var(--uj-space-3) 0 0;
  font-size: var(--uj-fs-sm);
  color: var(--uj-muted);
}

@media screen and (max-width: 749px) {
  .uj-cmpt { min-width: 54rem; font-size: var(--uj-fs-sm); }
  .uj-cmpt__rowhead { min-width: 18rem; }
  .uj-cmpt th, .uj-cmpt td { padding: var(--uj-space-4) var(--uj-space-3); }
  .uj-cmpt__mark { width: 2.2rem; height: 2.2rem; }
}
}

/* An anchored section has to clear the floating header, or the link lands
   with the heading hidden behind it. */
.uj-trust-wrap[id] {
  scroll-margin-top: 9rem;
}

/* ============================================================
   Card grid + stat bar — the landing page's density
   ============================================================ */

.uj-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--uj-space-5);
  margin: var(--uj-space-8) 0 0;
  padding: 0;
  list-style: none;
}

.uj-card {
  display: flex;
  flex-direction: column;
  gap: var(--uj-space-3);
  padding: var(--uj-space-6);
  border-radius: var(--uj-r-lg);
}

/* Style variants. Every value comes from the token file, which is what
   keeps a landing page reading as the same brand as the product page it
   sends people to. */
/* Plain: no edge at all. Removing the border means the grid has to do the
   work it was doing, so the gutters widen and a hairline under each heading
   separates it from its body. This is the editorial reading -- structure from
   alignment and whitespace rather than from drawn boxes. */
.uj-cards--plain .uj-card { padding: 0; gap: var(--uj-space-2); }
.uj-cards--plain { gap: var(--uj-space-8) var(--uj-space-7); }

.uj-cards--plain .uj-card__heading {
  padding-bottom: var(--uj-space-3);
  border-bottom: 1px solid var(--uj-rule);
}

/* The numeral carries more weight without a card around it, so it steps up
   and sits closer to the heading it belongs to. */
.uj-cards--plain .uj-card__num {
  font-size: var(--uj-fs-h2);
  color: var(--uj-oak);
}
.uj-cards--tinted .uj-card { background: var(--uj-linen); }
.uj-cards--bordered .uj-card {
  background: var(--uj-paper);
  border: 1px solid var(--uj-rule);
}
.uj-cards--elevated .uj-card {
  background: var(--uj-paper);
  box-shadow: var(--uj-shadow-2);
}

.uj-cards--compact .uj-card {
  padding: var(--uj-space-5);
  gap: var(--uj-space-2);
}

.uj-card__media {
  margin: calc(var(--uj-space-6) * -1) calc(var(--uj-space-6) * -1) var(--uj-space-2);
  border-radius: var(--uj-r-lg) var(--uj-r-lg) 0 0;
  overflow: hidden;
}
/* Plain cards have no box, so the image is the only shape on the card and
   carries the rounding on all four corners rather than just the top two. */
.uj-cards--plain .uj-card__media {
  margin: 0 0 var(--uj-space-4);
  border-radius: var(--uj-r-lg);
}
.uj-cards--compact .uj-card__media { margin: calc(var(--uj-space-5) * -1) calc(var(--uj-space-5) * -1) var(--uj-space-2); }

/* The numeral is the ornament that carried the original's "why" cards, so
   it is sized as a design element rather than as a label. */
.uj-card__num {
  font-family: var(--uj-font-display);
  font-size: var(--uj-fs-h3);
  font-weight: var(--uj-weight-display);
  line-height: 1;
  color: var(--uj-oak);
  letter-spacing: var(--uj-ls-h3);
}

.uj-card__icon {
  display: flex;
  color: var(--uj-oak);
}

.uj-card__heading {
  margin: 0;
  font-size: var(--uj-fs-h5);
  font-weight: var(--uj-weight-medium);
  line-height: var(--uj-lh-heading);
  letter-spacing: 0;
}
.uj-cards--compact .uj-card__heading { font-size: var(--uj-fs-body); }

.uj-card__text {
  font-size: var(--uj-fs-sm);
  line-height: var(--uj-lh-body);
  color: var(--uj-muted);
}
.uj-card__text > :first-child { margin-top: 0; }
.uj-card__text > :last-child { margin-bottom: 0; }

/* A card carrying nothing but a picture: no heading to sit under, so the
   margin below the image would otherwise leave it floating above nothing. */
.uj-card:not(:has(.uj-card__heading)):not(:has(.uj-card__text)) .uj-card__media {
  margin-bottom: 0;
}

.uj-cards__cta { margin-top: var(--uj-space-7); text-align: center; }
.uj-cards__fine {
  margin: var(--uj-space-3) 0 0;
  font-size: var(--uj-fs-sm);
  color: var(--uj-muted);
}

@media screen and (min-width: 750px) {
  .uj-cards { grid-template-columns: repeat(min(var(--uj-cards-cols, 3), 2), minmax(0, 1fr)); }
}
@media screen and (min-width: 990px) {
  .uj-cards { grid-template-columns: repeat(var(--uj-cards-cols, 3), minmax(0, 1fr)); }
}
@media screen and (max-width: 749px) {
  /* One column, except a compact inventory, where two short cards side by
     side read as a list rather than as twelve full-width panels. */
  .uj-cards--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--uj-space-3); }
  .uj-card { padding: var(--uj-space-5); }

  /* At one column with no boxes, consecutive items run together into one
     block of text. A rule above each is what keeps them separate -- the job
     the card edge did on desktop. */
  .uj-cards--plain { gap: 0; }
  .uj-cards--plain .uj-card {
    padding: var(--uj-space-6) 0;
    border-top: 1px solid var(--uj-rule);
  }
  .uj-cards--plain .uj-card:first-child { border-top: 0; padding-top: 0; }
  .uj-cards--plain.uj-cards--compact { gap: 0 var(--uj-space-5); }
}

/* ---- Stat bar ---------------------------------------------------------- */

.uj-statbar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--uj-space-6) var(--uj-space-4);
  margin: 0;
}

.uj-statbar__item {
  /* Reversed so the figure sits above its label while the markup keeps
     dt before dd. */
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: var(--uj-space-1);
  text-align: center;
}

.uj-statbar__value {
  margin: 0;
  font-family: var(--uj-font-display);
  font-size: var(--uj-fs-h2);
  font-weight: var(--uj-weight-display);
  line-height: 1;
  letter-spacing: var(--uj-ls-h2);
  color: var(--uj-ink-strong);
}

.uj-statbar__label {
  font-size: var(--uj-fs-micro);
  letter-spacing: var(--uj-ls-caps);
  text-transform: uppercase;
  color: var(--uj-muted);
}

@media screen and (min-width: 750px) {
  .uj-statbar { grid-template-columns: repeat(var(--uj-statbar-cols, 4), 1fr); }
  /* Rules between, not around -- the divider belongs to the gap. */
  .uj-statbar__item + .uj-statbar__item { border-left: 1px solid var(--uj-rule); }
}

.uj-cards-wrap[id] { scroll-margin-top: 9rem; }

/* Quotes as cards, for a landing page where a flat quote among card grids
   reads as body copy rather than as testimony. Off by default, so the
   product page keeps its plainer treatment. */
.uj-proof--cards .uj-proof__item {
  padding: var(--uj-space-6);
  background: var(--uj-paper);
  border: 1px solid var(--uj-rule);
  border-radius: var(--uj-r-lg);
}

/* Moved here from uj-pdp.css. That stylesheet is injected by the product
   page's main section, so on a page template it is never loaded and the
   FAQ rendered as bare <details> -- no padding, no rules, a list marker
   for a summary. uj-sections.css loads everywhere the section can. */
/* ---------- Product FAQ ------------------------------------------------
   A closed <details> gives its content a layout box but never paints it,
   so the answer must live in a wrapper that is not itself the clamp -- the
   same trap that hid the product description. Here the answer simply
   collapses with the element and nothing overrides its display.
   ---------------------------------------------------------------------- */
.uj-faq {
  margin-top: 2.4rem;
  border-top: 1px solid rgba(var(--color-foreground), 0.1);
}

.uj-faq--narrow {
  max-width: 76rem;
  margin-inline: auto;
}

.uj-faq__item {
  border-bottom: 1px solid rgba(var(--color-foreground), 0.1);
}

.uj-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.8rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.4;
}

.uj-faq__q::-webkit-details-marker {
  display: none;
}

.uj-faq__q .icon-caret {
  flex: 0 0 auto;
  width: 1.2rem;
  transition: transform 0.15s ease;
}

.uj-faq__item[open] .uj-faq__q .icon-caret {
  transform: rotate(180deg);
}

.uj-faq__a {
  padding: 0 0 2rem;
  max-width: 68ch;
  color: rgba(var(--color-foreground), 0.78);
}

.uj-faq__a > :first-child {
  margin-top: 0;
}

.uj-faq__a > :last-child {
  margin-bottom: 0;
}

/* Re-sent with the template above: the mobile header rules went up in the
   batch that failed on an invalid section schema, and an unchanged file is
   never retried. */