/* ==========================================================================
   Products hub: solutions.html. Prefix sh-
   Built from the Claude Design canvas "Bigmate Product Suite", round 2.

   Depends on home-2026.css for the token block, the reset, .hp-shell, .hp-cta,
   .hp-visually-hidden and the footer, and on site-nav-2026.css for the bar.
   Nothing here redefines any of those.

   Both Mining Solutions and Industrial Solutions in the nav land here, with a
   hash that picks the filter: #mining, #industrial, #quality (#norvia too).
   The filter is a data-env attribute on the grid and nothing else, so every
   state below is pure CSS and the script only moves that one attribute.
   ========================================================================== */

:root {
  /* the sticky filter bar, so an anchor jump clears both it and the nav */
  --sh-bar-h: 77px;
  --sh-card-img: 210px;
  --sh-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =============================================================== hero === */

/* The nav is transparent while it is over the hero, so the hero runs up
   underneath it or the bar goes white on white. Same recipe as .pd-hero. */
.sh-hero {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: var(--hp-deep);
  margin-top: calc(-1 * var(--nv-offset, 80px));
}

.sh-hero__sentinel { position: absolute; left: 0; top: 0; width: 100%; height: 2px; pointer-events: none; }

.sh-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.sh-hero__ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(2.1) brightness(0.9);
  opacity: 0.32;
}

.sh-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(2, 16, 47, 0.96) 0%, rgba(2, 16, 47, 0.84) 44%, rgba(2, 16, 47, 0.5) 100%),
    linear-gradient(180deg, rgba(2, 16, 47, 0.5) 0%, rgba(2, 16, 47, 0) 30%, rgba(2, 16, 47, 0.86) 100%),
    radial-gradient(70% 60% at 18% 8%, rgba(7, 110, 232, 0.24) 0%, transparent 64%);
}

.sh-hero__grid {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image:
    linear-gradient(rgba(143, 230, 245, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 230, 245, 0.07) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 52%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 52%);
}

.sh-hero__in {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--nv-offset, 80px) + 60px);
  padding-bottom: 56px;
}

.sh-hero__eyebrow {
  color: var(--hp-ice);
  font-size: var(--hp-label);
  font-weight: 700;
  letter-spacing: var(--hp-label-track);
  text-transform: uppercase;
}

.sh-hero__title {
  margin-top: 18px;
  color: #fff;
  font-size: 76px;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -2.9px;
}

/* The second line keeps the homepage's .hp-hero__accent (a block of its own)
   but carries the brand gradient, as the PAS hero does: Greg prefers it to the
   homepage's flat ice. The site ramp opens on navy and vanishes on #02102f, so
   this is the same device shifted up the ramp until every stop reads. Width
   fits the text, or the stops would stretch across the whole shell and the
   violet end would never reach the words. */
.sh-on-dark {
  width: fit-content;
  max-width: 100%;
  background: linear-gradient(95deg, var(--hp-ice) 0%, var(--hp-cyan) 34%, var(--hp-blue-bright) 68%, var(--hp-violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 2px;
}

.sh-hero__lead {
  margin-top: 22px;
  max-width: 54ch;
  color: rgba(226, 236, 247, 0.8);
  font-size: 17px;
  line-height: 1.62;
}

.sh-hero__choose {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  margin-top: 36px;
}

.sh-hero__prompt { color: rgba(226, 236, 247, 0.7); font-size: 14px; }

.sh-hero__all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  color: var(--hp-ice);
  font-size: 15px;
  font-weight: 600;
}

.sh-hero__all:hover { color: #fff; }
.sh-hero__all[hidden] { display: none; }

/* ----------------------------------------------------- the three tiles */

.sh-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.sh-tile {
  position: relative;
  display: block;
  height: 200px;
  overflow: hidden;
  border: 1px solid rgba(143, 230, 245, 0.18);
  border-radius: var(--hp-radius);
  background: var(--hp-navy);
  color: #fff;
  transition: box-shadow 0.3s ease;
}

.sh-tile:hover { color: #fff; }
.sh-tile:focus-visible { outline: 2px solid var(--hp-cyan); outline-offset: 3px; }

.sh-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transition: transform 0.6s var(--sh-ease), opacity 0.3s ease;
}

.sh-tile:hover .sh-tile__img { transform: scale(1.04); }

.sh-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 16, 47, 0.08) 0%, rgba(2, 16, 47, 0.24) 42%, rgba(2, 16, 47, 0.92) 100%);
}

