/*
 * Client CSS escape hatch.
 * This file is loaded after generated LowestCode CSS for client/page-specific designs.
 * It is free CSS and is not compatible with the governed LowestCode CSS generator format.
 * Keep it scoped; move reusable styling back into the governed CSS/database model.
 */

/* WHY: standalone homepage test needs local utility styles before DB/CSS activation. */
:root {
  --home-primary: #f8fbff;
  --home-primary-muted: rgb(248 251 255 / 0.82);
  --home-accent: #6ee7c8;
  --home-accent-strong: #2dd4bf;
  --home-success: #22c55e;
  --home-background: #ffffff;
}

.homepage,
.homepage * {
  box-sizing: border-box;
}

.homepage-body {
  margin: 0;
  background: #f7fafc;
  color: #172033;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.homepage img {
  display: block;
  max-width: 100%;
}

.homepage {
  width: 100%;
  max-width: 120rem;
  margin: 0 auto;
  background: var(--home-background);
  color: #172033;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* WHY: client pages must not inherit generated system text-block backgrounds. */
.client :where(h1, h2, h3, p) {
  background: transparent;
}

.org-1-shell {
  width: min(100%, 120rem);
  margin: 0 auto;
}

/* WHY: the generated text-block padding (0.5em above and below a heading, 112 px on the title alone) would stretch every section; the homepage spaces its text with its own margins. */
.homepage :where(h1, h2, h3, p) {
  padding-block: 0;
}

/* Hero */

.org-1-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 82% 18%, rgb(45 212 191 / 0.32), transparent 28rem),
    radial-gradient(circle at 15% 82%, rgb(34 197 94 / 0.28), transparent 31rem),
    linear-gradient(135deg, #102a54 0%, #0f4f6a 48%, #11223c 100%);
  color: var(--home-primary);
  /* WHY: the bottom padding leaves room for the absolutely positioned scroll control below the last line on a phone. */
  padding: clamp(4rem, 8vw, 7rem) 1rem clamp(5.5rem, 8vw, 7rem);
}

.org-1-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.5) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
  z-index: -2;
}

.org-1-glow {
  position: absolute;
  width: clamp(14rem, 26vw, 24rem);
  aspect-ratio: 1;
  border-radius: 9999px;
  filter: blur(4rem);
  opacity: 0.78;
  z-index: -1;
  animation: homeFloat 7s ease-in-out infinite;
}

.org-1-glow.accent {
  top: 8%;
  right: 8%;
  background: rgb(110 231 200 / 0.24);
}

.org-1-glow.success {
  bottom: 8%;
  left: 8%;
  width: clamp(16rem, 32vw, 30rem);
  background: rgb(34 197 94 / 0.22);
  animation-delay: -2s;
}

.org-1-container {
  position: relative;
  z-index: 1;
  width: min(100%, 72rem);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
  text-align: center;
}

.org-1-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.5rem 1rem;
  margin-bottom: 2rem;
  color: var(--home-primary);
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 9999px;
  backdrop-filter: blur(12px);
  font-size: 0.875rem;
  font-weight: 600;
}

.org-1-status-dot {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 9999px;
  background: var(--home-success);
  box-shadow: 0 0 0 0 rgb(34 197 94 / 0.55);
  animation: homePulse 1.8s ease-out infinite;
}

/* WHY: the lockup is LowestCode by RSaccess (operator decision 2026-09-28): the RSaccess logo is the smaller by-line under the title. A plain row, not the framework t-1.logo container, because fun.css widens every .flex.row img to the full width under 36rem and centers div.img.logo2. */
.org-1-brand-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0 0 1.4rem;
}

.org-1-brand-by-logo {
  display: block;
  width: auto;
  height: clamp(3.4rem, 6vw, 5rem); /* WHY: double the text-height size, operator decision 2026-09-28 */
  padding: 0; /* WHY: format-0 gives every img a 1rem padding, which would eat the logo */
  margin: 0;
  border-radius: 0.4rem;
}

.org-1-brand-by-text {
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 650;
  color: var(--home-primary-muted);
}

.org-1-title {
  margin: 0 0 1.4rem;
  color: var(--home-primary);
  font-size: clamp(3.1rem, 8vw, 7rem);
  line-height: 0.96;
  font-weight: 800;
  letter-spacing: 0;
}

.org-1-title span {
  display: inline-block;
  color: transparent;
  background: linear-gradient(90deg, #67e8f9 0%, #6ee7c8 52%, #bef264 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.org-1-title .org-1-title-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.18em;
  max-width: 100%;
  color: inherit;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  white-space: nowrap;
}

.org-1-product-mark {
  flex: 0 0 auto;
  width: 1.17em;
  height: 1.17em;
  padding: 0;
  margin: 0;
  object-fit: contain;
}

.org-1-title .org-1-title-detail {
  display: block;
  margin-top: 0.7rem;
  font-size: clamp(1.5rem, 2.9vw, 2.6rem);
  line-height: 1.08;
  font-weight: 750;
}

.org-1-subtitle {
  margin: 0 0 1rem;
  color: rgb(248 251 255 / 0.92);
  font-size: clamp(1.45rem, 3.4vw, 2.25rem);
  line-height: 1.2;
  font-weight: 650;
}

.org-1-copy {
  max-width: 48rem;
  margin: 0 auto 3rem;
  color: var(--home-primary-muted);
  font-size: clamp(1.06rem, 2vw, 1.35rem);
  line-height: 1.58;
}

.org-1-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  width: min(100%, 58rem);
  margin: 0 auto 2.6rem;
}

.org-1-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  min-width: 11rem;
  padding: 0.75rem 1.15rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  font: inherit;
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.org-1-action-primary {
  color: #102033;
  background: linear-gradient(135deg, #a7f3d0, #67e8f9);
  box-shadow: 0 18px 35px rgb(12 25 50 / 0.24);
}

.org-1-action-primary:hover,
.org-1-action-primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 22px 42px rgb(12 25 50 / 0.32);
}

.org-1-next-hint {
  width: min(100%, 40rem);
  margin: clamp(1.7rem, 4vw, 2.6rem) auto 0;
  color: rgb(248 251 255 / 0.72);
  font-size: clamp(0.98rem, 1.8vw, 1.16rem);
  line-height: 1.45;
  font-weight: 650;
  text-align: center;
}

.org-1-next-hint a {
  color: var(--home-accent);
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
}

.org-1-next-hint a:hover,
.org-1-next-hint a:focus-visible {
  color: var(--home-primary);
}

.org-1-scroll {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  width: 1.5rem;
  height: 2.5rem;
  border: 2px solid rgb(248 251 255 / 0.34);
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  padding-top: 0.45rem;
  opacity: 0.9;
  animation: homeBounce 1.6s infinite;
  text-decoration: none;
}

.org-1-scroll::before {
  content: "";
  width: 0.25rem;
  height: 0.75rem;
  border-radius: 9999px;
  background: rgb(248 251 255 / 0.58);
}

.org-1-scroll:focus-visible {
  /* Keep the icon-only section control visible during keyboard navigation. */
  outline: 3px solid var(--home-accent);
  outline-offset: 0.35rem;
}

/* WHY: a jump from the hero hint lands in a section and the browser's back does not scroll the inner board, so every section carries its way back to the hero as a second pill beside the arrow, in the arrow's design (operator layout 2026-09-28). */
.org-1-section .org-1-scroll {
  left: calc(50% - 1.35rem);
}

.org-1-top {
  position: absolute;
  left: calc(50% + 1.35rem);
  bottom: 2rem;
  transform: translateX(-50%);
  width: 1.5rem;
  height: 2.5rem;
  border: 2px solid rgb(248 251 255 / 0.34);
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  padding-top: 0.72rem;
  opacity: 0.9;
  text-decoration: none;
}

.org-1-top::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-top: 2px solid rgb(248 251 255 / 0.58);
  border-left: 2px solid rgb(248 251 255 / 0.58);
  transform: rotate(45deg);
}

.org-1-top:hover {
  opacity: 1;
  border-color: rgb(248 251 255 / 0.55);
}

.org-1-top:focus-visible {
  outline: 3px solid var(--home-accent);
  outline-offset: 0.35rem;
}

.org-1-top-alone {
  left: 50%;
}

/* Sections: one family, three identities. The identity class sets the variables; every section rule reads them. */

.org-1-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 4vw, 4rem) clamp(5.5rem, 8vw, 7rem);
  color: var(--home-primary);
  background: var(--section-background);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
}

.org-1-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--section-grid-opacity);
  background-image:
    linear-gradient(var(--section-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--section-grid) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
  z-index: -2;
}

.org-1-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--section-vignette);
  z-index: -1;
}

.org-1-teal {
  --section-background:
    radial-gradient(circle at 84% 18%, rgb(45 212 191 / 0.2), transparent 28rem),
    radial-gradient(circle at 14% 82%, rgb(244 211 148 / 0.12), transparent 30rem),
    linear-gradient(135deg, #0b1d2b 0%, #0d3f49 48%, #111827 100%);
  --section-grid: rgb(255 255 255 / 0.5);
  --section-grid-opacity: 0.16;
  --section-vignette:
    linear-gradient(90deg, rgb(2 6 23 / 0.28), transparent 28%, transparent 74%, rgb(2 6 23 / 0.24)),
    linear-gradient(180deg, rgb(2 6 23 / 0.08), transparent 45%, rgb(2 6 23 / 0.22));
  --section-accent: var(--home-accent);
  --section-kicker-color: #bff7df;
  --section-kicker-border: rgb(110 231 200 / 0.3);
  --section-kicker-background: rgb(255 255 255 / 0.08);
}

.org-1-graphite {
  --section-background:
    linear-gradient(180deg, rgb(255 255 255 / 0.045) 0%, transparent 24%, rgb(3 7 18 / 0.16) 100%),
    linear-gradient(145deg, #252a31 0%, #33383c 48%, #1b2428 100%);
  --section-grid: rgb(244 211 148 / 0.52);
  --section-grid-opacity: 0.18;
  --section-vignette:
    linear-gradient(90deg, rgb(3 7 18 / 0.24), transparent 24%, transparent 76%, rgb(3 7 18 / 0.2)),
    linear-gradient(180deg, transparent 0 64%, rgb(9 20 24 / 0.28) 100%);
  --section-accent: #f4d394;
  --section-kicker-color: #f4e7c5;
  --section-kicker-border: rgb(244 211 148 / 0.28);
  --section-kicker-background: rgb(15 23 42 / 0.22);
}

.org-1-warm {
  --section-background:
    linear-gradient(180deg, rgb(255 255 255 / 0.045) 0%, transparent 24%, rgb(3 7 18 / 0.16) 100%),
    linear-gradient(145deg, #262a2f 0%, #3a3931 48%, #1b2428 100%);
  --section-grid: rgb(244 211 148 / 0.52);
  --section-grid-opacity: 0.18;
  --section-vignette:
    radial-gradient(circle at 82% 18%, rgb(244 211 148 / 0.14), transparent 28rem),
    linear-gradient(90deg, rgb(3 7 18 / 0.24), transparent 24%, transparent 76%, rgb(3 7 18 / 0.2)),
    linear-gradient(180deg, transparent 0 64%, rgb(9 20 24 / 0.3) 100%);
  --section-accent: #f4d394;
  --section-kicker-color: #f4e7c5;
  --section-kicker-border: rgb(244 211 148 / 0.3);
  --section-kicker-background: rgb(15 23 42 / 0.22);
}

.org-1-inner {
  width: min(100%, 82rem);
  margin: 0 auto;
}

.org-1-kicker {
  width: fit-content;
  margin: 0 0 1rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--section-kicker-border);
  border-radius: 9999px;
  color: var(--section-kicker-color);
  background: var(--section-kicker-background);
  backdrop-filter: blur(12px);
  font-size: 0.86rem;
  font-weight: 750;
}

.org-1-heading {
  max-width: 52rem;
  margin: 0 0 1.2rem;
  color: var(--home-primary);
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: 0;
}

.org-1-heading span {
  display: block;
  margin-top: 0.7rem;
  color: var(--section-accent);
  font-size: clamp(1rem, 2vw, 1.45rem);
  line-height: 1.25;
  font-weight: 750;
}

.org-1-lead {
  max-width: 58rem;
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
  color: var(--home-primary-muted);
  font-size: clamp(1.05rem, 2vw, 1.32rem);
  line-height: 1.62;
}

/* WHY: a two-column section aligns heading and cards as one row and lead and thesis as the next, so the proof sits beside its claim; an aside without a thesis spans both rows. */
.org-1-columns {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  column-gap: clamp(2rem, 5vw, 4rem);
  /* WHY: the row gap is the only distance between the cards and the thesis box below them; the kicker and heading margins give it back, so the left column keeps its spacing. */
  row-gap: 1rem;
  align-items: start;
}

.org-1-columns > .org-1-kicker {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0;
}

.org-1-columns > .org-1-heading {
  grid-column: 1;
  grid-row: 2;
  margin-bottom: 0.2rem;
  /* WHY: beside the cards the heading has a narrow column; one size step down keeps long headings under six lines at laptop widths. */
  font-size: clamp(2.1rem, 3.9vw, 3.5rem);
}

.org-1-columns > .org-1-lead {
  grid-column: 1;
  grid-row: 3;
  margin-bottom: 0;
}

.org-1-columns > .org-1-aside {
  grid-column: 2;
  grid-row: 2;
}

.org-1-columns > .org-1-aside-tall {
  grid-row: 2 / span 2;
}

/* WHY: the closing action of a two-column section spans both columns under the text and the aside; without a placement the grid would drop it into the first free cell beside the heading. */
.org-1-columns > .org-1-actions {
  grid-column: 1 / -1;
  grid-row: 4;
  justify-content: center;
}

.org-1-columns > .org-1-thesis {
  grid-column: 2;
  grid-row: 3;
}

.org-1-aside > h3 {
  margin: 0 0 0.75rem;
  color: var(--home-primary);
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0;
}

.org-1-thesis {
  margin: 0;
  padding: 1rem 1.1rem;
  border-left: 0.22rem solid var(--section-accent);
  background: rgb(255 255 255 / 0.08);
  backdrop-filter: blur(12px);
}

.org-1-aside .org-1-thesis {
  margin-top: 0.75rem;
}

.org-1-thesis h3 {
  margin: 0 0 0.55rem;
  color: var(--home-primary);
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0;
}

.org-1-thesis p {
  margin: 0;
  color: rgb(248 251 255 / 0.76);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* WHY: a thesis box may carry two paragraphs since 2026-09-28 (the provider offer); they need the gap of one line. */
.org-1-thesis p + p {
  margin-top: 0.7rem;
}

.org-1-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.org-1-cards-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.org-1-cards li {
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 0.5rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(15 23 42 / 0.23));
  box-shadow: 0 16px 38px rgb(2 8 23 / 0.16);
  backdrop-filter: blur(14px);
}

.org-1-cards li::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 0.18rem;
  margin-bottom: 0.7rem;
  border-radius: 9999px;
  background: linear-gradient(90deg, #6ee7c8, #f4d394);
}

.org-1-cards h3 {
  margin: 0 0 0.55rem;
  color: var(--home-primary);
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0;
}

.org-1-cards p {
  margin: 0;
  color: rgb(248 251 255 / 0.8);
  font-size: 0.92rem;
  line-height: 1.45;
}

.org-1-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0 0 clamp(1.5rem, 4vw, 2.4rem);
  padding: 0;
  list-style: none;
}

/* WHY: under a card grid the pill row and the action are centered (operator decision 2026-09-25); before a table the pills stay left with the heading. */
.org-1-cards + .org-1-pills {
  justify-content: center;
  margin: clamp(1.5rem, 4vw, 2.4rem) 0 0;
}
/* A row break inside a pill list: the planned projects show the ERP row and the Office row (operator layout 2026-09-28). */
.org-1-pills .org-1-pills-break {
  flex-basis: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
/* Team section: a lead paragraph followed by a chain keeps a short gap, and the rollout and contribution chains are rows of
   button-like chips joined by arrows so the chain stands out (operator layout 2026-09-28). Non-adaptive homepage colors, as
   the primary action above. */
.org-1-lead-tight {
  margin-bottom: 1.1rem;
}
.org-1-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.55rem;
  margin: 0 0 clamp(1.6rem, 4vw, 2.6rem);
  padding: 0;
  list-style: none;
}
.org-1-chain li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.org-1-chain li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: #102033;
  background: linear-gradient(135deg, #a7f3d0, #67e8f9);
  box-shadow: 0 14px 28px rgb(12 25 50 / 0.24);
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.org-1-chain li:not(:last-child)::after {
  content: "\2192";
  color: rgb(248 251 255 / 0.82);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}
.org-1-chain-up li span {
  color: #1f1305;
  background: linear-gradient(135deg, #fcd34d, #fb923c);
}
/* Team section: each chain carries its name, Rollout or Contribution, in the chain's accent color left of the chips,
   right-aligned against a thin divider; both labels share one width so the two chains line up, and on a phone the label
   stands above its chain (operator request 2026-09-29). */
.org-1-chain-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin: 0 0 clamp(1.6rem, 4vw, 2.6rem);
}
.org-1-chain-row .org-1-chain {
  margin: 0;
}
.org-1-chain-label {
  min-width: 8.5rem;
  padding: 0.4rem 1rem 0.4rem 0;
  border-right: 2px solid rgb(103 232 249 / 0.7);
  color: #67e8f9;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-align: right;
  text-transform: uppercase;
}
.org-1-chain-label-up {
  border-right-color: rgb(251 146 60 / 0.7);
  color: #fdba74;
}
@media (max-width: 760px) {
  .org-1-chain-label {
    flex-basis: 100%;
    min-width: 0;
    padding: 0;
    border-right: 0;
    text-align: left;
  }
}

.org-1-pills li {
  padding: 0.45rem 0.75rem;
  border-radius: 9999px;
  color: rgb(248 251 255 / 0.86);
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.1);
  font-size: 0.88rem;
  font-weight: 700;
}

.org-1-section .org-1-actions {
  justify-content: center;
  width: auto;
  margin: clamp(1.5rem, 4vw, 2.4rem) 0 0;
}

/* WHY: the project overview is the interim planning view until PMS carries the projects; its table scrolls inside its own frame on narrow screens instead of widening the page. */
.org-1-projects-scroll {
  overflow-x: auto;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 0.5rem;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(15 23 42 / 0.23));
  box-shadow: 0 18px 45px rgb(2 8 23 / 0.2);
}