.sh-tile__meta {
  position: absolute;
  z-index: 1;
  left: 22px;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.sh-tile__text { display: flex; flex-direction: column; gap: 4px; }
/* the homepage's lead context tile (.hp-ctx--lead .hp-ctx__name) */
.sh-tile__name { font-size: 25px; font-weight: 700; letter-spacing: -0.7px; line-height: 1.25; }
.sh-tile__sub { color: rgba(226, 236, 247, 0.8); font-size: 14px; }

.sh-tile__chip {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(143, 230, 245, 0.4);
  border-radius: var(--hp-radius-pill);
  background: rgba(2, 16, 47, 0.4);
  color: #fff;
}

.sh-tile__check { display: none; }

/* selected: the ring and the filled chip say it, the others step back */
.sh-tile[aria-current="true"] { box-shadow: 0 0 0 2px var(--hp-ice), 0 18px 44px rgba(0, 0, 0, 0.35); }
.sh-tile[aria-current="true"] .sh-tile__chip { background: var(--hp-ice); color: var(--hp-deep); }
.sh-tile[aria-current="true"] .sh-tile__check { display: block; }
.sh-tile[aria-current="true"] .sh-tile__arrow { display: none; }
.sh-tiles:not([data-env="all"]) .sh-tile:not([aria-current="true"]) .sh-tile__img { opacity: 0.42; }

/* The nav item this view belongs to. Industrial covers Norvia, as the nav's
   own Industrial panel does. Desktop only: the mobile sheet has no underline. */
@media (min-width: 1100px) {
  .nv__link[aria-current="true"] { color: var(--nv-ink); box-shadow: inset 0 -2px 0 var(--nv-cyan); }
}

/* ======================================================= the suite ====== */

.sh-suite { padding: var(--hp-section-y) 0; }

/* The section heading and the filter share one row at rest. The band holds
   the heading (.hp-section__title, the homepage recipe); the bar after it is
   pulled up over the band's last --sh-bar-h, so the filter lands to the right
   of the heading's second line. The bar keeps one height in both states: if it
   shrank on sticking, the grid would jump the moment it stuck. */
.sh-band { position: relative; min-height: var(--sh-bar-h); padding-bottom: 12px; }

/* balance, or at this width the title breaks as "for your / site." */
.sh-band__title { max-width: 16ch; text-wrap: balance; }

/* Where the bar starts to stick: the bar's own top edge, which the negative
   margin puts --sh-bar-h above the band's bottom. The script watches it. */
.sh-band__sentinel { position: absolute; left: 0; bottom: var(--sh-bar-h); width: 1px; height: 1px; pointer-events: none; }

/* Sticks under the nav for as long as the grid is on screen, and no further:
   it is a direct child of this section, so it lets go before the credentials.
   Never put overflow:hidden on an ancestor, it silently kills sticky. */
.sh-bar {
  position: sticky;
  top: var(--nv-offset, 80px);
  z-index: 20;
  margin-top: calc(-1 * var(--sh-bar-h));
  border-bottom: 1px solid var(--hp-line);
  background: transparent;
  /* at rest it lies over the heading: only the filter takes the pointer */
  pointer-events: none;
}

.sh-bar .sh-seg { pointer-events: auto; }
/* Fully opaque, and no fade on the ground: when the bar pins, the bottom of the
   heading is still beneath it, and any translucency (or a fading frame) lets the
   gradient words show through as a ghost. */
.sh-bar[data-stuck="true"] { background: #fff; pointer-events: auto; }

html:not(.has-js) .sh-bar { display: none; }

.sh-bar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}

.sh-bar__readout {
  color: var(--hp-muted);
  font-size: 15px;
  /* hidden at rest, where the heading does its job; shown once stuck */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.sh-bar[data-stuck="true"] .sh-bar__readout { visibility: visible; opacity: 1; }
.sh-bar__readout strong { color: var(--hp-ink); font-size: 17px; font-weight: 600; }
.sh-bar__count { font-variant-numeric: tabular-nums; }

.sh-seg {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--hp-chip-line);
  border-radius: var(--hp-radius-pill);
  background: var(--hp-chip-bg);
}

.sh-seg__btn {
  height: 44px;
  padding: 0 20px;
  border-radius: var(--hp-radius-pill);
  color: var(--hp-muted);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.sh-seg__btn:hover { color: var(--hp-navy); }
.sh-seg__btn:focus-visible { outline: 2px solid var(--hp-cyan); outline-offset: 2px; }

.sh-seg__btn[aria-pressed="true"] {
  background: #fff;
  color: var(--hp-navy);
  box-shadow: 0 2px 8px rgba(4, 19, 73, 0.12);
}

/* ------------------------------------------------------------ the grid */

/* Hairlines are the gap showing the line colour through, so every rule is one
   pixel and none doubles. The cost is that an empty trailing cell would show
   as a grey block, which is why each group ends in a fill cell sized to finish
   its row: Industrial is 2 cards and one cell, Quality is 4 cards and a cell
   spanning 2. Check any new card against that arithmetic. */
.sh-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 32px;
  overflow: hidden;
  border: 1px solid var(--hp-line-mid);
  border-radius: var(--hp-radius);
  background: var(--hp-line-mid);
  scroll-margin-top: calc(var(--nv-offset, 80px) + var(--sh-bar-h) + 16px);
}

.sh-grid:not([data-env="all"]) .sh-head { display: none; }

.sh-grid[data-env="mining"] > :not([data-env="mining"]),
.sh-grid[data-env="industrial"] > :not([data-env="industrial"]),
.sh-grid[data-env="quality"] > :not([data-env="quality"]) { display: none; }

.sh-head {
  grid-column: 1 / -1;
  scroll-margin-top: calc(var(--nv-offset, 80px) + 16px);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 30px;
  background: var(--hp-surface);
}

.sh-head__name { color: var(--hp-ink); font-size: 17px; font-weight: 600; letter-spacing: -0.2px; }
.sh-head__count { margin-left: 12px; color: var(--hp-muted); font-size: 14px; font-weight: 400; letter-spacing: 0; }
.sh-head__sub { color: var(--hp-muted); font-size: 14px; }

/* ------------------------------------------------------------ the card */

.sh-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  color: inherit;
  transition: background-color 0.25s ease;
}

.sh-card:hover { background: var(--hp-surface); color: inherit; }
.sh-card:focus-visible { outline: 2px solid var(--hp-cyan); outline-offset: -2px; }

.sh-card__img {
  width: 100%;
  height: var(--sh-card-img);
  object-fit: cover;
  border-bottom: 1px solid var(--hp-line);
  background: var(--hp-line-mid);
}

.sh-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 28px 30px 26px;
}

/* the homepage micro-label recipe, as .hp-panel__label */
.sh-card__ctx {
  color: var(--hp-blue-deep);
  font-size: var(--hp-label);
  font-weight: 700;
  letter-spacing: var(--hp-label-track);
  text-transform: uppercase;
}

.sh-card__name {
  margin-top: 10px;
  color: var(--hp-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.4px;
  text-wrap: balance;
}

.sh-card__desc { margin-top: 10px; color: var(--hp-body); font-size: 15px; line-height: 1.6; }

.sh-card__specs {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 20px 0;
  padding-top: 16px;
  border-top: 1px solid var(--hp-line);
}

.sh-card__specs li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--hp-ink);
  font-size: 14.5px;
  line-height: 1.5;
}

/* a plus drawn from two bars, so there is no icon to load or mismatch */
.sh-card__specs li::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 5px;
  background:
    linear-gradient(var(--hp-blue), var(--hp-blue)) center / 12px 2px no-repeat,
    linear-gradient(var(--hp-blue), var(--hp-blue)) center / 2px 12px no-repeat;
}

.sh-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--hp-line);
}

.sh-card__proof { color: var(--hp-navy); font-size: 14.5px; font-weight: 600; line-height: 1.45; }

/* the info mark fills on hover so the whole card reads as the way in */
.sh-card__info {
  flex: 0 0 auto;
  color: var(--hp-blue);
}

.sh-card__info circle { transition: fill 0.35s var(--sh-ease); }
.sh-card__info path { transition: stroke 0.35s var(--sh-ease); }