.org-1-projects-table {
  width: 100%;
  border-collapse: collapse;
  color: rgb(248 251 255 / 0.86);
  font-size: 0.95rem;
  line-height: 1.42;
}

.org-1-projects-table th,
.org-1-projects-table td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  text-align: left;
  vertical-align: top;
}

.org-1-projects-table th {
  color: var(--home-primary);
  font-weight: 800;
  white-space: nowrap;
}

.org-1-projects-table tbody tr:last-child td {
  border-bottom: 0;
}

/* WHY: on a phone the fixed columns would squeeze the description into a few characters per line; its minimum width lets the frame scroll instead. */
.org-1-projects-table td:nth-child(6) {
  min-width: 18rem;
}

.org-1-projects-table th:nth-child(-n + 5),
.org-1-projects-table td:nth-child(-n + 5) {
  white-space: nowrap;
}

.org-1-projects-table th:nth-child(1),
.org-1-projects-table td:nth-child(1),
.org-1-projects-table th:nth-child(3),
.org-1-projects-table td:nth-child(3) {
  text-align: center;
}

/* Energy section: the comparison picture as a figure, its seven-row table (own class: the projects table's column rules
   fit six columns, not four) and a full-width thesis box (operator request 2026-09-28). */
.org-1-figure {
  margin: 0 0 clamp(1.5rem, 4vw, 2.4rem);
}
.org-1-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.6rem;
  box-shadow: 0 18px 45px rgb(2 8 23 / 0.28);
}
.org-1-figure figcaption {
  margin: 0.6rem 0 0;
  color: rgb(248 251 255 / 0.74);
  font-size: 0.9rem;
  line-height: 1.48;
}
.org-1-energy-table {
  width: 100%;
  border-collapse: collapse;
  color: rgb(248 251 255 / 0.86);
  font-size: 0.95rem;
  line-height: 1.42;
}
.org-1-energy-table th,
.org-1-energy-table td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  text-align: left;
  vertical-align: top;
}
.org-1-energy-table th {
  color: var(--home-primary);
  font-weight: 800;
  white-space: nowrap;
}
.org-1-energy-table tbody tr:last-child td {
  border-bottom: 0;
}
.org-1-energy-table td:nth-child(-n + 3) {
  white-space: nowrap;
}
.org-1-energy-table td:nth-child(4) {
  min-width: 18rem;
}
.org-1-thesis-wide {
  max-width: 58rem;
  margin: clamp(1.5rem, 4vw, 2.4rem) 0 0;
}
/* Workplace section: three thesis boxes across the full width, one column on narrow screens (operator layout 2026-09-28). */
.org-1-thesis-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 clamp(1.5rem, 4vw, 2.4rem);
}
@media (max-width: 980px) {
  .org-1-thesis-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
.org-1-projects-note {
  margin: 0.75rem 0 0;
  color: rgb(248 251 255 / 0.74);
  font-size: 0.9rem;
  line-height: 1.48;
}

.org-1-reveal {
  opacity: 0;
  animation: homeReveal 0.7s ease forwards;
}

.org-1-reveal.delay-1 { animation-delay: 0.12s; }
.org-1-reveal.delay-2 { animation-delay: 0.22s; }
.org-1-reveal.delay-3 { animation-delay: 0.32s; }
.org-1-reveal.delay-4 { animation-delay: 0.42s; }
.org-1-reveal.delay-5 { animation-delay: 0.52s; }
.org-1-reveal.delay-6 { animation-delay: 0.62s; }

@keyframes homeReveal {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.loginClient {
  position: relative;
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  min-width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(3rem, 7vw, 6rem) 1rem;
  background:
    radial-gradient(circle at 82% 18%, rgb(45 212 191 / 0.28), transparent 28rem),
    radial-gradient(circle at 15% 82%, rgb(34 197 94 / 0.22), transparent 31rem),
    linear-gradient(135deg, #102a54 0%, #0f4f6a 48%, #11223c 100%);
  color: var(--home-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.loginClient,
.loginClient * {
  box-sizing: border-box;
}

.loginClient::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.5) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
  z-index: -2;
}

.loginClient::after {
  content: "";
  position: absolute;
  width: clamp(16rem, 32vw, 30rem);
  aspect-ratio: 1;
  left: 8%;
  bottom: 8%;
  border-radius: 9999px;
  background: rgb(34 197 94 / 0.16);
  filter: blur(4rem);
  z-index: -1;
}

.loginClient .loginPanel {
  flex: 0 1 30rem;
  width: min(100%, 30rem);
  max-width: 30rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 0.5rem;
  background: rgb(255 255 255 / 0.09);
  box-shadow: 0 24px 60px rgb(2 8 23 / 0.25);
  backdrop-filter: blur(16px);
}

.form.loginClient[data-code="formResetPassword"] .loginPanel {
  /* WHY: the reset-password input card is opened directly from email links and needs visible breathing room. */
  width: min(calc(100% - 2em), 30rem);
  margin: 1em auto;
}

.loginClient .loginBrand {
  margin: 0 0 1.75rem;
  text-align: center;
}

.loginClient .loginBrandTitle {
  margin: 0;
  color: transparent;
  background: linear-gradient(90deg, #67e8f9 0%, #6ee7c8 52%, #bef264 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(2.2rem, 8vw, 4rem);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: 0;
}

.loginClient h3 {
  margin: 0 0 1.25rem;
  color: rgb(248 251 255 / 0.88);
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 650;
  text-align: center;
}

.loginClient form {
  margin: 0;
}

/* WHY: login is a compact client card; generic generated form flex and label-width rules otherwise pull it off-center. */
.loginClient .form,
.loginClient .row,
.loginClient .rows {
  display: flex;
  flex: 0 1 auto;
  width: 100%;
  background: transparent;
}

.loginClient .row,
.loginClient .rows {
  flex-direction: column;
  flex-wrap: nowrap;
}

.loginClient .row > div,
.loginClient .rows > div,
.form.loginClient .row.wrap > div,
.form.loginClient .row.noWrap > div,
.form.loginClient .rows.wrap > div,
.form.loginClient .rows.noWrap > div {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
}

.loginClient label,
.form.loginClient .row.wrap > div > label:first-child,
.form.loginClient .row.noWrap > div > label:first-child,
.form.loginClient .rows.wrap > div > label:first-child,
.form.loginClient .rows.noWrap > div > label:first-child {
  width: 100%;
  min-width: 0;
  max-width: none;
  color: rgb(248 251 255 / 0.78);
  font-size: 0.92rem;
  font-weight: 700;
}

.loginClient input:not([type="radio"]):not([type="checkbox"]) {
  width: 100%;
  min-height: 2.65rem;
  color: #102033;
  background: rgb(248 251 255 / 0.95);
  border: 1px solid rgb(255 255 255 / 0.32);
  border-radius: 0.5rem;
}

.loginClient .btnLogin,
.loginClient .btnChangePassword,
.loginClient .btnSendResetLink,
.loginClient .btnResetPassword {
  min-height: 2.8rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  font-weight: 800;
}

.loginClient .btnLogin,
.loginClient .btnResetPassword {
  color: #102033;
  background: linear-gradient(135deg, #a7f3d0, #67e8f9);
  box-shadow: 0 18px 35px rgb(12 25 50 / 0.28);
}

.loginClient .btnChangePassword,
.loginClient .btnSendResetLink {
  color: var(--home-primary);
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.22);
}

/* WHY: the contact page is stored as free client HTML and needs scoped styling outside generated CSS. */
.contactClient {
  position: relative;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(3rem, 7vw, 6rem) 1rem;
  background:
    radial-gradient(circle at 80% 12%, rgb(45 212 191 / 0.26), transparent 28rem),
    radial-gradient(circle at 12% 88%, rgb(34 197 94 / 0.2), transparent 31rem),
    linear-gradient(135deg, #102a54 0%, #0f4f6a 48%, #11223c 100%);
  color: var(--home-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.contactClient,
.contactClient * {
  box-sizing: border-box;
}

.contactClient::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.14;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.5) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
  z-index: -2;
}

.contactShell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  width: min(100%, 72rem);
  margin: 0 auto;
  align-items: center;
}

.contactIntro {
  min-width: 0;
}

.contactKicker {
  margin: 0 0 1rem;
  color: var(--home-accent);
  font-size: 0.85rem;
  line-height: 1.2;
  font-weight: 850;
  text-transform: uppercase;
}

.contactIntro h1 {
  margin: 0 0 1rem;
  color: var(--home-primary);
  font-size: clamp(2.35rem, 6vw, 4.6rem);
  line-height: 0.98;
  font-weight: 850;
  letter-spacing: 0;
}

.contactIntro p {
  margin: 0;
  color: rgb(248 251 255 / 0.82);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.58;
}

.contactDirect {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 100%;
  margin-top: 1.5rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 0.5rem;
  background: rgb(255 255 255 / 0.08);
  backdrop-filter: blur(14px);
}

.contactDirect span {
  color: rgb(248 251 255 / 0.62);
  font-size: 0.82rem;
  font-weight: 750;
}

.contactDirect a {
  color: var(--home-accent);
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
}

.contactForm {
  min-width: 0;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 0.5rem;
  background: rgb(255 255 255 / 0.09);
  box-shadow: 0 24px 60px rgb(2 8 23 / 0.25);
  backdrop-filter: blur(16px);
}

.contactGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.contactField {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  color: rgb(248 251 255 / 0.78);
  font-size: 0.92rem;
  font-weight: 750;
}

.contactFieldFull {
  grid-column: 1 / -1;
}

.contactField input,
.contactField select,
.contactField textarea {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.72rem 0.85rem;
  color: #102033;
  background: rgb(248 251 255 / 0.95);
  border: 1px solid rgb(255 255 255 / 0.32);
  border-radius: 0.5rem;
  font: inherit;
}

.contactField textarea {
  min-height: 9rem;
  resize: vertical;
}

.contactConsent {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 1rem 0 1.25rem;
  color: rgb(248 251 255 / 0.76);
  font-size: 0.9rem;
  line-height: 1.45;
}

.contactConsent input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.18rem;
}

.contactActions {
  display: flex;
  justify-content: flex-end;
}

.contactMessage {
  margin: 0 0 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 0.5rem;
  background: rgb(255 255 255 / 0.08);
  color: rgb(248 251 255 / 0.82);
  font-size: 0.92rem;
  line-height: 1.4;
}

.contactMessageSuccess {
  color: #bbf7d0;
  border-color: rgb(187 247 208 / 0.34);
  background: rgb(22 101 52 / 0.2);
}

.contactMessageError {
  color: #fecaca;
  border-color: rgb(254 202 202 / 0.34);
  background: rgb(127 29 29 / 0.2);
}

.contactSend {
  min-height: 2.85rem;
  min-width: 9rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: #102033;
  background: linear-gradient(135deg, #a7f3d0, #67e8f9);
  box-shadow: 0 18px 35px rgb(12 25 50 / 0.28);
  font: inherit;
  font-weight: 850;
}

.contactSend:disabled {
  cursor: wait;
  filter: grayscale(0.35);
  opacity: 0.72;
}

@keyframes homeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1rem); }
}

@keyframes homePulse {
  0% { box-shadow: 0 0 0 0 rgb(34 197 94 / 0.55); }
  75%, 100% { box-shadow: 0 0 0 0.65rem rgb(34 197 94 / 0); }
}

@keyframes homeBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(0.45rem); }
}