.sh-card:hover .sh-card__info circle,
.sh-card:focus-visible .sh-card__info circle { fill: var(--hp-blue); }
.sh-card:hover .sh-card__info path,
.sh-card:focus-visible .sh-card__info path { stroke: #fff; }

/* ------------------------------------------------------- the fill cells */

.sh-fill { display: flex; }

.sh-fill__title { color: var(--hp-ink); font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.4px; }
.sh-fill__title em { font-style: normal; font-weight: inherit; }
.sh-fill__body { margin-top: 12px; color: var(--hp-body); font-size: 15px; line-height: 1.6; }

/* Industrial: points on to Norvia, which the nav lists under Industrial */
.sh-fill--cross {
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: 30px;
  background: linear-gradient(160deg, var(--hp-navy) 0%, var(--hp-deep) 100%);
}

.sh-fill--cross .sh-fill__title { color: #fff; }
.sh-fill--cross .sh-fill__body { color: rgba(226, 236, 247, 0.78); }

.sh-fill__ghost {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(143, 230, 245, 0.4);
  border-radius: var(--hp-radius-pill);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.sh-fill__ghost:hover { background: rgba(143, 230, 245, 0.14); color: #fff; }

/* Mining: its six cards already fill two rows, so its call to action is a
   full-width band, photograph behind a navy scrim, pointing at the proof. */
.sh-fill--proof {
  position: relative;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 240px;
  padding: 40px 44px;
  overflow: hidden;
  background: var(--hp-navy);
}

.sh-fill__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 40%;
}

/* ::after, not ::before: it has to paint after the photograph */
.sh-fill--proof::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(2, 16, 47, 0.96) 0%, rgba(2, 16, 47, 0.86) 45%, rgba(2, 16, 47, 0.4) 100%);
}

.sh-fill--proof .sh-fill__copy,
.sh-fill--proof .sh-fill__ghost { position: relative; z-index: 1; }
.sh-fill--proof .sh-fill__ghost { align-self: center; flex: 0 0 auto; }
.sh-fill--proof .sh-fill__copy { max-width: 640px; }
.sh-fill--proof .sh-fill__title { color: #fff; font-size: 27px; line-height: 1.2; letter-spacing: -0.8px; }
.sh-fill--proof .sh-fill__body { color: rgba(226, 236, 247, 0.8); font-size: 16px; }

/* Quality: closes the grid on the page's one action */
.sh-fill--demo {
  grid-column: span 2;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 34px;
  background: var(--hp-chip-bg);
}

.sh-fill--demo .sh-fill__copy { max-width: 44ch; }
.sh-fill--demo .sh-fill__title { font-size: 27px; line-height: 1.2; letter-spacing: -0.8px; }
.sh-fill--demo .sh-fill__body { font-size: 16px; }

/* the homepage's light-ground action: a blue text link (.hp-textlink) */
.sh-fill--demo .hp-textlink { flex: 0 0 auto; }

.sh-fill__ghost:focus-visible,
.sh-fill--demo .hp-textlink:focus-visible,
.sh-hero__all:focus-visible { outline: 2px solid var(--hp-cyan); outline-offset: 3px; }

/* ===================================================== credentials ===== */

.sh-creds { padding: 56px 0; border-top: 1px solid var(--hp-line); }

.sh-creds__g {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 0 56px;
  align-items: center;
}

/* the micro-label recipe at its light-ground weight, as .hp-proof__label */
.sh-creds__label {
  color: var(--hp-muted);
  font-size: var(--hp-label);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: var(--hp-label-track);
  text-transform: uppercase;
}

.sh-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 34px; }

/* multiply on white drops the JPEG backgrounds and keeps every dark mark */
.sh-logos img {
  flex: 1 1 0;
  min-width: 64px;
  height: 32px;
  object-fit: contain;
  filter: grayscale(1) brightness(0.5) contrast(1.15);
  mix-blend-mode: multiply;
  opacity: 0.85;
}

.sh-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid #d7e0eb;
}

.sh-facts div { padding-right: 30px; }
.sh-facts div + div { padding-left: 30px; border-left: 1px solid var(--hp-line); }
.sh-facts b {
  display: block;
  color: var(--hp-blue-deep);
  font-size: var(--hp-label);
  font-weight: 700;
  letter-spacing: var(--hp-label-track);
  text-transform: uppercase;
}
.sh-facts span { display: block; margin-top: 8px; color: var(--hp-ink); font-size: 14.5px; font-weight: 500; line-height: 1.5; }

/* ====================================================== responsive ===== */

@media (max-width: 1280px) {
  .sh-hero__title { font-size: 72px; letter-spacing: -2.8px; }
  .sh-card__body { padding: 26px 26px 24px; }
}