@media (prefers-reduced-motion: reduce) {
  /* Respect system motion preferences without hiding reveal content. */
  .org-1-glow,
  .org-1-status-dot,
  .org-1-scroll,
  .org-1-reveal {
    animation: none;
  }

  .org-1-reveal {
    opacity: 1;
    transform: none;
  }

  .org-1-action {
    transition: none;
  }

  .org-1-action-primary:hover,
  .org-1-action-primary:focus-visible {
    transform: none;
  }
}

/* WHY: desktop card groups center against their large left-hand headings instead of aligning to the heading row's top edge. */
@media (min-width: 981px) {
  .org-1-columns > .org-1-aside {
    align-self: center;
  }

  /* WHY: the shell's navigation and footer take about 6rem of the viewport; the hero fills the visible board instead of the full viewport, so its last line and the scroll control are in the first screen. */
  .org-1-hero {
    min-height: calc(100vh - 6rem);
  }
}

/* WHY: at ordinary laptop heights the hero must still show the quest sentence and the action in the first screen; only spacing and the logo shrink, not the type scale. */
@media (min-width: 981px) and (min-height: 821px) and (max-height: 960px) {
  .org-1-hero {
    /* WHY: the bottom padding keeps the scroll control (2rem + 2.5rem) off the last line. */
    padding-block: 2rem 5rem;
  }

  .org-1-hero .org-1-badge {
    margin-bottom: 1rem;
  }

  .org-1-hero .org-1-brand-by {
    margin-bottom: 0.75rem;
  }

  .org-1-hero .org-1-title {
    margin-bottom: 1rem;
    font-size: clamp(3.1rem, 6.5vw, 6rem);
  }

  .org-1-hero .org-1-copy {
    margin-bottom: 1.5rem;
  }

  .org-1-hero .org-1-actions {
    margin-bottom: 1.25rem;
  }

  .org-1-hero .org-1-next-hint {
    margin-top: 1rem;
  }
}