@media (max-width: 1099px) {
  .sh-hero__title { font-size: 50px; letter-spacing: -1.8px; }
  .sh-tile { height: 168px; }
  .sh-tile__name { font-size: 23px; }
  .sh-tile__range { display: none; }

  /* the filter no longer fits beside the heading: stack them, bar in normal flow */
  .sh-band { min-height: 0; padding-bottom: 20px; }
  .sh-band__sentinel { bottom: 0; }
  .sh-bar { margin-top: 0; }

  .sh-seg { overflow-x: auto; scrollbar-width: none; }
  .sh-seg::-webkit-scrollbar { display: none; }

  /* two columns: Industrial's cross-link and Quality's close both take the
     whole row, which keeps every group free of a gap */
  .sh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-fill--cross { grid-column: 1 / -1; }
  .sh-head__sub { display: none; }

  .sh-creds__g { grid-template-columns: minmax(0, 1fr); gap: 22px 0; }
}

@media (max-width: 700px) {
  :root { --sh-bar-h: 69px; --sh-card-img: 190px; }

  .sh-hero__in { padding-top: calc(var(--nv-offset, 64px) + 28px); padding-bottom: 32px; }
  /* The homepage runs 38px here, but its first line is shorter. 34px is the
     largest size at which "One engineering core." holds one line in a 390px
     screen's shell; at 38px it broke after "engineering". */
  .sh-hero__title { margin-top: 14px; font-size: 34px; line-height: 1.08; letter-spacing: -1.1px; }
  .sh-hero__lead { margin-top: 16px; font-size: 16px; line-height: 1.6; }
  .sh-hero__choose { flex-wrap: wrap; margin-top: 24px; }
  .sh-hero__prompt { font-size: 13.5px; }

  /* the tiles become rows: a thumbnail, the name, the chip */
  .sh-tiles { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sh-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    height: auto;
    min-height: 80px;
    padding: 10px 14px 10px 10px;
    background: rgba(255, 255, 255, 0.04);
  }
  .sh-tile::after { display: none; }
  .sh-tile__img { position: static; flex: 0 0 auto; width: 60px; height: 60px; border-radius: var(--hp-radius-sm); }
  .sh-tile:hover .sh-tile__img { transform: none; }
  .sh-tile__meta { position: static; flex: 1 1 auto; align-items: center; }
  .sh-tile__name { font-size: 17px; }
  .sh-tile__sub { font-size: 13.5px; }
  .sh-tile__chip { width: 30px; height: 30px; }

  /* the bar is chips only: on a phone the pressed chip is the readout */
  .sh-bar__in { min-height: 0; padding-block: 12px; }
  .sh-bar__readout { display: none; }
  .sh-seg { gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; }
  .sh-seg__btn { flex: 0 0 auto; padding: 0 18px; border: 1px solid var(--hp-chip-line); background: var(--hp-chip-bg); color: var(--hp-ink); }
  .sh-seg__btn[aria-pressed="true"] { border-color: var(--hp-navy); background: var(--hp-navy); color: #fff; box-shadow: none; }

  .sh-grid { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
  .sh-fill--demo { grid-column: auto; flex-direction: column; align-items: flex-start; gap: 20px; padding: 26px 20px; }
  .sh-fill--demo .sh-fill__title { font-size: 24px; letter-spacing: -0.5px; }
  .sh-fill--cross { gap: 20px; padding: 24px 20px; }
  .sh-fill--proof { flex-direction: column; align-items: flex-start; gap: 20px; min-height: 0; padding: 26px 20px; }
  .sh-fill--proof::after { background: linear-gradient(180deg, rgba(2, 16, 47, 0.8) 0%, rgba(2, 16, 47, 0.94) 100%); }
  .sh-fill--proof .sh-fill__ghost { align-self: flex-start; }
  .sh-fill--proof .sh-fill__title { font-size: 24px; letter-spacing: -0.5px; }
  .sh-fill__title { font-size: 20px; letter-spacing: -0.4px; }
  .sh-head { padding: 16px 20px; }
  .sh-card__body { padding: 22px 20px; }
  .sh-card__name { font-size: 20px; letter-spacing: -0.4px; }

  .sh-facts { grid-template-columns: minmax(0, 1fr); }
  .sh-facts div, .sh-facts div + div { padding: 18px 0; border-left: 0; }
  .sh-facts div + div { border-top: 1px solid var(--hp-line); }
  .sh-logos img { flex: 0 0 auto; height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-tile, .sh-tile__img, .sh-seg__btn, .sh-card, .sh-card__info circle, .sh-card__info path, .sh-fill__ghost, .sh-bar, .sh-bar__readout { transition: none; }
  .sh-tile:hover .sh-tile__img { transform: none; }
}