/* WHY: short desktop viewports should expose the value proposition and primary action without changing mobile or normal-height layouts. */
@media (min-width: 981px) and (max-height: 820px) {
  .org-1-hero {
    padding-block: 1.5rem 5rem;
  }

  .org-1-hero .org-1-badge {
    margin-bottom: 0.75rem;
  }

  .org-1-hero .org-1-brand-by {
    margin-bottom: 0.5rem;
  }

  .org-1-hero .org-1-title {
    margin-bottom: 0.8rem;
    font-size: clamp(3.1rem, 6vw, 4.8rem);
  }

  .org-1-hero .org-1-title-detail {
    margin-top: 0.4rem;
  }

  .org-1-hero .org-1-subtitle {
    margin-bottom: 0.6rem;
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  }

  .org-1-hero .org-1-copy {
    max-width: 52rem;
    margin-bottom: 1.25rem;
    font-size: 1.05rem;
    line-height: 1.45;
  }

  .org-1-hero .org-1-actions {
    margin-bottom: 1.25rem;
  }

  .org-1-hero .org-1-next-hint {
    margin-top: 1rem;
  }
}

@media (max-width: 980px) {
  .org-1-columns {
    grid-template-columns: 1fr;
  }

  .org-1-columns > .org-1-kicker,
  .org-1-columns > .org-1-heading,
  .org-1-columns > .org-1-lead,
  .org-1-columns > .org-1-thesis,
  .org-1-columns > .org-1-aside,
  .org-1-columns > .org-1-aside-tall,
  .org-1-columns > .org-1-actions {
    grid-column: 1;
    grid-row: auto;
  }

  .org-1-columns > .org-1-thesis,
  .org-1-columns > .org-1-aside {
    margin-top: 0.5rem;
  }

  .org-1-cards-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contactShell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .org-1-title {
    font-size: clamp(2.15rem, 10vw, 3.1rem);
  }

  .org-1-title .org-1-title-line {
    gap: 0.14em;
  }

  .org-1-badge {
    border-radius: 0.5rem;
    white-space: normal;
  }

  .org-1-actions {
    align-items: stretch;
  }

  .org-1-action {
    width: min(100%, 23rem);
  }

  .org-1-cards,
  .org-1-cards-4 {
    grid-template-columns: 1fr;
  }

  .contactGrid {
    grid-template-columns: 1fr;
  }

  .contactActions,
  .contactSend {
    width: 100%;
  }
}

/*
 * WHY: A.0.Sys.35.1–50.1 are representative HTML models. Their geometry stays
 * client-scoped while colors continue to come primarily from the active theme.
 * The complete identity list prevents generic model classes from leaking into
 * other documents. Static models deliberately contain no motion effects.
 */
:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) {
  --model-border: color-mix(in srgb, currentColor 18%, transparent);
  --model-border-strong: color-mix(in srgb, currentColor 34%, transparent);
  --model-surface: color-mix(in srgb, currentColor 4%, transparent);
  --model-surface-strong: color-mix(in srgb, currentColor 9%, transparent);
  --model-shadow: 0 1rem 2.8rem rgb(0 0 0 / 0.12);
  box-sizing: border-box;
  width: 100%;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) *,
:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) *::before,
:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) *::after {
  box-sizing: border-box;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) :is(.formBoard, .form) {
  width: 100%;
  max-width: none;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .form {
  padding: clamp(0.7rem, 1.8vw, 1.8rem);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) :is(p, blockquote, pre, figure) {
  border: 0;
  background: transparent;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelShell {
  width: min(100%, 96rem);
  margin: 0 auto;
  padding: clamp(1rem, 2.5vw, 2.5rem);
  border: 1px solid var(--model-border);
  border-radius: 1.1rem;
  background: color-mix(in srgb, currentColor 2.5%, transparent);
  box-shadow: var(--model-shadow);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--model-border);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) :is(
  .modelHeader, .modelDocumentHeader, .modelShopHeader,
  .modelPresentationToolbar, .modelKanbanColumn > header,
  .modelWarehouseGrid header, .modelTask footer, .modelProductBody footer,
  .modelSlide > footer, .modelFormActions
) {
  color: inherit;
  background: transparent;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) :is(.modelHeader, .modelDocumentHeader, .modelShopHeader) h1 {
  margin: 0.18rem 0 0.45rem;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) :is(.modelLead, .modelHeader p, .modelDocumentHeader p) {
  max-width: 54rem;
  margin: 0;
  padding: 0;
  opacity: 0.76;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelEyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.68;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelToolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelToolbar button,
:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) :is(.modelCardHead, .modelFormActions, .modelShopFilters, .modelProductBody, .modelWebsiteCta) button {
  min-height: 2.35rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--model-border-strong);
  border-radius: 0.55rem;
  color: inherit;
  background: var(--model-surface);
  font: inherit;
  font-weight: 700;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) button.active {
  border-color: currentColor;
  background: var(--model-surface-strong);
  box-shadow: inset 0 -0.16rem 0 currentColor;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelBadge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.23rem 0.5rem;
  border: 1px solid var(--model-border);
  border-radius: 99rem;
  background: var(--model-surface-strong);
  font-size: 0.73rem;
  font-weight: 750;
  white-space: nowrap;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) :is(.modelBadgeGood, .modelPositive) {
  color: #13824b;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) :is(.modelBadgeAlert, .modelWarning) {
  color: #b04425;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelMetricGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelMetric {
  display: grid;
  gap: 0.35rem;
  min-height: 7.4rem;
  padding: 1rem;
  border: 1px solid var(--model-border);
  border-radius: 0.75rem;
  background: var(--model-surface);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelMetric > span {
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.7;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelMetric > strong {
  align-self: center;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSpan2 {
  grid-column: span 2;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelCard {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--model-border);
  border-radius: 0.8rem;
  background: color-mix(in srgb, currentColor 3.5%, transparent);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelCardHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.85rem;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelCardTitle {
  margin-bottom: 0.65rem;
  font-size: 1rem;
  font-weight: 800;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelCardHead .modelCardTitle {
  margin-bottom: 0.15rem;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelList {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelList li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--model-border);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelList li:last-child {
  border-bottom: 0;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelList li div {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelDot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #52708c;
  flex: 0 0 auto;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelDotAlert { background: #d65a3a; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelDotWarn { background: #d28a20; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelDotGood { background: #23885b; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelTableWrap {
  width: 100%;
  overflow-x: auto;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelTable {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelTable :is(th, td) {
  padding: 0.72rem 0.65rem;
  border-bottom: 1px solid var(--model-border);
  text-align: left;
  vertical-align: middle;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelTable th {
  background: var(--model-surface-strong);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelBarChart {
  display: flex;
  align-items: end;
  gap: clamp(0.45rem, 2vw, 1.4rem);
  height: 15rem;
  padding: 1.3rem 0.5rem 0;
  border-bottom: 1px solid var(--model-border-strong);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelBarChart > div {
  display: grid;
  align-items: end;
  flex: 1;
  height: 100%;
  text-align: center;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelBarChart span {
  display: block;
  align-self: end;
  width: 100%;
  height: var(--model-value);
  min-height: 1rem;
  border-radius: 0.45rem 0.45rem 0 0;
  background: linear-gradient(180deg, #2e9b91, #24657d);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelBarChart small {
  padding: 0.45rem 0;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelLineChart svg {
  display: block;
  width: 100%;
  height: 14rem;
  overflow: visible;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) :is(.modelChartGrid, .modelChartTarget, .modelChartLine) {
  fill: none;
  vector-effect: non-scaling-stroke;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelChartGrid { stroke: currentColor; stroke-width: 1; opacity: 0.15; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelChartTarget { stroke: #d18a2f; stroke-width: 3; stroke-dasharray: 8 7; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelChartLine { stroke: #16897d; stroke-width: 4; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelChartLegend {
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-size: 0.78rem;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelChartLegend i {
  display: inline-block;
  width: 1.2rem;
  height: 0.2rem;
  margin-right: 0.3rem;
  vertical-align: middle;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelLegendActual { background: #16897d; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelLegendTarget { background: #d18a2f; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelDonut {
  display: grid;
  place-content: center;
  width: 10rem;
  aspect-ratio: 1;
  margin: 1rem auto;
  border-radius: 50%;
  background: radial-gradient(circle at center, color-mix(in srgb, currentColor 4%, transparent) 0 42%, transparent 43%), conic-gradient(#16897d 0 44%, #4876b8 44% 76%, #d18a2f 76% 100%);
  text-align: center;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelDonut strong { font-size: 1.4rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelDonutFinance {
  background: radial-gradient(circle at center, color-mix(in srgb, currentColor 4%, transparent) 0 42%, transparent 43%), conic-gradient(#16897d 0 64%, #4876b8 64% 82%, #d18a2f 82% 94%, #9a5cb4 94% 100%);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelLegendList {
  display: grid;
  gap: 0.35rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelLegendList li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.45rem;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) :is(.modelLegendList, .modelCalendar) i.modelTone1 { background: #16897d; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelLegendList i { width: 0.7rem; height: 0.7rem; border-radius: 50%; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelTone1 { --model-tone: #16897d; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelTone2 { --model-tone: #4876b8; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelTone3 { --model-tone: #d18a2f; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelTone4 { --model-tone: #9a5cb4; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelLegendList :is(.modelTone1, .modelTone2, .modelTone3, .modelTone4) { background: var(--model-tone); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelHorizontalBars {
  display: grid;
  gap: 0.8rem;
  padding-top: 1rem;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelHorizontalBars > div {
  display: grid;
  grid-template-columns: 4.5rem 1fr 2.5rem;
  align-items: center;
  gap: 0.5rem;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelHorizontalBars > div > span,
:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelProgress {
  height: 0.65rem;
  overflow: hidden;
  border-radius: 99rem;
  background: var(--model-surface-strong);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) :is(.modelHorizontalBars, .modelProgress) i {
  display: block;
  width: var(--model-value);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #24657d, #2e9b91);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelProgressAlert i { background: linear-gradient(90deg, #b04425, #d18a2f); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelValue50 { --model-value: 50%; }
:is(.sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model, .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model, .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model, .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model) .modelValue58 { --model-value: 58%; }
:is(.sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model, .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model, .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model, .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model) .modelValue61 { --model-value: 61%; }
:is(.sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model, .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model, .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model, .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model) .modelValue66 { --model-value: 66%; }
:is(.sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model, .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model, .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model, .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model) .modelValue67 { --model-value: 67%; }
:is(.sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model, .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model, .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model, .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model) .modelValue68 { --model-value: 68%; }
:is(.sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model, .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model, .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model, .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model) .modelValue72 { --model-value: 72%; }
:is(.sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model, .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model, .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model, .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model) .modelValue78 { --model-value: 78%; }
:is(.sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model, .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model, .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model, .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model) .modelValue82 { --model-value: 82%; }
:is(.sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model, .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model, .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model, .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model) .modelValue84 { --model-value: 84%; }
:is(.sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model, .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model, .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model, .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model) .modelValue86 { --model-value: 86%; }
:is(.sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model, .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model, .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model, .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model) .modelValue92 { --model-value: 92%; }
:is(.sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model, .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model, .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model, .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model) .modelValue93 { --model-value: 93%; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFunnel {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding-top: 0.8rem;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFunnel > div {
  display: flex;
  justify-content: space-between;
  width: calc(100% - var(--funnel-cut, 0%));
  padding: 0.6rem 1rem;
  border-radius: 0.35rem;
  color: #fff;
  background: #24657d;
}

:is(.sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model, .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model, .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model, .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model) .modelFunnel > div:nth-child(2) { --funnel-cut: 16%; opacity: 0.9; }
:is(.sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model, .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model, .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model, .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model) .modelFunnel > div:nth-child(3) { --funnel-cut: 32%; opacity: 0.8; }
:is(.sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model, .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model, .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model, .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model) .modelFunnel > div:nth-child(4) { --funnel-cut: 48%; opacity: 0.7; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFilterBar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  gap: 0.7rem;
  margin-bottom: 1rem;
  padding: 0.9rem;
  border: 1px solid var(--model-border);
  border-radius: 0.75rem;
  background: var(--model-surface);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) :is(.modelFilterBar label, .modelInputGrid > label, .modelSearch) {
  display: grid;
  gap: 0.3rem;
  font-size: 0.77rem;
  font-weight: 700;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) :is(.modelFilterBar, .modelInputGrid, .modelSearch) :is(input, select, textarea) {
  width: 100%;
  min-height: 2.4rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--model-border-strong);
  border-radius: 0.45rem;
  color: inherit;
  background: var(--model-surface);
  font: inherit;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFormulaLine {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--model-border);
  border-radius: 0.45rem;
  background: var(--model-surface);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelWorkbookWrap {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--model-border-strong);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelWorkbook {
  display: grid;
  grid-template-columns: 3rem minmax(11rem, 1.5fr) minmax(8rem, 1fr) repeat(4, minmax(7rem, 1fr));
  min-width: 58rem;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelWorkbook .gridItem {
  min-width: 0;
  padding: 0.5rem;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelWorkbook :is(.s-1, .s-2) {
  color: inherit;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelCellSpan6 { grid-column: span 6; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelTabs {
  display: flex;
  gap: 0.2rem;
  padding-top: 0.5rem;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelTabs button {
  padding: 0.45rem 1rem;
  border: 1px solid var(--model-border);
  border-radius: 0.45rem 0.45rem 0 0;
  color: inherit;
  background: var(--model-surface);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelTimeline {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelTimeline li {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--model-border);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelTimeline li div { display: grid; gap: 0.12rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelCheckList {
  display: grid;
  gap: 0.65rem;
  padding: 0;
  margin: 1rem 0;
  list-style: none;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelCheckList input { width: 1.1rem; height: 1.1rem; margin-right: 0.4rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelNote {
  margin-top: 1rem;
  padding: 0.85rem;
  border-left: 0.25rem solid currentColor;
  border-radius: 0.35rem;
  background: var(--model-surface-strong);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelNote p { margin: 0.35rem 0 0; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelProjectSummary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelProjectSummary > div {
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem;
  border: 1px solid var(--model-border);
  border-radius: 0.6rem;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelKanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(15rem, 1fr));
  gap: 0.75rem;
  max-width: 100%;
  overflow-x: auto;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelKanbanColumn {
  padding: 0.75rem;
  border: 1px solid var(--model-border);
  border-radius: 0.7rem;
  background: var(--model-surface);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelKanbanColumn > header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.7rem;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelTask {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
  padding: 0.75rem;
  border: 1px solid var(--model-border);
  border-radius: 0.55rem;
  background: color-mix(in srgb, currentColor 3%, transparent);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelTaskPriority { border-left: 0.3rem solid #d18a2f; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelTask p { margin: 0; opacity: 0.72; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelTask footer { display: flex; justify-content: space-between; align-items: center; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelTask footer span,
:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelAvatar {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: #fff;
  background: #24657d;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 800;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelCalendar {
  display: grid;
  grid-template-columns: 4.5rem repeat(5, minmax(8.5rem, 1fr));
  margin-bottom: 1rem;
  overflow-x: auto;
  border: 1px solid var(--model-border);
  border-radius: 0.75rem;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelCalendar > * {
  min-height: 4.6rem;
  padding: 0.5rem;
  border-right: 1px solid var(--model-border);
  border-bottom: 1px solid var(--model-border);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) :is(.modelCalendarCorner, .modelCalendarDay) { background: var(--model-surface-strong); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelCalendarDay { display: grid; place-content: center; text-align: center; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelEvent {
  margin: 0.22rem;
  border-left: 0.25rem solid var(--model-tone);
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--model-tone) 18%, transparent);
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelEvent :is(strong, small) { display: block; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelAvailability {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelAvailability > span { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.5rem; align-items: center; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelAvailability .modelAvatar { grid-row: span 2; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) :is(.modelDateBox, .modelTimeBox) {
  display: grid;
  place-items: center;
  min-width: 3.2rem;
  padding: 0.35rem;
  border: 1px solid var(--model-border);
  border-radius: 0.45rem;
  background: var(--model-surface-strong);
  font-weight: 800;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFlow {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) 2.5rem minmax(10rem, 1fr) 2.5rem minmax(10rem, 1fr);
  align-items: center;
  gap: 0.55rem;
  max-width: 64rem;
  margin: 1rem auto 1.5rem;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFlowNode {
  display: grid;
  gap: 0.35rem;
  min-height: 8.5rem;
  padding: 0.9rem;
  border: 1px solid var(--model-border-strong);
  border-radius: 0.7rem;
  background: var(--model-surface);
  text-align: center;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFlowNode > span { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) :is(.modelFlowStart, .modelFlowEnd) { border-width: 0.18rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFlowDecision { border-radius: 1.8rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFlowAlert { border-color: #b04425; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFlowArrow { font-size: 1.7rem; text-align: center; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFlowBranch {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8rem;
  padding: 0 13%;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFlowBranch > div { display: grid; place-items: center; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFlowBranch + .modelFlowNode { grid-column: 1 / 3; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFlowBranch + .modelFlowNode + .modelFlowNode { grid-column: 4 / 6; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFlowMerge { grid-column: 1 / -1; display: flex; justify-content: center; gap: 8rem; font-size: 1.8rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFlowMerge + .modelFlowNode { grid-column: 2 / 5; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelControlGrid,
:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelNoteGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelControlGrid > div,
:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelNoteGrid > div { display: grid; gap: 0.25rem; padding: 0.8rem; border: 1px solid var(--model-border); border-radius: 0.5rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelIdentity { display: flex; align-items: center; gap: 1rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelAvatarLarge { width: 4.2rem; height: 4.2rem; font-size: 1.1rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelDefinitionList { margin: 0.75rem 0 0; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelDefinitionList > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--model-border); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelDefinitionList :is(dt, dd) { margin: 0; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelWarehouseGrid { display: grid; gap: 1rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelWarehouseGrid header { display: flex; justify-content: space-between; margin-bottom: 0.4rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelStatement > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.25rem; border-bottom: 1px solid var(--model-border); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelStatementTotal { font-weight: 750; background: var(--model-surface); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelStatementGrand { margin-top: 0.35rem; border-top: 0.16rem solid currentColor; font-size: 1.05rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelNoteGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0.8rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelNoteGrid p { margin: 0; opacity: 0.72; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelDocument { max-width: 76rem; padding: clamp(1.5rem, 4vw, 4rem); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelDocumentHeader { display: flex; justify-content: space-between; gap: 2rem; padding-bottom: 1.5rem; border-bottom: 0.16rem solid currentColor; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSeal { display: grid; place-content: center; flex: 0 0 6rem; width: 6rem; height: 6rem; border: 0.18rem double currentColor; border-radius: 50%; text-align: center; font-weight: 800; transform: rotate(-5deg); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSeal small { display: block; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelExecutiveNote { margin: 1.5rem 0; padding: 1.2rem 1.3rem; border-left: 0.3rem solid currentColor; background: var(--model-surface-strong); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelExecutiveNote p { margin: 0.45rem 0 0; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelDocumentSection { margin-top: 1.6rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelAssessmentGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelAssessmentGrid article { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; padding: 0.9rem; border: 1px solid var(--model-border); border-radius: 0.5rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelScore { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: #fff; font-weight: 850; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelScoreGood { background: #13824b; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelScoreWatch { background: #b97518; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelAssessmentGrid p { margin: 0.3rem 0 0; opacity: 0.74; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSignatureGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding-top: 2rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSignatureGrid > div { display: grid; gap: 0.3rem; padding-top: 0.7rem; border-top: 1px solid currentColor; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelArticleLayout { display: grid; grid-template-columns: 13rem minmax(0, 1fr) 14rem; gap: 1.5rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelArticleNav { display: grid; align-content: start; gap: 0.2rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelArticleNav > a { padding: 0.5rem 0.6rem; border-left: 0.16rem solid transparent; color: inherit; text-decoration: none; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelArticleNav > a.active { border-color: currentColor; background: var(--model-surface-strong); font-weight: 800; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelArticle section { margin-bottom: 2rem; scroll-margin-top: 1rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelArticle blockquote { margin: 1rem 0; padding: 0.8rem 1rem; border-left: 0.25rem solid currentColor; background: var(--model-surface-strong); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelArticle pre { max-width: 100%; overflow-x: auto; padding: 1rem; border: 1px solid var(--model-border); border-radius: 0.5rem; background: var(--model-surface-strong); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelRuleGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelRuleGrid article { padding: 0.8rem; border: 1px solid var(--model-border); border-radius: 0.5rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelRelated { display: grid; align-content: start; gap: 0.5rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelRelated a { display: grid; gap: 0.15rem; padding: 0.7rem; border: 1px solid var(--model-border); border-radius: 0.5rem; color: inherit; text-decoration: none; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelWebsite { padding: 0; overflow: hidden; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelWebsiteHero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; min-height: 34rem; padding: clamp(2rem, 5vw, 5rem); background: linear-gradient(135deg, color-mix(in srgb, #16897d 18%, transparent), transparent 60%); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelWebsiteHero h1 { max-width: 12ch; margin: 1rem 0; font-size: clamp(2.4rem, 5vw, 5rem); line-height: 0.98; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelWebsiteHero p { max-width: 36rem; margin-bottom: 1.4rem; font-size: 1.08rem; opacity: 0.78; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelWebsitePreview { overflow: hidden; border: 1px solid var(--model-border-strong); border-radius: 0.8rem; background: color-mix(in srgb, currentColor 6%, transparent); box-shadow: var(--model-shadow); transform: rotate(1.5deg); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelPreviewBar { display: flex; align-items: center; gap: 0.4rem; padding: 0.65rem; border-bottom: 1px solid var(--model-border); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelPreviewBar i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #d18a2f; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelPreviewBar i:nth-child(2) { background: #16897d; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelPreviewBar i:nth-child(3) { background: #4876b8; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelPreviewBar span { margin-left: auto; font-size: 0.7rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelPreviewBody { display: grid; grid-template-columns: 6rem 1fr; min-height: 19rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelPreviewBody aside { display: grid; align-content: start; gap: 0.65rem; padding: 1rem 0.65rem; border-right: 1px solid var(--model-border); font-size: 0.66rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelPreviewBody main { padding: 1rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelMiniMetrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelMiniMetrics i { height: 3.5rem; border: 1px solid var(--model-border); border-radius: 0.35rem; background: var(--model-surface-strong); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelMiniChart { display: flex; align-items: end; height: 8rem; margin: 0.7rem 0; border: 1px solid var(--model-border); border-radius: 0.35rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelMiniChart i { width: 100%; height: 62%; clip-path: polygon(0 86%, 12% 68%, 25% 74%, 38% 45%, 52% 53%, 66% 21%, 80% 31%, 100% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, color-mix(in srgb, #16897d 55%, transparent), transparent); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelMiniRows { display: grid; gap: 0.35rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelMiniRows i { height: 1.25rem; border-radius: 0.2rem; background: var(--model-surface-strong); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelWebsiteTrust { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; padding: 1rem 2rem; border-block: 1px solid var(--model-border); font-size: 0.78rem; font-weight: 800; opacity: 0.72; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelWebsiteSection { padding: clamp(2rem, 5vw, 5rem); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSectionIntro { max-width: 48rem; margin-bottom: 2rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFeatureGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFeatureGrid article { padding: 1.2rem; border-top: 0.2rem solid currentColor; background: var(--model-surface); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFeatureGrid article > :is(span, strong) { display: block; margin-bottom: 0.55rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelWebsiteCta { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(2rem, 5vw, 4rem); background: color-mix(in srgb, #16897d 18%, transparent); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelShopHeader { display: flex; justify-content: space-between; gap: 1.5rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--model-border); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSearch span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelShopFilters { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; padding: 1rem 0; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelShopFilters > span { margin-left: auto; opacity: 0.7; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelProductGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelProduct { overflow: hidden; border: 1px solid var(--model-border); border-radius: 0.75rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelProductVisual { position: relative; display: grid; place-items: center; min-height: 12rem; color: #fff; background: linear-gradient(135deg, #315f6e, #183846); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelProductVisual2 { background: linear-gradient(135deg, #8a6c43, #443321); }
:is(.sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model, .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model, .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model, .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model) .modelProductVisual3 { background: linear-gradient(135deg, #596451, #263128); }
:is(.sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model, .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model, .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model, .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model) .modelProductVisual4 { background: linear-gradient(135deg, #755a75, #39283b); }
:is(.sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model, .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model, .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model, .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model) .modelProductVisual5 { background: linear-gradient(135deg, #666e78, #2e343b); }
:is(.sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model, .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model, .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model, .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model) .modelProductVisual6 { background: linear-gradient(135deg, #6c6953, #353225); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelProductVisual > span { position: absolute; top: 0.7rem; left: 0.7rem; padding: 0.25rem 0.45rem; border: 1px solid rgb(255 255 255 / 0.5); border-radius: 99rem; font-size: 0.68rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelProductVisual > b { font-size: 2.4rem; letter-spacing: 0.05em; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelProductBody { display: grid; gap: 0.45rem; padding: 0.9rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelProductBody p { margin: 0; opacity: 0.7; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelProductBody footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.4rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelShopBanner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 1rem; padding: 1.4rem; border-radius: 0.75rem; background: linear-gradient(135deg, color-mix(in srgb, #16897d 24%, transparent), color-mix(in srgb, #4876b8 18%, transparent)); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelPresentation { padding: 0; overflow: hidden; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelPresentationToolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--model-border); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelPresentationToolbar > div:first-child { display: grid; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelPresentationLayout { display: grid; grid-template-columns: 13rem minmax(0, 1fr); min-height: 42rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSlideRail { display: grid; align-content: start; gap: 0.55rem; padding: 0.8rem; border-right: 1px solid var(--model-border); background: var(--model-surface); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSlideRail button { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.4rem; padding: 0.4rem; border: 1px solid transparent; color: inherit; background: transparent; text-align: left; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSlideRail button.active { border-color: currentColor; background: var(--model-surface-strong); box-shadow: none; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSlideRail i { display: grid; min-height: 5.3rem; padding: 0.55rem; border: 1px solid var(--model-border); background: color-mix(in srgb, currentColor 3%, transparent); font-style: normal; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSlideStage { display: grid; grid-template-rows: 1fr auto; gap: 0.8rem; padding: 1.2rem; background: color-mix(in srgb, currentColor 7%, transparent); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSlide { display: grid; align-content: center; min-height: 31rem; padding: clamp(2rem, 5vw, 5rem); border: 1px solid var(--model-border); background: color-mix(in srgb, currentColor 2%, transparent); box-shadow: var(--model-shadow); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSlide h1 { max-width: 22ch; font-size: clamp(2rem, 4vw, 4rem); line-height: 1.04; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSlideSystem { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.65rem; margin-top: 1.6rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSlideSystem > div { display: grid; gap: 0.3rem; padding: 0.85rem; border: 1px solid var(--model-border); border-radius: 0.45rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSlideSystem > strong { grid-column: 1 / -1; padding: 0.7rem; border-radius: 0.4rem; color: #fff; background: #24657d; text-align: center; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSlide > footer { display: flex; justify-content: space-between; margin-top: 2rem; padding-top: 0.7rem; border-top: 1px solid var(--model-border); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSpeakerNotes { padding: 0.8rem; border: 1px solid var(--model-border); border-radius: 0.45rem; background: color-mix(in srgb, currentColor 2%, transparent); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSpeakerNotes p { margin: 0.35rem 0 0; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0; margin: 0 0 1rem; list-style: none; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSteps li { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem; border-bottom: 0.18rem solid var(--model-border); opacity: 0.55; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSteps li > span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border: 1px solid currentColor; border-radius: 50%; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelSteps :is(.complete, .active) { border-color: currentColor; opacity: 1; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFormLayout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 0.8fr); gap: 1rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelInputGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelInputSpan2 { grid-column: span 2; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelChoiceField { min-width: 0; padding: 0; border: 0; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelChoiceField legend { margin-bottom: 0.35rem; font-size: 0.77rem; font-weight: 700; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelRadioGroup { display: flex; flex-wrap: wrap; gap: 0.55rem; padding: 0.65rem; border: 1px solid var(--model-border-strong); border-radius: 0.45rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelRadioGroup label { display: flex; align-items: center; gap: 0.25rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelRadioGroup input { width: 1rem; min-height: auto; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFormActions { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--model-border); }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFormActions > div { display: flex; gap: 0.5rem; }

:is(
  .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
  .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
  .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
  .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
) .modelFormAside .modelProgress { margin: 0.8rem 0 0.35rem; }

@media (max-width: 70rem) {
  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) :is(.modelMetricGrid, .modelProjectSummary) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) .modelArticleLayout { grid-template-columns: 11rem minmax(0, 1fr); }

  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) .modelRelated { grid-column: 2; }

  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) :is(.modelWebsiteHero, .modelFormLayout) { grid-template-columns: 1fr; }
}

@media (max-width: 48rem) {
  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) .form { padding: 0.35rem; }

  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) .modelShell { padding: 0.8rem; border-radius: 0.65rem; }

  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) :is(.modelHeader, .modelDocumentHeader, .modelShopHeader, .modelWebsiteCta, .modelShopBanner) { align-items: stretch; flex-direction: column; }

  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) :is(.modelMetricGrid, .modelProjectSummary, .modelGrid, .modelFilterBar, .modelControlGrid, .modelNoteGrid, .modelAssessmentGrid, .modelSignatureGrid, .modelFeatureGrid, .modelProductGrid, .modelInputGrid, .modelSlideSystem) { grid-template-columns: 1fr; }

  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) :is(.modelSpan2, .modelInputSpan2, .modelSlideSystem > strong) { grid-column: auto; }

  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) .modelTimeline li { grid-template-columns: 1fr; gap: 0.3rem; }

  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) .modelFlow { grid-template-columns: 1fr; }

  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) :is(.modelFlowArrow, .modelFlowBranch, .modelFlowMerge) { grid-column: auto; display: block; padding: 0.2rem; text-align: center; }

  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) .modelFlowBranch + .modelFlowNode,
  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) .modelFlowBranch + .modelFlowNode + .modelFlowNode,
  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) .modelFlowMerge + .modelFlowNode { grid-column: auto; }

  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) .modelArticleLayout { grid-template-columns: 1fr; }

  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) .modelRelated { grid-column: auto; }

  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) .modelWebsiteHero { min-height: 0; padding: 1.4rem; }

  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) .modelPresentationLayout { grid-template-columns: 1fr; }

  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) .modelSlideRail { grid-template-columns: repeat(5, minmax(8rem, 1fr)); overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--model-border); }

  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) .modelSlide { padding: 1.3rem; min-height: 24rem; }

  :is(
    .sys-35-model, .sys-36-model, .sys-37-model, .sys-38-model,
    .sys-39-model, .sys-40-model, .sys-41-model, .sys-42-model,
    .sys-43-model, .sys-44-model, .sys-45-model, .sys-46-model,
    .sys-47-model, .sys-48-model, .sys-49-model, .sys-50-model
  ) .modelSteps { grid-template-columns: repeat(2, 1fr); }
}