:root {
  color-scheme: dark;
  --bg: #05070a;
  --panel: #0c1015;
  --panel-2: #141a22;
  --panel-3: #1a222c;
  --line: #252c35;
  --line-strong: #3a4654;
  --muted: #8e98a5;
  --soft: #d7dde5;
  --text: #ffffff;
  --red: #e71936;
  --red-dark: #940f25;
  --red-bright: #ff3650;
  --blue: #2f86ff;
  --blue-dark: #124a91;
  --blue-bright: #67b0ff;
  --green: #20c46b;
  --radius: 8px;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.62);
  --surface-shadow:
    0 18px 46px rgba(0, 0, 0, 0.34),
    0 2px 8px rgba(0, 0, 0, 0.38),
    inset 0 1px rgba(255, 255, 255, 0.055);
}

/* Silent House inspired type scale and catalog rhythm · 2026-08-05 */
:root {
  --display-font: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

body {
  font-family: var(--display-font);
  font-weight: 400;
  letter-spacing: -0.025em;
  -webkit-font-smoothing: antialiased;
}

.nav a,
.topAction,
.button,
.smallButton {
  font-weight: 400;
}

.cinematicHero h1,
.projectsHero h1,
.caseHero h1,
.interfacePage .pageHero h1,
.accountHero h1 {
  font-family: var(--display-font);
  font-size: clamp(54px, 7vw, 108px);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.055em;
}

.interfacePage .pageHero h1 {
  font-size: clamp(50px, 6vw, 92px);
}

.cinematicSectionHead h2,
.conceptFeatureCopy h2,
.equipmentProjectUse h2,
.accountPromise > h2,
.accountCanvasHeader h2 {
  font-family: var(--display-font);
  font-size: clamp(38px, 4.2vw, 64px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.projectOverlay h3,
.projectCardCinematic h3,
.accountBlockHead h3,
.accountSyncCard h3,
.accountRoomsHero h3 {
  font-family: var(--display-font);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.04em;
}

.projectOverlay h3,
.projectCardCinematic h3 {
  font-size: clamp(30px, 3vw, 48px);
}

.closingCall h2 {
  font-family: var(--display-font);
  font-size: clamp(42px, 5vw, 76px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.05em;
}

.accountRoomsHero h3 {
  max-width: 900px;
  font-size: clamp(42px, 5.4vw, 78px);
}

.accountMetricGrid strong,
.scaleMetrics strong {
  font-weight: 400;
}

.scaleMetrics > div {
  min-width: 0;
  padding-right: 16px;
  padding-left: 16px;
}

.scaleMetrics strong {
  font-size: clamp(36px, 3.25vw, 52px);
  line-height: 1;
  letter-spacing: -.05em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.scaleMetrics span {
  max-width: 140px;
}

.processTrack {
  align-items: stretch;
  margin-top: 58px;
}

.processTrack li,
.processTrack li:nth-child(even) {
  min-height: 232px;
  padding: 44px 16px 22px 0;
}

.processTrack li::after,
.processTrack li:nth-child(even)::after {
  height: 28px;
}

.processTrack b {
  display: flex;
  align-items: flex-end;
  min-height: 24px;
  margin-top: auto;
  font-family: var(--display-font);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.processTrack small {
  min-height: 46px;
  font-size: 11px;
  line-height: 1.45;
}

.interfacePage[data-page="category"] .equipmentCard {
  grid-template-rows: 270px minmax(286px, 1fr) 112px;
  min-height: 668px;
}

.interfacePage[data-page="category"] .equipmentPhoto {
  height: 270px;
  min-height: 0;
}

.interfacePage[data-page="category"] .equipmentPhoto img {
  width: 80%;
  height: 80%;
  max-width: 80%;
  max-height: 80%;
  padding: 10px;
  object-fit: contain;
}

.interfacePage[data-page="category"] .equipmentCardBody {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 22px 20px 12px;
}

.interfacePage[data-page="category"] .cardTop {
  min-height: 25px;
  margin-bottom: 14px;
}

.interfacePage[data-page="category"] .equipmentCard h3 {
  display: -webkit-box;
  min-height: 48px;
  margin: 0;
  overflow: hidden;
  font-family: var(--display-font);
  font-size: clamp(20px, 1.65vw, 24px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.035em;
  overflow-wrap: normal;
  word-break: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.interfacePage[data-page="category"] .equipmentCard p {
  display: -webkit-box;
  min-height: 70px;
  margin: 12px 0 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.interfacePage[data-page="category"] .cardMeta {
  margin-top: auto;
  margin-bottom: 0;
}

.interfacePage[data-page="category"] .cardActions {
  align-content: end;
  min-height: 112px;
  padding: 0 20px 20px;
}

.interfacePage[data-page="category"] .cardActions .smallButton {
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.15;
}

@media (max-width: 760px) {
  .brandOfficialWordmark { display: none; }

  .cinematicHero h1,
  .projectsHero h1,
  .caseHero h1,
  .interfacePage .pageHero h1,
  .accountHero h1 {
    font-size: clamp(42px, 12vw, 52px);
    line-height: .97;
  }

  .cinematicSectionHead h2,
  .conceptFeatureCopy h2,
  .equipmentProjectUse h2,
  .accountPromise > h2,
  .accountCanvasHeader h2 {
    font-size: clamp(34px, 9.5vw, 42px);
    line-height: 1.03;
  }

  .closingCall h2 {
    font-size: clamp(38px, 11vw, 48px);
  }

  .scaleMetrics strong,
  .scaleMetrics > div:last-child strong {
    font-size: clamp(48px, 14vw, 62px);
    white-space: nowrap;
  }

  .processTrack li,
  .processTrack li:nth-child(even) {
    min-height: 220px;
    padding-top: 42px;
  }

  .interfacePage[data-page="category"] .equipmentCard {
    grid-template-rows: 350px auto auto;
    min-height: 0;
  }

  .interfacePage[data-page="category"] .equipmentPhoto {
    height: 350px;
  }

  .interfacePage[data-page="category"] .equipmentCard h3 {
    min-height: 0;
    font-size: 23px;
  }

  .interfacePage[data-page="category"] .equipmentCard p {
    min-height: 0;
    font-size: 13px;
  }

  .interfacePage[data-page="category"] .cardActions {
    min-height: 0;
  }
}

/* 2026-08-14 · GTO Workspace clarity pass. Account-only, keep after global rules. */
body[data-page="account"] {
  --paper: #f4f3ef;
  --accent: var(--red);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body[data-page="account"]:not(.isAccountReady) .accountGate {
  visibility: hidden;
}

body[data-page="account"] .accountHero {
  min-height: clamp(620px, 70svh, 760px);
  padding-top: clamp(112px, 10vw, 156px);
  padding-bottom: clamp(66px, 7vw, 96px);
}

body[data-page="account"] .accountHeroCopy {
  max-width: 980px;
}

body[data-page="account"] .accountHero h1 {
  max-width: 900px;
  margin-bottom: 26px;
}

body[data-page="account"] .accountHero p {
  max-width: 650px;
}

body[data-page="account"] .accountHeroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  align-items: center;
  margin-top: 34px;
}

body[data-page="account"] .accountHeroActions .button {
  min-width: 230px;
  min-height: 52px;
}

body[data-page="account"] .accountTextLink {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  color: #aaa;
  font-size: 12px;
  text-decoration: none;
  transition: border-color 180ms ease, color 180ms ease;
}

body[data-page="account"] .accountTextLink:hover {
  border-color: var(--red);
  color: #fff;
}

body[data-page="account"] .accountGate {
  min-height: 760px;
}

body[data-page="account"] .accountPromiseGrid article {
  min-height: 210px;
}

body[data-page="account"] .accountPromiseGrid strong {
  margin-top: 38px;
}

body[data-page="account"] .accountLaunchNotice {
  margin-top: 34px;
  padding: 22px;
  border-color: rgba(237, 23, 57, .52);
  background: linear-gradient(145deg, rgba(237, 23, 57, .15), rgba(237, 23, 57, .025) 68%), #080606;
  color: #f2efe8;
}

body[data-page="account"] .accountLaunchNotice small {
  color: #777;
  font-size: 10px;
  line-height: 1.5;
}

body[data-page="account"] .accountWorkspace {
  grid-template-columns: 268px minmax(0, 1fr);
}

body[data-page="account"] .accountSidebar {
  top: var(--gto-header-height);
  min-height: calc(100svh - var(--gto-header-height));
  max-height: calc(100svh - var(--gto-header-height));
  overflow-y: auto;
}

body[data-page="account"] .accountIdentity {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: #f2efe8;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

body[data-page="account"] .accountIdentity:hover,
body[data-page="account"] .accountIdentity.isActive {
  background: linear-gradient(90deg, rgba(237, 23, 57, .1), transparent 72%);
}

body[data-page="account"] .accountIdentity > span:last-child {
  min-width: 0;
}

body[data-page="account"] .accountIdentity em {
  display: block;
  margin-top: 7px;
  color: #8b5961;
  font: 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-style: normal;
  letter-spacing: .09em;
}

body[data-page="account"] .accountNavGroup {
  display: block;
  margin: 18px 13px 4px;
  color: #4f4f4f;
  font: 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body[data-page="account"] .accountSidebar nav {
  gap: 2px;
  margin-top: 12px;
}

body[data-page="account"] .accountSidebar nav button {
  min-height: 42px;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

body[data-page="account"] .accountSidebar nav button:hover {
  border-left-color: rgba(237, 23, 57, .36);
  background: rgba(255, 255, 255, .025);
  color: #bbb;
}

body[data-page="account"] .accountSidebar nav button.isActive {
  border-left-color: var(--red);
  background: linear-gradient(90deg, rgba(237, 23, 57, .12), rgba(255, 255, 255, .018));
  color: #fff;
}

body[data-page="account"] .accountCanvas {
  padding: clamp(34px, 4.2vw, 66px);
}

body[data-page="account"] .accountCanvasHeader {
  align-items: center;
  margin-bottom: clamp(34px, 4.5vw, 58px);
}

body[data-page="account"][data-account-current-view]:not([data-account-current-view="overview"]) .accountCanvasHeader {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

body[data-page="account"][data-account-current-view]:not([data-account-current-view="overview"]) .accountCanvasHeader h2 {
  margin-top: 12px;
  font-size: clamp(30px, 3.5vw, 48px);
  line-height: 1;
}

body[data-page="account"] .accountPlan {
  min-width: 136px;
  background: rgba(8, 8, 8, .72);
}

body[data-page="account"].accountIsDemo .accountPlan {
  border-color: rgba(237, 23, 57, .46);
  background: rgba(237, 23, 57, .06);
}

body[data-page="account"] .accountWorkspaceStatus {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  margin: -16px 0 28px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: #080808;
  color: #aaa;
  font-size: 11px;
}

body[data-page="account"] .accountWorkspaceStatus[hidden] {
  display: none;
}

body[data-page="account"] .accountWorkspaceStatus[data-type="loading"]::before {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border: 1px solid var(--red);
  border-top-color: transparent;
  border-radius: 50%;
  content: "";
  animation: accountWorkspaceSpin 800ms linear infinite;
}

body[data-page="account"] .accountWorkspaceStatus[data-type="loading"] span {
  margin-right: auto;
}

body[data-page="account"] .accountWorkspaceStatus[data-type="error"] {
  border-color: rgba(237, 23, 57, .58);
  color: #f1a0ad;
  background: rgba(237, 23, 57, .07);
}

body[data-page="account"] .accountWorkspaceStatus button {
  padding: 9px 12px;
  border: 1px solid var(--red);
  background: transparent;
  color: #fff;
  cursor: pointer;
}

@keyframes accountWorkspaceSpin { to { transform: rotate(360deg); } }

body[data-page="account"] .accountWelcomeGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 1px;
  margin-bottom: 1px;
  background: var(--line);
}

body[data-page="account"] .accountWelcomeCard,
body[data-page="account"] .accountNextStep {
  min-height: 260px;
  padding: clamp(28px, 3.5vw, 46px);
  background: #070707;
}

body[data-page="account"] .accountWelcomeCard {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  background:
    radial-gradient(circle at 0 0, rgba(237, 23, 57, .13), transparent 38%),
    #070707;
}

body[data-page="account"] .accountOverviewAvatar {
  width: 72px;
  height: 72px;
  font-size: 16px;
}

body[data-page="account"] .accountWelcomeCard h3,
body[data-page="account"] .accountNextStep h3 {
  margin: 16px 0 8px;
  font-size: clamp(27px, 3vw, 42px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
}

body[data-page="account"] .accountWelcomeCard p,
body[data-page="account"] .accountNextStep p {
  margin: 0;
  color: #838383;
  font-size: 12px;
  line-height: 1.55;
}

body[data-page="account"] .accountWelcomeCard > button,
body[data-page="account"] .accountNextStep :is(a, button) {
  align-self: end;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  background: transparent;
  color: #ddd;
  font-size: 10px;
  text-decoration: none;
  cursor: pointer;
}

body[data-page="account"] .accountNextStep {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 100% 0, rgba(237, 23, 57, .18), transparent 42%),
    #090707;
}

body[data-page="account"] .accountNextStep p {
  max-width: 520px;
  margin-top: 14px;
}

body[data-page="account"] #accountNextAction {
  margin-top: auto;
  padding-top: 24px;
}

body[data-page="account"] .accountQuickActions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 1px;
  background: var(--line);
}

body[data-page="account"] .accountQuickActions :is(a, button) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  min-height: 102px;
  padding: 18px;
  border: 0;
  background: #080808;
  color: #d8d8d8;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

body[data-page="account"] .accountQuickActions :is(a, button):hover {
  background: linear-gradient(145deg, rgba(237, 23, 57, .1), #0b0b0b);
  color: #fff;
}

body[data-page="account"] .accountQuickActions span {
  grid-column: 1 / -1;
  color: #555;
  font: 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

body[data-page="account"] .accountQuickActions strong {
  max-width: 170px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.25;
}

body[data-page="account"] .accountQuickActions i {
  color: var(--red);
  font-style: normal;
}

body[data-page="account"] .accountMetricGrid article {
  min-height: 172px;
  padding: 20px;
}

body[data-page="account"] .accountMetricGrid strong {
  font-size: clamp(42px, 4.2vw, 62px);
}

body[data-page="account"] .accountOverviewGrid {
  grid-template-columns: minmax(0, 1.14fr) minmax(340px, .86fr);
}

body[data-page="account"] .accountRecent {
  min-height: 520px;
}

body[data-page="account"] .accountOverviewRail {
  display: grid;
  gap: 1px;
  min-width: 0;
  background: var(--line);
}

body[data-page="account"] .accountActivityCard,
body[data-page="account"] .accountSyncCard {
  min-height: 0;
  padding: clamp(26px, 3vw, 38px);
  background: #070707;
}

body[data-page="account"] .accountActivityCard .accountBlockHead {
  align-items: start;
  margin-bottom: 20px;
}

body[data-page="account"] .accountActivityCard .accountBlockHead h3,
body[data-page="account"] .accountSyncCard h3 {
  font-size: clamp(25px, 2.8vw, 38px);
}

body[data-page="account"] .accountActivityPreview {
  border-top: 1px solid var(--line);
}

body[data-page="account"] .accountActivityPreview > button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: #bbb;
  text-align: left;
  cursor: pointer;
}

body[data-page="account"] .accountActivityPreview > button.isUnread {
  color: #fff;
}

body[data-page="account"] .accountActivityPreview > button.isUnread::before {
  position: absolute;
  width: 3px;
  height: 22px;
  margin-left: -14px;
  background: var(--red);
  content: "";
}

body[data-page="account"] .accountActivityPreview strong,
body[data-page="account"] .accountActivityPreview small {
  display: block;
}

body[data-page="account"] .accountActivityPreview strong {
  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;
}

body[data-page="account"] .accountActivityPreview small {
  margin-top: 4px;
  color: #606060;
  font-size: 8px;
}

body[data-page="account"] .accountActivityPreview i {
  color: #666;
  font-style: normal;
}

body[data-page="account"] .accountRecentList > article {
  display: block;
  min-height: 0;
}

body[data-page="account"] .accountRecentList > article > button {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 18px;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 74px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #eee;
  text-align: left;
  cursor: pointer;
  transition: background 180ms ease;
}

body[data-page="account"] .accountRecentList > article > button:hover {
  background: rgba(255, 255, 255, .025);
}

body[data-page="account"] .accountRecentList > article > button > span:first-child,
body[data-page="account"] .accountRecentList time {
  color: #646464;
  font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

body[data-page="account"] .accountRecentList > article i {
  color: var(--red);
  font-style: normal;
}

body[data-page="account"] .accountArtifactCard,
body[data-page="account"] .accountArtifactRow {
  transition: border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

body[data-page="account"] :is(.accountArtifactCard, .accountArtifactRow).isHighlighted {
  border-color: rgba(237, 23, 57, .8);
  background: rgba(237, 23, 57, .065);
  box-shadow: 0 0 32px rgba(237, 23, 57, .13);
}

body[data-page="account"] .accountEmptyState :is(a, button) {
  justify-self: center;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  background: transparent;
  color: #ddd;
  font: inherit;
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
}

body[data-page="account"] .accountNetworkRail .accountEmptyState {
  min-height: 180px;
  padding: 20px 4px;
}

body[data-page="account"] #accountRecommendations {
  display: grid;
  border-top: 1px solid var(--line);
}

body[data-page="account"] #accountRecommendations > button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: #eee;
  text-align: left;
  cursor: pointer;
}

body[data-page="account"] #accountRecommendations > button > span:nth-child(2) :is(strong, small),
body[data-page="account"] #accountRecommendations > button > i {
  display: block;
}

body[data-page="account"] #accountRecommendations > button strong {
  font-size: 10px;
}

body[data-page="account"] #accountRecommendations > button small {
  margin-top: 4px;
  color: #686868;
  font-size: 8px;
  line-height: 1.4;
}

body[data-page="account"] #accountRecommendations > button > i {
  grid-column: 2;
  color: #8b5961;
  font-size: 7px;
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body[data-page="account"] .accountComposerCheck input {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
}

body[data-page="account"] .accountProfileHome {
  display: grid;
  gap: 1px;
  background: var(--line);
}

body[data-page="account"] .accountProfileHomeHero {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  min-height: 330px;
  padding: clamp(36px, 5vw, 68px);
  background:
    radial-gradient(circle at 18% 20%, rgba(237, 23, 57, .2), transparent 34%),
    linear-gradient(145deg, #111, #050505 66%);
}

body[data-page="account"] .accountProfileHomeAvatar {
  width: 108px;
  height: 108px;
  font-size: 22px;
}

body[data-page="account"] .accountProfileHomeHero span {
  color: #ff3150;
  font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
}

body[data-page="account"] .accountProfileHomeHero h3 {
  margin: 14px 0 8px;
  font-size: clamp(45px, 6vw, 82px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.06em;
}

body[data-page="account"] .accountProfileHomeHero p {
  margin: 0;
  color: #808080;
  font-size: 12px;
}

body[data-page="account"] .accountProfileHomeHero > button {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid #777;
  background: transparent;
  color: #ddd;
  font-size: 10px;
  cursor: pointer;
}

body[data-page="account"] .accountProfileHomeBody {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: 1px;
  background: var(--line);
}

body[data-page="account"] .accountProfileAbout,
body[data-page="account"] .accountProfileHomeStats,
body[data-page="account"] .accountProfileSettings {
  padding: clamp(30px, 4vw, 52px);
  background: #070707;
}

body[data-page="account"] .accountProfileAbout > p {
  max-width: 760px;
  margin: 26px 0;
  color: #c3c3c3;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.45;
}

body[data-page="account"] .accountProfileHomeSkills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

body[data-page="account"] .accountProfileHomeSkills :is(span, button) {
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: #999;
  font-size: 9px;
}

body[data-page="account"] .accountProfileHomeStats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 1px;
  padding: 1px;
  background: rgba(255, 255, 255, .08);
}

body[data-page="account"] .accountProfileHomeStats button {
  display: grid;
  gap: 8px;
  place-content: center;
  min-height: 150px;
  border: 0;
  background: #080808;
  color: #777;
  text-align: center;
  cursor: pointer;
}

body[data-page="account"] .accountProfileHomeStats strong {
  color: #fff;
  font-size: 36px;
  font-weight: 400;
}

body[data-page="account"] .accountProfileHomeStats span {
  font-size: 8px;
  text-transform: uppercase;
}

body[data-page="account"] .accountProfileSettings {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr);
  gap: 48px;
}

body[data-page="account"] .accountProfileSettings h4 {
  margin: 18px 0 10px;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 400;
}

body[data-page="account"] .accountProfileSettings p {
  max-width: 620px;
  color: #777;
  font-size: 12px;
  line-height: 1.55;
}

body[data-page="account"] .accountProfileSettings > div:last-child {
  display: grid;
  align-content: start;
}

body[data-page="account"] .accountProfileSettings button {
  min-height: 48px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: #aaa;
  font-size: 10px;
  text-align: left;
  cursor: pointer;
}

body[data-page="account"] .accountNotificationList article {
  padding: 0;
}

body[data-page="account"] .accountNotificationList article > button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 94px;
  padding: 18px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

body[data-page="account"] .accountNotificationList article > button > i {
  color: #555;
  font-style: normal;
}

body[data-page="account"] .accountRoomProgressNote {
  margin: 18px 0 28px;
  color: #6f6f6f;
  font-size: 10px;
  line-height: 1.5;
}

body[data-page="account"] :is(
  .accountBlockHead button,
  .accountBlockHead a,
  .accountPeopleStack button,
  #accountRecommendations > button,
  .accountConversationList > button,
  .accountRoomList button,
  .accountProfileActions button,
  .accountRoomBoard > nav button,
  .accountSocialPost > footer button,
  .accountProfileSettings button
) {
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, opacity 180ms ease;
}

body[data-page="account"] :is(
  .accountBlockHead button,
  .accountBlockHead a,
  .accountPeopleStack button,
  #accountRecommendations > button,
  .accountConversationList > button,
  .accountRoomList button,
  .accountProfileActions button,
  .accountRoomBoard > nav button,
  .accountSocialPost > footer button,
  .accountProfileSettings button
):hover {
  color: #fff;
}

body[data-page="account"] :is(input, select, textarea, button, a):focus-visible {
  outline: 2px solid rgba(255, 49, 80, .95);
  outline-offset: 3px;
}

body[data-page="account"] .accountPostComposer textarea:focus-visible {
  border-color: var(--red);
  outline: 2px solid rgba(255, 49, 80, .45);
  outline-offset: 2px;
}

body[data-page="account"] :is(.accountProfilePanel, .accountCommentsPanel, .accountDialog) {
  z-index: 1200;
}

body[data-page="account"] .accountToast {
  z-index: 1250;
  bottom: 88px;
}

@media (max-width: 960px) {
  body[data-page="account"] .accountWorkspace {
    display: block;
  }

  body[data-page="account"] .accountSidebar {
    position: static;
    min-height: 0;
    max-height: none;
    padding: 20px 18px;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  body[data-page="account"] .accountIdentity {
    max-width: 360px;
  }

  body[data-page="account"] .accountSidebar nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-page="account"] .accountNavGroup {
    display: none;
  }

  body[data-page="account"] .accountSidebar nav button {
    min-height: 48px;
    border: 1px solid transparent;
    border-left: 1px solid transparent;
  }

  body[data-page="account"] .accountSidebar nav button.isActive {
    border-color: rgba(237, 23, 57, .72);
  }

  body[data-page="account"] .accountLogout {
    width: auto;
    margin-top: 14px;
  }

  body[data-page="account"] .accountWelcomeGrid,
  body[data-page="account"] .accountOverviewGrid,
  body[data-page="account"] .accountProfileHomeBody,
  body[data-page="account"] .accountProfileSettings {
    grid-template-columns: 1fr;
  }

  body[data-page="account"] .accountQuickActions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="account"] .accountSocialLayout,
  body[data-page="account"] .accountMessenger,
  body[data-page="account"] .accountRoomsWorkspace {
    grid-template-columns: 1fr;
    max-height: none;
  }

  body[data-page="account"] .accountNetworkRail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="account"] .accountConversationList,
  body[data-page="account"] .accountRoomList {
    display: flex;
    overflow-x: auto;
  }

  body[data-page="account"] .accountConversationList > button {
    flex: 0 0 250px;
  }

  body[data-page="account"] .accountRoomList button {
    flex: 0 0 260px;
  }

  body[data-page="account"] .accountChatContext,
  body[data-page="account"] .accountRoomPulse {
    display: block;
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  body[data-page="account"] .accountHero {
    min-height: 620px;
    padding: 92px 18px 58px;
  }

  body[data-page="account"] .accountHero::after {
    top: 8%;
  }

  body[data-page="account"] .accountHeroIndex {
    top: 18px;
  }

  body[data-page="account"] .accountHero h1 {
    max-width: 350px;
    margin-top: 20px;
  }

  body[data-page="account"] .accountHeroActions {
    align-items: stretch;
    flex-direction: column;
    margin-top: 28px;
  }

  body[data-page="account"] .accountHeroActions .button {
    width: 100%;
  }

  body[data-page="account"] .accountHeroSignal {
    bottom: 22px;
  }

  body[data-page="account"] .accountPromise,
  body[data-page="account"] .accountAuth {
    padding: 52px 18px;
  }

  body[data-page="account"] .accountPromise > h2 {
    margin-bottom: 38px;
  }

  body[data-page="account"] .accountPromiseGrid article {
    min-height: 180px;
    padding: 24px;
  }

  body[data-page="account"] .accountSidebar {
    padding: 16px 12px 10px;
  }

  body[data-page="account"] .accountIdentity {
    max-width: none;
    padding-bottom: 16px;
  }

  body[data-page="account"] .accountSidebar nav {
    display: flex;
    gap: 5px;
    margin-top: 10px;
    padding-bottom: 7px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body[data-page="account"] .accountSidebar nav::-webkit-scrollbar {
    display: none;
  }

  body[data-page="account"] .accountSidebar nav button {
    flex: 0 0 152px;
    min-height: 44px;
    padding: 0 10px;
  }

  body[data-page="account"] .accountLogout {
    min-height: 40px;
    margin-top: 3px;
  }

  body[data-page="account"] .accountCanvas {
    padding: 28px 14px 60px;
  }

  body[data-page="account"] .accountCanvasHeader {
    align-items: start;
    margin-bottom: 28px;
  }

  body[data-page="account"] .accountCanvasHeader h2,
  body[data-page="account"][data-account-current-view]:not([data-account-current-view="overview"]) .accountCanvasHeader h2 {
    font-size: clamp(32px, 10vw, 42px);
  }

  body[data-page="account"] .accountPlan {
    min-width: 104px;
    padding: 10px;
  }

  body[data-page="account"] .accountWelcomeCard {
    grid-template-columns: 54px minmax(0, 1fr);
    min-height: 220px;
    padding: 24px 18px;
  }

  body[data-page="account"] .accountOverviewAvatar {
    width: 54px;
    height: 54px;
  }

  body[data-page="account"] .accountWelcomeCard > button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  body[data-page="account"] .accountNextStep {
    min-height: 250px;
    padding: 28px 20px;
  }

  body[data-page="account"] .accountWelcomeCard h3,
  body[data-page="account"] .accountNextStep h3 {
    font-size: 30px;
  }

  body[data-page="account"] .accountQuickActions {
    grid-template-columns: 1fr;
  }

  body[data-page="account"] .accountQuickActions :is(a, button) {
    min-height: 78px;
  }

  body[data-page="account"] .accountMetricGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-page="account"] .accountMetricGrid article {
    min-height: 148px;
    padding: 17px;
  }

  body[data-page="account"] .accountMetricGrid small {
    font-size: 8px;
  }

  body[data-page="account"] .accountRecent,
  body[data-page="account"] .accountActivityCard,
  body[data-page="account"] .accountSyncCard {
    min-height: 0;
    padding: 28px 18px;
  }

  body[data-page="account"] .accountBlockHead {
    align-items: start;
    flex-direction: column;
  }

  body[data-page="account"] .accountRecentList > article > button {
    grid-template-columns: 26px minmax(0, 1fr) 14px;
    min-height: 78px;
  }

  body[data-page="account"] .accountRecentList time {
    display: none;
  }

  body[data-page="account"] .accountSocialLayout {
    display: flex;
    flex-direction: column;
  }

  body[data-page="account"] .accountFeedColumn {
    display: contents;
  }

  body[data-page="account"] .accountPostComposer { order: 1; }
  body[data-page="account"] .accountFeedScopes { order: 2; }
  body[data-page="account"] .accountFeedFilters { order: 3; }
  body[data-page="account"] .accountNetworkRail {
    display: contents;
  }

  body[data-page="account"] .accountNetworkRail > section:first-child {
    order: 4;
    padding: 24px 18px;
    background: #050505;
  }

  body[data-page="account"] .accountSocialFeed { order: 5; }

  body[data-page="account"] .accountNetworkRail > section:last-child {
    order: 6;
    padding: 28px 18px;
    background: #050505;
  }

  body[data-page="account"] .accountPeopleStack {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  body[data-page="account"] .accountPeopleStack button {
    flex: 0 0 min(238px, 76vw);
    padding: 14px;
    border: 1px solid var(--line);
    scroll-snap-align: start;
  }

  body[data-page="account"] .accountSocialMedia button {
    display: block;
    top: 14px;
    right: 14px;
    bottom: auto;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(5, 5, 5, .74);
    backdrop-filter: blur(12px);
  }

  body[data-page="account"] .accountComposerActions {
    align-items: stretch;
    gap: 12px;
  }

  body[data-page="account"] .accountComposerActions label {
    justify-content: space-between;
  }

  body[data-page="account"] .accountComposerCheck {
    justify-content: flex-start !important;
  }

  body[data-page="account"] .accountProfileHomeHero {
    grid-template-columns: 72px minmax(0, 1fr);
    min-height: 270px;
    padding: 34px 18px;
  }

  body[data-page="account"] .accountProfileHomeAvatar {
    width: 72px;
    height: 72px;
    font-size: 16px;
  }

  body[data-page="account"] .accountProfileHomeHero h3 {
    font-size: 42px;
  }

  body[data-page="account"] .accountProfileHomeHero > button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  body[data-page="account"] .accountProfileAbout,
  body[data-page="account"] .accountProfileHomeStats,
  body[data-page="account"] .accountProfileSettings {
    padding: 28px 18px;
  }

  body[data-page="account"] .accountProfileHomeStats {
    grid-template-columns: repeat(3, 1fr);
    padding: 1px;
  }

  body[data-page="account"] .accountProfileHomeStats button {
    min-height: 110px;
  }

  body[data-page="account"] .accountProfileHomeStats strong {
    font-size: 28px;
  }

  body[data-page="account"] .accountProfileSettings {
    gap: 22px;
  }

  body[data-page="account"] .accountNotificationList article > button {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    padding: 14px 10px;
  }

  body[data-page="account"] .accountToast {
    right: 14px;
    bottom: calc(82px + env(safe-area-inset-bottom));
    left: 14px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="account"] *,
  body[data-page="account"] *::before,
  body[data-page="account"] *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 2026-08-05: full-access GTO Exchange interactions without paid tiers. */
.accountConversationEmpty {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
  color: var(--muted);
}

.accountConversationEmpty strong,
.accountChatEmpty strong {
  color: var(--paper);
}

.accountConversationEmpty button {
  width: fit-content;
  padding: 0;
  border: 0;
  color: var(--accent);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.accountChatEmpty {
  min-height: 100%;
  display: grid;
  place-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: var(--muted);
  text-align: center;
}

.accountChatEmpty span {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.accountComposerActions {
  flex-wrap: wrap;
  justify-content: flex-start;
}
.accountComposerActions label:not(.accountComposerCheck) {
  display: grid;
  gap: 5px;
}
.accountComposerActions label > span {
  color: #555;
  font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.accountComposerActions select,
.accountRoomComposer select {
  min-height: 34px;
  border: 1px solid var(--line);
  background: #080808;
  color: #aaa;
  font: 10px/1 var(--display-font);
}
.accountComposerCheck { margin-right: auto; align-items: center; }
.accountPeopleSearch { display: block; margin: 0 0 12px; }
.accountPeopleSearch input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  background: #080808;
  color: #fff;
  font: 10px/1 var(--display-font);
}

.accountCommentsPanel[hidden],
.accountDialog[hidden] { display: none; }
.accountCommentsPanel,
.accountDialog {
  position: fixed;
  z-index: 470;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr minmax(440px, 680px);
}
.accountCommentsSheet,
.accountDialogPanel {
  min-width: 0;
  overflow-y: auto;
  border-left: 1px solid rgba(237,23,57,.46);
  background: #050505;
  box-shadow: -34px 0 110px rgba(0,0,0,.72);
}
.accountCommentsHead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 42px 34px 28px;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 90% 0,rgba(237,23,57,.16),transparent 45%),#080808;
}
.accountCommentsHead h3 { margin: 10px 0 0; font-size: 42px; font-weight: 400; letter-spacing: -.045em; }
.accountCommentsHead button,
.accountDialogClose {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  background: #090909;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}
.accountCommentOrigin {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 14px;
  padding: 26px 34px;
  border-bottom: 1px solid var(--line);
}
.accountCommentOrigin strong,
.accountCommentList strong { font-size: 11px; }
.accountCommentOrigin p,
.accountCommentList p { margin: 8px 0 0; color: #aaa; font-size: 13px; line-height: 1.5; }
.accountCommentList { display: grid; padding: 0 34px; }
.accountCommentList > article {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: 12px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.accountCommentList time { display: block; margin-top: 8px; color: #555; font-size: 8px; }
.accountCommentComposer {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  padding: 18px 34px;
  border-top: 1px solid var(--line);
  background: rgba(5,5,5,.96);
  backdrop-filter: blur(14px);
}
.accountCommentComposer textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  border: 1px solid var(--line);
  background: #080808;
  color: #fff;
  font: 12px/1.45 var(--display-font);
}
.accountCommentComposer button,
.accountRoomComposer button {
  border: 1px solid var(--red);
  background: var(--red);
  color: #fff;
  font-size: 10px;
  cursor: pointer;
}

.accountNotificationList { display: grid; border: 1px solid var(--line); }
.accountNotificationList > article {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 8px;
  gap: 15px;
  align-items: center;
  min-height: 92px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  background: #070707;
}
.accountNotificationList > article:last-child { border-bottom: 0; }
.accountNotificationList > article.isUnread { background: linear-gradient(90deg,rgba(237,23,57,.12),transparent 55%),#080707; }
.accountNotificationList strong { font-size: 12px; }
.accountNotificationList p { margin: 6px 0; color: #888; font-size: 11px; }
.accountNotificationList time { color: #555; font-size: 8px; }
.accountNotificationList article > i { width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.accountNotificationList article.isUnread > i { background: var(--red); box-shadow: 0 0 14px rgba(237,23,57,.72); }

.accountRoomBoard > header p { max-width: 620px; margin: 12px 0 0; color: #666; font-size: 11px; line-height: 1.5; }
.accountRoomTimeline small { display: block; margin-top: 7px; color: #4f4f4f; font-size: 8px; }
.accountRoomComposer {
  display: grid;
  grid-template-columns: minmax(0,1fr) 130px auto;
  gap: 8px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.accountRoomComposer textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  border: 1px solid var(--line);
  background: #050505;
  color: #fff;
  font: 11px/1.45 var(--display-font);
}
.accountRoomComposer label:nth-child(2) { display: grid; align-content: start; gap: 5px; color: #555; font-size: 8px; }

.accountDialog { grid-template-columns: 1fr minmax(420px, 620px); }
.accountDialogPanel { position: relative; padding: 72px 42px; }
.accountDialogClose { position: absolute; top: 22px; right: 22px; }
.accountDialogPanel h2 { max-width: 520px; margin: 16px 0 34px; font-size: clamp(38px,4.5vw,64px); font-weight: 400; line-height: .95; letter-spacing: -.055em; }
.accountDialogForm { display: grid; gap: 16px; }
.accountDialogForm label { display: grid; gap: 8px; color: #777; font-size: 9px; text-transform: uppercase; }
.accountDialogForm input,
.accountDialogForm textarea,
.accountDialogForm select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  background: #080808;
  color: #fff;
  font: 13px/1.45 var(--display-font);
}
.accountDialogForm textarea { min-height: 130px; resize: vertical; }

@media (max-width: 760px) {
  .accountComposerActions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .accountComposerCheck,
  .accountComposerActions button { grid-column: 1 / -1; }
  .accountCommentsPanel,
  .accountDialog { grid-template-columns: 1fr; }
  .accountCommentsSheet,
  .accountDialogPanel { border-left: 0; }
  .accountCommentsHead { padding: 34px 18px 24px; }
  .accountCommentsHead h3 { font-size: 34px; }
  .accountCommentOrigin,
  .accountCommentList { padding-right: 18px; padding-left: 18px; }
  .accountCommentComposer { grid-template-columns: 1fr; padding: 14px 18px; }
  .accountCommentComposer button { min-height: 46px; }
  .accountRoomComposer { grid-template-columns: 1fr; }
  .accountRoomComposer button { min-height: 46px; }
  .accountDialogPanel { padding: 68px 18px 34px; }
}

/* Account demo, concept variants and comparison emphasis · 2026-08-05 */
.interfacePage .compareTable td.valueHigh {
  position: relative;
  border-left: 4px solid #45f58e;
  background:
    linear-gradient(90deg, rgba(33, 238, 113, .34), rgba(33, 238, 113, .14) 32%, rgba(33, 238, 113, .035)) !important;
  color: #caffdc;
  box-shadow:
    inset 14px 0 30px rgba(33, 238, 113, .16),
    inset 0 0 0 1px rgba(91, 255, 158, .16);
}

.interfacePage .compareTable td.valueLow {
  position: relative;
  border-left: 4px solid #ff3156;
  background:
    linear-gradient(90deg, rgba(255, 35, 78, .36), rgba(255, 35, 78, .15) 32%, rgba(255, 35, 78, .035)) !important;
  color: #ffc1ce;
  box-shadow:
    inset 14px 0 30px rgba(255, 35, 78, .17),
    inset 0 0 0 1px rgba(255, 99, 128, .16);
}

.interfacePage .compareTable td.valueHigh::before,
.interfacePage .compareTable td.valueLow::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: -4px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: currentColor;
  box-shadow: 0 0 18px currentColor;
  content: "";
}

.conceptLibraryPreview {
  position: relative;
}

.conceptLibraryVariantNav {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(3, 3, 3, .84);
  color: #fff;
  backdrop-filter: blur(10px);
}

.conceptLibraryVariantNav button {
  display: grid;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 0;
  place-items: center;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
}

.conceptLibraryVariantNav button:hover:not(:disabled) {
  background: var(--red);
}

.conceptLibraryVariantNav button:disabled {
  opacity: .28;
  cursor: default;
}

.conceptLibraryVariantNav span {
  font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-align: center;
}

.accountAccessPrompt {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
}

.accountAccessPromptBackdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(8px);
  cursor: default;
}

.accountAccessPromptPanel {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 620px);
  gap: 20px;
  padding: clamp(28px, 5vw, 58px);
  overflow: hidden;
  border: 1px solid rgba(255, 57, 91, .68);
  background:
    radial-gradient(circle at 100% 0, rgba(237, 23, 57, .24), transparent 36%),
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255,255,255,.055) calc(25% - 1px) 25%),
    #080808;
  box-shadow: 0 36px 120px rgba(0, 0, 0, .72), 0 0 70px rgba(237, 23, 57, .16);
}

.accountAccessPromptPanel h2 {
  max-width: 520px;
  margin: 0;
  color: #f3f0e9;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.05em;
}

.accountAccessPromptPanel > p,
.accountAccessPromptPanel > small {
  margin: 0;
  color: #9b9b9b;
  line-height: 1.55;
}

.accountAccessPromptPanel > a {
  color: #f3f0e9;
  font-size: 13px;
}

.accountAccessPromptBenefits {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.accountAccessPromptBenefits span {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  color: #c8c8c8;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.accountAccessPromptClose {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.2);
  background: #080808;
  color: #fff;
  cursor: pointer;
  font-size: 23px;
}

.accountAccessPromptSuccess {
  display: grid;
  width: 58px;
  height: 58px;
  border: 1px solid #45f58e;
  place-items: center;
  color: #45f58e;
  box-shadow: 0 0 32px rgba(69, 245, 142, .2);
  font-size: 26px;
}

.accountToolPreview {
  display: grid;
  gap: 22px;
  min-height: 520px;
  padding: clamp(28px, 5vw, 64px);
  align-content: start;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 94% 0, rgba(69, 245, 142, .09), transparent 30%),
    #070707;
}

.accountArtifactLocalBadge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 7px 10px;
  border: 1px solid rgba(244, 22, 61, 0.48);
  color: #f6a4b2;
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(244, 22, 61, 0.08);
}

.accountToolPreviewStatus {
  color: #9ffac3;
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.accountToolPreviewStatus i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #45f58e;
  box-shadow: 0 0 16px #45f58e;
}

.accountToolPreview h4 {
  max-width: 760px;
  margin: 0;
  color: #f3f0e9;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
}

.accountToolPreview > p {
  max-width: 720px;
  margin: 0;
  color: #8f8f8f;
  font-size: 16px;
  line-height: 1.55;
}

.accountToolPreview > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.accountToolPreview article {
  display: grid;
  min-height: 130px;
  gap: 20px;
  padding: 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.accountToolPreview article span,
.accountToolPreview > small {
  color: #666;
  font: 600 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.accountToolPreview article strong {
  color: #d5d2cb;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

.accountToolPreview > .button {
  justify-self: start;
}

.accountLaunchNotice .button {
  width: 100%;
  margin-top: 10px;
}

.accountLaunchNotice small {
  color: #777;
  font-size: 10px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .accountAccessPromptPanel {
    gap: 16px;
    padding: 34px 22px 24px;
  }

  .accountAccessPromptPanel h2 {
    font-size: 36px;
  }

  .accountToolPreview > div {
    grid-template-columns: 1fr;
  }

  .accountToolPreview article {
    min-height: 94px;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    linear-gradient(115deg, rgba(47, 134, 255, 0.035), transparent 24%, transparent 72%, rgba(231, 25, 54, 0.035)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 80px),
    linear-gradient(180deg, #05070a 0%, #090c10 52%, #05070a 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", sans-serif;
  line-height: 1.45;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 64px;
  padding: 9px clamp(18px, 3.4vw, 52px);
  background: rgba(5, 7, 10, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(24px) saturate(1.25);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 210px;
}

.brandMark {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 1px solid #60676a;
  background: #07090a;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .36);
}

.brandMark::after {
  position: absolute;
  inset: 7px;
  border: 1px solid #343a3d;
  content: "";
}

.brandMark > img {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 8px;
  width: auto;
  max-width: none;
  height: 20px;
  transform: translateY(-50%);
}

.brand strong,
.brand small {
  display: block;
}

.brand small {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.brandIdentity strong { font-size: 15px; letter-spacing: .14em; }
.footerBrandLockup { display: flex; align-items: center; grid-template-columns: auto 1fr; }
.footerBrandLockup .brandIdentity strong,
.footerBrandLockup .brandIdentity small { display: block; }

.pageHeroIndex {
  position: absolute !important;
  z-index: 5 !important;
  top: 24px;
  right: clamp(18px, 4.2vw, 72px);
  left: clamp(18px, 4.2vw, 72px);
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, .48);
  font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Official GTO GROUP sign is kept distinct from the GTO TECH direction label. */
.brandOfficialWordmark {
  display: block;
  width: 74px;
  height: auto;
  margin-left: 4px;
  opacity: .76;
}

.footerBrandLockup {
  display: grid;
  justify-items: start;
  gap: 6px;
}

.footerBrandLockup > img {
  display: block;
  width: min(126px, 100%);
  height: auto;
  opacity: .86;
}

@media (max-width: 1480px) {
  .brandOfficialWordmark { display: none; }
}

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.nav a,
.topAction,
.iconTextButton,
.button {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018));
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.nav a {
  border-color: transparent;
  padding: 8px 10px;
  color: var(--soft);
  font-size: 13px;
  font-weight: 600;
}

.nav a:hover,
.topAction:hover,
.button:hover,
.iconTextButton:hover {
  border-color: var(--red);
  background: rgba(47, 134, 255, 0.11);
}

.nav a.active {
  border-color: rgba(103, 176, 255, 0.34);
  background: rgba(47, 134, 255, 0.1);
  box-shadow: inset 0 -2px var(--red);
}

.topAction {
  border-color: rgba(231, 25, 54, 0.7);
  padding: 9px 14px;
  background: linear-gradient(180deg, rgba(231, 25, 54, 0.18), rgba(148, 15, 37, 0.12));
  box-shadow:
    0 8px 24px rgba(148, 15, 37, 0.17),
    inset 0 1px rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

.section {
  padding: clamp(56px, 6.5vw, 92px) clamp(18px, 3.4vw, 52px);
}

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(560px, 69vh, 740px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #020304;
  box-shadow: inset 0 -90px 120px rgba(0, 0, 0, 0.5);
}

.heroMedia {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #05070a 0%, rgba(5, 7, 10, 0.9) 37%, rgba(5, 7, 10, 0.22) 72%, rgba(5, 7, 10, 0.48) 100%),
    url("assets/hero-stage.png") center / cover no-repeat;
  filter: grayscale(0.42) saturate(0.8) contrast(1.15) brightness(0.8);
  transform: scale(1.02);
}

.heroScrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(123deg, transparent 0 52%, rgba(47, 134, 255, 0.09) 67%, rgba(231, 25, 54, 0.18) 100%),
    linear-gradient(0deg, #05070a 0%, rgba(5, 7, 10, 0) 43%);
}

.hero::after {
  position: absolute;
  bottom: 0;
  left: clamp(18px, 4vw, 56px);
  width: min(360px, 42vw);
  height: 3px;
  background: linear-gradient(90deg, var(--red), transparent);
  content: "";
}

.heroInner {
  position: relative;
  width: min(790px, 100%);
  padding: 72px 0 42px;
}

.eyebrow,
.sectionKicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--red);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.eyebrow::before,
.sectionKicker::before {
  width: 22px;
  height: 2px;
  background: currentColor;
  content: "";
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 820px;
  margin-bottom: 20px;
  font-size: clamp(42px, 5.5vw, 76px);
  font-weight: 720;
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
}

h2 {
  margin-bottom: 14px;
  font-size: clamp(30px, 3.8vw, 50px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: 0;
  text-wrap: balance;
}

h3 {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 680;
  line-height: 1.16;
}

.hero p,
.sectionHead p,
.requestSection p {
  max-width: 720px;
  color: var(--soft);
  font-size: 17px;
  line-height: 1.55;
}

.heroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 32px;
}

.button,
.iconTextButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 17px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.32),
    inset 0 1px rgba(255, 255, 255, 0.07),
    inset 0 -1px rgba(0, 0, 0, 0.42);
}

.button:hover,
.iconTextButton:hover,
.topAction:hover {
  transform: translateY(-2px);
}

.buttonPrimary {
  border-color: var(--red);
  background: linear-gradient(180deg, var(--red-bright), var(--red) 52%, var(--red-dark));
  color: #fff;
  font-weight: 800;
  box-shadow:
    0 14px 34px rgba(231, 25, 54, 0.24),
    0 3px 8px rgba(0, 0, 0, 0.38),
    inset 0 1px rgba(255, 255, 255, 0.24),
    inset 0 -2px rgba(83, 0, 14, 0.45);
}

.buttonPrimary:hover {
  background: var(--red-bright);
  box-shadow: 0 16px 38px rgba(231, 25, 54, 0.28), inset 0 1px rgba(255, 255, 255, 0.18);
}

.buttonGhost {
  color: var(--soft);
  background: linear-gradient(180deg, rgba(26, 34, 44, 0.94), rgba(10, 13, 17, 0.94));
}

.button:disabled,
.button:disabled:hover {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.025);
  color: #676a70;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.button:active,
.smallButton:active,
.topAction:active,
.toolCard:active {
  transform: translateY(1px);
}

.metricStrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  max-width: 720px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius);
  background: rgba(9, 12, 16, 0.78);
  box-shadow: var(--surface-shadow);
  backdrop-filter: blur(14px);
}

.metric {
  padding: 15px 17px;
  border-right: 1px solid var(--line);
}

.metric:last-child {
  border-right: 0;
}

.metric strong {
  display: block;
  font-size: 25px;
  line-height: 1;
}

.metric span {
  color: var(--muted);
  font-size: 13px;
}

.compactBand,
.compareSection,
.toolsSection,
.aboutSection {
  background:
    linear-gradient(115deg, rgba(47, 134, 255, 0.04), transparent 28%, transparent 74%, rgba(231, 25, 54, 0.03)),
    rgba(8, 11, 15, 0.91);
  border-top: 1px solid rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 26px 70px rgba(255, 255, 255, 0.008);
}

.pageHero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 390px);
  gap: 32px;
  align-items: end;
  min-height: 340px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, #07090c 0%, rgba(7, 9, 12, 0.94) 44%, rgba(7, 9, 12, 0.56) 72%, rgba(7, 9, 12, 0.46) 100%),
    linear-gradient(125deg, transparent 46%, rgba(47, 134, 255, 0.1) 74%, rgba(231, 25, 54, 0.16) 100%),
    url("assets/hero-stage.png") right center / 58% cover no-repeat;
  box-shadow: inset 0 -100px 120px rgba(0, 0, 0, 0.24);
}

.pageHero::after {
  position: absolute;
  right: clamp(18px, 4vw, 56px);
  bottom: -1px;
  width: min(220px, 28vw);
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--red));
  content: "";
}

.pageHero .sectionKicker,
.compactBand .sectionKicker,
.toolsSection .sectionKicker {
  color: var(--blue-bright);
}

.pageHero h1 {
  max-width: 820px;
  font-size: clamp(38px, 4.8vw, 64px);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 13px;
}

.breadcrumb b {
  color: var(--text);
}

.sectionHead {
  margin-bottom: 26px;
}

.sectionHead h2 {
  max-width: 960px;
}

.sectionHead.split {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
}

.platformGrid,
.projectGrid,
.aboutGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  background: transparent;
  border: 0;
}

.platformGrid article,
.projectCard,
.aboutGrid > * {
  min-height: 178px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.034), transparent 44%),
    var(--panel);
  box-shadow: var(--surface-shadow);
}

.platformGrid article {
  position: relative;
  overflow: hidden;
}

.platformGrid article::after {
  position: absolute;
  right: -32px;
  bottom: -74px;
  width: 120px;
  height: 120px;
  border: 1px solid rgba(231, 25, 54, 0.16);
  transform: rotate(45deg);
  content: "";
}

.platformGrid b {
  color: var(--blue-bright);
}

.platformGrid p,
.projectCard p,
.aboutGrid,
.toolCard p,
.equipmentCard p {
  color: var(--muted);
}

.catalogStats {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 8px;
  min-width: min(420px, 100%);
  border: 0;
  background: transparent;
}

.statCell {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(12, 16, 21, 0.92);
  box-shadow: var(--surface-shadow);
}

.statCell b {
  display: block;
  color: var(--blue-bright);
  font-size: 24px;
}

.statCell span {
  color: var(--muted);
  font-size: 13px;
}

.categoryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

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

.categoryCard {
  position: relative;
  display: grid;
  grid-template-rows: 148px 1fr;
  min-height: 318px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.05), transparent 42%),
    var(--panel);
  box-shadow: var(--surface-shadow);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.categoryCard::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red));
  content: "";
}

.categoryCard:nth-child(even)::after {
  background: linear-gradient(90deg, transparent, var(--blue));
}

.categoryCard:nth-child(even):hover {
  border-color: var(--red);
}

.categoryCard:hover {
  border-color: var(--blue);
  box-shadow: 0 26px 68px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(231, 25, 54, 0.1);
  transform: translateY(-4px);
}

.categoryCardMedia {
  display: grid;
  min-height: 148px;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    repeating-linear-gradient(0deg, rgba(5, 7, 10, 0.035) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(5, 7, 10, 0.035) 0 1px, transparent 1px 24px),
    linear-gradient(145deg, #ffffff, #e8edf2);
}

.categoryCardMedia img {
  width: auto;
  height: auto;
  max-width: 64%;
  max-height: 126px;
  min-height: 0;
  object-fit: contain;
  padding: 8px;
  filter: grayscale(0.42) contrast(1.05);
  transition:
    filter 220ms ease,
    transform 220ms ease;
}

.categoryCard:hover .categoryCardMedia img {
  filter: grayscale(0.12) contrast(1.04);
  transform: scale(1.025);
}

.categoryCardBody {
  display: grid;
  align-content: space-between;
  gap: 12px;
  padding: 17px;
}

.categoryCardHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.categoryCardHeading .sectionKicker {
  color: var(--blue-bright);
}

.categoryCardArrow {
  display: grid;
  flex: 0 0 auto;
  width: 29px;
  height: 29px;
  border: 1px solid var(--line);
  border-radius: 50%;
  place-items: center;
  color: var(--soft);
  background: linear-gradient(180deg, var(--panel-3), var(--panel));
  box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.28),
    inset 0 1px rgba(255, 255, 255, 0.07);
  transition:
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.categoryCard:hover .categoryCardArrow {
  border-color: var(--blue);
  color: #fff;
  transform: translate(2px, -2px);
}

.categoryCardBody p {
  color: var(--muted);
  font-size: 14px;
}

.categoryCardFooter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.categoryCardFooter span {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--soft);
  font-size: 11px;
  background: rgba(255, 255, 255, 0.025);
}

.catalogLayout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.filters {
  position: sticky;
  top: 92px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(47, 134, 255, 0.04), transparent 38%),
    rgba(12, 16, 21, 0.96);
  box-shadow: var(--surface-shadow);
  backdrop-filter: blur(12px);
}

.searchBox,
.filterBlock {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.searchBox span,
.filterBlock > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(7, 10, 14, 0.9);
  color: var(--text);
  outline: none;
}

input,
select {
  min-height: 44px;
  padding: 0 12px;
}

textarea {
  min-height: 108px;
  padding: 12px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47, 134, 255, 0.1);
}

.segmented {
  display: grid;
  gap: 8px;
}

.segmented button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #11161d, #090c10);
  color: var(--soft);
  cursor: pointer;
}

.segmented button.active {
  border-color: var(--blue);
  background: rgba(47, 134, 255, 0.13);
  color: var(--text);
}

.filterNote {
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.filterBack {
  width: 100%;
}

code {
  color: var(--text);
  background: #000;
}

.catalogToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  margin-bottom: 16px;
}

#resultCount {
  color: var(--soft);
}

.equipmentGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.equipmentCard {
  display: grid;
  grid-template-rows: 200px 1fr auto;
  min-height: 438px;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(47, 134, 255, 0.04), rgba(255, 255, 255, 0) 45%),
    var(--panel);
  box-shadow: var(--surface-shadow);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.equipmentCard:hover {
  border-color: rgba(103, 176, 255, 0.5);
  box-shadow:
    0 26px 64px rgba(0, 0, 0, 0.44),
    0 0 0 1px rgba(47, 134, 255, 0.08);
  transform: translateY(-3px);
}

.equipmentPhoto {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 200px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background:
    repeating-linear-gradient(0deg, rgba(5, 7, 10, 0.025) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(5, 7, 10, 0.025) 0 1px, transparent 1px 32px),
    linear-gradient(145deg, #ffffff, #edf1f5);
  cursor: pointer;
}

.equipmentPhoto img {
  width: auto;
  height: auto;
  max-width: calc(100% - 20px);
  max-height: 182px;
  object-fit: contain;
  padding: 12px;
}

.equipmentCardBody {
  padding: 18px 18px 0;
}

.cardTop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.badge,
.statusBadge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--soft);
  font-size: 12px;
}

.statusBadge {
  border-color: rgba(47, 134, 255, 0.5);
  color: #b9d9ff;
  background: rgba(47, 134, 255, 0.07);
}

.typeBadge {
  border-color: rgba(225, 18, 45, 0.7);
  color: var(--text);
  background: rgba(225, 18, 45, 0.12);
}

.equipmentCard h3 {
  overflow-wrap: anywhere;
}

.equipmentCard p {
  font-size: 14px;
}

.cardMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0;
}

.cardActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  padding: 0 18px 18px;
}

.smallButton {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(24, 31, 40, 0.94), rgba(8, 11, 15, 0.94));
  color: var(--text);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.27),
    inset 0 1px rgba(255, 255, 255, 0.06);
}

.smallButton.active,
.smallButton:hover {
  border-color: var(--blue);
  background: rgba(47, 134, 255, 0.11);
}

.smallButton:hover {
  transform: translateY(-1px);
}

.emptyState {
  padding: 36px;
  border: 1px dashed #444;
  border-radius: var(--radius);
  color: var(--muted);
  background: #0a0a0a;
}

.equipmentGrid > .catalogEmptyState {
  grid-column: 1 / -1;
}

.compareTableWrap {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--red) #111;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.comparePicker {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 24px;
}

.comparePicker [hidden] {
  display: none !important;
}

.comparePickerHead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.comparePickerHead h2 {
  margin: 7px 0 0;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1;
}

.compareCategoryBack {
  min-width: 112px;
}

.compareCategoryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.compareCategoryCard {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  min-height: 190px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(47, 134, 255, 0.045), transparent 44%),
    var(--panel);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  box-shadow: var(--surface-shadow);
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.compareCategoryCard::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42px;
  height: 3px;
  background: var(--red);
  content: "";
}

.compareCategoryCard:hover,
.compareCategoryCard:focus-visible {
  border-color: var(--blue);
  background:
    linear-gradient(145deg, rgba(47, 134, 255, 0.1), transparent 46%),
    var(--panel-2);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

.compareCategoryIndex,
.compareCategoryCount {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.compareCategoryCard strong {
  font-size: 26px;
  line-height: 1;
}

.compareCategoryCard small {
  color: var(--soft);
  font-size: 13px;
  line-height: 1.35;
}

.compareCategoryCount {
  color: var(--text);
}

.comparePicker .searchBox {
  margin-bottom: 0;
}

.pickerResults {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: 460px;
  overflow: auto;
  padding-right: 4px;
}

.pickerItem,
.compareProduct {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 48%),
    var(--panel);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.pickerItem {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 88px;
  padding: 10px 12px;
}

.pickerItem:hover,
.compareProduct:hover {
  border-color: var(--blue);
  background-color: var(--panel-2);
}

.pickerItem small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
}

.pickerItem b {
  display: block;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.pickerEmpty {
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px dashed #444;
  border-radius: var(--radius);
  color: var(--muted);
  background: #0a0a0a;
}

.pickerThumb,
.compareProductImage {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.pickerThumb {
  width: 62px;
  height: 62px;
  padding: 6px;
}

.pickerThumb img,
.compareProductImage img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.pickerThumb > span,
.compareProductImage > span {
  color: #111;
  font-weight: 900;
  letter-spacing: 0;
}

.compareTopline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  color: var(--soft);
}

.compareTopline b {
  color: var(--text);
}

.compareScope {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font: 600 10px/1.25 var(--mono-font);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.compareTopActions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.compareViewportButton {
  display: none;
}

.compareScrollHint {
  display: none;
}

.compareTable {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
  border: 1px solid var(--line);
  background: rgba(12, 16, 21, 0.96);
  box-shadow: var(--surface-shadow);
}

.compareTable th,
.compareTable td {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.compareTable th:first-child,
.compareTable td:first-child {
  width: 220px;
  color: var(--muted);
}

.compareTable th:not(:first-child),
.compareTable td:not(:first-child) {
  min-width: 220px;
}

.compareProduct {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 10px;
  padding: 12px;
}

.compareProductImage {
  width: min(100%, 190px);
  height: auto;
  aspect-ratio: 1;
  padding: 0;
}

.compareProductImage img {
  display: block;
  object-position: center;
}

.compareProduct b {
  width: 100%;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

.compareTable tr.diff td:not(:first-child) {
  background: rgba(255, 255, 255, 0.018);
}

.compareTable td.valueHigh {
  border-left: 3px solid var(--green);
  color: #c9f9dc;
  background: rgba(32, 196, 107, 0.13);
}

.compareTable td.valueLow {
  border-left: 3px solid var(--red);
  color: #ffc3cb;
  background: rgba(225, 18, 45, 0.14);
}

.projectCard {
  display: grid;
  align-content: space-between;
}

.projectCardTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}

.toolsLayout {
  display: grid;
  grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.toolsHero {
  min-height: 250px;
  padding-top: 40px;
  padding-bottom: 40px;
}

.toolsHero h1 {
  max-width: 720px;
  margin-bottom: 16px;
  font-size: clamp(38px, 4.6vw, 62px);
}

.toolsHeroCount {
  display: grid;
  align-content: end;
  justify-items: end;
  padding-bottom: 6px;
}

.toolsHeroCount strong {
  color: var(--blue-bright);
  font-size: clamp(54px, 7vw, 88px);
  line-height: 0.85;
}

.toolsHeroCount span {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
}

.toolsSection {
  padding-top: 32px;
}

.toolHubFlow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #050505;
}

.toolHubFlow article {
  display: grid;
  min-height: 142px;
  padding: 18px;
  border-right: 1px solid var(--line);
}

.toolHubFlow article:last-child { border-right: 0; }
.toolHubFlow span { color: var(--red); font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.toolHubFlow b { align-self: end; color: #f1eee7; font-size: 17px; font-weight: 430; }
.toolHubFlow small { margin-top: 5px; color: #707070; }

.toolsNav {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 20px;
  max-height: calc(100dvh - 108px);
  padding: 0 10px 18px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--red) #111;
  scrollbar-width: thin;
}

.toolsNav::-webkit-scrollbar {
  width: 7px;
}

.toolsNav::-webkit-scrollbar-track {
  background: #111;
}

.toolsNav::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: var(--red);
}

.toolNavGroup {
  display: grid;
  gap: 7px;
}

.toolNavGroupTitle {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 7px 2px;
  background: rgba(7, 8, 9, 0.96);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.toolCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(47, 134, 255, 0.035), transparent 52%),
    var(--panel);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.toolCard:hover {
  border-color: rgba(103, 176, 255, 0.5);
  background: var(--panel-2);
  transform: translateX(2px);
}

.toolCard.active {
  border-color: var(--blue);
  background: rgba(47, 134, 255, 0.11);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.28),
    inset 3px 0 var(--red);
}

.toolCard b {
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.toolCard small {
  color: var(--blue-bright);
  font-weight: 800;
}

.toolPanel {
  position: relative;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(47, 134, 255, 0.04), transparent 40%),
    rgba(12, 16, 21, 0.97);
  min-height: 560px;
  box-shadow: var(--surface-shadow);
}

.toolHeader {
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.toolHeader h3 {
  max-width: 820px;
  margin-top: 8px;
  font-size: clamp(24px, 3vw, 38px);
}

.toolHeader p {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--muted);
}

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

.toolForm label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}

.toolForm .wide {
  grid-column: 1 / -1;
}

.conceptEventShortcuts {
  display: flex;
  flex-wrap: wrap;
}

.conceptEventShortcuts .conceptEventShortcut {
  min-height: 42px;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.3;
  white-space: normal;
}

.conceptEventShortcut[aria-pressed="true"] {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, var(--panel));
}

.conceptVolumeControl > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
}

.conceptVolumeControl input[type="range"] {
  width: 100%;
  accent-color: var(--red);
}

.conceptVolumeControl output {
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  text-align: right;
}

.conceptRefinement textarea {
  min-height: 96px;
  resize: vertical;
}

.conceptRefinement small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.conceptChat {
  display: grid;
  gap: 12px;
}

.conceptChatThread {
  display: grid;
  gap: 10px;
  max-height: 280px;
  overflow-y: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.018);
}

.conceptChatEmpty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.conceptChatMessage {
  width: min(88%, 720px);
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.conceptChatMessage.is-user {
  justify-self: end;
  border-color: color-mix(in srgb, var(--red) 45%, var(--line));
  background: color-mix(in srgb, var(--red) 10%, transparent);
}

.conceptChatMessage.is-assistant {
  justify-self: start;
}

.conceptChatMessage > .conceptChatAuthor {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.conceptChatText {
  display: block;
}

.conceptChatAttachment {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--text) 24%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 84%, #ffffff 5%);
  white-space: normal;
}

.conceptChatAttachment > span {
  color: var(--red);
  font-size: 18px;
  line-height: 1;
}

.conceptChatAttachment b {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conceptChatAttachment small {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.conceptRefinement {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: border-color 160ms ease, background 160ms ease;
}

.conceptRefinement.isDragOver {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 9%, transparent);
}

.conceptAttachmentBar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.conceptAttachmentButton {
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid color-mix(in srgb, var(--text) 34%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel) 88%, #ffffff 6%);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.conceptAttachmentButton:hover,
.conceptAttachmentButton:focus-visible {
  border-color: var(--red);
  outline: none;
}

.conceptAttachmentBar > small {
  min-width: 0;
}

.conceptAttachmentBar > small.isError {
  color: #ff8c9f;
}

.conceptAttachmentPreview {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--red) 54%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--red) 8%, var(--panel));
}

.conceptAttachmentPreview[hidden] {
  display: none;
}

.conceptAttachmentPreview img {
  width: 72px;
  height: 54px;
  border-radius: 6px;
  background: #ffffff;
  object-fit: cover;
}

.conceptAttachmentPreview > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.conceptAttachmentPreview b {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conceptAttachmentPreview small {
  color: var(--muted);
  font-size: 11px;
}

.conceptAttachmentPreview button {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.24);
  color: var(--text);
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}

.conceptAttachmentPreview button:hover,
.conceptAttachmentPreview button:focus-visible {
  border-color: var(--red);
  outline: none;
}

.conceptDisclaimer {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.conceptActions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.conceptActions .button {
  width: 100%;
}

.conceptProgress {
  min-height: 20px;
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.toolResult {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.02), transparent 45%),
    #080b0f;
}

.calculationSaveStatus {
  min-height: 20px;
  margin: 10px 0 0;
  color: var(--muted);
  font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.calculationSaveStatus[data-state="saved"] { color: var(--green); }
.calculationSaveStatus[data-state="failed"],
.calculationSaveStatus[data-state="too-large"] { color: var(--red-bright); }
.calculationSaveStatus[data-state="auth-required"] { color: var(--soft); }

.artifactResumeBanner {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid rgba(237, 23, 57, .46);
  background: rgba(237, 23, 57, .045);
}

.artifactResumeBanner span,
.artifactRestoredResult span {
  color: var(--red-bright);
  font: 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.artifactResumeBanner strong { color: var(--text); font-size: 17px; font-weight: 560; }
.artifactResumeBanner p { max-width: 780px; margin: 0; color: var(--soft); font-size: 12px; line-height: 1.55; }
.artifactRestoredResult { display: grid; gap: 12px; }
.artifactRestoredResult p { margin: 0; color: var(--text); font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.artifactRestoredResult small { color: var(--muted); font-size: 10px; line-height: 1.5; }

.toolResult h4 {
  margin: 0 0 10px;
  font-size: 20px;
}

.toolResult ul {
  margin-bottom: 0;
  color: var(--soft);
}

.toolWorkflowForm textarea {
  min-height: 132px;
  resize: vertical;
}

.toolResultHead {
  display: grid;
  gap: 8px;
  max-width: 900px;
}

.toolResultHead > span {
  color: var(--red);
  font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.toolResultHead > h4 {
  margin: 0;
  font-size: clamp(23px, 3vw, 38px);
  font-weight: 430;
  letter-spacing: -.035em;
}

.toolResultHead > p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
}

.toolMetrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin-top: 22px;
  border: 1px solid var(--line);
  background: var(--line);
}

.toolMetric {
  display: grid;
  align-content: space-between;
  min-height: 112px;
  padding: 15px;
  background: #080808;
}

.toolMetric span {
  color: #737373;
  font: 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.toolMetric strong {
  color: #f0ede6;
  font-size: clamp(20px, 2.5vw, 31px);
  font-weight: 430;
  line-height: 1.05;
}

.toolMetric.accent { box-shadow: inset 0 -3px var(--red); }
.toolMetric.good { box-shadow: inset 0 -3px #55d68b; }
.toolMetric.warn { box-shadow: inset 0 -3px #ff9d45; }

.toolResultSections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--line);
}

.toolResultSections section {
  min-width: 0;
  padding: 17px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #060606;
}

.toolResultSections section > b {
  color: #f2efe8;
  font-weight: 550;
}

.toolResultSections ul {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding-left: 18px;
  color: #969696;
}

.toolSafetyNote {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-left: 2px solid #ff9d45;
  background: rgba(255, 157, 69, .06);
  color: #b5b5b5;
  font-size: 12px;
}

.toolResultAction {
  margin-top: 16px;
}

@media (max-width: 900px) {
  .toolHubFlow {
    grid-template-columns: repeat(5, minmax(170px, 1fr));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .toolHubFlow article { scroll-snap-align: start; }
}

.conceptResult {
  padding: 0;
  overflow: hidden;
}

.conceptLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.conceptRender {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 9;
  align-self: start;
  place-items: center;
  overflow: hidden;
  background: #030303;
}

.conceptHistoryNav {
  position: absolute;
  z-index: 3;
  bottom: 16px;
  left: 50%;
  display: grid;
  grid-template-columns: 42px minmax(76px, auto) 42px;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: var(--radius);
  background: rgba(3, 3, 3, 0.84);
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
}

.conceptHistoryNav button {
  display: grid;
  width: 42px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 22px;
}

.conceptHistoryNav button:hover:not(:disabled) {
  background: var(--blue);
}

.conceptHistoryNav button:disabled {
  color: #626262;
  cursor: default;
}

.conceptHistoryNav span {
  display: grid;
  gap: 1px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.conceptHistoryNav small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.conceptRender svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.conceptRender img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  object-fit: contain;
  object-position: center center;
  aspect-ratio: 16 / 9;
}

.conceptImageOpen {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  place-items: center;
  overflow: hidden;
  background: #030303;
  cursor: zoom-in;
}

.conceptImageOpen > span {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius);
  background: rgba(3, 3, 3, 0.78);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  transition: opacity 160ms ease;
}

.conceptImageOpen:hover > span,
.conceptImageOpen:focus-visible > span {
  opacity: 1;
}

.conceptGeneratedMedia {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: #030303;
}

.conceptGeneratedMedia img {
  max-height: 100%;
}

.conceptMediaActions {
  position: absolute;
  z-index: 4;
  top: 16px;
  right: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.conceptMediaActions button,
.requestConceptAttachment button {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--radius);
  background: rgba(3, 3, 3, 0.84);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.conceptMediaActions button:last-child {
  border-color: var(--red-bright);
  background: rgba(225, 18, 45, 0.9);
}

.conceptMediaActions button:hover:not(:disabled),
.requestConceptAttachment button:hover {
  border-color: #fff;
  background: #fff;
  color: #050505;
}

.conceptMediaActions button:disabled {
  opacity: 0.58;
  cursor: progress;
}

.conceptExampleBadge {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 16px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  background: rgba(3, 3, 3, 0.8);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.conceptGenerating {
  display: grid;
  min-height: clamp(320px, 48vw, 720px);
  place-content: center;
  justify-items: center;
  gap: 9px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
  background:
    radial-gradient(circle at center, rgba(233, 27, 53, 0.12), transparent 34%),
    #030303;
}

.conceptGenerating strong {
  color: var(--text);
  font-size: clamp(18px, 2vw, 26px);
}

.conceptGeneratingTime {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.conceptGeneratingTime b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.conceptGenerationError {
  display: grid;
  gap: 7px;
  padding: 18px;
  border-bottom: 1px solid rgba(255, 56, 83, 0.45);
  background: rgba(225, 18, 45, 0.11);
  color: #ffc7ce;
}

.conceptGenerationError strong {
  color: #fff;
  font-size: 17px;
}

.conceptGeneratingMark {
  display: grid;
  width: 76px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  animation: conceptPulse 1.6s ease-in-out infinite;
}

@keyframes conceptPulse {
  0%,
  100% {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 0 rgba(233, 27, 53, 0);
  }
  50% {
    border-color: var(--red-bright);
    box-shadow: 0 0 0 12px rgba(233, 27, 53, 0.08);
  }
}

.conceptNotes {
  padding: clamp(20px, 3vw, 34px);
  border-top: 1px solid var(--line);
}

.conceptNotes h4 {
  max-width: 980px;
  font-size: clamp(24px, 3vw, 38px);
}

.conceptNotes p,
.conceptNotes ul {
  max-width: 980px;
}

.conceptVariantLabel {
  color: var(--red-bright);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.conceptPageHero {
  min-height: 360px;
}

.conceptWorkspace {
  padding-top: 0;
}

.conceptWorkspaceHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.conceptWorkspaceHeader h2 {
  margin-top: 8px;
  overflow-wrap: anywhere;
}

.conceptWorkspaceHeader > div {
  min-width: 0;
}

.aiProviderNote {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: min(100%, 560px);
  max-width: 560px;
  margin-top: 14px;
  color: var(--soft);
}

.yandexProviderBadge {
  display: inline-grid;
  grid-template-columns: 28px auto;
  align-items: center;
  min-height: 42px;
  padding: 6px 12px 6px 7px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: var(--radius);
  background: #f5f5f5;
  color: #090909;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
  font-weight: 900;
}

.yandexProviderBadge b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: #fc3f1d;
  font-size: 22px;
}

.yandexProviderBadge em {
  padding-left: 8px;
  border-left: 1px solid #d0d0d0;
  font-size: 13px;
  font-style: normal;
}

.aiProviderNote p,
.aiProviderNote small {
  margin: 0;
}

.aiProviderNote > p b {
  display: block;
  color: var(--text);
  font-size: 13px;
}

.aiProviderNote small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.conceptWorkspace .toolForm {
  padding: clamp(18px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(47, 134, 255, 0.035), transparent 48%),
    var(--panel);
  box-shadow: var(--surface-shadow);
}

.conceptWorkspace .conceptResult {
  margin-top: 24px;
  scroll-margin-top: 88px;
}

.conceptLibrary {
  margin: 28px 0 24px;
  padding: 22px 0 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.conceptLibraryHeader {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.conceptLibraryHeader h3,
.conceptLibraryHeader p {
  margin: 0;
}

.conceptLibraryHeader h3 {
  margin-top: 5px;
  font-size: 22px;
}

.conceptLibraryHeader p {
  max-width: 760px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}

.conceptLibraryNotice {
  min-height: 20px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.conceptLibraryGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.conceptLibraryCard {
  display: grid;
  grid-template-rows: 112px minmax(152px, auto);
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #090c10;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

.conceptLibraryCard.isEmpty {
  grid-template-rows: 1fr;
  align-content: space-between;
  min-height: 274px;
  padding: 16px;
  border-style: dashed;
  background:
    linear-gradient(145deg, rgba(47, 134, 255, 0.04), transparent 58%),
    rgba(9, 12, 16, 0.54);
  color: var(--muted);
}

.conceptLibraryEmptyMark {
  color: rgba(255, 255, 255, 0.18);
  font-size: 44px;
  font-weight: 900;
}

.conceptLibraryCard.isEmpty strong,
.conceptLibraryCard.isEmpty span {
  display: block;
}

.conceptLibraryCard.isEmpty strong {
  color: var(--soft);
}

.conceptLibraryCard.isEmpty span {
  margin-top: 4px;
  font-size: 12px;
}

.conceptLibraryPreview {
  display: grid;
  min-width: 0;
  overflow: hidden;
  place-items: center;
  background: #020202;
}

.conceptLibraryPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.conceptLibraryPreview > span {
  color: rgba(255, 255, 255, 0.2);
  font-size: 38px;
  font-weight: 900;
}

.conceptLibraryCardBody {
  display: grid;
  grid-template-rows: auto minmax(36px, auto) minmax(32px, auto) 36px;
  gap: 6px;
  min-width: 0;
  padding: 12px;
}

.conceptLibraryCardBody > span {
  color: var(--red-bright);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.conceptLibraryCardBody strong {
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.conceptLibraryCardBody small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.conceptLibraryCardBody button {
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #10151b;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}

.conceptLibraryCardBody button:hover {
  border-color: var(--blue);
  background: rgba(47, 134, 255, 0.12);
}

.conceptImageDialog {
  width: min(96vw, 1720px);
  max-width: none;
  height: min(94vh, 1050px);
  max-height: none;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  overflow: hidden;
  background: #020202;
}

.conceptImageDialog::backdrop {
  background: rgba(0, 0, 0, 0.88);
}

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

.conceptImageDialogClose {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
}

.languageSwitch {
  display: grid;
  grid-template-columns: repeat(2, 36px);
  gap: 2px;
  margin-left: auto;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
}

.languageSwitch button {
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.languageSwitch button.active {
  background: linear-gradient(180deg, #ffffff, #dce5ef);
  color: #050505;
}

.navConceptLink {
  border: 1px solid rgba(103, 176, 255, 0.62);
  color: #fff !important;
}

.navConceptLink:hover,
.navConceptLink.active {
  border-color: var(--blue-bright);
  background: rgba(47, 134, 255, 0.17);
  box-shadow: inset 0 -2px var(--red);
}

.requestHoneypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
}

.voiceRecorder {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(47, 134, 255, 0.035), transparent 45%),
    rgba(255, 255, 255, 0.02);
}

.voiceRecorder legend {
  padding: 0 7px;
  color: var(--muted);
  font-size: 13px;
}

.voiceRecorderControls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.voiceRecorder [hidden] {
  display: none !important;
}

.voiceRecorderTimer {
  min-width: 54px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.voiceRecorderDelete {
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: var(--red-bright);
  cursor: pointer;
}

.voiceRecorder audio {
  width: 100%;
  max-width: 620px;
}

.voiceRecorder small {
  color: var(--muted);
}

.voiceFileFallback {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px !important;
  width: fit-content;
  color: var(--soft) !important;
}

.voiceFileFallback input {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.voiceFileFallback input::file-selector-button {
  margin-right: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}

.requestPreparedBrief {
  max-height: 420px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
  background: #050505;
  color: var(--soft);
  font: inherit;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.homeConceptPreview {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(47, 134, 255, 0.045), transparent 40%),
    var(--panel);
  box-shadow: var(--surface-shadow);
}

.homeConceptCopy {
  display: grid;
  align-content: center;
  padding: 24px;
  border-left: 1px solid var(--line);
}

.homeConceptCopy p {
  color: var(--muted);
}

.aboutGrid {
  grid-template-columns: 1.2fr 1fr;
}

.aboutGrid p,
.aboutGrid ul {
  margin: 0;
  color: var(--soft);
  font-size: 18px;
}

.aboutGrid li + li {
  margin-top: 10px;
}

.processGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  border: 0;
  background: transparent;
}

.processGrid article {
  display: grid;
  gap: 10px;
  min-height: 130px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--surface-shadow);
}

.processGrid b {
  color: var(--blue-bright);
}

.requestSection {
  display: grid;
  grid-template-columns: minmax(260px, 0.65fr) minmax(460px, 1.35fr);
  gap: clamp(32px, 6vw, 76px);
  align-items: start;
  border-top: 1px solid var(--line);
}

.requestIntro {
  position: sticky;
  top: 104px;
}

.requestContact {
  display: grid;
  gap: 4px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.requestContact span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.requestContact a {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
}

.requestForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(47, 134, 255, 0.04), transparent 38%),
    rgba(12, 16, 21, 0.97);
  box-shadow: var(--surface-shadow);
}

.requestForm label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}

.requestForm .wide {
  grid-column: 1 / -1;
}

.requestFile {
  padding: 14px;
  border: 1px dashed #4a4a4a;
  border-radius: var(--radius);
  background: #080808;
}

.requestFile input {
  min-height: 0;
  padding: 5px 0;
  border: 0;
  background: transparent;
}

.requestFile input::file-selector-button {
  margin-right: 12px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--text);
  cursor: pointer;
}

.requestFile small {
  color: var(--soft);
  overflow-wrap: anywhere;
}

.requestConceptAttachment {
  display: grid;
  grid-template-columns: minmax(180px, 0.72fr) minmax(0, 1.28fr);
  gap: 16px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--red);
  border-radius: var(--radius);
  background: rgba(225, 18, 45, 0.06);
}

.requestConceptAttachment[hidden] {
  display: none;
}

.requestConceptAttachment img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 2px);
  object-fit: contain;
  background: #020202;
}

.requestConceptAttachment > div {
  display: grid;
  justify-items: start;
  gap: 8px;
}

.requestConceptAttachment strong {
  color: var(--text);
  font-size: 18px;
}

.requestConceptAttachment p {
  margin: 0;
  color: var(--soft);
  font-size: 13px;
}

.requestConceptAttachment button {
  min-height: 34px;
  padding: 7px 10px;
  border-color: var(--line-strong);
}

.requestConsent {
  display: flex !important;
  align-items: flex-start;
  gap: 10px !important;
}

.requestConsent input {
  flex: 0 0 auto;
  width: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  accent-color: var(--red);
}

.requestActions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.requestActions span {
  color: var(--muted);
  font-size: 12px;
}

.requestStatus {
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--soft);
  background: #080b0f;
}

.requestStatus:empty {
  display: none;
}

.requestStatus[data-type="success"] {
  border-color: var(--green);
  color: #c9f9dc;
}

.requestStatus[data-type="error"] {
  border-color: var(--red);
  color: #ffc3cb;
}

.itemDialog {
  width: min(880px, calc(100% - 28px));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(47, 134, 255, 0.045), transparent 42%),
    var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
}

.itemDialog::backdrop {
  background: rgba(0, 0, 0, 0.78);
}

.dialogClose {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #070707;
  color: var(--text);
  cursor: pointer;
}

.dialogHero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  padding: 18px 48px 18px 18px;
}

.productPhotoLarge,
.placeholderImage {
  display: grid;
  place-items: center;
  min-height: 300px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(225, 18, 45, 0.18), transparent 28%),
    repeating-linear-gradient(45deg, #0b0b0b 0, #0b0b0b 10px, #111 10px, #111 20px);
  color: var(--muted);
  text-align: center;
}

.productPhotoLarge {
  overflow: hidden;
  background: #fff;
}

.productPhotoLarge img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: contain;
  padding: 18px;
}

.photoFallback {
  display: grid;
  place-items: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(225, 18, 45, 0.16), transparent 34%),
    repeating-linear-gradient(45deg, #111 0, #111 10px, #181818 10px, #181818 20px);
  color: var(--soft);
  text-align: center;
}

.photoFallback span {
  color: var(--muted);
  font-size: 13px;
}

.photoFallback.large {
  min-height: 320px;
}

.sourceLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.sourceLinks a {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--soft);
  font-size: 12px;
}

.sourceLinks a:hover {
  border-color: var(--blue);
}

.specGroup {
  min-width: 0;
  padding: 0 14px 14px;
}

.specGroup h3 {
  margin: 14px 0 0;
  line-height: 1.2;
}

.specList {
  min-width: 0;
  display: grid;
  gap: 1px;
  margin-top: 12px;
  background: var(--line);
  border: 1px solid var(--line);
}

.specRow {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(120px, 22%) minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
}

.specRow > span {
  min-width: 0;
  padding: 9px 11px;
  background: #080808;
  font-size: 13px;
  line-height: 1.42;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.specRow > span:first-child {
  color: var(--muted);
}

.footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px clamp(18px, 4vw, 56px);
  border-top: 1px solid var(--line);
  background:
    linear-gradient(100deg, rgba(47, 134, 255, 0.04), transparent 30%, transparent 76%, rgba(231, 25, 54, 0.035)),
    rgba(4, 6, 9, 0.97);
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 1100px) {
  .conceptLibraryGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .categoryGrid,
  .categoryGridLarge,
  .processGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .catalogLayout,
  .toolsLayout,
  .comparePicker,
  .conceptLayout,
  .homeConceptPreview {
    grid-template-columns: 1fr;
  }

  .filters,
  .toolsNav {
    position: static;
  }

  .toolsNav {
    max-height: 340px;
    padding-right: 8px;
  }

  .segmented {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .conceptNotes,
  .homeConceptCopy {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .conceptLibraryHeader {
    align-items: flex-start;
    flex-direction: column;
  }

  .conceptLibraryNotice {
    text-align: left;
  }

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

  .conceptLibraryCard {
    grid-template-rows: 98px minmax(150px, auto);
  }

  .conceptLibraryCard.isEmpty {
    min-height: 248px;
  }

  .topbar {
    position: relative;
    top: auto;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    padding: 10px 18px 14px;
    background: rgba(5, 7, 10, 0.96);
  }

  .nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    max-width: none;
    width: 100%;
  }

  .nav a {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .brand {
    width: calc(100% - 206px);
    min-width: 0;
  }

  .brandMark {
    width: 38px;
    height: 38px;
  }

  .brand strong {
    font-size: 15px;
    white-space: nowrap;
  }

  .brand small {
    display: none;
  }

  .topAction {
    position: absolute;
    top: 10px;
    right: 18px;
    display: inline-flex;
  }

  .languageSwitch {
    position: absolute;
    top: 10px;
    right: 118px;
    margin-left: 0;
  }

  .hero {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .heroInner {
    max-width: 390px;
    width: 100%;
    padding: 32px 0 22px;
  }

  h1 {
    max-width: 100%;
    font-size: 35px;
    line-height: 1.02;
    overflow-wrap: break-word;
  }

  .hero p,
  .sectionHead p,
  .requestSection p {
    font-size: 15px;
    line-height: 1.45;
  }

  .heroMedia {
    background:
      linear-gradient(180deg, rgba(5, 5, 5, 0.28), #050505 72%),
      url("assets/hero-stage.png") center / cover no-repeat;
  }

  .heroActions {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    margin: 18px 0 22px;
  }

  .heroActions .button {
    width: 100%;
  }

  .comparePickerHead {
    align-items: flex-start;
    flex-direction: column;
  }

  .comparePickerHead .smallButton {
    width: 100%;
  }

  .conceptWorkspaceHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .conceptWorkspaceHeader > .button {
    width: 100%;
  }

  .metricStrip,
  .platformGrid,
  .projectGrid,
  .categoryGrid,
  .categoryGridLarge,
  .pickerResults,
  .processGrid,
  .aboutGrid,
  .requestSection,
  .pageHero,
  .dialogHero {
    grid-template-columns: 1fr;
  }

  .metric {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .metric:last-child {
    border-bottom: 0;
  }

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

  .metric {
    padding: 12px 9px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .metric:last-child {
    border-right: 0;
  }

  .metric strong {
    font-size: 22px;
  }

  .metric span {
    font-size: 11px;
  }

  .sectionHead.split,
  .catalogToolbar,
  .footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .equipmentGrid,
  .toolForm,
  .requestForm {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 42px 18px;
  }

  .pageHero {
    width: 100%;
    max-width: 100%;
    padding-top: 42px;
    padding-bottom: 42px;
    background:
      linear-gradient(90deg, rgba(5, 6, 7, 0.96), rgba(5, 6, 7, 0.74)),
      url("assets/hero-stage.png") center / cover no-repeat;
  }

  .pageHero h1,
  .sectionHead h2,
  .conceptWorkspaceHeader h2 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(30px, 8.5vw, 40px);
    line-height: 1.04;
    overflow-wrap: anywhere;
  }

  .pageHero > *,
  .conceptWorkspace,
  .conceptWorkspaceHeader,
  .conceptWorkspaceHeader > *,
  .conceptWorkspace .toolForm,
  .conceptWorkspace .conceptResult,
  .conceptLibrary {
    min-width: 0;
    max-width: 100%;
  }

  .categoryCard {
    grid-template-rows: 128px 1fr;
    min-height: 270px;
  }

  .categoryCardMedia {
    min-height: 128px;
  }

  .categoryCardMedia img {
    max-width: 58%;
    max-height: 108px;
  }

  .equipmentCard {
    grid-template-rows: 184px 1fr auto;
    min-height: 410px;
  }

  .equipmentPhoto {
    min-height: 184px;
  }

  .equipmentPhoto img {
    max-height: 166px;
  }

  .compareSection {
    padding-right: 18px;
    padding-left: 18px;
  }

  .compareTableWrap {
    width: 100%;
    padding-bottom: 8px;
  }

  .compareTopline {
    position: sticky;
    left: 0;
    align-items: flex-start;
    width: calc(100vw - 36px);
  }

  .compareTopline span {
    min-width: 0;
  }

  .compareScrollHint {
    position: sticky;
    left: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(100%, 354px);
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: rgba(18, 20, 22, 0.96);
    color: var(--soft);
    box-shadow: var(--surface-shadow);
    font-size: 12px;
  }

  .compareScrollHint[hidden] {
    display: none;
  }

  .compareScrollHint span {
    flex: 0 0 auto;
    color: var(--red-bright);
    font-size: 18px;
  }

  .compareTable {
    width: max-content;
    min-width: calc(148px + (var(--compare-products) * 220px));
    table-layout: fixed;
  }

  .compareTable th,
  .compareTable td {
    padding: 11px 10px;
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .compareTable th:first-child,
  .compareTable td:first-child {
    position: sticky;
    left: 0;
    z-index: 4;
    width: 148px;
    min-width: 148px;
    max-width: 148px;
    background: #0b0d0f;
    box-shadow: 1px 0 0 var(--line), 8px 0 16px rgba(0, 0, 0, 0.2);
  }

  .compareTable thead th:first-child {
    z-index: 6;
  }

  .compareTable th:not(:first-child),
  .compareTable td:not(:first-child) {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
  }

  .compareProduct {
    padding: 8px;
  }

  .compareProductImage {
    width: 154px;
  }

  .compareProduct b {
    font-size: 14px;
  }

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

  .conceptAttachmentBar {
    align-items: stretch;
    flex-direction: column;
  }

  .conceptAttachmentButton {
    width: 100%;
  }

  .conceptChatMessage {
    width: 96%;
  }

  .requestIntro {
    position: static;
  }

  .requestForm .wide {
    grid-column: auto;
  }

  .requestForm {
    padding: 16px;
  }

  .requestActions,
  .voiceRecorderControls {
    align-items: stretch;
    flex-direction: column;
  }

  .requestActions .button,
  .voiceRecorderControls .button {
    width: 100%;
  }

  .requestFile input,
  .voiceFileFallback input {
    max-width: 100%;
  }

  .toolsHeroCount {
    justify-items: start;
  }

  .pageHero {
    min-height: 0;
  }

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

  .dialogHero {
    padding-right: 18px;
  }

  .conceptMediaActions {
    top: auto;
    right: 10px;
    bottom: 10px;
    left: 10px;
    justify-content: stretch;
  }

  .conceptMediaActions button {
    flex: 1 1 calc(50% - 4px);
  }

  .conceptExampleBadge {
    top: 10px;
    left: 10px;
  }

  .conceptHistoryNav {
    bottom: 64px;
  }

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

  .conceptRender,
  .conceptRender img,
  .conceptRender svg {
    aspect-ratio: 16 / 10;
  }

  .conceptNotes {
    padding: 18px;
  }

  .conceptNotes h4 {
    font-size: 24px;
  }

  .conceptMediaActions {
    position: absolute;
    top: auto;
    right: 10px;
    bottom: 10px;
    left: 10px;
    display: flex;
    padding: 0;
    background: transparent;
  }

  .conceptHistoryNav {
    bottom: 64px;
  }

  .conceptRender {
    display: flex;
    overflow: hidden;
    aspect-ratio: auto;
    flex-direction: column;
  }

  .conceptGeneratedMedia {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
  }

  .conceptImageOpen {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    flex: 0 0 auto;
  }

  .conceptMediaActions {
    position: static;
    display: grid;
    width: 100%;
    padding: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: #080a0c;
  }

  .conceptMediaActions button {
    width: 100%;
    min-width: 0;
  }

  .conceptMediaActions button:last-child {
    grid-column: 1 / -1;
  }

  .conceptHistoryNav {
    position: static;
    margin: 10px auto;
    transform: none;
  }

  .itemDialog {
    width: calc(100% - 16px);
    max-height: calc(100dvh - 16px);
  }

  .productPhotoLarge,
  .placeholderImage {
    min-height: 230px;
  }

  .specGroup {
    padding: 0 12px 12px;
  }

  .specRow {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* GTO TECH unified editorial interface · 2026-08-04b */
.interfacePage main {
  background: #030303;
}

.interfacePage .pageHero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .5fr);
  align-items: end;
  min-height: 62svh;
  padding-top: clamp(130px, 16vw, 240px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 78% 24%, rgba(237, 23, 57, .12), transparent 24%),
    linear-gradient(135deg, #020202 0 62%, #0b0b0b 62% 100%);
}

.interfacePage .pageHero::before {
  position: absolute;
  inset: 0 clamp(18px, 4.2vw, 72px);
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255,255,255,.05) calc(25% - 1px) 25%);
  pointer-events: none;
  content: "";
}

.interfacePage .pageHero > * {
  position: relative;
  z-index: 1;
}

.interfacePage .pageHero h1 {
  max-width: 1080px;
  margin: 24px 0 26px;
  font-size: clamp(58px, 7.6vw, 122px);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.07em;
}

.interfacePage .pageHero p {
  max-width: 690px;
  color: #aaa;
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.55;
}

.interfacePage .breadcrumb {
  color: #777;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.interfacePage .catalogStats,
.interfacePage .toolsHeroCount {
  align-self: end;
  border-left: 1px solid var(--line);
}

.eventReelSection {
  padding: clamp(76px, 9vw, 150px) 0 clamp(64px, 8vw, 120px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #030303;
}

.eventReelSection > .sectionHead {
  margin-right: clamp(18px, 4.2vw, 72px);
  margin-left: clamp(18px, 4.2vw, 72px);
}

.processTrack {
  position: relative;
  border-top: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.025) 40%, transparent);
}

.processTrack::before {
  position: absolute;
  z-index: 1;
  top: -1px;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red) 0 16%, #f1eee8 36%, rgba(255,255,255,.22) 72%, transparent);
  box-shadow: 0 0 22px rgba(237,23,57,.2);
  content: "";
}

.processTrack li {
  min-height: 260px;
  padding-top: 46px;
}

.processTrack li:nth-child(even) {
  padding-top: 84px;
}

.processTrack li::before {
  z-index: 2;
  top: -7px;
  width: 13px;
  height: 13px;
  border: 3px solid #070707;
  background: #f3f0e9;
  box-shadow: 0 0 0 1px var(--red), 0 0 18px rgba(237,23,57,.7);
}

.processTrack li::after {
  position: absolute;
  top: 7px;
  left: 5px;
  width: 1px;
  height: 26px;
  background: linear-gradient(var(--red), transparent);
  content: "";
}

.processTrack li:nth-child(even)::after {
  height: 62px;
}

.processTrack li:last-child::before {
  background: var(--red);
}

.categoryCardMedia,
.equipmentPhoto,
.compareProductImage,
.pickerThumb,
.productPhotoLarge,
.equipmentDetailMedia {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.55), transparent 36%),
    linear-gradient(145deg, #cbc8bf 0%, #9a9994 52%, #6f706e 100%);
}

.categoryCardMedia::before,
.equipmentPhoto::before,
.equipmentDetailMedia::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.055) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  content: "";
}

.categoryCardMedia::after,
.equipmentPhoto::after,
.equipmentDetailMedia::after {
  position: absolute;
  right: 18px;
  bottom: 14px;
  left: 18px;
  height: 1px;
  background: linear-gradient(90deg, var(--red) 0 24%, rgba(0,0,0,.3) 24%);
  pointer-events: none;
  content: "";
}

.categoryCardMedia img,
.equipmentPhoto img,
.compareProductImage img,
.pickerThumb img,
.productPhotoLarge img,
.equipmentDetailMedia img {
  position: relative;
  z-index: 1;
  filter: grayscale(.9) contrast(1.12) drop-shadow(0 28px 28px rgba(0,0,0,.28));
  mix-blend-mode: multiply;
}

.categoryCard:hover .categoryCardMedia img,
.equipmentCard:hover .equipmentPhoto img {
  filter: grayscale(.15) contrast(1.08) drop-shadow(0 32px 34px rgba(0,0,0,.32));
}

.interfacePage .categoryGrid,
.interfacePage .equipmentGrid {
  gap: 1px;
  padding: 1px;
  background: var(--line);
}

.interfacePage .categoryCard,
.interfacePage .equipmentCard {
  border: 0;
  background: #070707;
  box-shadow: none;
}

.interfacePage .categoryCard {
  min-height: 590px;
}

.interfacePage .categoryCardMedia,
.catalogPrototype .categoryCardMedia {
  height: 310px;
}

.interfacePage .categoryCardBody {
  padding: 26px 24px;
}

.interfacePage .categoryCard h3,
.catalogPrototype .categoryCard h3 {
  color: #f2efe8;
  font-size: clamp(28px, 2.4vw, 42px);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.045em;
}

.interfacePage .categoryCard p,
.interfacePage .equipmentCard p {
  color: #8d8d8d;
}

.equipmentPhoto {
  min-height: 270px;
}

.equipmentCardBody {
  background: #080808;
}

.equipmentCard h3 {
  color: #f2efe8;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -.035em;
}

.interfacePage .filters,
.interfacePage .comparePicker,
.interfacePage .comparison,
.interfacePage .toolPanel,
.interfacePage .toolForm,
.interfacePage .conceptNotes,
.interfacePage .conceptLibrary,
.interfacePage .requestForm,
.interfacePage .aboutGrid > * {
  border-color: var(--line);
  border-radius: 0;
  background: #080808;
  box-shadow: none;
}

.interfacePage input,
.interfacePage select,
.interfacePage textarea {
  border-color: rgba(255,255,255,.18);
  border-radius: 0;
  background: #050505;
  color: #f1eee8;
  box-shadow: none;
}

.interfacePage input:focus,
.interfacePage select:focus,
.interfacePage textarea:focus {
  border-color: var(--red);
  outline: 0;
  box-shadow: 0 0 0 1px var(--red);
}

.interfacePage .toolCard,
.interfacePage .compareCategoryCard,
.interfacePage .pickerItem {
  border-radius: 0;
  background: #070707;
  box-shadow: none;
}

.interfacePage .toolCard.active,
.interfacePage .toolCard:hover,
.interfacePage .compareCategoryCard:hover,
.interfacePage .pickerItem:hover {
  border-color: var(--red);
  background: #0e0e0e;
}

.interfacePage .toolPanel {
  min-height: 720px;
}

.interfacePage .toolsLayout {
  grid-template-columns: minmax(245px, 290px) minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
}

.interfacePage .toolsNav,
.interfacePage .toolPanel {
  background-color: #050505;
}

.interfacePage .toolsNav {
  padding: 22px 14px;
}

.interfacePage .compareTable th,
.interfacePage .compareTable td {
  border-color: var(--line);
  background: #080808;
}

.interfacePage .compareTable tr.diff td {
  background: #0d0b0b;
}

.gtoAiNote {
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.gtoAiBadge {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.56);
  background: #050505;
  color: #f4f1eb;
}

.gtoAiBadge b {
  display: grid;
  min-height: 40px;
  padding: 0 12px;
  place-items: center;
  background: #f1eee8;
  color: #050505;
  box-shadow: inset 0 -3px var(--red);
  font-size: 14px;
  letter-spacing: .08em;
}

.gtoAiBadge em {
  padding: 0 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-style: normal;
  letter-spacing: .12em;
}

.projectGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

.projectCardCinematic,
.projectCardCinematic:nth-child(3n + 1) {
  grid-column: auto;
  min-height: clamp(480px, 42vw, 670px);
}

.projectCardCinematic:nth-child(5n + 1),
.projectCardCinematic:nth-child(5n + 5) {
  grid-column: span 2;
  min-height: clamp(560px, 52vw, 790px);
}

.projectCardCinematic h3 {
  font-size: clamp(34px, 4vw, 66px);
}

.projectCardCinematic p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.projectMediaFallback {
  position: relative;
  background:
    radial-gradient(circle at 70% 28%, rgba(237,23,57,.2), transparent 24%),
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255,255,255,.08) calc(25% - 1px) 25%),
    #090909;
}

.projectMediaFallback strong {
  position: absolute;
  right: 24px;
  bottom: 84px;
  left: 24px;
  max-width: 420px;
  color: #d5d2cc;
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 500;
  line-height: .95;
}

.projectMediaFallback i {
  position: absolute;
  right: 24px;
  bottom: 52px;
  left: 24px;
  height: 1px;
  background: linear-gradient(90deg, var(--red) 0 35%, var(--line) 35%);
}

.interfacePage .aboutGrid {
  gap: 1px;
  background: var(--line);
}

.interfacePage .aboutGrid > * {
  margin: 0;
  padding: clamp(30px, 4vw, 64px);
}

.interfacePage .processGrid {
  gap: 0;
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--red), #f1eee8, transparent) 1;
}

.interfacePage .processGrid article {
  min-height: 210px;
  border-color: var(--line);
  border-radius: 0;
  background: #060606;
}

.interfacePage .requestSection {
  border-top: 1px solid var(--line);
  background: #050505;
}

@media (max-width: 1100px) {
  .projectGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projectCardCinematic:nth-child(5n + 1),
  .projectCardCinematic:nth-child(5n + 5) { grid-column: auto; }
  .interfacePage .toolsLayout { grid-template-columns: 230px minmax(0,1fr); }
}

@media (max-width: 760px) {
  .interfacePage .pageHero {
    grid-template-columns: 1fr;
    min-height: 74svh;
    padding-top: 126px;
  }

  .interfacePage .pageHero h1 {
    font-size: clamp(43px, 13vw, 62px);
    line-height: .92;
  }

  .interfacePage .catalogStats,
  .interfacePage .toolsHeroCount {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .eventReelSection {
    padding-top: 92px;
  }

  .processTrack li,
  .processTrack li:nth-child(even) {
    min-height: 230px;
    padding-top: 48px;
  }

  .processTrack li:nth-child(even)::after {
    height: 26px;
  }

  .interfacePage .toolsLayout,
  .projectGrid {
    grid-template-columns: 1fr;
  }

  .interfacePage .toolsNav {
    position: static;
    max-height: 360px;
  }

  .projectCardCinematic,
  .projectCardCinematic:nth-child(3n + 1),
  .projectCardCinematic:nth-child(5n + 1),
  .projectCardCinematic:nth-child(5n + 5) {
    grid-column: auto;
    min-height: 590px;
  }

  .interfacePage .categoryCard {
    min-height: 520px;
  }
}

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

  .brand strong {
    font-size: 13px;
  }

  .brand {
    width: calc(100% - 196px);
    gap: 8px;
  }

  .brandMark {
    width: 40px;
    height: 40px;
  }

  .languageSwitch {
    right: 108px;
  }

  .topAction {
    right: 12px;
  }

  .compareTable th:first-child,
  .compareTable td:first-child {
    width: 132px;
    min-width: 132px;
    max-width: 132px;
  }

  .compareTable {
    min-width: calc(132px + (var(--compare-products) * 210px));
  }

  .compareTable th:not(:first-child),
  .compareTable td:not(:first-child) {
    width: 210px;
    min-width: 210px;
    max-width: 210px;
  }
}

.optionalField {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

/* 2026 product design pass: one visual system across catalogue, tools and concepts. */
:root {
  --bg: #05070a;
  --panel: #0a0f15;
  --panel-2: #111821;
  --panel-3: #18222d;
  --line: #26313d;
  --line-strong: #425166;
  --muted: #929daa;
  --soft: #d8e0e9;
  --red: #ef1739;
  --red-dark: #9f1029;
  --red-bright: #ff3655;
  --blue: #348cff;
  --blue-bright: #7bbaff;
  --surface-shadow:
    0 22px 58px rgba(0, 0, 0, 0.38),
    0 3px 10px rgba(0, 0, 0, 0.28),
    inset 0 1px rgba(255, 255, 255, 0.06);
}

body {
  background:
    linear-gradient(118deg, rgba(52, 140, 255, 0.038), transparent 27%, transparent 74%, rgba(239, 23, 57, 0.038)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 72px),
    #05070a;
}

.topbar {
  min-height: 68px;
  padding: 10px 36px;
  border-bottom-color: rgba(123, 186, 255, 0.16);
  background: rgba(4, 7, 10, 0.9);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.34), inset 0 -1px rgba(239, 23, 57, 0.08);
}

.brand {
  min-width: 224px;
}

.brandMark {
  width: 42px;
  height: 42px;
  border-radius: 2px;
  font-size: 15px;
}

.brand strong {
  font-size: 15px;
  line-height: 1.1;
}

.brand small {
  margin-top: 4px;
  font-size: 10px;
}

.nav {
  flex-wrap: nowrap;
  gap: 3px;
}

.nav a {
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13px;
}

.nav a.active {
  background: linear-gradient(180deg, rgba(52, 140, 255, 0.14), rgba(17, 24, 33, 0.76));
}

.topAction {
  min-height: 42px;
  padding: 9px 16px;
}

.section {
  padding: 64px 36px;
}

h1 {
  font-size: 64px;
  line-height: 1;
}

h2 {
  font-size: 42px;
  line-height: 1.06;
}

.hero {
  min-height: 520px;
}

.heroInner {
  width: min(720px, 100%);
  padding: 54px 0 38px;
}

.hero h1 {
  max-width: 700px;
  margin-bottom: 18px;
}

.hero p {
  max-width: 650px;
  font-size: 16px;
}

.heroActions {
  margin: 22px 0 28px;
}

.metricStrip {
  max-width: 660px;
}

.metric {
  padding: 13px 15px;
}

.metric strong {
  font-size: 24px;
}

.pageHero {
  min-height: 286px;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  align-items: center;
  padding-top: 50px;
  padding-bottom: 50px;
}

.pageHero h1,
.toolsHero h1 {
  max-width: 780px;
  margin-bottom: 14px;
  font-size: 52px;
  line-height: 1.02;
}

.conceptPageHero {
  min-height: 300px;
}

.sectionHead {
  margin-bottom: 24px;
}

.sectionHead p {
  font-size: 15px;
}

.compactBand,
.compareSection,
.toolsSection,
.aboutSection {
  background:
    linear-gradient(112deg, rgba(52, 140, 255, 0.045), transparent 31%, transparent 76%, rgba(239, 23, 57, 0.03)),
    rgba(7, 11, 15, 0.88);
}

.platformGrid,
.projectGrid,
.aboutGrid {
  gap: 14px;
}

.platformGrid article,
.projectCard,
.aboutGrid > * {
  min-height: 160px;
  padding: 21px;
  background:
    linear-gradient(145deg, rgba(123, 186, 255, 0.045), transparent 48%),
    var(--panel);
}

.categoryGrid,
.categoryGridLarge {
  gap: 12px;
}

.categoryCard {
  grid-template-rows: 126px 1fr;
  min-height: 286px;
  background:
    linear-gradient(150deg, rgba(123, 186, 255, 0.055), transparent 44%),
    var(--panel);
}

.categoryCardMedia {
  min-height: 126px;
}

.categoryCardMedia img {
  max-width: 54%;
  max-height: 104px;
  padding: 6px;
}

.categoryCardBody {
  gap: 10px;
  padding: 15px;
}

.categoryCardBody p {
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.45;
}

.categoryCardFooter span {
  padding: 5px 7px;
  font-size: 10px;
}

.catalogLayout {
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 20px;
}

.filters,
.toolPanel,
.conceptWorkspace .toolForm,
.requestForm {
  background:
    linear-gradient(145deg, rgba(52, 140, 255, 0.05), transparent 42%),
    rgba(9, 14, 20, 0.96);
}

.equipmentGrid {
  gap: 14px;
}

.equipmentCard {
  grid-template-rows: 184px 1fr auto;
  min-height: 414px;
}

.equipmentPhoto {
  min-height: 184px;
}

.equipmentPhoto img {
  max-height: 168px;
}

.equipmentCardBody {
  padding: 16px 16px 0;
}

.equipmentCard h3 {
  font-size: 18px;
}

.cardActions {
  padding: 0 16px 16px;
}

.button,
.iconTextButton,
.smallButton,
.topAction,
.conceptMediaActions button,
.conceptLibraryCardBody button {
  min-height: 42px;
  border-color: #344152;
  background: linear-gradient(180deg, #17212b, #0a0f15);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -1px rgba(0, 0, 0, 0.45);
}

.buttonPrimary,
.conceptMediaActions button:last-child {
  border-color: var(--red-bright);
  background: linear-gradient(180deg, var(--red-bright), var(--red) 54%, var(--red-dark));
}

input,
select,
textarea {
  border-color: #2c3947;
  background: #070b10;
}

input,
select {
  min-height: 46px;
}

.compareCategoryCard {
  min-height: 164px;
  padding: 16px;
}

.compareCategoryCard strong {
  font-size: 22px;
}

.compareTable {
  border-color: #344152;
  background: rgba(8, 13, 18, 0.98);
}

.compareTable thead th {
  background: #0c131b;
}

.toolsHero {
  min-height: 230px;
}

.toolsHeroCount strong {
  font-size: 70px;
}

.toolCard {
  min-height: 58px;
  padding: 12px 13px;
}

.toolPanel {
  min-height: 520px;
}

.toolHeader h3 {
  font-size: 32px;
}

.conceptWorkspaceHeader {
  align-items: center;
}

.conceptWorkspaceHeader h2 {
  font-size: 44px;
}

.conceptWorkspace .toolForm {
  padding: 24px;
}

.conceptResult {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #030507;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.48);
}

.conceptImageOpen {
  background: #020304;
}

.conceptImageOpen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.conceptMediaActions {
  gap: 8px;
}

.conceptMediaActions button {
  padding: 10px 15px;
  border-radius: 6px;
}

.conceptLibrary {
  margin-top: 32px;
  padding-top: 26px;
}

.conceptLibraryGrid {
  gap: 12px;
}

.conceptLibraryCard {
  grid-template-rows: 118px minmax(144px, auto);
  border-color: #2c3947;
  background: #080c11;
}

.conceptLibraryCard.isEmpty {
  min-height: 266px;
  background:
    linear-gradient(145deg, rgba(52, 140, 255, 0.04), transparent 58%),
    rgba(8, 12, 17, 0.68);
}

.conceptLibraryPreview img {
  object-position: center;
}

.footer {
  min-height: 76px;
  align-items: center;
  padding: 24px 36px;
}

@media (max-width: 1180px) {
  .topbar {
    padding-right: 22px;
    padding-left: 22px;
  }

  .brand {
    min-width: 190px;
  }

  .nav a {
    padding-right: 9px;
    padding-left: 9px;
    font-size: 12px;
  }

  h1 {
    font-size: 54px;
  }

  h2 {
    font-size: 38px;
  }

  .pageHero h1,
  .toolsHero h1 {
    font-size: 46px;
  }
}

@media (max-width: 900px) {
  .topbar {
    position: relative;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .brand {
    flex: 1 1 auto;
  }

  .nav {
    order: 4;
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav a {
    flex: 0 0 auto;
  }

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

  .categoryGrid,
  .categoryGridLarge {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .topbar {
    position: relative;
    display: flex;
    overflow: visible;
    gap: 10px;
    padding: 10px 14px 11px;
  }

  .brand {
    width: auto;
    min-width: 0;
    padding-right: 188px;
  }

  .brandMark {
    width: 40px;
    height: 40px;
  }

  .brand strong {
    font-size: 14px;
  }

  .brand small {
    display: block;
    max-width: 124px;
    margin-top: 3px;
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .languageSwitch {
    top: 11px;
    right: 99px;
  }

  .topAction {
    top: 11px;
    right: 14px;
    min-height: 38px;
    padding: 7px 11px;
    font-size: 12px;
  }

  .nav {
    display: flex;
    width: calc(100% + 28px);
    margin: 0 -14px;
    padding: 2px 14px 3px;
  }

  .nav a {
    min-height: 38px;
    padding: 8px 11px;
    text-align: center;
    white-space: nowrap;
  }

  .section {
    padding: 44px 16px;
  }

  h1 {
    font-size: 38px;
  }

  h2 {
    font-size: 32px;
  }

  .hero {
    min-height: 0;
  }

  .heroInner {
    max-width: 520px;
    padding: 34px 0 24px;
  }

  .hero h1 {
    font-size: 38px;
  }

  .hero p {
    font-size: 14px;
  }

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

  .metric {
    padding: 10px 7px;
  }

  .metric strong {
    font-size: 20px;
  }

  .metric span {
    font-size: 10px;
  }

  .pageHero,
  .conceptPageHero,
  .toolsHero {
    min-height: 0;
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .pageHero h1,
  .toolsHero h1,
  .conceptWorkspaceHeader h2,
  .sectionHead h2 {
    font-size: 34px;
    line-height: 1.05;
  }

  .breadcrumb {
    margin-bottom: 13px;
    font-size: 11px;
  }

  .sectionHead.split {
    gap: 18px;
  }

  .categoryGrid,
  .categoryGridLarge {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .categoryCard {
    grid-template-rows: 94px 1fr;
    min-height: 218px;
  }

  .categoryCardMedia {
    min-height: 94px;
  }

  .categoryCardMedia img {
    max-width: 58%;
    max-height: 76px;
    padding: 3px;
  }

  .categoryCardBody {
    gap: 7px;
    padding: 11px;
  }

  .categoryCardHeading {
    gap: 6px;
  }

  .categoryCardHeading .sectionKicker {
    font-size: 9px;
  }

  .categoryCardArrow {
    width: 25px;
    height: 25px;
  }

  .categoryCardBody h3 {
    font-size: 16px;
  }

  .categoryCardBody p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .categoryCardFooter {
    display: none;
  }

  .platformGrid article,
  .projectCard,
  .aboutGrid > * {
    min-height: 142px;
  }

  .equipmentCard {
    grid-template-rows: 176px 1fr auto;
    min-height: 392px;
  }

  .equipmentPhoto {
    min-height: 176px;
  }

  .equipmentPhoto img {
    max-height: 160px;
  }

  .conceptWorkspaceHeader {
    gap: 14px;
    margin-bottom: 18px;
  }

  .aiProviderNote {
    gap: 9px;
  }

  .conceptWorkspace .toolForm {
    padding: 15px;
  }

  .conceptResult {
    margin-top: 18px;
  }

  .conceptMediaActions {
    gap: 7px;
    padding: 9px;
  }

  .conceptMediaActions button {
    min-height: 40px;
    padding: 8px 9px;
    font-size: 12px;
  }

  .conceptNotes {
    padding: 17px;
  }

  .conceptNotes h4 {
    font-size: 22px;
  }

  .conceptLibrary {
    margin-top: 24px;
  }

  .conceptLibraryGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .conceptLibraryCard {
    grid-template-rows: 88px minmax(138px, auto);
  }

  .conceptLibraryCard.isEmpty {
    min-height: 226px;
    padding: 13px;
  }

  .conceptLibraryCardBody {
    padding: 10px;
  }

  .conceptLibraryEmptyMark {
    font-size: 34px;
  }

  .compareTable {
    min-width: calc(126px + (var(--compare-products) * 194px));
  }

  .compareTable th:first-child,
  .compareTable td:first-child {
    width: 126px;
    min-width: 126px;
    max-width: 126px;
  }

  .compareTable th:not(:first-child),
  .compareTable td:not(:first-child) {
    width: 194px;
    min-width: 194px;
    max-width: 194px;
  }

  .compareProductImage {
    width: 142px;
  }

  .footer {
    gap: 8px;
    min-height: 0;
    padding: 22px 16px;
    font-size: 12px;
  }
}

@media (max-width: 390px) {
  .brand {
    padding-right: 176px;
  }

  .languageSwitch {
    right: 92px;
    grid-template-columns: repeat(2, 31px);
  }

  .topAction {
    right: 10px;
    padding-right: 9px;
    padding-left: 9px;
  }

  .section {
    padding-right: 14px;
    padding-left: 14px;
  }

  .hero h1,
  .pageHero h1,
  .toolsHero h1,
  .conceptWorkspaceHeader h2,
  .sectionHead h2 {
    font-size: 31px;
  }

  .categoryCard {
    min-height: 210px;
  }
}

/* GTO TECH cinematic prototype · 2026-08-04 */
:root {
  --bg: #020202;
  --panel: #090909;
  --panel-2: #111111;
  --panel-3: #181818;
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.28);
  --muted: #8d8d8d;
  --soft: #d6d3ce;
  --text: #f4f1eb;
  --red: #ed1739;
  --red-dark: #9e0b23;
  --red-bright: #ff3151;
  --blue: #8d8d8d;
  --blue-dark: #222222;
  --blue-bright: #d0d0d0;
  --radius: 0;
}

body {
  background: #020202;
  color: var(--text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.012em;
}

.topbar {
  min-height: 72px;
  padding: 10px clamp(18px, 3.4vw, 54px);
  background: rgba(2, 2, 2, 0.88);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
  backdrop-filter: blur(20px);
}

.brand {
  min-width: 224px;
  gap: 13px;
}

.brandMark {
  width: 42px;
  height: 42px;
  border: 0;
  background: #f2efe8;
  box-shadow: inset 0 -3px var(--red);
  color: #050505;
  font-size: 14px;
  font-weight: 900;
}

.brand strong {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.brand small {
  color: #777;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
}

.nav {
  gap: clamp(4px, 1.3vw, 20px);
}

.nav a,
.topAction,
.button,
.iconTextButton {
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.nav a {
  position: relative;
  padding: 10px 3px;
  color: #a9a9a9;
  font-size: 12px;
  font-weight: 500;
}

.nav a::after {
  position: absolute;
  right: 50%;
  bottom: 3px;
  left: 50%;
  height: 1px;
  background: var(--red);
  content: "";
  transition: right 180ms ease, left 180ms ease;
}

.nav a:hover,
.nav a.active {
  border-color: transparent;
  background: none;
  box-shadow: none;
  color: #fff;
}

.nav a:hover::after,
.nav a.active::after {
  right: 0;
  left: 0;
}

.topAction {
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 10px 14px;
  background: transparent;
  color: #fff;
  font-size: 12px;
}

.topAction:hover,
.button:hover,
.iconTextButton:hover {
  border-color: var(--red);
  background: transparent;
  transform: translateY(-2px);
}

.languageSwitch {
  border-color: rgba(255, 255, 255, 0.15);
  border-radius: 0;
  background: #050505;
}

.languageSwitch button {
  border-radius: 0;
}

.languageSwitch button.active {
  background: #f0ede7;
  color: #060606;
}

.section {
  padding: clamp(76px, 9vw, 150px) clamp(18px, 4.2vw, 72px);
}

.quietGrid {
  position: relative;
  isolation: isolate;
}

.quietGrid::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255,255,255,0.035) calc(25% - 1px) 25%);
  pointer-events: none;
  content: "";
}

.eyebrow,
.sectionKicker {
  gap: 11px;
  color: #aaa;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.eyebrow::before,
.sectionKicker::before {
  width: 18px;
  height: 1px;
  background: var(--red);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 48px;
  padding: 13px 18px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  font-size: 12px;
  font-weight: 550;
}

.buttonPrimary {
  border-color: var(--red);
  background: var(--red);
  box-shadow: none;
  color: white;
}

.buttonPrimary:hover {
  background: #c9122f;
}

.buttonGhost {
  background: rgba(0, 0, 0, 0.14);
}

.textLink {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  color: #eee;
  font-size: 12px;
}

.textLink:hover {
  border-color: var(--red);
}

.cinematicSectionHead {
  align-items: end;
  margin-bottom: clamp(44px, 6vw, 90px);
}

.cinematicSectionHead h2 {
  max-width: 900px;
  margin: 18px 0 0;
  font-size: clamp(42px, 6vw, 88px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.cinematicSectionHead > p,
.cinematicSectionHead > div:last-child {
  width: min(430px, 100%);
  margin: 0;
  color: #999;
  font-size: 15px;
  line-height: 1.6;
}

.cinematicHero {
  position: relative;
  min-height: calc(100svh - 72px);
  overflow: hidden;
  background: #020202;
}

.cinematicHeroMedia,
.projectsHero > img,
.caseHero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cinematicHeroMedia {
  object-position: 50% 48%;
  filter: saturate(0.92) contrast(1.03) brightness(1.01);
  transform: none;
}

.cinematicHeroShade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2,2,2,0.84) 0%, rgba(2,2,2,0.60) 35%, rgba(2,2,2,0.10) 69%, rgba(2,2,2,0.28) 100%),
    linear-gradient(0deg, rgba(2,2,2,0.56) 0%, transparent 48%, rgba(2,2,2,0.10) 100%);
}

.cinematicHeroGrid {
  position: absolute;
  inset: 0 clamp(18px, 4.2vw, 72px);
  border-right: 1px solid rgba(255,255,255,0.08);
  border-left: 1px solid rgba(255,255,255,0.08);
  background-image: linear-gradient(90deg, transparent calc(33.333% - 1px), rgba(255,255,255,0.075) 33.333%, transparent calc(33.333% + 1px), transparent calc(66.666% - 1px), rgba(255,255,255,0.075) 66.666%, transparent calc(66.666% + 1px));
}

.cinematicHeroContent {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - 72px);
  width: min(1040px, 100%);
  padding: 80px clamp(18px, 4.2vw, 72px) 100px;
}

.heroIndex {
  position: absolute;
  top: 28px;
  right: clamp(18px, 4.2vw, 72px);
  left: clamp(18px, 4.2vw, 72px);
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,0.5);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cinematicHero > .heroIndex {
  z-index: 3;
  width: auto;
}


body[data-page="home"] .brandIdentity strong {
  font-size: 13px;
  letter-spacing: .13em;
}

body[data-page="home"] .brandIdentity small {
  color: rgba(255, 255, 255, .38);
  letter-spacing: .22em;
  text-transform: uppercase;
}

body[data-page="home"] .brandOfficialWordmark {
  opacity: .54;
  filter: grayscale(1) brightness(1.2);
}

.cinematicHero h1 {
  max-width: 1000px;
  margin: 24px 0 28px;
  font-size: clamp(58px, 8.6vw, 138px);
  font-weight: 520;
  line-height: 0.87;
  letter-spacing: -0.075em;
}

.cinematicHero h1 em,
.projectsHero h1 em {
  display: block;
  color: transparent;
  font-style: normal;
  -webkit-text-stroke: 1px rgba(255,255,255,0.78);
}

.cinematicLead {
  max-width: 610px;
  color: #c4c1bc;
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.48;
}

.cinematicHero .heroActions {
  margin-top: 24px;
}

.heroScroll {
  position: absolute;
  z-index: 2;
  right: clamp(18px, 4.2vw, 72px);
  bottom: 34px;
  display: flex;
  gap: 12px;
  align-items: center;
  color: rgba(255,255,255,0.52);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.heroScroll i {
  display: block;
  width: 1px;
  height: 48px;
  background: linear-gradient(var(--red), transparent);
}

.projectShowcase {
  border-bottom: 1px solid var(--line);
  background: #030303;
}

.featuredProjects {
  display: grid;
  grid-template-columns: 1.45fr 0.75fr;
  gap: clamp(12px, 1.8vw, 28px);
}

.featuredProject {
  position: relative;
  min-height: clamp(360px, 44vw, 670px);
  overflow: hidden;
  background: #090909;
}

.featuredProject:not(.featuredProjectLead) {
  min-height: clamp(300px, 30vw, 470px);
}

.featuredProjectWide {
  grid-column: 1 / -1;
  min-height: clamp(360px, 44vw, 680px) !important;
}

.featuredProject figure,
.projectCardCinematic figure {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}

.featuredProject img,
.projectCardCinematic figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.98) contrast(1.03) brightness(0.98);
  transition: transform 800ms cubic-bezier(.2,.7,.2,1), filter 500ms ease;
}

.featuredProject::after,
.projectCardCinematic::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.76), transparent 54%);
  pointer-events: none;
  content: "";
}

.featuredProject:hover img,
.projectCardCinematic:hover figure img {
  filter: saturate(1.08) contrast(1.03) brightness(1.03);
  transform: scale(1.025);
}

.projectOverlay {
  position: absolute;
  z-index: 1;
  right: clamp(20px, 3vw, 44px);
  bottom: clamp(20px, 3vw, 42px);
  left: clamp(20px, 3vw, 44px);
}

.projectOverlay span,
.projectCardIndex {
  color: rgba(255,255,255,0.58);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.projectOverlay h3 {
  max-width: 780px;
  margin: 10px 0 5px;
  font-size: clamp(30px, 4vw, 66px);
  font-weight: 520;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.projectOverlay p {
  margin: 0;
  color: #aaa;
  font-size: 12px;
}

.projectShowcase > .textLink {
  margin-top: 36px;
}

.scaleSection {
  display: grid;
  grid-template-columns: 0.8fr 2.2fr;
  min-height: 440px;
  padding: 0 clamp(18px, 4.2vw, 72px);
  border-bottom: 1px solid var(--line);
}

.scaleStatement {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 72px 34px 72px 0;
  border-right: 1px solid var(--line);
}

.scaleStatement p {
  max-width: 330px;
  margin: 0;
  color: #999;
  font-size: 15px;
  line-height: 1.65;
}

.scaleMetrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.scaleMetrics > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 18px;
  padding: 60px 22px 72px;
  border-right: 1px solid var(--line);
}

.scaleMetrics > div:last-child {
  border-right: 0;
}

.scaleMetrics strong {
  color: #f0ede6;
  font-size: clamp(42px, 4.4vw, 76px);
  font-weight: 430;
  line-height: 0.9;
  letter-spacing: -0.065em;
}

.scaleMetrics span {
  max-width: 120px;
  color: #858585;
  font-size: 10px;
  line-height: 1.4;
  text-transform: uppercase;
}

.directionsSection {
  border-bottom: 1px solid var(--line);
}

.directionRows {
  border-top: 1px solid var(--line);
}

.directionRows a {
  display: grid;
  grid-template-columns: 70px 1fr 1fr auto;
  gap: 24px;
  align-items: center;
  min-height: 128px;
  border-bottom: 1px solid var(--line);
}

.directionRows a:hover {
  background: #0a0a0a;
}

.directionRows span,
.directionRows b {
  color: var(--red);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
}

.directionRows h3 {
  margin: 0;
  font-size: clamp(32px, 4vw, 60px);
  font-weight: 500;
  letter-spacing: -0.05em;
}

.directionRows p {
  max-width: 330px;
  margin: 0;
  color: #888;
  font-size: 13px;
}

.processSection {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #070707;
}

.processTrack {
  display: grid;
  grid-template-columns: repeat(7, minmax(150px, 1fr));
  margin: 72px 0 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
  list-style: none;
}

.processTrack li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 210px;
  padding: 34px 20px 20px 0;
  border-right: 1px solid var(--line);
}

.processTrack li::before {
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--red);
  border-radius: 50%;
  content: "";
}

.processTrack span {
  color: #777;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
}

.processTrack b {
  margin-top: auto;
  font-size: 19px;
  font-weight: 520;
}

.processTrack small {
  max-width: 140px;
  color: #777;
  font-size: 11px;
  line-height: 1.45;
}

.catalogPrototype {
  border-bottom: 1px solid var(--line);
}

.catalogPrototype .categoryGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.catalogPrototype .categoryCard {
  min-height: 520px;
  border: 0;
  background: #060606;
  box-shadow: none;
}

.catalogPrototype .categoryCardMedia {
  height: 280px;
  background: #e9e7e2;
}

.catalogPrototype .categoryCardMedia img {
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: multiply;
}

.catalogPrototype .categoryCard:hover .categoryCardMedia img {
  filter: grayscale(0.35);
}

.catalogPrototype .categoryCardBody {
  padding: 24px 20px;
}

.catalogPrototype .categoryCard h3 {
  font-size: 26px;
  font-weight: 520;
}

.catalogPrototype .categoryCard p {
  color: #888;
  font-size: 12px;
}

.catalogPrototype .categoryCardFooter {
  margin-top: auto;
  border-top-color: var(--line);
  color: #777;
  font-size: 9px;
}

.conceptFeature {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
  background: #050505;
}

.conceptFeatureMedia {
  min-height: 680px;
  overflow: hidden;
  border-right: 1px solid var(--line);
}

.conceptFeatureMedia .conceptStage,
.conceptFeatureMedia .conceptRenderVisual {
  min-height: 680px;
  height: 100%;
}

.conceptFeatureMedia .conceptRenderCard {
  height: 100%;
  border: 0;
  border-radius: 0;
}

.conceptFeatureCopy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(48px, 6vw, 96px);
}

.conceptFeatureCopy h2 {
  margin: 20px 0 26px;
  font-size: clamp(42px, 5vw, 74px);
  font-weight: 500;
  line-height: 0.97;
  letter-spacing: -0.055em;
}

.conceptFeatureCopy p {
  color: #929292;
  line-height: 1.65;
}

.conceptFeatureCopy .button {
  margin-top: 20px;
}

.closingCall {
  display: grid;
  grid-template-columns: 0.55fr 2fr auto;
  gap: 40px;
  align-items: end;
  min-height: 500px;
  background: #020202;
}

.closingCall h2 {
  margin: 0;
  font-size: clamp(48px, 6.5vw, 100px);
  font-weight: 480;
  line-height: 0.92;
  letter-spacing: -0.065em;
}

.cinematicFooter {
  align-items: end;
  min-height: 180px;
  padding: 54px clamp(18px, 4.2vw, 72px);
  background: #080808;
  border-top: 1px solid var(--line);
}

.cinematicFooter > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cinematicFooter strong {
  font-size: 26px;
  letter-spacing: 0.04em;
}

.cinematicFooter small {
  color: #666;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  text-transform: uppercase;
}

.cinematicFooter > div:last-child {
  display: flex;
  gap: 28px;
  color: #999;
  font-size: 12px;
}

/* Projects archive */
.projectsHero,
.caseHero {
  position: relative;
  min-height: clamp(500px, 72svh, 760px);
  overflow: hidden;
}

.projectsHero > img {
  filter: saturate(0.88) contrast(1.04) brightness(0.94);
}

.projectsHeroShade,
.caseHeroShade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(2,2,2,0.76), rgba(2,2,2,0.12) 72%), linear-gradient(0deg, rgba(2,2,2,0.56), transparent 55%);
}

.projectsHeroCopy,
.caseHeroCopy {
  position: absolute;
  z-index: 1;
  right: clamp(18px,4.2vw,72px);
  bottom: clamp(48px,7vw,110px);
  left: clamp(18px,4.2vw,72px);
}

.projectsHero h1,
.caseHero h1 {
  max-width: 1100px;
  margin: 22px 0 28px;
  font-size: clamp(62px, 9.5vw, 150px);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.075em;
}

.projectsHeroCopy > p,
.caseHeroCopy > p {
  max-width: 580px;
  color: #bbb;
  font-size: clamp(16px,1.5vw,20px);
}

.projectArchive {
  background: #030303;
}

.projectGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 30px);
}

.projectCardCinematic {
  position: relative;
  display: block;
  min-height: clamp(540px, 58vw, 820px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #080808;
  box-shadow: none;
}

.projectCardCinematic:nth-child(3n + 1) {
  grid-column: 1 / -1;
  min-height: clamp(560px, 60vw, 900px);
}

.projectCardCinematic figure small {
  position: absolute;
  z-index: 1;
  top: 16px;
  right: 16px;
  color: rgba(255,255,255,0.58);
  font-size: 8px;
  text-transform: uppercase;
}

.projectMediaFallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #171717, #040404 60%);
}

.projectMediaFallback span {
  position: absolute;
  top: 24px;
  left: 24px;
  color: #555;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
}

.projectCardBody {
  position: absolute;
  z-index: 1;
  right: clamp(24px,3vw,48px);
  bottom: clamp(24px,3vw,48px);
  left: clamp(24px,3vw,48px);
}

.projectCardIndex {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.projectCardCinematic h3 {
  margin: 12px 0;
  font-size: clamp(38px,5.4vw,82px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.projectCardCinematic p {
  max-width: 520px;
  color: #aaa;
}

.projectCardCinematic .projectCardTags {
  margin: 20px 0;
}

/* Detailed case */
.caseHero > img {
  filter: saturate(0.96) contrast(1.02) brightness(0.97);
}

.caseHeroMeta {
  position: absolute;
  z-index: 1;
  right: clamp(18px,4.2vw,72px);
  bottom: 30px;
  display: flex;
  gap: 28px;
  color: rgba(255,255,255,0.62);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  text-transform: uppercase;
}

.caseIntro,
.equipmentApplication {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px,8vw,140px);
}

.caseIntro h2,
.caseSolution h2,
.equipmentApplication h2 {
  margin: 20px 0 0;
  font-size: clamp(40px,5.4vw,82px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.caseIntroText > p,
.caseSolution p,
.equipmentApplication p {
  color: #aaa;
  font-size: clamp(16px,1.5vw,20px);
  line-height: 1.62;
}

.caseIntro dl {
  margin: 56px 0 0;
}

.caseIntro dl > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.caseIntro dt {
  color: #666;
  font-size: 10px;
  text-transform: uppercase;
}

.caseIntro dd {
  margin: 0;
  font-size: 13px;
}

.caseWideImage {
  height: min(76vw, 1040px);
  overflow: hidden;
}

.caseWideImage img,
.caseGallery img,
.equipmentProjectUse img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.caseSolution {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 70px;
}

.caseSolution > div:last-child {
  max-width: 980px;
}

.caseGallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2px;
  padding: 0 clamp(18px,4.2vw,72px);
}

.caseGallery figure {
  position: relative;
  min-height: clamp(460px, 48vw, 760px);
  margin: 0;
  overflow: hidden;
  background: #080808;
}

.caseGalleryFrame1 { grid-column: 1 / span 7; }
.caseGalleryFrame2 { grid-column: 8 / -1; transform: translateY(72px); }
.caseGalleryFrame3 { grid-column: 1 / span 5; margin-top: 2px !important; }
.caseGalleryFrame4 { grid-column: 6 / -1; margin-top: 74px !important; }

.caseGallery img {
  transition: transform 900ms cubic-bezier(.2,.7,.2,1), filter 600ms ease;
}

.caseGallery figure:hover img {
  filter: saturate(1.06) contrast(1.03);
  transform: scale(1.018);
}

.caseGallery figcaption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  color: rgba(255,255,255,0.7);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  text-transform: uppercase;
}

.caseGallery figcaption span {
  margin-right: 12px;
  color: var(--red);
}

.caseSystem {
  margin-top: 100px;
}

.caseSystemGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.caseSystemGrid article {
  min-height: 320px;
  padding: 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.caseSystemGrid article span {
  color: var(--red);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
}

.caseSystemGrid h3 {
  margin: 120px 0 16px;
  font-size: 24px;
  font-weight: 520;
}

.caseSystemGrid p {
  color: #888;
  font-size: 12px;
  line-height: 1.55;
}

.caseResult {
  min-height: 680px;
  background: #080808;
}

.caseResult blockquote {
  max-width: 1250px;
  margin: 50px 0;
  font-size: clamp(42px,6vw,92px);
  font-weight: 450;
  line-height: 1.02;
  letter-spacing: -0.055em;
}

/* Equipment detail */
.equipmentDetailHero {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  min-height: calc(100svh - 72px);
  border-bottom: 1px solid var(--line);
}

.equipmentDetailCopy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(70px,9vw,150px) clamp(18px,4.2vw,72px);
}

.equipmentDetailCopy h1 {
  margin: 25px 0;
  font-size: clamp(54px,7vw,112px);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.07em;
}

.equipmentDetailCopy > p {
  max-width: 620px;
  color: #aaa;
  font-size: clamp(16px,1.5vw,20px);
  line-height: 1.55;
}

.equipmentDetailActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.equipmentDetailMedia {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 600px;
  overflow: hidden;
  background: #e6e4df;
  color: #111;
}

.equipmentDetailMedia > span {
  position: absolute;
  z-index: 1;
  top: 24px;
  left: 24px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  text-transform: uppercase;
}

.equipmentDetailMedia img {
  width: min(80%, 780px);
  max-height: 74vh;
  object-fit: contain;
  filter: drop-shadow(0 36px 42px rgba(0,0,0,0.28));
  mix-blend-mode: multiply;
}

.equipmentDetailMedia small {
  position: absolute;
  right: 24px;
  bottom: 20px;
  color: #555;
  font-size: 8px;
  text-transform: uppercase;
}

.equipmentKeySpecs {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  border-bottom: 1px solid var(--line);
}

.equipmentKeySpecs > div {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 170px;
  padding: 28px clamp(16px,2.4vw,38px);
  border-right: 1px solid var(--line);
}

.equipmentKeySpecs > div > span {
  color: #666;
  font-size: 9px;
  text-transform: uppercase;
}

.equipmentKeySpecs strong {
  margin-top: auto;
  font-size: clamp(20px,2.2vw,34px);
  font-weight: 500;
}

.equipmentApplication {
  border-bottom: 1px solid var(--line);
}

.equipmentProjectUse {
  position: relative;
  height: min(72vw, 920px);
  overflow: hidden;
}

.equipmentProjectUse::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.82), transparent 70%);
  content: "";
}

.equipmentProjectUse > div {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: clamp(18px,4.2vw,72px);
  width: min(650px,70%);
  transform: translateY(-50%);
}

.equipmentProjectUse h2 {
  margin: 24px 0 34px;
  font-size: clamp(42px,6vw,88px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.equipmentSpecsPanel {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
}

.equipmentSpecsPanel .specGroup {
  border: 1px solid var(--line);
  border-radius: 0;
  background: #080808;
  box-shadow: none;
}

.equipmentSpecsPanel .sourceLinks {
  grid-column: 1 / -1;
}

.equipmentCard,
.projectCard,
.toolCard,
.filterPanel,
.comparison,
.conceptLibrary,
.conceptNotes,
.toolForm {
  border-radius: 0;
}

.equipmentCard .smallButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1100px) {
  .scaleSection { grid-template-columns: 1fr; }
  .scaleStatement { min-height: 260px; border-right: 0; border-bottom: 1px solid var(--line); }
  .scaleMetrics { grid-template-columns: repeat(5,minmax(0,1fr)); }
  .scaleMetrics > div { min-height: 230px; padding: 38px 14px; }
  .catalogPrototype .categoryGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .conceptFeature { grid-template-columns: 1fr; }
  .conceptFeatureMedia { min-height: 560px; border-right: 0; border-bottom: 1px solid var(--line); }
  .closingCall { grid-template-columns: 1fr; align-items: start; }
  .processTrack { overflow-x: auto; }
}

@media (max-width: 760px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    min-height: 64px;
    padding: 9px 12px;
    overflow: visible;
  }

  .brand { min-width: 0; }
  .brandMark { width: 38px; height: 38px; }
  .brand small { display: none; }
  .topAction { display: none; }
  .languageSwitch { position: static; grid-column: 2; grid-row: 1; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    width: 100%;
    padding: 7px 10px;
    overflow-x: auto;
    justify-content: flex-start;
    background: rgba(2,2,2,0.96);
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }

  .nav a {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 8px;
    white-space: nowrap;
  }

  .cinematicHero,
  .projectsHero,
  .caseHero {
    min-height: calc(100svh - 64px);
    margin-top: 48px;
  }

  .cinematicHeroContent {
    min-height: calc(100svh - 64px);
    width: 100%;
    max-width: 100%;
    padding: 96px 20px 82px;
  }
  .cinematicHeroMedia { object-position: 66% center; }
  .cinematicHeroShade { background: linear-gradient(90deg, rgba(2,2,2,0.95), rgba(2,2,2,0.48)), linear-gradient(0deg, rgba(2,2,2,0.8), transparent 60%); }
  .cinematicHeroGrid { right: 14px; left: 14px; }
  .heroIndex { top: 24px; }
  .cinematicHero h1 {
    width: 100%;
    max-width: 100%;
    font-size: 49px;
    line-height: 0.91;
    overflow-wrap: normal;
  }
  .cinematicLead { width: 100%; max-width: 100%; font-size: 14px; overflow-wrap: break-word; }
  .cinematicHero .heroActions { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 100%; }
  .heroScroll { display: none; }

  .section { padding: 76px 14px; }
  .quietGrid::before { background-size: 50% 100%; }
  .cinematicSectionHead { display: grid; gap: 28px; align-items: start; }
  .cinematicSectionHead h2 { font-size: 43px; }
  .cinematicSectionHead > p,
  .cinematicSectionHead > div:last-child { width: 100%; }

  .featuredProjects { grid-template-columns: 1fr; }
  .featuredProject,
  .featuredProject:not(.featuredProjectLead),
  .featuredProjectWide { grid-column: auto; min-height: 500px !important; }
  .featuredProject figure img { object-position: center; }
  .projectOverlay h3 { font-size: 38px; }

  .scaleStatement { padding: 54px 0; }
  .scaleMetrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .scaleMetrics > div { min-height: 185px; border-bottom: 1px solid var(--line); }
  .scaleMetrics > div:last-child { grid-column: 1 / -1; }

  .directionRows a { grid-template-columns: 38px 1fr auto; gap: 12px; min-height: 112px; }
  .directionRows p { display: none; }
  .directionRows h3 { font-size: 36px; }

  .processSection { padding-right: 0; }
  .processTrack { margin-top: 54px; padding-right: 14px; }
  .catalogPrototype .categoryGrid { grid-template-columns: 1fr; }
  .catalogPrototype .categoryCard { min-height: 470px; }
  .conceptFeatureMedia,
  .conceptFeatureMedia .conceptStage,
  .conceptFeatureMedia .conceptRenderVisual { min-height: 430px; }
  .conceptFeatureCopy { padding: 68px 14px; }
  .conceptFeatureCopy h2 { font-size: 43px; }
  .closingCall { min-height: 520px; }
  .closingCall h2 { font-size: 52px; }
  .cinematicFooter { display: grid; gap: 34px; }
  .cinematicFooter > div:last-child { flex-wrap: wrap; }

  .projectsHero > img { object-position: 64% center; }
  .projectsHeroCopy,
  .caseHeroCopy { bottom: 58px; }
  .projectsHero h1,
  .caseHero h1 { font-size: clamp(56px,16vw,80px); }
  .projectGrid { grid-template-columns: 1fr; }
  .projectCardCinematic,
  .projectCardCinematic:nth-child(3n + 1) { grid-column: auto; min-height: 570px; }

  .caseHero > img { object-position: 62% center; }
  .caseHeroMeta { right: 14px; bottom: 20px; left: 14px; justify-content: space-between; gap: 8px; font-size: 7px; }
  .caseIntro,
  .caseSolution,
  .equipmentApplication { grid-template-columns: 1fr; gap: 32px; }
  .caseIntro h2,
  .caseSolution h2,
  .equipmentApplication h2 { font-size: 43px; }
  .caseWideImage { height: 80svh; }
  .caseGallery { grid-template-columns: 1fr; padding: 0 14px; }
  .caseGallery figure { min-height: 540px; }
  .caseGalleryTall { transform: none; }
  .caseGalleryFrame1,
  .caseGalleryFrame2,
  .caseGalleryFrame3,
  .caseGalleryFrame4 {
    grid-column: auto;
    min-height: 520px;
    margin-top: 0 !important;
    transform: none;
  }
  .caseSystem { margin-top: 0; }
  .caseSystemGrid { grid-template-columns: 1fr; }
  .caseSystemGrid article { min-height: 230px; }
  .caseSystemGrid h3 { margin-top: 70px; }
  .caseResult blockquote { font-size: 42px; }

  .equipmentDetailHero { grid-template-columns: 1fr; margin-top: 48px; }
  .equipmentDetailCopy { min-height: 620px; padding: 82px 14px 64px; }
  .equipmentDetailCopy h1 { font-size: 58px; }
  .equipmentDetailMedia { min-height: 520px; }
  .equipmentKeySpecs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .equipmentKeySpecs > div { min-height: 145px; }
  .equipmentKeySpecs > div:last-child { grid-column: 1 / -1; }
  .equipmentProjectUse { height: 78svh; }
  .equipmentProjectUse > div { width: calc(100% - 28px); }
  .equipmentProjectUse h2 { font-size: 45px; }
  .equipmentSpecsPanel { grid-template-columns: 1fr; }
  .equipmentSpecsPanel .sourceLinks { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .cinematicHeroMedia { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* 2026 responsive layout hardening */
.hero.section {
  min-height: 0;
  padding-top: 36px;
  padding-bottom: 24px;
}

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body,
  main,
  section,
  .section,
  .hero,
  .heroInner,
  .pageHero,
  .pageHero > *,
  .sectionHead,
  .sectionHead > *,
  .conceptWorkspace,
  .conceptWorkspaceHeader,
  .conceptWorkspaceHeader > *,
  .conceptResult,
  .conceptResult > *,
  .toolForm,
  .field,
  .categoryGrid,
  .categoryGridLarge,
  .catalogShell,
  .catalogContent {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    width: 100%;
    padding: 10px 12px 11px;
    overflow: hidden;
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    min-width: 0;
    padding-right: 0;
  }

  .brandText {
    min-width: 0;
  }

  .brandText strong,
  .brandText small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .languageSwitch {
    position: static;
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: repeat(2, 30px);
    width: auto;
  }

  .topAction {
    position: static;
    grid-column: 3;
    grid-row: 1;
    min-height: 42px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-column: 1 / -1;
    grid-row: 2;
    order: initial;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 3px 0 2px;
    overflow: visible;
  }

  .nav a {
    min-width: 0;
    min-height: 36px;
    padding: 8px 5px;
    font-size: 11px;
    text-align: center;
    white-space: normal;
  }

  .section {
    width: 100%;
    padding: 40px 14px;
  }

  .hero.section {
    min-height: 0;
    padding-top: 28px;
    padding-bottom: 22px;
  }

  .heroInner,
  .pageHero > div,
  .conceptWorkspaceHeader > div {
    width: 100%;
  }

  .pageHero,
  .conceptPageHero,
  .toolsHero {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  h1,
  h2,
  h3,
  p,
  .lead,
  .hero p,
  .pageHero p,
  .conceptWorkspaceHeader p {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .hero h1,
  .pageHero h1,
  .toolsHero h1,
  .conceptWorkspaceHeader h2,
  .sectionHead h2 {
    font-size: 30px;
    line-height: 1.06;
  }

  .conceptWorkspace .toolForm,
  .conceptNotes,
  .conceptLibrary,
  .comparePicker,
  .comparison,
  .catalogToolbar,
  .filterPanel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .conceptWorkspace input,
  .conceptWorkspace select,
  .conceptWorkspace textarea,
  .catalogShell input,
  .catalogShell select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 390px) {
  .brand {
    padding-right: 0;
  }

  .brandLogo {
    width: 44px;
    height: 44px;
  }

  .brandText strong {
    font-size: 13px;
  }

  .brandText small {
    font-size: 8px;
  }

  .languageSwitch,
  .topAction {
    position: static;
    top: auto;
    right: auto;
  }

  .topAction {
    font-size: 12px;
  }

  .hero h1,
  .pageHero h1,
  .toolsHero h1,
  .conceptWorkspaceHeader h2,
  .sectionHead h2 {
    font-size: 28px;
  }
}

/* Final cinematic responsive layer. Keep after legacy layout hardening. */
.cinematicHero h1 > span {
  display: block;
}

@media (max-width: 760px) {
  .cinematicPage .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 46px;
    gap: 8px;
    min-height: 64px;
    padding: 9px 12px;
    overflow: visible;
  }

  .cinematicPage .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    padding-right: 0;
  }

  .cinematicPage .languageSwitch {
    position: static;
    grid-column: 2;
    grid-row: 1;
    width: auto;
  }

  .cinematicPage .topAction {
    display: none;
  }

  .cinematicPage .nav {
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    grid-template-columns: none;
    gap: 4px;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 7px 10px;
    overflow-x: auto;
    background: rgba(2, 2, 2, 0.96);
    border-bottom: 1px solid var(--line);
  }

  .cinematicPage .nav a {
    flex: 0 0 auto;
    min-width: auto;
    min-height: 34px;
    padding: 7px 8px;
    font-size: 11px;
    white-space: nowrap;
  }

  .cinematicPage .section {
    padding: 76px 14px;
  }

  .cinematicPage .cinematicHeroContent {
    width: 100%;
    max-width: 100%;
    padding: 96px 20px 82px;
  }

  .cinematicPage .cinematicHero h1 {
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    font-size: 47px;
    line-height: 0.91;
    white-space: normal;
  }

  .cinematicPage .cinematicLead,
  .cinematicPage .cinematicHero .heroActions {
    width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
  }

  .cinematicPage .cinematicSectionHead h2 {
    font-size: 43px;
    line-height: 0.98;
  }
}

/* Final GTO editorial overrides. Intentionally last. */
.interfacePage main { background: #030303; }
.interfacePage .pageHero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .5fr);
  align-items: end;
  min-height: 62svh;
  padding-top: clamp(130px, 16vw, 240px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 78% 24%, rgba(237,23,57,.12), transparent 24%), linear-gradient(135deg,#020202 0 62%,#0b0b0b 62% 100%);
}
.interfacePage .pageHero::before {
  position: absolute;
  inset: 0 clamp(18px,4.2vw,72px);
  background-image: repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(255,255,255,.05) calc(25% - 1px) 25%);
  pointer-events: none;
  content: "";
}
.interfacePage .pageHero > * { position: relative; z-index: 1; }
.interfacePage .pageHero h1 {
  max-width: 1080px;
  margin: 24px 0 26px;
  font-size: clamp(58px,7.6vw,122px);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.07em;
}
.interfacePage .pageHero p { max-width: 690px; color: #aaa; font-size: clamp(16px,1.45vw,21px); line-height: 1.55; }
.interfacePage .breadcrumb { color:#777; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; letter-spacing:.09em; text-transform:uppercase; }
.interfacePage .catalogStats,.interfacePage .toolsHeroCount { align-self:end; border-left:1px solid var(--line); }

.processTrack { position:relative; border-top:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.025) 40%,transparent); }
.processTrack::before { position:absolute; z-index:1; top:-1px; right:0; left:0; height:2px; background:linear-gradient(90deg,var(--red) 0 16%,#f1eee8 36%,rgba(255,255,255,.22) 72%,transparent); box-shadow:0 0 22px rgba(237,23,57,.2); content:""; }
.processTrack li { min-height:260px; padding-top:46px; }
.processTrack li:nth-child(even) { padding-top:84px; }
.processTrack li::before { z-index:2; top:-7px; width:13px; height:13px; border:3px solid #070707; background:#f3f0e9; box-shadow:0 0 0 1px var(--red),0 0 18px rgba(237,23,57,.7); }
.processTrack li::after { position:absolute; top:7px; left:5px; width:1px; height:26px; background:linear-gradient(var(--red),transparent); content:""; }
.processTrack li:nth-child(even)::after { height:62px; }
.processTrack li:last-child::before { background:var(--red); }

.categoryCardMedia,.equipmentPhoto,.compareProductImage,.pickerThumb,.productPhotoLarge,.equipmentDetailMedia {
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at 50% 34%,rgba(255,255,255,.55),transparent 36%),linear-gradient(145deg,#cbc8bf 0%,#9a9994 52%,#6f706e 100%);
}
.categoryCardMedia::before,.equipmentPhoto::before,.equipmentDetailMedia::before { position:absolute; inset:0; background-image:linear-gradient(rgba(0,0,0,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.055) 1px,transparent 1px); background-size:28px 28px; pointer-events:none; content:""; }
.categoryCardMedia::after,.equipmentPhoto::after,.equipmentDetailMedia::after { position:absolute; right:18px; bottom:14px; left:18px; height:1px; background:linear-gradient(90deg,var(--red) 0 24%,rgba(0,0,0,.3) 24%); pointer-events:none; content:""; }
.categoryCardMedia img,.equipmentPhoto img,.compareProductImage img,.pickerThumb img,.productPhotoLarge img,.equipmentDetailMedia img { position:relative; z-index:1; filter:grayscale(.9) contrast(1.12) drop-shadow(0 28px 28px rgba(0,0,0,.28)); mix-blend-mode:multiply; }
.categoryCard:hover .categoryCardMedia img,.equipmentCard:hover .equipmentPhoto img { filter:grayscale(.15) contrast(1.08) drop-shadow(0 32px 34px rgba(0,0,0,.32)); }

.interfacePage .categoryGrid,.interfacePage .equipmentGrid { gap:1px; padding:1px; background:var(--line); }
.interfacePage .categoryCard,.interfacePage .equipmentCard { border:0; border-radius:0; background:#070707; box-shadow:none; }
.interfacePage .categoryCard,.catalogPrototype .categoryCard { grid-template-rows:310px minmax(0,1fr); }
.interfacePage .categoryCard { min-height:590px; }
.interfacePage .categoryCardMedia,.catalogPrototype .categoryCardMedia { height:310px; background:radial-gradient(circle at 50% 34%,rgba(255,255,255,.55),transparent 36%),linear-gradient(145deg,#cbc8bf,#898986 55%,#686967); }
.interfacePage .categoryCardBody { padding:26px 24px; }
.interfacePage .categoryCard h3,.catalogPrototype .categoryCard h3 { color:#f2efe8; font-size:clamp(28px,2.4vw,42px); font-weight:500; line-height:.96; letter-spacing:-.045em; }
.interfacePage .categoryCard p,.interfacePage .equipmentCard p { color:#8d8d8d; }
.equipmentPhoto { min-height:270px; }
.equipmentCardBody { background:#080808; }
.equipmentCard h3 { color:#f2efe8; font-size:23px; font-weight:500; letter-spacing:-.035em; }

.interfacePage .filters,.interfacePage .comparePicker,.interfacePage .comparison,.interfacePage .toolPanel,.interfacePage .toolForm,.interfacePage .conceptNotes,.interfacePage .conceptLibrary,.interfacePage .requestForm,.interfacePage .aboutGrid > * { border-color:var(--line); border-radius:0; background:#080808; box-shadow:none; }
.interfacePage input,.interfacePage select,.interfacePage textarea { border-color:rgba(255,255,255,.18); border-radius:0; background:#050505; color:#f1eee8; box-shadow:none; }
.interfacePage input:focus,.interfacePage select:focus,.interfacePage textarea:focus { border-color:var(--red); outline:0; box-shadow:0 0 0 1px var(--red); }
.interfacePage .toolCard,.interfacePage .compareCategoryCard,.interfacePage .pickerItem { border-radius:0; background:#070707; box-shadow:none; }
.interfacePage .toolCard.active,.interfacePage .toolCard:hover,.interfacePage .compareCategoryCard:hover,.interfacePage .pickerItem:hover { border-color:var(--red); background:#0e0e0e; }
.interfacePage .toolPanel { min-height:720px; }
.interfacePage .toolsLayout { grid-template-columns:minmax(245px,290px) minmax(0,1fr); gap:1px; background:var(--line); }
.interfacePage .toolsNav,.interfacePage .toolPanel { background-color:#050505; }
.interfacePage .toolsNav { padding:22px 14px; }
.interfacePage .compareTable th,.interfacePage .compareTable td { border-color:var(--line); background:#080808; }
.interfacePage .compareTable tr.diff td { background:#0d0b0b; }

.projectGrid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; }
.projectCardCinematic,.projectCardCinematic:nth-child(3n + 1) { grid-column:auto; min-height:clamp(480px,42vw,670px); }
.projectCardCinematic:nth-child(5n + 1),.projectCardCinematic:nth-child(5n + 5) { grid-column:span 2; min-height:clamp(560px,52vw,790px); }
.projectCardCinematic h3 { font-size:clamp(34px,4vw,66px); }
.projectCardCinematic p { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.projectMediaFallback { position:relative; background:radial-gradient(circle at 70% 28%,rgba(237,23,57,.2),transparent 24%),repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(255,255,255,.08) calc(25% - 1px) 25%),#090909; }
.projectMediaFallback strong { position:absolute; right:24px; bottom:84px; left:24px; max-width:420px; color:#d5d2cc; font-size:clamp(28px,3vw,48px); font-weight:500; line-height:.95; }
.projectMediaFallback i { position:absolute; right:24px; bottom:52px; left:24px; height:1px; background:linear-gradient(90deg,var(--red) 0 35%,var(--line) 35%); }

.interfacePage .aboutGrid { gap:1px; background:var(--line); }
.interfacePage .aboutGrid > * { margin:0; padding:clamp(30px,4vw,64px); }
.interfacePage .processGrid { gap:0; border-top:2px solid transparent; border-image:linear-gradient(90deg,var(--red),#f1eee8,transparent) 1; }
.interfacePage .processGrid article { min-height:210px; border-color:var(--line); border-radius:0; background:#060606; }
.interfacePage .requestSection { border-top:1px solid var(--line); background:#050505; }

@media (max-width:1100px) {
  .projectGrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .projectCardCinematic:nth-child(5n + 1),.projectCardCinematic:nth-child(5n + 5) { grid-column:auto; }
  .interfacePage .toolsLayout { grid-template-columns:230px minmax(0,1fr); }
}
@media (max-width:760px) {
  .interfacePage .pageHero { grid-template-columns:1fr; min-height:74svh; padding-top:126px; }
  .interfacePage .pageHero h1 { font-size:clamp(43px,13vw,62px); line-height:.92; }
  .interfacePage .catalogStats,.interfacePage .toolsHeroCount { border-top:1px solid var(--line); border-left:0; }
  .processTrack li,.processTrack li:nth-child(even) { min-height:230px; padding-top:48px; }
  .processTrack li:nth-child(even)::after { height:26px; }
  .interfacePage .toolsLayout,.projectGrid { grid-template-columns:1fr; }
  .interfacePage .toolsNav { position:static; max-height:360px; }
  .projectCardCinematic,.projectCardCinematic:nth-child(3n + 1),.projectCardCinematic:nth-child(5n + 1),.projectCardCinematic:nth-child(5n + 5) { grid-column:auto; min-height:590px; }
  .interfacePage .categoryCard { min-height:520px; }
}

/* Static event showcase: five full-size frames in normal document flow. */
.eventReelSection {
  padding-bottom: 0;
  overflow: visible;
}

.eventStaticStory {
  margin-top: clamp(54px, 7vw, 110px);
}

.eventStaticList {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--line);
  list-style: none;
}

.eventStaticList li {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #030303;
  isolation: isolate;
}

.eventStaticList li > img {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.015) brightness(1.04);
}

.eventStaticList li::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.02) 0%, transparent 42%, rgba(0,0,0,.30) 64%, rgba(0,0,0,.82) 100%),
    linear-gradient(90deg, rgba(0,0,0,.16), transparent 72%);
  pointer-events: none;
  content: "";
}

.eventStaticList li > div {
  position: absolute;
  z-index: 2;
  right: clamp(20px,4.2vw,72px);
  bottom: clamp(26px,3.4vw,56px);
  left: clamp(20px,4.2vw,72px);
  display: grid;
  grid-template-columns: minmax(90px,.22fr) minmax(0,1fr) minmax(150px,.25fr);
  gap: clamp(20px,3vw,56px);
  align-items: end;
  color: #fff;
}

.eventStaticList span,
.eventStaticList small {
  color: rgba(255,255,255,.76);
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.eventStaticList strong {
  max-width: 820px;
  color: #f6f3ec;
  font-family: var(--display-font);
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.04em;
}

.eventStaticList a {
  grid-column: 2;
  width: max-content;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255,255,255,.5);
  color: #fff;
  font-size: 14px;
}

.eventStaticList :is(span, strong, small, a) {
  text-shadow:
    0 2px 3px rgba(0, 0, 0, .98),
    0 7px 24px rgba(0, 0, 0, .92),
    0 0 52px rgba(0, 0, 0, .78);
}

.conceptGeneratingHint {
  display: block;
  max-width: 540px;
  margin-top: 10px;
  color: #8e8e8e;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

@media (max-width:760px) {
  .eventStaticStory {
    margin-top: 0;
  }

  .eventStaticList li {
    display: grid;
    grid-template-rows: auto auto;
    min-height: 0;
    background: #050505;
  }

  .eventStaticList li::after {
    content: none;
  }

  .eventStaticList li > img {
    position: relative;
    z-index: auto;
    inset: auto;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: saturate(.86) contrast(1.06) brightness(.84);
  }

  .eventStaticList li > div {
    position: relative;
    z-index: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 245px;
    padding: 24px 20px 34px;
  }

  .eventStaticList span,
  .eventStaticList small {
    color: #858585;
    font-size: 10px;
  }

  .eventStaticList strong {
    max-width: 350px;
    font-size: 31px;
    line-height: .98;
    letter-spacing: -.045em;
  }

  .eventStaticList small {
    align-self: end;
  }

  .eventStaticList a {
    grid-column: auto;
    margin-top: 8px;
    font-size: 12px;
  }

  .eventStaticList :is(span, strong, small, a) {
    text-shadow: none;
  }

  .interfacePage[data-page="concept-generator"] .conceptPageHero h1 {
    max-width: 100%;
    font-size: clamp(32px,8.7vw,38px);
    line-height: .98;
    letter-spacing: -.052em;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .interfacePage .categoryCard {
    grid-template-rows: 350px minmax(0,1fr);
    min-height: 560px;
  }

  .interfacePage .categoryGrid,
  .interfacePage .categoryGridLarge {
    grid-template-columns: 1fr;
  }

  .interfacePage .categoryCardMedia,
  .catalogPrototype .categoryCardMedia {
    height: 350px;
  }

  .interfacePage .categoryCardMedia img,
  .catalogPrototype .categoryCardMedia img {
    width: 84%;
    max-width: none;
    max-height: 82%;
    padding: 0;
    transform: scale(1.42);
  }

  .interfacePage .categoryCard h3,
  .catalogPrototype .categoryCard h3 {
    font-size: 31px;
    white-space: nowrap;
  }
}

/* 2026-08-04 mobile cinematic and catalog pass. Keep this block last. */
.srOnly {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.cinematicHeroPicture {
  position: absolute;
  inset: 0;
  display: block;
}

.cinematicHeroPicture .cinematicHeroMedia {
  position: absolute;
  inset: 0;
}

.catalogMobileControls {
  display: none;
}

#resultCount {
  display: flex;
  gap: clamp(18px, 2vw, 34px);
  align-items: center;
}

#resultCount span {
  display: grid;
  gap: 2px;
}

#resultCount small {
  color: #777;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

#resultCount strong {
  color: #f0ede6;
  font-size: 18px;
  font-weight: 520;
}

.scaleMetrics > div {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(237, 23, 57, .09), transparent 30%),
    linear-gradient(150deg, rgba(255, 255, 255, .025), transparent 45%);
}

.scaleMetrics > div::before {
  display: none;
  content: none;
}

.scaleMetrics > div::after {
  position: absolute;
  right: 22px;
  bottom: 28px;
  left: 22px;
  height: 1px;
  background: linear-gradient(90deg, var(--red) 0 18%, rgba(255, 255, 255, .13) 18% 100%);
  content: "";
}

.scaleMetrics strong,
.scaleMetrics span {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  .cinematicHeroPicture .cinematicHeroMedia {
    object-position: 49% center;
    filter: saturate(.82) contrast(1.08) brightness(.72);
  }

  .cinematicHeroShade {
    background:
      linear-gradient(180deg, rgba(2, 2, 2, .3) 0%, rgba(2, 2, 2, .48) 38%, rgba(2, 2, 2, .94) 100%),
      linear-gradient(90deg, rgba(2, 2, 2, .74), transparent 78%);
  }

  .eventReelSection {
    padding-top: 68px;
  }

  .eventReelSection > .sectionHead {
    margin-bottom: 34px;
  }

  .eventReelSection > .sectionHead h2 {
    max-width: 340px;
    font-size: 38px;
  }

  .scaleSection {
    display: block;
    min-height: 0;
    padding: 0 14px 72px;
  }

  .scaleStatement {
    min-height: 0;
    padding: 58px 10px 50px;
    border: 0;
  }

  .scaleStatement p {
    margin-top: 52px;
    font-size: 15px;
  }

  .scaleMetrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    background: transparent;
  }

  .scaleMetrics > div {
    min-height: 176px;
    padding: 82px 18px 44px;
    border: 0;
    background:
      radial-gradient(circle at 86% 10%, rgba(237, 23, 57, .12), transparent 28%),
      linear-gradient(145deg, #101010, #060606 68%);
  }

  .scaleMetrics > div:last-child {
    order: -1;
    grid-column: 1 / -1;
    min-height: 232px;
    padding: 104px 20px 52px;
    background:
      radial-gradient(circle at 82% 16%, rgba(237, 23, 57, .24), transparent 28%),
      linear-gradient(135deg, #15100f, #060606 65%);
  }

  .scaleMetrics > div::before {
    top: 15px;
    right: 14px;
    font-size: 74px;
  }

  .scaleMetrics > div:last-child::before {
    font-size: 104px;
  }

  .scaleMetrics > div::after {
    right: 18px;
    bottom: 24px;
    left: 18px;
  }

  .scaleMetrics strong {
    font-size: 48px;
  }

  .scaleMetrics > div:last-child strong {
    font-size: clamp(62px, 18vw, 76px);
  }

  .scaleMetrics span {
    max-width: 126px;
    font-size: 9px;
  }

  .interfacePage[data-page="category"] .pageHero {
    min-height: 54svh;
    padding-top: 118px;
    padding-bottom: 54px;
  }

  .interfacePage[data-page="category"] .pageHero h1 {
    margin-bottom: 20px;
    font-size: clamp(40px, 11vw, 52px);
  }

  .interfacePage[data-page="category"] main > .section:nth-of-type(2) {
    padding: 24px 14px 72px;
  }

  .interfacePage[data-page="category"] .catalogLayout {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .catalogMobileControls {
    display: grid;
    gap: 12px;
    width: 100%;
    margin-bottom: 18px;
  }

  .catalogMobileControlRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .catalogMobileSearch input {
    height: 52px;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: #0a0a0a;
    font-size: 16px;
  }

  .catalogFilterToggle {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .26);
    background: #f0ede6;
    color: #050505;
    font-size: 13px;
    font-weight: 750;
  }

  .catalogFilterToggle b:empty {
    display: none;
  }

  .catalogFilterToggle b:not(:empty) {
    display: grid;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    place-items: center;
    background: var(--red);
    color: #fff;
    font-size: 10px;
  }

  .catalogQuickFilters {
    display: flex;
    gap: 7px;
    width: calc(100vw - 28px);
    padding: 0 0 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .catalogQuickFilters::-webkit-scrollbar {
    display: none;
  }

  .catalogQuickFilters button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: #080808;
    color: #aaa;
    font-size: 12px;
    scroll-snap-align: start;
  }

  .catalogQuickFilters button.isActive {
    border-color: #f0ede6;
    background: #f0ede6;
    color: #050505;
  }

  .interfacePage[data-page="category"] .filters {
    display: none;
    position: static;
    width: 100%;
    margin: 0 0 18px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: #090909;
  }

  .interfacePage[data-page="category"] .filters.isOpen {
    display: block;
  }

  .interfacePage[data-page="category"] .filters .searchBox {
    display: none;
  }

  .interfacePage[data-page="category"] .filterBlock {
    margin-bottom: 14px;
  }

  .interfacePage[data-page="category"] .filterBack {
    margin-top: 4px;
  }

  .interfacePage[data-page="category"] .catalogContent,
  .interfacePage[data-page="category"] .equipmentGrid,
  .interfacePage[data-page="category"] .equipmentCard {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .interfacePage[data-page="category"] .catalogToolbar {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 56px;
    margin-bottom: 14px;
    padding: 0 2px;
  }

  .interfacePage[data-page="category"] #resultCount {
    display: flex;
    gap: 15px;
    max-width: none;
    line-height: 1.2;
  }

  .interfacePage[data-page="category"] #resultCount small {
    font-size: 7px;
  }

  .interfacePage[data-page="category"] #resultCount strong {
    font-size: 17px;
  }

  .interfacePage[data-page="category"] .catalogToolbar .iconTextButton {
    min-height: 42px;
    padding: 0 13px;
    font-size: 12px;
  }

  .interfacePage[data-page="category"] .equipmentGrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 0;
    background: transparent;
  }

  .interfacePage[data-page="category"] .equipmentCard {
    grid-template-rows: 350px auto auto;
    min-height: 0;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 20px;
    background: #070707;
  }

  .interfacePage[data-page="category"] .equipmentPhoto {
    min-height: 350px;
    border-bottom: 0;
    border-radius: 19px 19px 0 0;
    background:
      radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .68), transparent 38%),
      linear-gradient(145deg, #c9c6bd, #8f908d 58%, #686966);
  }

  .interfacePage[data-page="category"] .equipmentPhoto img {
    width: 82%;
    height: 82%;
    max-width: 82%;
    max-height: 82%;
    padding: 0;
    object-fit: contain;
    transform: scale(1.05);
  }

  .interfacePage[data-page="category"] .equipmentCardBody {
    padding: 24px 20px 8px;
  }

  .interfacePage[data-page="category"] .equipmentCard h3 {
    margin: 0;
    font-size: 28px;
    line-height: 1;
    overflow-wrap: normal;
    word-break: normal;
  }

  .interfacePage[data-page="category"] .equipmentCard p {
    display: -webkit-box;
    margin-top: 14px;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  .interfacePage[data-page="category"] .cardMeta {
    margin-top: 18px;
  }

  .interfacePage[data-page="category"] .cardActions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 20px 20px;
  }

  .interfacePage[data-page="category"] .cardActions button[data-open] {
    display: none;
  }

  .interfacePage[data-page="category"] .cardActions .smallButton {
    min-width: 0;
    min-height: 48px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 13px;
  }

  .interfacePage[data-page="category"] .cardActions a.smallButton {
    border-color: #f0ede6;
    background: #f0ede6;
    color: #050505;
  }
}

/* GTO Workspace / account */
.accountPage {
  background: #030303;
}

.accountPage [hidden] {
  display: none !important;
}

.accountHero {
  position: relative;
  display: grid;
  min-height: 82svh;
  padding: clamp(150px, 17vw, 250px) clamp(18px, 4.2vw, 72px) clamp(70px, 8vw, 120px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 80% 28%, rgba(237, 23, 57, .17), transparent 23%),
    linear-gradient(135deg, #030303 0 63%, #0c0909 63% 100%);
}

.accountHero::after {
  position: absolute;
  z-index: 0;
  top: 18%;
  right: 5%;
  width: min(40vw, 620px);
  height: min(40vw, 620px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  box-shadow:
    0 0 0 4vw rgba(255, 255, 255, .018),
    0 0 0 9vw rgba(255, 255, 255, .012),
    0 0 100px rgba(237, 23, 57, .12);
  content: "";
}

.accountHeroIndex {
  position: absolute;
  z-index: 2;
  top: 34px;
  right: clamp(18px, 4.2vw, 72px);
  left: clamp(18px, 4.2vw, 72px);
  display: flex;
  justify-content: space-between;
  color: #666;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: .1em;
}

.accountHeroCopy {
  position: relative;
  z-index: 2;
  align-self: end;
  max-width: 1120px;
}

.accountHero h1 {
  max-width: 1120px;
  margin: 28px 0 34px;
  font-size: clamp(68px, 9vw, 142px);
  font-weight: 510;
  line-height: .86;
  letter-spacing: -.075em;
}

.accountHero p {
  max-width: 700px;
  color: #aaa;
  font-size: clamp(17px, 1.5vw, 22px);
  line-height: 1.5;
}

.accountHeroSignal {
  position: absolute;
  z-index: 2;
  right: clamp(18px, 4.2vw, 72px);
  bottom: 54px;
  display: grid;
  grid-template-columns: 80px repeat(3, auto);
  gap: 14px;
  align-items: center;
  color: #777;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
}

.accountHeroSignal i {
  height: 1px;
  background: linear-gradient(90deg, var(--red), rgba(255, 255, 255, .16));
}

.accountGate {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(380px, .65fr);
  min-height: 900px;
  border-bottom: 1px solid var(--line);
}

.accountPromise {
  padding: clamp(72px, 8vw, 128px) clamp(28px, 5vw, 86px);
  border-right: 1px solid var(--line);
}

.accountPromise > h2 {
  max-width: 920px;
  margin: 30px 0 72px;
  font-size: clamp(52px, 6vw, 96px);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.065em;
}

.accountPromiseGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.accountPromiseGrid article {
  position: relative;
  min-height: 240px;
  padding: 30px;
  background: #070707;
}

.accountPromiseGrid article::after {
  position: absolute;
  right: 28px;
  bottom: 26px;
  left: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--red) 0 20%, rgba(255, 255, 255, .1) 20%);
  content: "";
}

.accountPromiseGrid span {
  color: #6d6d6d;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
}

.accountPromiseGrid strong {
  display: block;
  margin: 52px 0 12px;
  font-size: 25px;
  font-weight: 520;
  letter-spacing: -.035em;
}

.accountPromiseGrid p {
  max-width: 340px;
  color: #858585;
  font-size: 14px;
  line-height: 1.5;
}

.accountLocalState {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 42px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.accountLocalState span {
  color: #777;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.accountLocalState strong {
  font-size: 13px;
  font-weight: 500;
}

.accountAuth {
  align-self: start;
  position: sticky;
  top: 0;
  min-height: 100svh;
  padding: clamp(72px, 8vw, 120px) clamp(28px, 4vw, 64px);
  background:
    radial-gradient(circle at 90% 8%, rgba(237, 23, 57, .12), transparent 25%),
    #080808;
}

.accountAuthTabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 64px;
  border-bottom: 1px solid var(--line);
}

.accountAuthTabs button {
  min-height: 48px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #777;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.accountAuthTabs button.isActive {
  border-color: var(--red);
  color: #f1eee8;
}

.accountAuthIntro h2 {
  margin: 24px 0 14px;
  font-size: clamp(40px, 4vw, 64px);
  font-weight: 500;
  line-height: .94;
  letter-spacing: -.055em;
}

.accountAuthIntro p {
  max-width: 430px;
  color: #888;
  font-size: 14px;
  line-height: 1.55;
}

.accountLaunchNotice {
  border: 1px solid rgba(245, 24, 66, 0.5);
  background: linear-gradient(135deg, rgba(245, 24, 66, 0.14), rgba(245, 24, 66, 0.02));
  padding: 18px;
  display: grid;
  gap: 7px;
  color: var(--paper);
}

.accountLaunchNotice[hidden] {
  display: none;
}

.accountLaunchNotice strong {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.accountLaunchNotice span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.accountAuthForm :disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.accountAuthForm {
  display: grid;
  gap: 18px;
  margin-top: 44px;
}

.accountAuthForm label:not(.accountConsent) {
  display: grid;
  gap: 9px;
  color: #8d8d8d;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.accountAuthForm input {
  height: 54px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: #040404;
  color: #f0ede6;
  font-size: 15px;
}

.accountAuthForm .button {
  min-height: 56px;
  margin-top: 8px;
}

.accountConsent {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  color: #8e8e8e;
  font-size: 12px;
  line-height: 1.45;
  cursor: pointer;
}

.accountConsent input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--red);
}

.accountAuthStatus {
  display: block;
  min-height: 22px;
  margin-top: 22px;
  color: #aaa;
  font-size: 13px;
}

.accountAuthStatus[data-type="error"] {
  color: #ff6d77;
}

.accountSecurityNote {
  display: block;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: #666;
  font-size: 10px;
  line-height: 1.5;
}

.accountWorkspace {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  min-height: calc(100svh - 72px);
  border-bottom: 1px solid var(--line);
}

.accountSidebar {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding: 28px 18px;
  border-right: 1px solid var(--line);
  background: #050505;
}

.accountIdentity {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 0 8px 28px;
  border-bottom: 1px solid var(--line);
}

.accountAvatar {
  display: grid;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(237, 23, 57, .55);
  place-items: center;
  background: radial-gradient(circle at 70% 20%, rgba(237, 23, 57, .35), transparent 35%), #0a0a0a;
  font-size: 12px;
  font-weight: 800;
}

.accountIdentity strong,
.accountIdentity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountIdentity strong {
  font-size: 13px;
}

.accountIdentity small {
  margin-top: 4px;
  color: #777;
  font-size: 10px;
}

.accountSidebar nav {
  display: grid;
  gap: 4px;
  margin-top: 28px;
}

.accountSidebar nav button,
.accountLogout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 13px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: #858585;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.accountSidebar nav button small {
  color: #555;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
}

.accountSidebar nav button:hover,
.accountSidebar nav button.isActive {
  border-left-color: var(--red);
  background: #0a0a0a;
  color: #f0ede6;
}

.accountLogout {
  margin-top: auto;
  border-top: 1px solid var(--line);
}

.accountCanvas {
  min-width: 0;
  padding: clamp(38px, 5vw, 78px);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255, 255, 255, .035) calc(25% - 1px) 25%),
    #030303;
}

.accountCanvasHeader {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(50px, 7vw, 90px);
}

.accountCanvasHeader h2 {
  margin: 22px 0 0;
  font-size: clamp(54px, 6.4vw, 102px);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.068em;
}

.accountPlan {
  display: grid;
  min-width: 116px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  text-align: right;
}

.accountPlan span {
  color: #666;
  font-size: 8px;
  text-transform: uppercase;
}

.accountPlan strong {
  margin-top: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

.accountMetricGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.accountMetricGrid article {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: 24px;
  overflow: hidden;
  background: linear-gradient(145deg, #0d0d0d, #050505 68%);
}

.accountMetricGrid article::after {
  position: absolute;
  right: -20px;
  bottom: -54px;
  width: 160px;
  height: 160px;
  border: 1px solid rgba(237, 23, 57, .14);
  border-radius: 50%;
  content: "";
}

.accountMetricGrid span {
  color: #5d5d5d;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
}

.accountMetricGrid strong {
  margin-top: auto;
  font-size: clamp(50px, 5vw, 78px);
  font-weight: 450;
  line-height: 1;
  letter-spacing: -.06em;
}

.accountMetricGrid small {
  max-width: 130px;
  margin-top: 10px;
  color: #777;
  font-size: 9px;
  line-height: 1.35;
  text-transform: uppercase;
}

.accountOverviewGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 1px;
  margin-top: 1px;
  background: var(--line);
}

.accountRecent,
.accountSyncCard {
  min-height: 460px;
  padding: clamp(28px, 4vw, 52px);
  background: #070707;
}

.accountBlockHead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}

.accountBlockHead h3,
.accountSyncCard h3,
.accountRoomsHero h3 {
  margin: 16px 0 0;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.052em;
}

.accountBlockHead button,
.accountBlockHead a,
.accountArtifactBody button {
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .24);
  background: transparent;
  color: #aaa;
  font-size: 11px;
  cursor: pointer;
}

.accountRecentList {
  border-top: 1px solid var(--line);
}

.accountRecentList > article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 72px;
  border-bottom: 1px solid var(--line);
}

.accountRecentList > article > span,
.accountRecentList time {
  color: #646464;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
}

.accountRecentList small,
.accountRecentList strong {
  display: block;
}

.accountRecentList small {
  margin-bottom: 4px;
  color: #747474;
  font-size: 8px;
  text-transform: uppercase;
}

.accountRecentList strong {
  font-size: 13px;
  font-weight: 520;
}

.accountSyncCard {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 88% 8%, rgba(237, 23, 57, .17), transparent 28%),
    #090707;
}

.accountSyncCard p {
  max-width: 430px;
  margin: 24px 0;
  color: #8b8b8b;
  font-size: 14px;
  line-height: 1.55;
}

.accountSyncCard .button {
  width: 100%;
  margin-top: auto;
}

.accountSyncCard output {
  min-height: 18px;
  margin-top: 14px;
  color: #8b8b8b;
  font-size: 11px;
}

.accountArtifactGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.accountArtifactCard {
  display: grid;
  grid-template-rows: 290px auto;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #070707;
}

.accountArtifactMedia {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255, 255, 255, .06) calc(25% - 1px) 25%),
    #0b0b0b;
}

.accountArtifactMedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.accountArtifactMedia > span:not(.accountArtifactFallback) {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 7px;
  background: rgba(0, 0, 0, .7);
  color: #ccc;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  text-transform: uppercase;
}

.accountArtifactFallback {
  color: #353535;
  font-size: 72px;
  font-weight: 800;
}

.accountArtifactBody {
  display: grid;
  gap: 10px;
  padding: 20px;
}

.accountArtifactBody small,
.accountArtifactBody p {
  color: #777;
  font-size: 10px;
}

.accountArtifactBody strong {
  font-size: 21px;
  font-weight: 520;
  line-height: 1.05;
}

.accountArtifactBody button {
  justify-self: start;
  margin-top: 8px;
}

.accountArtifactList {
  border-top: 1px solid var(--line);
}

.accountArtifactRow {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 120px 34px;
  gap: 22px;
  align-items: center;
  min-height: 92px;
  border-bottom: 1px solid var(--line);
}

.accountArtifactRow > span,
.accountArtifactRow time {
  color: #707070;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  text-transform: uppercase;
}

.accountArtifactRow strong,
.accountArtifactRow small {
  display: block;
}

.accountArtifactRow strong {
  font-size: 17px;
  font-weight: 520;
}

.accountArtifactRow small {
  margin-top: 5px;
  color: #6e6e6e;
  font-size: 10px;
}

.accountArtifactRow button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  background: transparent;
  color: #777;
  cursor: pointer;
}

.accountRoomsHero {
  min-height: 620px;
  padding: clamp(44px, 7vw, 96px);
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 76% 28%, rgba(237, 23, 57, .2), transparent 26%),
    repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), rgba(255, 255, 255, .045) calc(20% - 1px) 20%),
    #070707;
}

.accountRoomsHero h3 {
  max-width: 980px;
  font-size: clamp(50px, 7vw, 104px);
}

.accountRoomsHero > p {
  max-width: 620px;
  margin: 32px 0;
  color: #989898;
  font-size: 16px;
  line-height: 1.6;
}

.accountRoomsHero > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 54px;
}

.accountRoomsHero > div span {
  padding: 9px 12px;
  border: 1px solid var(--line);
  color: #9b9b9b;
  font-size: 11px;
}

.accountAccessGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.accountAccessGrid article {
  display: flex;
  flex-direction: column;
  min-height: 540px;
  padding: clamp(28px, 4vw, 54px);
  background: #070707;
}

.accountAccessGrid article.isCurrent {
  background: radial-gradient(circle at 80% 15%, rgba(237, 23, 57, .18), transparent 28%), #0a0808;
}

.accountAccessGrid article > span {
  color: #777;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
}

.accountAccessGrid h3 {
  margin: 70px 0 20px;
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 500;
  line-height: .96;
  letter-spacing: -.05em;
}

.accountAccessGrid p {
  color: #858585;
  font-size: 14px;
  line-height: 1.55;
}

.accountAccessGrid strong,
.accountAccessGrid button {
  margin-top: auto;
  padding-top: 20px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: #aaa;
  font-size: 11px;
  text-align: left;
}

.accountAdminNote {
  max-width: 760px;
  margin: -10px 0 34px;
  color: #888;
  font-size: 13px;
  line-height: 1.55;
}

.accountAdminTableWrap {
  overflow-x: auto;
  border: 1px solid var(--line);
}

.accountAdminTable {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  background: #070707;
}

.accountAdminTable th,
.accountAdminTable td {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  color: #999;
  font-size: 11px;
  text-align: left;
}

.accountAdminTable th {
  color: #666;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  text-transform: uppercase;
}

.accountAdminTable td strong,
.accountAdminTable td small {
  display: block;
}

.accountAdminTable td strong {
  color: #eee;
  font-size: 12px;
}

.accountAdminTable td small {
  margin-top: 3px;
  color: #6d6d6d;
}

.accountAdminTable .isYes {
  color: #78d39d;
}

.accountAdminTable .isNo {
  color: #777;
}
.accountFeedbackCenter {
  display: grid;
  gap: 34px;
  margin-top: 70px;
  padding-top: 54px;
  border-top: 1px solid var(--line);
}

.accountFeedbackHead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
}

.accountFeedbackHead > div:first-child {
  max-width: 760px;
}

.accountFeedbackHead h3 {
  margin: 14px 0 16px;
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: .96;
}

.accountFeedbackHead p {
  margin: 0;
  color: #888;
  font-size: 13px;
  line-height: 1.55;
}

.accountFeedbackControls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: end;
}

.accountFeedbackControls label {
  display: grid;
  gap: 5px;
  color: #777;
  font-size: 9px;
  text-transform: uppercase;
}

.accountFeedbackControls select,
.accountFeedbackControls button,
.accountFeedbackPattern footer button,
.accountKnowledgeList footer button {
  min-height: 38px;
  border: 1px solid var(--line);
  background: #090909;
  color: #aaa;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.accountFeedbackControls select {
  min-width: 120px;
  padding: 0 12px;
}

.accountFeedbackControls button {
  align-self: end;
  padding: 0 14px;
}

.accountFeedbackControls :disabled,
.accountFeedbackPattern footer :disabled,
.accountKnowledgeList footer :disabled {
  cursor: wait;
  opacity: .45;
}

.accountFeedbackStatus {
  min-height: 18px;
  margin-top: -20px;
  color: #78d39d;
  font-size: 11px;
}

.accountFeedbackStatus.isError,
.accountFeedbackState.isError {
  color: #ff667d;
}

.accountFeedbackMetrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.accountFeedbackMetrics article {
  min-height: 132px;
  padding: 18px;
  background: #070707;
}

.accountFeedbackMetrics span,
.accountFeedbackMetrics small {
  display: block;
  color: #666;
  font-size: 9px;
  line-height: 1.4;
  text-transform: uppercase;
}

.accountFeedbackMetrics strong {
  display: block;
  margin-top: 28px;
  color: #eee;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 520;
  letter-spacing: -.04em;
}

.accountFeedbackSection {
  display: grid;
  gap: 18px;
}

.accountFeedbackSectionHead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.accountFeedbackSectionHead > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.accountFeedbackSectionHead span,
.accountFeedbackSectionHead small {
  color: #666;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 8px;
  text-transform: uppercase;
}

.accountFeedbackSectionHead h4 {
  margin: 0;
  font-size: 19px;
  font-weight: 520;
}

.accountFeedbackGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.accountFeedbackPattern {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 210px;
  padding: 18px;
  border: 1px solid var(--line);
  background: #070707;
}

.accountFeedbackPattern > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.accountFeedbackPattern header strong,
.accountFeedbackPattern header small {
  display: block;
}

.accountFeedbackPattern header strong {
  color: #eee;
  font-size: 13px;
  line-height: 1.35;
}

.accountFeedbackPattern header small {
  margin-top: 5px;
  color: #666;
  font-size: 8px;
  text-transform: uppercase;
}

.accountFeedbackPattern header > span {
  color: #eee;
  font-size: 24px;
}

.accountFeedbackPattern p,
.accountFeedbackPattern li,
.accountFeedbackPattern blockquote {
  color: #858585;
  font-size: 10px;
  line-height: 1.5;
}

.accountFeedbackPattern p,
.accountFeedbackPattern blockquote {
  margin: 0;
}

.accountFeedbackPattern ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 16px;
}

.accountFeedbackPattern blockquote {
  padding: 10px;
  border-left: 2px solid #b21d35;
  background: rgba(178, 29, 53, .08);
}
.accountFailedEditExamples {
  display: grid;
  gap: 8px;
}

.accountFailedEditExamples dl {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
}

.accountFailedEditExamples dl > div {
  display: grid;
  gap: 2px;
}

.accountFailedEditExamples :is(dt, dd) {
  margin: 0;
  color: #858585;
  font-size: 9px;
  line-height: 1.45;
}
.accountFailedEditExamples dt {
  color: #626262;
  text-transform: uppercase;
}



.accountFeedbackPattern footer,
.accountKnowledgeList footer {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
}

.accountFeedbackPattern footer button,
.accountKnowledgeList footer button {
  min-height: 32px;
  padding: 0 10px;
}

.accountKnowledgeList,
.accountReportList {
  display: grid;
  gap: 1px;
  background: var(--line);
}

.accountKnowledgeList > article,
.accountReportList > article {
  display: grid;
  gap: 12px;
  padding: 18px;
  background: #070707;
}

.accountKnowledgeList > article {
  grid-template-columns: 180px minmax(0, 1fr) auto;
  align-items: center;
}

.accountKnowledgeList article > div span,
.accountKnowledgeList article > div small {
  display: block;
  color: #777;
  font-size: 8px;
  text-transform: uppercase;
}

.accountKnowledgeList article > div .is-active {
  color: #78d39d;
}

.accountKnowledgeList article > div .is-disabled {
  color: #ffb257;
}

.accountKnowledgeList p,
.accountReportList p {
  margin: 0;
  color: #aaa;
  font-size: 11px;
  line-height: 1.5;
}

.accountReportList header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.accountReportList strong {
  color: #eee;
  font-size: 12px;
}

.accountReportList time {
  color: #666;
  font-size: 9px;
}

.accountFeedbackEmpty,
.accountFeedbackState {
  grid-column: 1 / -1;
  margin: 0;
  padding: 28px;
  border: 1px dashed var(--line);
  color: #777;
  font-size: 12px;
  text-align: center;
}

html[data-theme="light"] :is(
  .accountFeedbackMetrics article,
  .accountFeedbackPattern,
  .accountKnowledgeList > article,
  .accountReportList > article,
  .accountFeedbackControls select,
  .accountFeedbackControls button,
  .accountFeedbackPattern footer button,
  .accountKnowledgeList footer button
) {
  background: var(--surface);
  color: var(--text-secondary);
}

html[data-theme="light"] :is(
  .accountFeedbackMetrics strong,
  .accountFeedbackPattern header strong,
  .accountFeedbackPattern header > span,
  .accountFeedbackSectionHead h4,
  .accountReportList strong
) {
  color: var(--text-primary);
}

@media (max-width: 1050px) {
  .accountFeedbackMetrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .accountKnowledgeList > article {
    grid-template-columns: 140px minmax(0, 1fr);
  }

  .accountKnowledgeList footer {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .accountFeedbackCenter {
    margin-top: 44px;
    padding-top: 36px;
  }

  .accountFeedbackHead,
  .accountFeedbackSectionHead {
    align-items: start;
    flex-direction: column;
  }

  .accountFeedbackControls,
  .accountFeedbackControls label,
  .accountFeedbackControls select,
  .accountFeedbackControls button {
    width: 100%;
  }

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

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

  .accountKnowledgeList > article {
    grid-template-columns: 1fr;
  }

  .accountKnowledgeList footer {
    grid-column: auto;
  }

  .accountReportList header {
    align-items: start;
    flex-direction: column;
  }
}

.accountEmptyState {
  grid-column: 1 / -1;
  display: grid;
  place-content: center;
  min-height: 290px;
  padding: 32px;
  border: 1px dashed rgba(255, 255, 255, .16);
  text-align: center;
}

.accountEmptyState strong {
  font-size: 24px;
  font-weight: 520;
}

.accountEmptyState p {
  max-width: 440px;
  margin: 10px auto 18px;
  color: #777;
  font-size: 13px;
}

.accountEmptyState a {
  color: #ddd;
  font-size: 12px;
}

.toolCardLocked {
  position: relative;
  opacity: .68;
  cursor: pointer;
}

.toolCardLocked::after {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 7px;
  height: 7px;
  border: 1px solid #777;
  border-radius: 50%;
  box-shadow: 0 -5px 0 -2px #777;
  content: "";
  transform: translateY(-20%);
}

.toolCardLocked b {
  display: grid;
  gap: 4px;
}

.toolCardLocked b i {
  color: #777;
  font-size: 8px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.toolCardLocked:hover {
  opacity: 1;
}

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

  .accountPromise {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .accountAuth {
    position: static;
    min-height: 0;
  }

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

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

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

@media (max-width: 760px) {
  .accountHero {
    min-height: 740px;
    padding: 150px 20px 72px;
  }

  .accountHero::after {
    top: 15%;
    right: -35%;
    width: 88vw;
    height: 88vw;
  }

  .accountHeroIndex {
    top: 24px;
    right: 20px;
    left: 20px;
  }

  .accountHero h1 {
    margin-top: 24px;
    font-size: clamp(50px, 15vw, 68px);
    line-height: .88;
  }

  .accountHero p {
    font-size: 15px;
  }

  .accountHeroSignal {
    right: 20px;
    bottom: 28px;
    left: 20px;
    grid-template-columns: 1fr repeat(3, auto);
  }

  .accountPromise,
  .accountAuth {
    padding: 62px 18px;
  }

  .accountPromise > h2 {
    margin-bottom: 48px;
    font-size: 44px;
  }

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

  .accountPromiseGrid article {
    min-height: 210px;
  }

  .accountLocalState {
    flex-direction: column;
  }

  .accountAuthTabs {
    margin-bottom: 48px;
  }

  .accountWorkspace {
    display: block;
  }

  .accountSidebar {
    position: static;
    min-height: 0;
    padding: 20px 14px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .accountSidebar nav {
    display: flex;
    gap: 5px;
    width: calc(100vw - 28px);
    padding-bottom: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .accountSidebar nav button {
    flex: 0 0 auto;
    gap: 12px;
    min-height: 42px;
    border: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }

  .accountSidebar nav button.isActive {
    border-color: #f0ede6;
    background: #f0ede6;
    color: #050505;
  }

  .accountLogout {
    margin-top: 12px;
  }

  .accountCanvas {
    padding: 56px 14px 74px;
  }

  .accountCanvasHeader {
    align-items: start;
    margin-bottom: 48px;
  }

  .accountCanvasHeader h2 {
    font-size: 47px;
  }

  .accountPlan {
    min-width: 80px;
  }

  .accountMetricGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    background: transparent;
  }

  .accountMetricGrid article {
    min-height: 178px;
    padding: 18px;
  }

  .accountMetricGrid strong {
    font-size: 50px;
  }

  .accountOverviewGrid {
    gap: 10px;
    margin-top: 10px;
    background: transparent;
  }

  .accountRecent,
  .accountSyncCard {
    min-height: 430px;
    padding: 28px 20px;
  }

  .accountBlockHead {
    align-items: start;
  }

  .accountBlockHead h3,
  .accountSyncCard h3 {
    font-size: 36px;
  }

  .accountRecentList > article {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .accountRecentList time {
    display: none;
  }

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

  .accountArtifactCard {
    grid-template-rows: 320px auto;
  }

  .accountArtifactRow {
    grid-template-columns: 72px minmax(0, 1fr) 32px;
    gap: 12px;
  }

  .accountArtifactRow time {
    display: none;
  }

  .accountRoomsHero {
    min-height: 620px;
    padding: 52px 20px;
  }

  .accountRoomsHero h3 {
    font-size: 49px;
  }

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

  .accountAccessGrid article {
    min-height: 420px;
  }
}

/* Final typography and catalog calibration. Keep last. */
body {
  font-family: var(--display-font);
  font-weight: 400;
  letter-spacing: -.025em;
  -webkit-font-smoothing: antialiased;
}

.nav a,
.topAction,
.button,
.smallButton { font-weight: 400; }

.cinematicHero h1,
.projectsHero h1,
.caseHero h1,
.accountHero h1 {
  font-family: var(--display-font);
  font-size: clamp(50px, 6.2vw, 96px);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.055em;
}

.interfacePage .pageHero h1 {
  font-family: var(--display-font);
  font-size: clamp(50px, 6vw, 92px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.052em;
}

.cinematicSectionHead h2,
.conceptFeatureCopy h2,
.equipmentProjectUse h2,
.accountPromise > h2,
.accountCanvasHeader h2 {
  font-family: var(--display-font);
  font-size: clamp(36px, 3.8vw, 58px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.projectOverlay h3,
.projectCardCinematic h3,
.accountBlockHead h3,
.accountSyncCard h3,
.accountRoomsHero h3 {
  font-family: var(--display-font);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.04em;
}

.projectOverlay h3,
.projectCardCinematic h3 { font-size: clamp(30px, 3vw, 48px); }
.accountRoomsHero h3 { max-width: 900px; font-size: clamp(38px, 4.6vw, 70px); }

.closingCall h2 {
  font-family: var(--display-font);
  font-size: clamp(38px, 4.3vw, 66px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.05em;
}

.accountMetricGrid strong,
.scaleMetrics strong { font-weight: 400; }
.scaleMetrics > div { min-width: 0; padding-right: 16px; padding-left: 16px; }
.scaleMetrics strong {
  font-size: clamp(36px, 3.25vw, 52px);
  line-height: 1;
  letter-spacing: -.05em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.scaleMetrics span { max-width: 140px; }

.processTrack { align-items: stretch; margin-top: 58px; }
.processTrack li,
.processTrack li:nth-child(even) { min-height: 232px; padding: 44px 16px 22px 0; }
.processTrack li::after,
.processTrack li:nth-child(even)::after { height: 28px; }
.processTrack b {
  display: flex;
  align-items: flex-end;
  min-height: 24px;
  margin-top: auto;
  font-family: var(--display-font);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.processTrack small { min-height: 46px; font-size: 11px; line-height: 1.45; }

.interfacePage[data-page="category"] .equipmentCard {
  grid-template-rows: 270px minmax(286px, 1fr) 112px;
  min-height: 668px;
}
.interfacePage[data-page="category"] .equipmentPhoto { height: 270px; min-height: 0; }
.interfacePage[data-page="category"] .equipmentPhoto img {
  width: 80%;
  height: 80%;
  max-width: 80%;
  max-height: 80%;
  padding: 10px;
  object-fit: contain;
}
.interfacePage[data-page="category"] .equipmentCardBody {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 22px 20px 12px;
}
.interfacePage[data-page="category"] .cardTop { min-height: 25px; margin-bottom: 14px; }
.interfacePage[data-page="category"] .equipmentCard h3 {
  display: -webkit-box;
  min-height: 48px;
  margin: 0;
  overflow: hidden;
  font-family: var(--display-font);
  font-size: clamp(20px, 1.65vw, 24px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.035em;
  overflow-wrap: normal;
  word-break: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.interfacePage[data-page="category"] .equipmentCard p {
  display: -webkit-box;
  min-height: 70px;
  margin: 12px 0 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.interfacePage[data-page="category"] .cardMeta { margin-top: auto; margin-bottom: 0; }
.interfacePage[data-page="category"] .cardActions {
  align-content: end;
  min-height: 112px;
  padding: 0 20px 20px;
}
.interfacePage[data-page="category"] .cardActions .smallButton {
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.15;
}

@media (max-width: 760px) {
  .cinematicHero h1,
  .projectsHero h1,
  .caseHero h1,
  .interfacePage .pageHero h1,
  .accountHero h1 { font-size: clamp(42px, 12vw, 52px); line-height: .97; }

  .cinematicSectionHead h2,
  .conceptFeatureCopy h2,
  .equipmentProjectUse h2,
  .accountPromise > h2,
  .accountCanvasHeader h2 { font-size: clamp(34px, 9.5vw, 42px); line-height: 1.03; }

  .closingCall h2 { font-size: clamp(38px, 11vw, 48px); }
  .scaleMetrics strong,
  .scaleMetrics > div:last-child strong { font-size: clamp(48px, 14vw, 62px); white-space: nowrap; }

  .processTrack li,
  .processTrack li:nth-child(even) { min-height: 220px; padding-top: 42px; }

  .interfacePage[data-page="category"] .equipmentCard {
    grid-template-rows: 350px auto auto;
    min-height: 0;
  }
  .interfacePage[data-page="category"] .equipmentPhoto { height: 350px; }
  .interfacePage[data-page="category"] .equipmentCard h3 { min-height: 0; font-size: 23px; }
  .interfacePage[data-page="category"] .equipmentCard p { min-height: 0; font-size: 13px; }
  .interfacePage[data-page="category"] .cardActions { min-height: 0; }
}

/* Equipment showroom: natural product color with a live technical glow. */
.categoryCardMedia,
.equipmentPhoto,
.compareProductImage,
.pickerThumb,
.productPhotoLarge,
.equipmentDetailMedia {
  isolation: isolate;
  background: #fff;
}

.interfacePage[data-page="category"] .equipmentPhoto,
.interfacePage .compareProductImage,
.interfacePage .pickerThumb,
.interfacePage .productPhotoLarge,
.interfacePage .equipmentDetailMedia,
.interfacePage .categoryCardMedia,
.catalogPrototype .categoryCardMedia { background: #fff; }

.categoryCardMedia::before,
.equipmentPhoto::before,
.compareProductImage::before,
.pickerThumb::before,
.productPhotoLarge::before,
.equipmentDetailMedia::before {
  position: absolute;
  z-index: 2;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,55,88,.26), transparent 46%);
  mix-blend-mode: screen;
  pointer-events: none;
  content: "";
  transition: opacity 420ms ease, background 420ms ease;
}

.categoryCardMedia img,
.equipmentPhoto img,
.compareProductImage img,
.pickerThumb img,
.productPhotoLarge img,
.equipmentDetailMedia img {
  opacity: 1;
  mix-blend-mode: normal;
  filter:
    saturate(1.06)
    contrast(1.01)
    brightness(1.03);
  transform: translateZ(0) scale(1);
  transform-origin: 50% 52%;
  transition: filter 460ms cubic-bezier(.2,.7,.2,1), transform 620ms cubic-bezier(.2,.7,.2,1);
}

.categoryCard:hover .categoryCardMedia img,
.equipmentCard:hover .equipmentPhoto img,
.compareProduct:hover .compareProductImage img,
.pickerItem:hover .pickerThumb img,
.productPhotoLarge:hover img,
.equipmentDetailMedia:hover img {
  filter:
    saturate(1.34)
    contrast(1.04)
    brightness(1.15);
  transform: translateZ(0) scale(1.045);
}

.categoryCard:hover .categoryCardMedia::before,
.equipmentCard:hover .equipmentPhoto::before,
.compareProduct:hover .compareProductImage::before,
.pickerItem:hover .pickerThumb::before,
.productPhotoLarge:hover::before,
.equipmentDetailMedia:hover::before { opacity: .82; }

[data-equipment-category="light"]:hover::before {
  background-image:
    linear-gradient(rgba(15,18,22,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,18,22,.04) 1px, transparent 1px),
    radial-gradient(circle at 42% 46%, rgba(255,40,73,.38), transparent 30%),
    radial-gradient(circle at 62% 48%, rgba(36,150,255,.34), transparent 34%);
  background-size: 28px 28px, 28px 28px, 100% 100%, 100% 100%;
}

[data-equipment-category="video"]:hover::before {
  background-image:
    linear-gradient(rgba(15,18,22,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,18,22,.04) 1px, transparent 1px),
    radial-gradient(circle at 46% 46%, rgba(74,78,255,.42), transparent 34%),
    radial-gradient(circle at 66% 56%, rgba(255,30,174,.3), transparent 38%);
  background-size: 28px 28px, 28px 28px, 100% 100%, 100% 100%;
}

[data-equipment-category="audio"]:hover::before {
  background-image:
    linear-gradient(rgba(15,18,22,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,18,22,.04) 1px, transparent 1px),
    radial-gradient(circle at 44% 50%, rgba(255,143,26,.34), transparent 34%),
    radial-gradient(circle at 64% 42%, rgba(45,139,255,.28), transparent 38%);
  background-size: 28px 28px, 28px 28px, 100% 100%, 100% 100%;
}

[data-equipment-category="comms"]:hover::before {
  background-image:
    linear-gradient(rgba(15,18,22,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,18,22,.04) 1px, transparent 1px),
    radial-gradient(circle at 48% 48%, rgba(34,210,153,.34), transparent 34%),
    radial-gradient(circle at 65% 50%, rgba(45,139,255,.26), transparent 38%);
  background-size: 28px 28px, 28px 28px, 100% 100%, 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
  .categoryCardMedia img,
  .equipmentPhoto img,
  .compareProductImage img,
  .pickerThumb img,
  .productPhotoLarge img,
  .equipmentDetailMedia img { transition: none; }
}

/* GTO Exchange: interactive community prototype inside the account. */
.accountLiveMark {
  color: #ff3150 !important;
  text-shadow: 0 0 16px rgba(255,49,80,.8);
}

.accountSocialHero,
.accountMessagesHead,
.accountRoomsHead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 36px;
}

.accountSocialHero h3,
.accountMessagesHead h3,
.accountRoomsHead h3 {
  max-width: 920px;
  margin: 14px 0 0;
  font-size: clamp(38px, 4.7vw, 74px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.055em;
}

.accountSocialHero .button,
.accountRoomsHead .button { flex: 0 0 auto; }

.accountSocialLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 1px;
  background: var(--line);
}

.accountFeedColumn,
.accountNetworkRail { background: #050505; }

.accountFeedColumn { min-width: 0; padding: 1px; }

.accountPostComposer {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 16px;
  padding: 24px;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(circle at 86% 10%, rgba(237,23,57,.12), transparent 34%), #080808;
}

.accountPostComposer label { min-width: 0; }
.accountPostComposer textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: #f3f0ea;
  font: 400 19px/1.45 var(--display-font);
}
.accountPostComposer textarea:focus { outline: 0; border-color: var(--red); box-shadow: none; }

.accountComposerActions {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.accountComposerActions label { display: flex; gap: 8px; color: #777; font-size: 10px; }
.accountComposerActions input { accent-color: var(--red); }
.accountComposerActions button {
  border: 0;
  border-bottom: 1px solid var(--red);
  background: transparent;
  color: #f3f0ea;
  font-size: 11px;
  cursor: pointer;
}

.accountFeedScopes,
.accountFeedFilters {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
}
.accountFeedScopes {
  padding-bottom: 8px;
  border-bottom: 0;
  background: linear-gradient(90deg, rgba(237,23,57,.08), transparent 55%);
}
.accountFeedFilters { padding-top: 8px; }
.accountFeedScopes button,
.accountFeedFilters button {
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid var(--line);
  background: #080808;
  color: #777;
  font-size: 10px;
  cursor: pointer;
}
.accountFeedScopes button.isActive,
.accountFeedFilters button.isActive { border-color: var(--red); color: #fff; background: rgba(237,23,57,.1); }

.accountSocialFeed { display: grid; }
.accountSocialPost {
  padding: clamp(22px, 3vw, 38px);
  border-bottom: 1px solid var(--line);
  background: #070707;
}
.accountSocialPost > header {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  gap: 14px;
  align-items: center;
}
.accountSocialAuthor {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 14px;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: default;
}
button.accountSocialAuthor { cursor: pointer; }
button.accountSocialAuthor:hover strong { color: #ff3150; }
.accountSocialAuthor span strong,
.accountSocialAuthor span small { display: block; }
.accountSocialAuthor span strong { font-size: 13px; font-weight: 520; transition: color 180ms ease; }
.accountSocialAuthor span small { margin-top: 4px; color: #6f6f6f; font-size: 9px; }
.accountSocialPost > header > span {
  padding: 6px 8px;
  border: 1px solid var(--line);
  color: #888;
  font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}
.accountSocialPost > p {
  max-width: 780px;
  margin: 24px 0;
  color: #d1d1d1;
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.48;
}
.accountSocialMedia {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0a0a0a;
}
.accountSocialMedia::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 54%, rgba(0,0,0,.82));
  pointer-events: none;
  content: "";
}
.accountSocialMedia img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; transition: transform 800ms cubic-bezier(.2,.7,.2,1), filter 500ms ease; }
.accountSocialMedia:hover img { filter: saturate(1.15) brightness(1.06); transform: scale(1.025); }
.accountSocialMedia span,
.accountSocialMedia button { position: absolute; z-index: 1; bottom: 20px; }
.accountSocialMedia span { left: 20px; max-width: 68%; color: #fff; font-size: clamp(20px,2vw,30px); }
.accountSocialMedia button { right: 20px; border: 0; border-bottom: 1px solid #fff; background: transparent; color: #fff; font-size: 10px; cursor: pointer; }

.accountSocialPost > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
}
.accountSocialPost > footer > div { display: flex; flex-wrap: wrap; gap: 6px; }
.accountSocialPost > footer button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  background: transparent;
  color: #797979;
  font-size: 10px;
  cursor: pointer;
}
.accountSocialPost > footer button i { color: #aaa; font-style: normal; font-size: 14px; }
.accountSocialPost > footer button b { color: #555; font-weight: 400; }
.accountSocialPost > footer button.isActive { border-color: rgba(237,23,57,.65); color: #fff; background: rgba(237,23,57,.1); }
.accountSocialPost > footer button.isActive i { color: #ff3150; text-shadow: 0 0 12px rgba(255,49,80,.9); }

.accountSocialAvatar {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.18);
  background: #151515;
  color: #fff;
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  box-shadow: inset 0 0 20px rgba(255,255,255,.035);
}
.accountSocialAvatar.tone-red { border-color: rgba(255,49,80,.62); background: radial-gradient(circle at 70% 20%,rgba(255,49,80,.35),transparent 45%),#131010; }
.accountSocialAvatar.tone-blue { border-color: rgba(62,143,255,.62); background: radial-gradient(circle at 70% 20%,rgba(62,143,255,.35),transparent 45%),#0d1015; }
.accountSocialAvatar.tone-amber { border-color: rgba(255,158,50,.58); background: radial-gradient(circle at 70% 20%,rgba(255,158,50,.3),transparent 45%),#15120d; }
.accountSocialAvatar.tone-green { border-color: rgba(45,210,143,.58); background: radial-gradient(circle at 70% 20%,rgba(45,210,143,.3),transparent 45%),#0c1411; }
.accountSocialAvatar.tone-white { border-color: rgba(255,255,255,.72); background: radial-gradient(circle at 70% 20%,rgba(255,255,255,.2),transparent 45%),#151515; }
.accountSocialAvatarTiny { width: 30px; height: 30px; font-size: 8px; }

.accountProfilePanel[hidden] { display: none; }
.accountProfilePanel { position: fixed; z-index: 450; inset: 0; display: grid; grid-template-columns: 1fr minmax(480px, 760px); }
.accountProfileBackdrop { border: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(7px); cursor: pointer; }
.accountProfileSheet { overflow-y: auto; border-left: 1px solid rgba(237,23,57,.48); background: #050505; box-shadow: -34px 0 110px rgba(0,0,0,.72); }
.accountProfileOpen { overflow: hidden; }
.accountProfileHead { position: relative; display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 24px; align-items: end; min-height: 270px; padding: 72px 38px 36px; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 22% 20%,rgba(237,23,57,.19),transparent 40%),linear-gradient(150deg,#111,#050505 62%); }
.accountProfileHead > button { position: absolute; top: 22px; right: 24px; width: 42px; height: 42px; border: 1px solid var(--line); background: #090909; color: #fff; font-size: 25px; cursor: pointer; }
.accountProfileAvatar { width: 92px; height: 92px; font-size: 20px; box-shadow: 0 0 46px rgba(237,23,57,.13); }
.accountProfileHead div > span { color: #ff3150; font: 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .1em; }
.accountProfileHead h3 { margin: 11px 0 7px; font-size: clamp(38px,5vw,66px); font-weight: 400; line-height: .9; letter-spacing: -.055em; }
.accountProfileHead p { margin: 0; color: #777; font-size: 12px; }
.accountProfileActions { display: flex; gap: 8px; padding: 24px 38px 0; }
.accountProfileActions button { min-height: 46px; padding: 0 16px; border: 1px solid var(--line); background: #0a0a0a; color: #fff; font-size: 10px; cursor: pointer; }
.accountProfileActions button:first-child { border-color: var(--red); background: var(--red); }
.accountProfileActions button.isFollowing { border-color: #4a4a4a; background: #121212; }
.accountProfileBio { max-width: 610px; margin: 28px 38px; color: #bdbdbd; font-size: 19px; line-height: 1.48; }
.accountProfileStats { display: grid; grid-template-columns: repeat(3,1fr); margin: 0 38px; border: 1px solid var(--line); }
.accountProfileStats span { display: grid; gap: 8px; padding: 22px; border-right: 1px solid var(--line); color: #666; font-size: 9px; text-transform: uppercase; }
.accountProfileStats span:last-child { border-right: 0; }
.accountProfileStats strong { color: #fff; font-size: 28px; font-weight: 400; }
.accountProfileSkills { display: flex; flex-wrap: wrap; gap: 7px; padding: 22px 38px 34px; }
.accountProfileSkills span { padding: 7px 9px; border: 1px solid var(--line); color: #999; font-size: 9px; }
.accountProfileWall { border-top: 1px solid var(--line); padding: 34px 38px 60px; }
.accountProfileWall > h4 { margin: 12px 0 24px; font-size: 34px; font-weight: 400; }
.accountProfileWall .accountSocialPost { margin-bottom: 12px; border: 1px solid var(--line); }

.accountNetworkRail { display: grid; align-content: start; }
.accountNetworkRail > section { padding: 26px; border-bottom: 1px solid var(--line); }
.accountNetworkRail h4,
.accountChatContext h4,
.accountRoomPulse h4 { margin: 13px 0 22px; font-size: 25px; font-weight: 400; line-height: 1.05; letter-spacing: -.035em; }
.accountPeopleStack { display: grid; }
.accountPeopleStack button {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 8px;
  gap: 11px;
  align-items: center;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.accountPeopleStack button span strong,
.accountPeopleStack button span small { display: block; }
.accountPeopleStack button span strong { font-size: 11px; }
.accountPeopleStack button span small { margin-top: 3px; color: #666; font-size: 8px; }
.accountPeopleStack button > i { width: 7px; height: 7px; border-radius: 50%; background: #333; }
.accountPeopleStack button > i.isOnline { background: #39d98a; box-shadow: 0 0 12px rgba(57,217,138,.7); }
.accountIdeaRadar article {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.accountIdeaRadar article > span { color: #ff3150; font: 18px/1 var(--display-font); }
.accountIdeaRadar article strong,
.accountIdeaRadar article small { display: block; }
.accountIdeaRadar article strong { font-size: 11px; }
.accountIdeaRadar article small { margin-top: 4px; color: #666; font-size: 8px; }
.accountExchangeNote { background: radial-gradient(circle at 100% 0,rgba(237,23,57,.18),transparent 55%),#090707; }
.accountExchangeNote > span { color: #ff3150; font: 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-transform: uppercase; }
.accountExchangeNote > strong { display: block; margin: 30px 0 10px; font-size: 25px; font-weight: 400; }
.accountExchangeNote p { color: #777; font-size: 11px; line-height: 1.55; }

.accountMessagesHead > span { color: #666; font: 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-transform: uppercase; }
.accountMessenger {
  display: grid;
  grid-template-columns: 260px minmax(360px,1fr) 280px;
  min-height: 680px;
  max-height: 760px;
  border: 1px solid var(--line);
  background: var(--line);
  gap: 1px;
}
.accountConversationList,
.accountChatWindow,
.accountChatContext { min-width: 0; background: #070707; }
.accountConversationList { overflow-y: auto; }
.accountConversationList > button {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  gap: 11px;
  align-items: center;
  width: 100%;
  min-height: 82px;
  padding: 13px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.accountConversationList > button.isActive { background: linear-gradient(90deg,rgba(237,23,57,.14),transparent); box-shadow: inset 2px 0 var(--red); }
.accountConversationList button span strong,
.accountConversationList button span small { display: block; }
.accountConversationList button span strong { font-size: 11px; }
.accountConversationList button span small { max-width: 150px; margin-top: 5px; overflow: hidden; color: #666; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.accountConversationList button > b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--red); font-size: 9px; }
.accountConversationList button > time { color: #555; font-size: 8px; }
.accountChatWindow { display: grid; grid-template-rows: 72px minmax(0,1fr) auto; }
.accountChatWindow > header {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.accountChatWindow > header div strong,
.accountChatWindow > header div small { display: block; }
.accountChatWindow > header div strong { font-size: 12px; }
.accountChatWindow > header div small { margin-top: 4px; color: #666; font-size: 8px; }
.accountChatWindow > header button { border: 0; background: transparent; color: #777; cursor: pointer; }
.accountChatMessages { display: grid; align-content: end; gap: 14px; overflow-y: auto; padding: 24px; }
.accountChatMessages article { display: flex; gap: 9px; align-items: end; max-width: 78%; }
.accountChatMessages article.isOwn { justify-self: end; }
.accountChatMessages article > div { padding: 11px 13px; border: 1px solid var(--line); background: #0d0d0d; }
.accountChatMessages article.isOwn > div { border-color: rgba(237,23,57,.4); background: rgba(237,23,57,.09); }
.accountChatMessages p { margin: 0; color: #ccc; font-size: 12px; line-height: 1.5; }
.accountChatMessages time { display: block; margin-top: 7px; color: #555; font-size: 8px; text-align: right; }
.accountChatComposer { display: grid; grid-template-columns: minmax(0,1fr) 52px; gap: 8px; padding: 14px; border-top: 1px solid var(--line); }
.accountChatComposer textarea { width: 100%; min-height: 48px; max-height: 130px; resize: vertical; border: 1px solid var(--line); background: #050505; color: #fff; font: 12px/1.45 var(--display-font); }
.accountChatComposer button { border: 1px solid var(--red); background: var(--red); color: #fff; font-size: 20px; cursor: pointer; }
.accountChatContext { padding: 24px; overflow-y: auto; }
.accountChatContextCard,
.accountChatMatch { padding: 18px 0; border-top: 1px solid var(--line); }
.accountChatContextCard span,
.accountChatMatch span { color: #666; font-size: 8px; text-transform: uppercase; }
.accountChatContextCard strong { display: block; margin: 15px 0; font-size: 15px; font-weight: 400; }
.accountChatContextCard button { border: 0; border-bottom: 1px solid #666; background: transparent; color: #aaa; font-size: 9px; cursor: pointer; }
.accountChatMatch strong { display: block; margin-top: 15px; color: #ff3150; font-size: 42px; font-weight: 400; }
.accountChatMatch p { color: #777; font-size: 10px; line-height: 1.5; }
.accountChatContext > .button { width: 100%; margin-top: 18px; }

.accountRoomsWorkspace {
  display: grid;
  grid-template-columns: 230px minmax(0,1fr) 260px;
  min-height: 640px;
  gap: 1px;
  background: var(--line);
}
.accountRoomList,
.accountRoomBoard,
.accountRoomPulse { background: #070707; }
.accountRoomList button {
  display: grid;
  gap: 9px;
  width: 100%;
  min-height: 130px;
  padding: 20px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.accountRoomList button.isActive { background: radial-gradient(circle at 90% 10%,rgba(237,23,57,.16),transparent 55%); box-shadow: inset 2px 0 var(--red); }
.accountRoomList span { color: #ff3150; font: 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.accountRoomList strong { font-size: 16px; font-weight: 400; line-height: 1.15; }
.accountRoomList small { color: #666; font-size: 9px; }
.accountRoomBoard { padding: 28px; }
.accountRoomBoard > header { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.accountRoomBoard h4 { margin: 12px 0 0; font-size: clamp(28px,3vw,44px); font-weight: 400; letter-spacing: -.04em; }
.accountRoomAvatars { display: flex; }
.accountRoomAvatars span { display: grid; place-items: center; width: 34px; height: 34px; margin-left: -6px; border: 1px solid #444; border-radius: 50%; background: #111; font-size: 8px; }
.accountRoomBoard > nav { display: flex; gap: 18px; margin: 34px 0; overflow-x: auto; border-bottom: 1px solid var(--line); }
.accountRoomBoard > nav button { flex: 0 0 auto; padding: 0 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #666; font-size: 9px; cursor: pointer; }
.accountRoomBoard > nav button.isActive { border-color: var(--red); color: #fff; }
.accountRoomDecision { padding: 24px; border: 1px solid rgba(237,23,57,.42); background: radial-gradient(circle at 90% 0,rgba(237,23,57,.14),transparent 44%),#0b0808; }
.accountRoomDecision > span { color: #ff3150; font: 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-transform: uppercase; }
.accountRoomDecision > strong { display: block; max-width: 740px; margin: 20px 0 30px; font-size: clamp(20px,2.1vw,30px); font-weight: 400; line-height: 1.3; }
.accountRoomDecision > div { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.accountRoomDecision small { color: #6d6d6d; font-size: 9px; }
.accountRoomDecision button { padding: 9px 11px; border: 1px solid var(--red); background: transparent; color: #fff; font-size: 9px; cursor: pointer; }
.accountRoomDecision button.isApproved { border-color: #38d889; color: #38d889; }
.accountRoomTimeline { margin-top: 24px; border-top: 1px solid var(--line); }
.accountRoomTimeline article { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.accountRoomTimeline article > span { color: #555; font: 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.accountRoomTimeline strong { font-size: 11px; }
.accountRoomTimeline p { margin: 6px 0 0; color: #777; font-size: 10px; line-height: 1.45; }
.accountRoomPulse { padding: 25px; }
.accountRoomPulse > div { height: 3px; background: #191919; }
.accountRoomPulse > div i { display: block; width: var(--progress); height: 100%; background: linear-gradient(90deg,var(--red),#ff5a6f); box-shadow: 0 0 16px rgba(237,23,57,.6); }
.accountRoomPulse ul { padding: 0; margin: 24px 0; list-style: none; }
.accountRoomPulse li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); color: #777; font-size: 9px; }
.accountRoomPulse li b { color: #aaa; font-weight: 400; }
.accountRoomPulse > button { border: 0; border-bottom: 1px solid #555; background: transparent; color: #aaa; font-size: 9px; cursor: pointer; }

.accountToast {
  position: fixed;
  z-index: 500;
  right: 24px;
  bottom: 24px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 16px 18px;
  border: 1px solid rgba(237,23,57,.62);
  background: rgba(8,8,8,.96);
  color: #fff;
  font-size: 11px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 30px rgba(237,23,57,.15);
  animation: accountToastIn 240ms ease both;
}
@keyframes accountToastIn { from { opacity: 0; transform: translateY(12px); } }

@media (max-width: 1120px) {
  .accountSocialLayout { grid-template-columns: minmax(0,1fr) 280px; }
  .accountMessenger { grid-template-columns: 230px minmax(340px,1fr); }
  .accountChatContext { display: none; }
  .accountRoomsWorkspace { grid-template-columns: 210px minmax(0,1fr); }
  .accountRoomPulse { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .accountSocialHero,
  .accountMessagesHead,
  .accountRoomsHead { align-items: stretch; flex-direction: column; }
  .accountSocialHero h3,
  .accountMessagesHead h3,
  .accountRoomsHead h3 { font-size: 42px; }
  .accountSocialHero .button,
  .accountRoomsHead .button { width: 100%; }
  .accountSocialLayout { grid-template-columns: 1fr; }
  .accountNetworkRail { grid-template-columns: 1fr; }
  .accountPostComposer { grid-template-columns: 36px minmax(0,1fr); padding: 18px 14px; }
  .accountSocialAvatar { width: 36px; height: 36px; }
  .accountComposerActions { align-items: flex-end; flex-direction: column; }
  .accountSocialPost { padding: 22px 14px; }
  .accountSocialPost > header { grid-template-columns: 36px minmax(0,1fr); }
  .accountSocialAuthor { grid-template-columns: 36px minmax(0,1fr); }
  .accountSocialPost > header > span { grid-column: 2; justify-self: start; }
  .accountSocialPost > p { font-size: 17px; }
  .accountSocialMedia,
  .accountSocialMedia img { min-height: 260px; }
  .accountSocialMedia span { max-width: calc(100% - 40px); font-size: 20px; }
  .accountSocialMedia button { display: none; }
  .accountSocialPost > footer { align-items: stretch; flex-direction: column; }
  .accountMessenger { grid-template-columns: 1fr; max-height: none; }
  .accountConversationList { display: flex; overflow-x: auto; }
  .accountConversationList > button { flex: 0 0 250px; }
  .accountChatWindow { min-height: 620px; }
  .accountChatMessages { padding: 18px 12px; }
  .accountChatMessages article { max-width: 90%; }
  .accountRoomsWorkspace { grid-template-columns: 1fr; }
  .accountRoomList { display: flex; overflow-x: auto; }
  .accountRoomList button { flex: 0 0 260px; }
  .accountRoomBoard { padding: 22px 14px; }
  .accountRoomBoard > header { flex-direction: column; }
  .accountRoomDecision { padding: 18px; }
  .accountRoomDecision > div { align-items: stretch; flex-direction: column; }
  .accountRoomPulse { grid-column: auto; }
  .accountToast { right: 16px; bottom: 16px; }
  .accountProfilePanel { grid-template-columns: 1fr; }
  .accountProfileBackdrop { display: none; }
  .accountProfileSheet { border-left: 0; }
  .accountProfileHead { grid-template-columns: 64px minmax(0,1fr); min-height: 220px; padding: 62px 18px 28px; }
  .accountProfileAvatar { width: 64px; height: 64px; font-size: 14px; }
  .accountProfileActions { flex-direction: column; padding: 18px 18px 0; }
  .accountProfileBio { margin: 24px 18px; font-size: 17px; }
  .accountProfileStats { margin: 0 18px; }
  .accountProfileStats span { padding: 16px 10px; }
  .accountProfileStats strong { font-size: 22px; }
  .accountProfileSkills { padding: 18px 18px 28px; }
  .accountProfileWall { padding: 28px 14px 50px; }
}

/* 2026-08-05 access, request and process clarity pass. */
.projectLoadingShell {
  display: grid;
  place-content: center;
  min-height: calc(100svh - 72px);
  background:
    radial-gradient(circle at 50% 50%, rgba(237, 23, 57, .07), transparent 23%),
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255, 255, 255, .035) calc(25% - 1px) 25%),
    #030303;
  color: #777;
  text-align: center;
}
.projectLoadingSignal { display: grid; gap: 16px; justify-items: center; }
.projectLoadingSignal i {
  width: 66px;
  height: 2px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
}
.projectLoadingSignal i::after {
  display: block;
  width: 28px;
  height: 100%;
  background: var(--red);
  content: "";
  animation: projectLoading 1.15s ease-in-out infinite alternate;
}
.projectLoadingSignal span { font: 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .14em; }
.projectLoadingShell p { margin: 22px 0 0; font-size: 13px; }
@keyframes projectLoading { to { transform: translateX(38px); } }

.toolAccessBand {
  display: grid;
  gap: 5px;
  margin: 0 0 14px;
  padding: 18px 16px;
  border: 1px solid var(--line);
  background: #080808;
}
.toolAccessBand > span,
.toolAccessBand > small {
  font: 8px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.toolAccessBand > strong { font-size: 16px; font-weight: 430; line-height: 1.15; }
.toolAccessBand > small { color: #6f6f6f; letter-spacing: .04em; text-transform: none; }
.toolAccessBandOpen { border-left: 3px solid #55d68b; }
.toolAccessBandOpen > span { color: #55d68b; }
.toolAccessBandLocked {
  margin-top: 28px;
  border-color: rgba(237, 23, 57, .45);
  border-left: 3px solid var(--red);
  background: linear-gradient(120deg, rgba(237,23,57,.1), transparent 58%), #080808;
}
.toolAccessBandLocked > span { color: var(--red); }
.toolNavGroupAccount { display: grid; gap: 7px; }
.toolCardLocked {
  min-height: 84px;
  border-style: dashed !important;
  border-color: rgba(237,23,57,.42) !important;
  opacity: .58;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 7px, transparent 7px 14px),
    #050505 !important;
  cursor: pointer;
}
.toolCardLocked:hover { opacity: .9; background-color: #090909 !important; }
.toolCardLocked::after { display: none; }
.toolLockMark {
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--red);
  font: 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing: .12em;
}
.toolCardLocked b i { color: #d56a7b; }

.requestFastStart {
  display: grid;
  gap: 5px;
  padding: 18px 20px;
  border-left: 3px solid var(--red);
  background: linear-gradient(90deg, rgba(237,23,57,.13), transparent 78%);
}
.requestFastStart > span,
.requestOptionalHead > span { color: var(--red); font: 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .12em; text-transform: uppercase; }
.requestFastStart > strong { color: #f3f0e9; font-size: 19px; font-weight: 430; }
.requestFastStart > small,
.requestOptionalHead > small { color: #777; font-size: 11px; line-height: 1.45; }
.requestRequiredField {
  padding: 15px;
  border: 1px solid rgba(237,23,57,.52);
  background: rgba(237,23,57,.04);
}
.requestRequiredField .requiredField {
  justify-self: start;
  padding: 4px 6px;
  border: 1px solid rgba(237,23,57,.56);
  color: #f091a0;
  font: 7px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.requestRequiredField input { border-color: rgba(255,255,255,.35) !important; }
.requestOptionalHead {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  margin-top: 10px;
  padding: 18px 0 8px;
  border-bottom: 1px solid var(--line);
}
.requestOptionalHead > span { color: #999; }

.processSalesBand .processGrid { position: relative; }
.processSalesBand .processGrid::before {
  position: absolute;
  z-index: 2;
  top: -2px;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red), #f5f1ea 42%, rgba(255,255,255,.12));
  box-shadow: 0 0 22px rgba(237,23,57,.23);
  content: "";
}
.processSalesBand .processGrid article {
  position: relative;
  min-height: 260px;
  padding: 28px 18px 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.025), transparent 58%), #060606;
}
.processSalesBand .processGrid article::before {
  position: absolute;
  top: -8px;
  left: 17px;
  width: 13px;
  height: 13px;
  border: 3px solid #060606;
  border-radius: 50%;
  background: #f4f1ea;
  box-shadow: 0 0 0 1px var(--red), 0 0 18px rgba(237,23,57,.5);
  content: "";
}
.processSalesBand .processGrid article:last-child::before { background: var(--red); }
.processSalesBand .processGrid b { color: #6d6d6d; font: 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
.processSalesBand .processGrid span { align-self: end; font-size: 20px; line-height: 1.05; }
.processSalesBand .processGrid small { color: #777; font-size: 11px; line-height: 1.5; }

.processTrack li { isolation: isolate; }
.processTrack li::after { z-index: -1; }
.processTrack span { color: #858585; letter-spacing: .06em; }
.processTrack small { max-width: 170px; color: #858585; }
.processTrack li:last-child {
  background: radial-gradient(circle at 15% 15%, rgba(237,23,57,.12), transparent 36%);
}

@media (max-width: 760px) {
  .projectLoadingShell { min-height: calc(100svh - 136px); }
  .toolAccessBand { margin-right: 0; margin-left: 0; }
  .requestFastStart > strong { font-size: 18px; }
  .requestOptionalHead { align-items: start; flex-direction: column; }
  .processSalesBand .processGrid { grid-template-columns: 1fr; }
  .processSalesBand .processGrid article { min-height: 190px; }
  .processSalesBand .processGrid article::before { top: 18px; left: -7px; }
}

/* 2026-08-05: persistent mobile navigation and wide-stage project framing. */
:root { --gto-header-height: 72px; }

html {
  scroll-padding-top: calc(var(--gto-header-height) + 16px);
  scroll-behavior: smooth;
}

body { padding-top: var(--gto-header-height); }

.topbar {
  position: fixed !important;
  z-index: 1000 !important;
  top: 0;
  right: 0;
  left: 0;
  background: rgba(3, 3, 3, .78) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12), 0 12px 42px rgba(0, 0, 0, .24);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  backdrop-filter: blur(18px) saturate(1.18);
}

.accountTopAction,
.scrollTopAction {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(8, 8, 8, .68);
  color: #f4f1eb;
  font-size: 11px;
  text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.accountTopAction {
  gap: 9px;
  padding: 0 13px;
}

.accountTopUnread {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  place-items: center;
  background: var(--red);
  color: #fff;
  font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.accountTopUnread[hidden] {
  display: none !important;
}

.accountTopAction i {
  color: var(--red-bright);
  font-style: normal;
}

.accountTopAction:hover,
.accountTopAction.active {
  border-color: var(--red);
  background: rgba(237, 23, 57, .12);
}

.scrollTopAction {
  width: 42px;
  padding: 0;
  cursor: pointer;
}

.scrollTopAction span {
  display: block;
  font-size: 20px;
  line-height: 1;
  transform: translateY(-1px);
}

.scrollTopAction:hover {
  border-color: var(--red);
  color: var(--red-bright);
}

@media (max-width: 1180px) and (min-width: 761px) {
  .topAction { display: none; }
  .brand { min-width: 190px; }
}

@media (max-width: 900px) and (min-width: 761px) {
  :root { --gto-header-height: 123px; }

  .cinematicHero,
  .projectsHero,
  .caseHero,
  .cinematicHeroContent {
    min-height: calc(100svh - var(--gto-header-height));
  }
}

@media (max-width: 760px) {
  :root { --gto-header-height: 112px; }

  .cinematicPage .topbar,
  .interfacePage .topbar,
  .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
    grid-template-rows: 46px !important;
    gap: 6px !important;
    min-height: 64px !important;
    padding: 9px 10px !important;
    overflow: visible !important;
  }

  .topbar .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }

  .topbar .brand strong { font-size: 12px; }
  .topbar .brand small { display: none; }

  .topbar .languageSwitch {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    grid-template-columns: repeat(2, 28px) !important;
    width: 58px !important;
  }

  .accountTopAction {
    grid-column: 3;
    grid-row: 1;
    min-height: 38px;
    padding: 0 9px;
    border-color: rgba(237, 23, 57, .72);
    background: rgba(237, 23, 57, .1);
    font-size: 9px;
    letter-spacing: .02em;
  }

  .accountTopAction i { display: none; }

  .scrollTopAction {
    grid-column: 4;
    grid-row: 1;
    width: 38px;
    min-height: 38px;
  }

  .topbar .topAction { display: none !important; }

  .cinematicPage .nav,
  .interfacePage .nav,
  .topbar .nav {
    position: absolute !important;
    z-index: 2;
    top: 64px !important;
    right: 0;
    left: 0 !important;
    display: flex !important;
    grid-column: auto !important;
    grid-row: auto !important;
    gap: 3px !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px;
    margin: 0 !important;
    padding: 7px 9px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: rgba(3, 3, 3, .82) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .13);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    scrollbar-width: none;
  }

  .topbar .nav::-webkit-scrollbar { display: none; }

  .topbar .nav a {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 7px 8px !important;
    font-size: 10px !important;
    white-space: nowrap;
  }

  /* Wide source images remain fully visible instead of being cropped into a portrait close-up. */
  .cinematicHero,
  .projectsHero,
  .caseHero {
    display: grid;
    grid-template-rows: auto auto;
    min-height: 0 !important;
    margin-top: 0 !important;
    overflow: hidden;
    background: #030303;
  }

  .cinematicHeroPicture {
    position: relative !important;
    inset: auto !important;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #030303;
  }

  .cinematicHeroPicture .cinematicHeroMedia,
  .projectsHero > img,
  .caseHero > img {
    position: relative !important;
    inset: auto !important;
    grid-row: 1;
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: contain !important;
    object-position: center !important;
    background: #030303;
    filter: saturate(1.02) contrast(1.02) brightness(.98) !important;
    transform: none !important;
    animation: none !important;
  }

  .cinematicHeroPicture .cinematicHeroMedia {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
  }

  .cinematicHeroShade,
  .projectsHeroShade,
  .caseHeroShade {
    position: absolute;
    z-index: 1;
    inset: 0 0 auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(180deg, transparent 54%, rgba(3, 3, 3, .56) 100%) !important;
    pointer-events: none;
  }

  .cinematicHeroGrid { inset: 0 14px; }

  .cinematicPage .cinematicHeroContent,
  .cinematicHeroContent {
    position: relative;
    z-index: 2;
    grid-row: 2;
    min-height: 550px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 70px 20px 68px !important;
    background:
      linear-gradient(135deg, rgba(237, 23, 57, .06), transparent 38%),
      #030303;
  }

  .cinematicHeroContent .heroIndex { top: 22px; }
  .cinematicHero .heroScroll { display: none; }

  .projectsHeroCopy,
  .caseHeroCopy {
    position: relative !important;
    z-index: 2;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    grid-row: 2;
    padding: 46px 18px 42px;
    background: #030303;
  }

  .projectsHero h1,
  .caseHero h1 {
    margin: 20px 0 24px;
    font-size: clamp(42px, 11.5vw, 52px) !important;
    line-height: .96 !important;
  }

  .caseHero { grid-template-rows: auto auto auto; }

  .caseHeroMeta {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    grid-row: 3;
    justify-content: space-between;
    gap: 10px;
    padding: 0 18px 24px;
    background: #030303;
    font-size: 7px;
  }

  .projectCardCinematic,
  .projectCardCinematic:nth-child(3n + 1),
  .projectCardCinematic:nth-child(5n + 1),
  .projectCardCinematic:nth-child(5n + 5) {
    display: grid !important;
    grid-column: auto !important;
    grid-template-rows: auto auto;
    min-height: 0 !important;
    overflow: hidden;
    border: 1px solid var(--line);
  }

  .projectCardCinematic::after { display: none; }

  .projectCardCinematic figure {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #030303;
  }

  .projectCardCinematic figure img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center !important;
    filter: saturate(1.02) contrast(1.02) brightness(1) !important;
    transform: none !important;
  }

  .projectCardBody {
    position: relative !important;
    z-index: 1;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    min-height: 340px;
    padding: 26px 20px 30px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .022), transparent 44%), #070707;
  }

  .projectCardCinematic h3 { font-size: 34px !important; }

}

@media (max-width: 390px) {
  .topbar .brand strong { font-size: 11px; }
  .accountTopAction { padding: 0 7px; font-size: 8px; }
  .topbar .languageSwitch { grid-template-columns: repeat(2, 26px) !important; width: 54px !important; }
}

/* 2026-08-05: approved crème-brûlée equipment surface and adaptive phone comparison. */
:root {
  --equipment-creme: #d2c6b1;
  --equipment-creme-light: #eee4d1;
  --equipment-creme-dark: #aa9b82;
}

.categoryCardMedia,
.equipmentPhoto,
.compareProductImage,
.pickerThumb,
.productPhotoLarge,
.equipmentDetailMedia,
.interfacePage[data-page="category"] .equipmentPhoto,
.interfacePage .compareProductImage,
.interfacePage .pickerThumb,
.interfacePage .productPhotoLarge,
.interfacePage .equipmentDetailMedia,
.interfacePage .categoryCardMedia,
.catalogPrototype .categoryCardMedia {
  background-color: var(--equipment-creme) !important;
  background-image:
    linear-gradient(rgba(67, 52, 34, .095) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 52, 34, .095) 1px, transparent 1px),
    radial-gradient(circle at 50% 37%, var(--equipment-creme-light) 0, #d7cbb6 47%, var(--equipment-creme-dark) 100%) !important;
  background-position: center !important;
  background-size: 28px 28px, 28px 28px, 100% 100% !important;
}

.categoryCardMedia img,
.equipmentPhoto img,
.compareProductImage img,
.pickerThumb img,
.productPhotoLarge img,
.equipmentDetailMedia img {
  opacity: 1 !important;
  mix-blend-mode: darken !important;
  filter: saturate(1.08) contrast(1.025) brightness(1.035) drop-shadow(0 24px 28px rgba(49, 37, 24, .2)) !important;
}

.categoryCard:hover .categoryCardMedia img,
.equipmentCard:hover .equipmentPhoto img,
.compareProduct:hover .compareProductImage img,
.pickerItem:hover .pickerThumb img,
.productPhotoLarge:hover img,
.equipmentDetailMedia:hover img {
  mix-blend-mode: darken !important;
  filter: saturate(1.28) contrast(1.035) brightness(1.08) drop-shadow(0 28px 34px rgba(49, 37, 24, .26)) !important;
}

.compareOrientationGate { display: none; }

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1000px) {
  .interfacePage[data-page="compare"] .compareSection {
    width: 100%;
    max-width: none;
    padding: 34px 8px 64px !important;
  }

  .interfacePage[data-page="compare"] .comparePicker,
  .interfacePage[data-page="compare"] #compareEmpty {
    margin-right: 8px;
    margin-left: 8px;
  }

  .interfacePage[data-page="compare"] .compareTableWrap {
    width: calc(100vw - 16px) !important;
    max-width: none;
    overflow-x: hidden !important;
    margin: 0;
    padding: 0 0 10px;
  }

  .interfacePage[data-page="compare"] .compareTopline {
    position: static;
    width: auto;
    margin: 0 6px 12px;
  }

  .interfacePage[data-page="compare"] .compareViewportButton {
    display: inline-flex;
  }

  .interfacePage[data-page="compare"] .compareScrollHint,
  .interfacePage[data-page="compare"] .compareOrientationGate { display: none !important; }

  .interfacePage[data-page="compare"] .compareTable {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
  }

  .interfacePage[data-page="compare"] .compareTable th,
  .interfacePage[data-page="compare"] .compareTable td {
    min-width: 0 !important;
    max-width: none !important;
    padding: 8px 7px;
    font-size: 11px;
    line-height: 1.28;
    overflow-wrap: anywhere;
  }

  .interfacePage[data-page="compare"] .compareTable th:first-child,
  .interfacePage[data-page="compare"] .compareTable td:first-child {
    position: static;
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    background: #0b0b0b;
    box-shadow: none;
  }

  .interfacePage[data-page="compare"] .compareTable th:not(:first-child),
  .interfacePage[data-page="compare"] .compareTable td:not(:first-child) {
    width: calc((100vw - 134px) / var(--compare-products)) !important;
  }

  .interfacePage[data-page="compare"] .compareProduct {
    gap: 6px;
    margin-bottom: 6px;
    padding: 5px;
  }

  .interfacePage[data-page="compare"] .compareProductImage {
    width: min(100%, 150px);
    max-width: 150px;
  }

  .interfacePage[data-page="compare"] .compareProduct b {
    font-size: 11px;
    line-height: 1.08;
  }

  .interfacePage[data-page="compare"] .compareTableWrap[data-compare-count="1"] .compareProductImage { width: 230px; max-width: 55%; }
  .interfacePage[data-page="compare"] .compareTableWrap[data-compare-count="2"] .compareProductImage { width: 180px; max-width: 72%; }
  .interfacePage[data-page="compare"] .compareTableWrap[data-compare-count="3"] .compareProductImage { width: 136px; max-width: 82%; }
  .interfacePage[data-page="compare"] .compareTableWrap[data-compare-count="4"] .compareProductImage { width: 106px; max-width: 88%; }

  .interfacePage[data-page="compare"] .compareTableWrap[data-compare-count="1"] .compareProduct b { font-size: 17px; }
  .interfacePage[data-page="compare"] .compareTableWrap[data-compare-count="2"] .compareProduct b { font-size: 14px; }
  .interfacePage[data-page="compare"] .compareTableWrap[data-compare-count="3"] .compareProduct b { font-size: 11px; }
  .interfacePage[data-page="compare"] .compareTableWrap[data-compare-count="4"] .compareProduct b { font-size: 9px; }

  .interfacePage[data-page="compare"] .compareTableWrap[data-compare-count="3"] .compareTable th,
  .interfacePage[data-page="compare"] .compareTableWrap[data-compare-count="3"] .compareTable td { font-size: 10px; }

  .interfacePage[data-page="compare"] .compareTableWrap[data-compare-count="4"] .compareTable th,
  .interfacePage[data-page="compare"] .compareTableWrap[data-compare-count="4"] .compareTable td { padding-right: 5px; padding-left: 5px; font-size: 9px; }

  .interfacePage[data-page="compare"] .compareTable thead .smallButton {
    min-height: 30px;
    padding: 5px 7px;
    font-size: 9px;
  }
}

/* Final GTO TECH identity lockup. Keep this after the historical theme layers
   so every page uses the same sign without later prototype overrides. */
.topbar .brand,
.footerBrandLockup {
  display: flex;
  align-items: center;
  gap: 14px;
}
.topbar .brandMark,
.footerBrandLockup .brandMark {
  position: relative;
  display: grid;
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 1px solid #62696c;
  border-radius: 0;
  background: #080a0b;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .34);
  place-items: center;
}
.topbar .brandMark::after,
.footerBrandLockup .brandMark::after {
  position: absolute;
  inset: 8px;
  border: 1px solid #343a3d;
  content: "";
}
.topbar .brandMark > img,
.footerBrandLockup .brandMark > img {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 8px;
  width: auto;
  max-width: none;
  height: 16.5px;
  transform: translateY(-50%);
}
.topbar .brandIdentity,
.footerBrandLockup .brandIdentity { display: grid; gap: 7px; }
.topbar .brandIdentity strong,
.footerBrandLockup .brandIdentity strong {
  color: #f2f1ed;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .18em;
  line-height: 1;
}
.topbar .brandIdentity small,
.footerBrandLockup .brandIdentity small {
  display: block;
  color: #62686b;
  font: 7px/1 ui-serif, Georgia, serif;
  letter-spacing: .31em;
  text-transform: uppercase;
}
.equipmentDetailHero { position: relative; }

/* The fast comparison is a table, not a stack of cards. Tone is carried by a
   restrained edge marker while every specification stays on one scan line. */
.comparisonMatrixRow:nth-child(even) .comparisonParameterCell,
.comparisonMatrixRow:nth-child(even) .comparisonMatrixCell { background-color: rgba(255, 255, 255, .012); }
.comparisonMatrixCell,
.comparisonMatrixCell[data-compare-tone="pass"],
.comparisonMatrixCell[data-compare-tone="limit"],
.comparisonMatrixCell[data-compare-tone="caution"],
.comparisonMatrixCell[data-compare-tone="conflict"],
.comparisonMatrixCell[data-compare-tone="calculated"],
.comparisonMatrixCell[data-compare-tone="missing"] { background-image: none; }
.comparisonMatrixCell[data-compare-tone="pass"] { box-shadow: inset 2px 0 rgba(67, 212, 137, .7); }
.comparisonMatrixCell[data-compare-tone="limit"] { box-shadow: inset 2px 0 rgba(237, 23, 57, .75); }
.comparisonMatrixCell[data-compare-tone="caution"],
.comparisonMatrixCell[data-compare-tone="conflict"] { box-shadow: inset 2px 0 rgba(215, 166, 74, .72); }
.comparisonMatrixCell[data-compare-tone="calculated"] { box-shadow: inset 2px 0 rgba(113, 141, 162, .72); }

/* TASK 3 · final cascade guard. Keep after all legacy responsive and
   comparison rules so the selected theme cannot regress to mixed surfaces. */
html[data-theme="light"] .interfacePage .pageHero {
  --text: var(--on-media);
  --soft: var(--on-media);
  --muted: var(--on-media-muted);
  --line: rgba(255, 255, 255, .16);
  --line-strong: rgba(255, 255, 255, .32);
  background-color: #030303 !important;
  color: var(--on-media) !important;
}

html[data-theme="light"] .interfacePage .pageHero::before {
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255, 255, 255, .055) calc(25% - 1px) 25%);
}

html[data-theme="light"] .interfacePage .pageHero :is(h1, h2, strong) { color: var(--on-media); }
html[data-theme="light"] .interfacePage .pageHero :is(p, .breadcrumb, .pageHeroIndex) { color: var(--on-media-muted); }

html[data-theme="light"] .comparisonMatrixRow:nth-child(even) :is(.comparisonParameterCell, .comparisonMatrixCell) {
  background-color: rgba(25, 31, 34, .025);
}

html[data-theme="light"] .interfacePage[data-page="compare"] .compareSection {
  background: var(--background-primary);
  color: var(--text-primary);
}

html[data-theme="light"] .interfacePage[data-page="compare"] .comparisonWorkspaceTopline {
  border-color: var(--border);
  background: var(--background-primary);
  color: var(--text-primary);
}

html[data-theme="light"] .interfacePage[data-page="tools"] .toolsSection {
  background: var(--background-primary);
  color: var(--text-primary);
}

html[data-theme="light"] .toolHubFlow article {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-primary);
}

html[data-theme="light"] .toolHubFlow b { color: var(--text-primary); }
html[data-theme="light"] .toolHubFlow small { color: var(--text-muted); }

html[data-theme="light"] :is(.toolAccessBand, .toolNavGroupTitle) {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-primary);
}

html[data-theme="light"] :is(.toolAccessBand > small, .toolNavGroupTitle small) { color: var(--text-muted); }
html[data-theme="light"] .illuminationIntro h4 { color: var(--text-primary); }
html[data-theme="light"] .illuminationIntro p { color: var(--text-muted); }

html[data-theme="light"] :is(.accountFeedColumn, .accountFeedScopes, .accountFeedFilters) {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-primary);
}

html[data-theme="light"] :is(.accountFeedScopes button, .accountFeedFilters button) {
  border-color: var(--border-strong);
  background: var(--elevated-surface);
  color: var(--text-secondary);
}

html[data-theme="light"] :is(.accountFeedScopes button, .accountFeedFilters button).isActive {
  border-color: var(--accent);
  background: var(--selected);
  color: var(--text-primary);
}

html[data-theme="light"] .accountPeopleStack button {
  border-color: var(--border);
  color: var(--text-secondary);
}

html[data-theme="light"] .accountPeopleStack button strong { color: var(--text-primary); }
html[data-theme="light"] .accountPeopleStack button small { color: var(--text-muted); }
html[data-theme="light"] .accountComposerActions label { color: var(--text-muted); }

html[data-theme="light"] .accountComposerActions button {
  border-color: var(--accent);
  background: transparent;
  color: var(--text-primary);
}

html[data-theme="light"] .comparisonMatrixCell[data-compare-tone="pass"] { background: linear-gradient(90deg, rgba(19, 122, 70, .09), transparent 42%), var(--surface); }
html[data-theme="light"] .comparisonMatrixCell[data-compare-tone="limit"] { background: linear-gradient(90deg, rgba(181, 18, 47, .08), transparent 42%), var(--surface); }
html[data-theme="light"] .comparisonMatrixCell:is([data-compare-tone="caution"], [data-compare-tone="conflict"]) { background: linear-gradient(90deg, rgba(130, 86, 0, .09), transparent 42%), var(--surface); }
html[data-theme="light"] .comparisonMatrixCell[data-compare-tone="calculated"] { background: linear-gradient(90deg, rgba(72, 100, 118, .09), transparent 42%), var(--surface); }
html[data-theme="light"] .comparisonMatrixCell[data-compare-tone="missing"] { background: repeating-linear-gradient(135deg, rgba(25, 31, 34, .035) 0 4px, transparent 4px 10px), var(--background-secondary); }

/* Desktop cells already expose a text status. On compact matrices that label
   is visually hidden for space, so a shape remains as a non-colour cue while
   the complete status stays available to assistive technology. */
@media (max-width: 760px) {
  .comparisonMatrixCell[data-compare-tone]::before {
    position: absolute;
    bottom: 5px;
    left: 6px;
    display: grid;
    width: 13px;
    height: 13px;
    border: 1px solid currentColor;
    background: var(--surface);
    color: var(--text-muted);
    font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    content: "·";
    place-items: center;
  }

  .comparisonMatrixCell[data-compare-tone="pass"]::before { color: var(--success); content: "✓"; }
  .comparisonMatrixCell[data-compare-tone="limit"]::before { color: var(--error); content: "!"; }
  .comparisonMatrixCell[data-compare-tone="caution"]::before { color: var(--warning); content: "△"; }
  .comparisonMatrixCell[data-compare-tone="conflict"]::before { color: var(--warning); content: "×"; }
  .comparisonMatrixCell[data-compare-tone="calculated"]::before { color: var(--blue); content: "≈"; }
  .comparisonMatrixCell[data-compare-tone="missing"]::before,
  .comparisonMatrixCell[data-compare-tone="na"]::before { color: var(--disabled-text); content: "—"; }

  html[data-theme] body .topbar {
    grid-template-columns: minmax(72px, 1fr) 58px 42px auto 38px !important;
  }

  html[data-theme] .topbar .topAction { display: none !important; }
  html[data-theme] .topbar .themeSwitch {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 42px;
    min-width: 42px;
    min-height: 38px;
    padding: 2px;
  }

  html[data-theme] .topbar .themeSwitch > :is(button, [role="button"]) {
    min-width: 17px;
    min-height: 32px;
    padding: 0 2px;
    font-size: 0;
  }

  html[data-theme] .topbar .themeSwitch > :is(button, [role="button"])::before {
    font-size: 9px;
    content: "◐";
  }

  html[data-theme] .topbar .accountTopAction { grid-column: 4 !important; }
  html[data-theme] .topbar .scrollTopAction { grid-column: 5 !important; }

  html[data-theme="light"] .topbar .nav {
    border-color: var(--border) !important;
    background: rgba(247, 245, 240, .96) !important;
  }
}

@media (max-width: 390px) {
  html[data-theme] body .topbar {
    grid-template-columns: minmax(62px, 1fr) 58px 36px auto 36px !important;
  }

  html[data-theme] .topbar .themeSwitch { width: 36px; min-width: 36px; }
  html[data-theme] .topbar .themeSwitch > :is(button, [role="button"]) { min-width: 14px; }
}

/* Static homepage contract: no decorative motion, reactive glow or smooth scrolling. */
html.staticHome {
  scroll-behavior: auto !important;
}

body[data-page="home"] {
  background: var(--background-primary, #030303);
  background-attachment: scroll;
}

body[data-page="home"] *,
body[data-page="home"] *::before,
body[data-page="home"] *::after {
  animation: none !important;
  scroll-behavior: auto !important;
  transition: none !important;
}

body[data-page="home"] :is(a, button, [role="button"]):is(:hover, :active) {
  transform: none !important;
}

body[data-page="home"] .cinematicHeroPicture .cinematicHeroMedia {
  transform: none !important;
  transform-origin: center;
  will-change: auto;
}

body[data-page="home"] :is(.topbar, .topbar .nav, .globalFeedbackTrigger, .globalFeedbackOverlay) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body[data-page="home"] .topbar,
body[data-page="home"] .topbar .nav {
  background: #030303 !important;
}

body[data-page="home"] .globalFeedbackTrigger {
  background: #080809;
}

html[data-theme="light"] body[data-page="home"] .topbar,
html[data-theme="light"] body[data-page="home"] .topbar .nav {
  background: var(--background-primary) !important;
}

/* TASK 4 · GTO Exchange project-first portfolio. Keep after theme guards. */
body[data-page="account"] .accountSocialHero {
  align-items: end;
  min-height: 260px;
  padding: clamp(28px, 4vw, 54px);
  border: 1px solid var(--border);
  background:
    linear-gradient(112deg, rgba(237, 23, 57, .12), transparent 34%),
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255, 255, 255, .035) calc(25% - 1px) 25%),
    var(--surface);
}

body[data-page="account"] .accountSocialHero h3 {
  max-width: 820px;
  font-size: clamp(42px, 5vw, 76px);
}

body[data-page="account"] .accountSocialHeroActions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body[data-page="account"] .accountSocialHeroActions > button {
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-secondary);
  font-size: 10px;
  cursor: pointer;
}

body[data-page="account"] .accountSocialHeroActions > .buttonPrimary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

body[data-page="account"] .accountSocialLayout {
  grid-template-columns: minmax(0, 1fr);
  margin-top: 1px;
  background: var(--border);
}

body[data-page="account"] :is(.accountFeedColumn, .accountNetworkRail) {
  background: var(--background-primary);
}

body[data-page="account"] .accountNetworkRail { grid-template-columns: repeat(2, minmax(0, 1fr)); }

body[data-page="account"] .accountPostComposer {
  grid-template-columns: 42px repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 92% 2%, rgba(237, 23, 57, .11), transparent 30%),
    var(--surface);
}

body[data-page="account"] .accountPostComposer[hidden] { display: none; }

body[data-page="account"] .accountPostComposer > .accountAvatar { grid-row: 1 / 3; }

body[data-page="account"] .accountComposerIntro {
  grid-column: 2 / -1;
  display: grid;
  gap: 8px;
  align-content: center;
}

body[data-page="account"] .accountComposerIntro strong {
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 400;
  line-height: 1.08;
}

body[data-page="account"] .accountPostComposer .accountComposerActions {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="account"] .accountPostComposer label,
body[data-page="account"] .accountProjectComposerFields label {
  display: grid;
  gap: 7px;
  align-content: start;
  color: var(--text-muted);
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

body[data-page="account"] .accountPostComposer :is(input, select, textarea) {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--border);
  background: var(--elevated-surface);
  color: var(--text-primary);
  font: 400 13px/1.45 var(--display-font);
}

body[data-page="account"] .accountPostComposer textarea {
  min-height: 120px;
  padding: 14px;
  border: 1px solid var(--border);
}

body[data-page="account"] .accountPostComposer select[multiple] {
  min-height: 150px;
  padding: 8px;
}

body[data-page="account"] .accountPostComposer select[multiple] option {
  min-height: 29px;
  padding: 6px 8px;
}

body[data-page="account"] .accountComposerWide { grid-column: 2 / -1; }

body[data-page="account"] .accountProjectComposerFields {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 18px;
  border: 1px solid var(--border);
  background: var(--background-secondary);
}

body[data-page="account"] .accountProjectComposerFields[hidden] { display: none; }
body[data-page="account"] .accountProjectComposerFields .accountComposerWide { grid-column: 1 / -1; }

body[data-page="account"] .accountProjectComposerFields small {
  color: var(--text-muted);
  font-size: 9px;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
}

body[data-page="account"] .accountComposerSubmit {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body[data-page="account"] .accountComposerSubmit .accountComposerCheck {
  display: flex;
  align-items: center;
  gap: 9px;
  letter-spacing: 0;
  text-transform: none;
}

body[data-page="account"] .accountComposerSubmit > button {
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  cursor: pointer;
}

body[data-page="account"] :is(.accountFeedScopes, .accountFeedFilters) {
  gap: 6px;
  padding-right: clamp(14px, 3vw, 28px);
  padding-left: clamp(14px, 3vw, 28px);
  background: var(--surface);
  scrollbar-width: none;
}

body[data-page="account"] :is(.accountFeedScopes, .accountFeedFilters)::-webkit-scrollbar { display: none; }

body[data-page="account"] :is(.accountFeedScopes, .accountFeedFilters) button {
  min-height: 38px;
  border-color: var(--border);
  background: transparent;
  color: var(--text-muted);
}

body[data-page="account"] :is(.accountFeedScopes, .accountFeedFilters) button.isActive {
  border-color: var(--accent);
  background: var(--selected);
  color: var(--text-primary);
}

body[data-page="account"] .accountSocialFeed { gap: 1px; background: var(--border); }

body[data-page="account"] .accountProjectDiscover,
body[data-page="account"] .accountProfessionalStream {
  min-width: 0;
  padding: clamp(22px, 3vw, 38px);
  background: var(--background-primary);
}

body[data-page="account"] .accountFeedSectionHead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
}

body[data-page="account"] .accountFeedSectionHead h4 {
  margin: 10px 0 0;
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
}

body[data-page="account"] .accountFeedSectionHead > :is(span, button) {
  flex: 0 0 auto;
  padding: 0 0 7px;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: pointer;
}

body[data-page="account"] .accountProjectGrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

body[data-page="account"] .accountProjectCard {
  grid-column: span 6;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--surface-shadow-theme);
}

body[data-page="account"] .accountProjectCard[data-project-rhythm="feature"] { grid-column: span 7; }
body[data-page="account"] .accountProjectCard[data-project-rhythm="landscape"] { grid-column: span 5; }
body[data-page="account"] .accountProjectCard[data-project-rhythm="portrait"] { grid-column: span 5; }
body[data-page="account"] .accountProjectCard[data-project-rhythm="wide"] { grid-column: 1 / -1; }

body[data-page="account"] .accountProjectCard > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 72px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

body[data-page="account"] .accountProjectCard > header .accountSocialAuthor { grid-column: auto; }

body[data-page="account"] .accountProjectCard > header > span {
  color: var(--accent);
  font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}

body[data-page="account"] .accountProjectCover {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(330px, 34vw, 520px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  background: var(--visualization-background);
  color: var(--on-media);
  cursor: pointer;
}

body[data-page="account"] .accountProjectCard[data-project-rhythm="landscape"] .accountProjectCover {
  height: clamp(330px, 34vw, 520px);
}

body[data-page="account"] .accountProjectCard[data-project-rhythm="portrait"] .accountProjectCover { height: 560px; }

body[data-page="account"] .accountProjectCover::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 56%, rgba(0, 0, 0, .72));
  content: "";
  pointer-events: none;
}

body[data-page="account"] .accountProjectCover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(.2, .7, .2, 1), filter 400ms ease;
}

body[data-page="account"] .accountProjectCover:hover img {
  filter: saturate(1.08) brightness(1.04);
  transform: scale(1.025);
}

body[data-page="account"] .accountProjectCover > span:last-child {
  position: absolute;
  z-index: 1;
  right: 18px;
  bottom: 17px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, .72);
  color: var(--on-media);
  font-size: 9px;
}

body[data-page="account"] .accountProjectCoverEmpty {
  position: absolute;
  inset: 0;
  display: grid;
  color: rgba(255, 255, 255, .28);
  font: 700 clamp(24px, 4vw, 62px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -.08em;
  place-items: center;
}

body[data-page="account"] .accountProjectCardBody {
  display: grid;
  align-content: start;
  gap: 13px;
  padding: 22px;
}

body[data-page="account"] .accountProjectMeta,
body[data-page="account"] .accountProjectTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body[data-page="account"] .accountProjectMeta span,
body[data-page="account"] .accountProjectTags span {
  padding: 6px 8px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 8px;
  line-height: 1.2;
  text-transform: uppercase;
}

body[data-page="account"] .accountProjectMeta span:first-child { color: var(--text-secondary); }

body[data-page="account"] .accountProjectCardBody h4 { margin: 0; }

body[data-page="account"] .accountProjectCardBody h4 button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: 400 clamp(27px, 3vw, 44px)/.98 var(--display-font);
  letter-spacing: -.05em;
  text-align: left;
  cursor: pointer;
}

body[data-page="account"] .accountProjectCardBody > p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

body[data-page="account"] .accountSocialPostActions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
}

body[data-page="account"] .accountSocialPostActions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

body[data-page="account"] .accountSocialPostActions button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 9px;
  cursor: pointer;
}

body[data-page="account"] .accountSocialPostActions button :is(i, b) {
  color: inherit;
  font-style: normal;
  font-weight: 400;
}

body[data-page="account"] .accountSocialPostActions button.isActive {
  border-color: rgba(237, 23, 57, .56);
  background: var(--selected);
  color: var(--text-primary);
}

body[data-page="account"] .accountSocialPostActions button.isActive i { color: var(--accent); }

body[data-page="account"] .accountProfessionalStream > .accountSocialPost {
  margin-top: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
}

body[data-page="account"] .accountProfessionalStream > .accountSocialPost > footer { margin: 0; }

body[data-page="account"] .accountProjectCard.isCompact {
  grid-column: span 4;
  box-shadow: none;
}

body[data-page="account"] .accountProjectCard.isCompact .accountProjectCover { height: 230px; }
body[data-page="account"] .accountProjectCard.isCompact .accountProjectCardBody { padding: 16px; }
body[data-page="account"] .accountProjectCard.isCompact .accountProjectCardBody h4 button { font-size: 25px; }
body[data-page="account"] .accountProjectCard.isCompact .accountSocialPostActions { display: none; }

body[data-page="account"] .accountProfileProjectShelf,
body[data-page="account"] .accountProfileProjects {
  padding: clamp(26px, 4vw, 46px);
  border-top: 1px solid var(--border);
  background: var(--background-primary);
}

body[data-page="account"] .accountProfileProjects > h4 {
  margin: 10px 0 24px;
  font-size: 34px;
  font-weight: 400;
}

body[data-page="account"] .accountProfileCompany {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font: 9px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}

body[data-page="account"] :is(.accountProjectPanel, .accountProjectPanel[hidden]) { display: none; }

body[data-page="account"] .accountProjectPanel:not([hidden]) {
  position: fixed;
  z-index: 1230;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(24px, 1fr) minmax(0, 1260px) minmax(24px, 1fr);
  overflow-y: auto;
  background: var(--overlay);
  overscroll-behavior: contain;
}

body[data-page="account"].accountProjectOpen .accountCommentsPanel:not([hidden]) { z-index: 1260; }

body[data-page="account"] .accountProjectPanel > .accountProfileBackdrop {
  position: fixed;
  z-index: 0;
  inset: 0;
  display: block;
}

body[data-page="account"] .accountProjectSheet {
  position: relative;
  z-index: 1;
  grid-column: 2;
  align-self: start;
  min-width: 0;
  min-height: 100%;
  border-right: 1px solid var(--border-strong);
  border-left: 1px solid var(--border-strong);
  background: var(--background-primary);
  color: var(--text-primary);
  box-shadow: 0 0 120px rgba(0, 0, 0, .66);
}

body.accountProjectOpen { overflow: hidden; }

body[data-page="account"] .accountProjectSheetHead {
  position: sticky;
  z-index: 4;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  padding: 12px clamp(18px, 4vw, 52px);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--background-primary) 90%, transparent);
  backdrop-filter: blur(20px);
}

body[data-page="account"] .accountProjectSheetHead > div {
  display: flex;
  align-items: center;
  gap: 18px;
}

body[data-page="account"] .accountProjectSheetHead > div > span:last-child {
  color: var(--text-muted);
  font-size: 9px;
}

body[data-page="account"] .accountProjectSheetHead > button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 24px;
  cursor: pointer;
}

body[data-page="account"] .accountProjectHero {
  position: relative;
  min-height: min(72vh, 780px);
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  background: var(--visualization-background);
  color: var(--on-media);
}

body[data-page="account"] .accountProjectHero::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, .72));
  content: "";
  pointer-events: none;
}

body[data-page="account"] .accountProjectHero img {
  width: 100%;
  height: min(72vh, 780px);
  object-fit: cover;
}

body[data-page="account"] .accountProjectHero figcaption {
  position: absolute;
  z-index: 1;
  right: clamp(18px, 4vw, 52px);
  bottom: 24px;
  left: clamp(18px, 4vw, 52px);
  color: var(--on-media-muted);
  font: 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}

body[data-page="account"] .accountProjectHeroEmpty {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .28);
  font: 700 clamp(34px, 7vw, 100px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

body[data-page="account"] .accountProjectSheetIntro {
  display: grid;
  grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr);
  gap: 24px clamp(36px, 7vw, 110px);
  padding: clamp(34px, 6vw, 86px) clamp(18px, 6vw, 76px);
  border-bottom: 1px solid var(--border);
}

body[data-page="account"] .accountProjectSheetIntro > .accountSocialAuthor {
  grid-column: 1;
  align-self: start;
}

body[data-page="account"] .accountProjectSheetMeta {
  grid-column: 1;
  display: grid;
  gap: 8px;
  align-content: start;
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
}

body[data-page="account"] .accountProjectSheetIntro > h2 {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  max-width: 900px;
  margin: 0;
  font-size: clamp(48px, 7vw, 102px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.065em;
}

body[data-page="account"] .accountProjectSheetIntro > p {
  grid-column: 2;
  max-width: 760px;
  margin: 0;
  color: var(--text-secondary);
  font-size: clamp(18px, 2vw, 27px);
  line-height: 1.45;
}

body[data-page="account"] .accountProjectGallery {
  display: grid;
  grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr);
  gap: 32px clamp(36px, 7vw, 110px);
  padding: clamp(34px, 5vw, 68px) clamp(18px, 6vw, 76px);
  border-bottom: 1px solid var(--border);
  background: var(--background-secondary);
}

body[data-page="account"] .accountProjectGallery h3 {
  margin: 12px 0 0;
  font-size: clamp(30px, 4vw, 54px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.05em;
}

body[data-page="account"] .accountProjectGallery > div:last-child {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="account"] .accountProjectGallery figure {
  grid-column: span 6;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--border);
  background: var(--surface);
}

body[data-page="account"] .accountProjectGallery figure:only-child { grid-column: 1 / -1; }

body[data-page="account"] .accountProjectGallery img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--visualization-background);
}

body[data-page="account"] .accountProjectGallery figcaption {
  padding: 11px 13px;
  color: var(--text-muted);
  font: 9px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}

body[data-page="account"] :is(.accountProjectDna, .accountProjectEquipment, .accountProjectCrew) {
  display: grid;
  grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr);
  gap: 32px clamp(36px, 7vw, 110px);
  padding: clamp(34px, 5vw, 68px) clamp(18px, 6vw, 76px);
  border-bottom: 1px solid var(--border);
}

body[data-page="account"] :is(.accountProjectDna, .accountProjectEquipment, .accountProjectCrew) h3 {
  margin: 12px 0 0;
  font-size: clamp(30px, 4vw, 54px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.05em;
}

body[data-page="account"] .accountProjectDna dl { display: grid; gap: 1px; margin: 0; background: var(--border); }

body[data-page="account"] .accountProjectDna dl > div {
  display: grid;
  grid-template-columns: minmax(110px, .28fr) minmax(0, .72fr);
  gap: 16px;
  padding: 20px;
  background: var(--surface);
}

body[data-page="account"] .accountProjectDna :is(dt, dd) { margin: 0; }
body[data-page="account"] .accountProjectDna dt { color: var(--accent); font: 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
body[data-page="account"] .accountProjectDna dd { display: flex; flex-wrap: wrap; gap: 7px; }
body[data-page="account"] .accountProjectDna dd span { padding: 7px 9px; border: 1px solid var(--border); color: var(--text-secondary); font-size: 10px; }

body[data-page="account"] .accountProjectEquipment > div:last-child {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body[data-page="account"] .accountProjectEquipment a {
  display: grid;
  grid-template-rows: 170px auto auto;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-primary);
  text-decoration: none;
}

body[data-page="account"] .accountProjectEquipment a > span {
  display: grid;
  overflow: hidden;
  background: var(--media-surface);
  place-items: center;
}

body[data-page="account"] .accountProjectEquipment img {
  width: 86%;
  height: 86%;
  object-fit: contain;
}

body[data-page="account"] .accountProjectEquipment a strong { font-size: 13px; font-weight: 500; line-height: 1.2; }
body[data-page="account"] .accountProjectEquipment a small { color: var(--text-muted); font-size: 8px; text-transform: uppercase; }

body[data-page="account"] .accountProjectCrew > div:last-child { display: grid; gap: 1px; background: var(--border); }

body[data-page="account"] .accountProjectCrew > div:last-child > :is(button, article) {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 12px 16px;
  border: 0;
  background: var(--surface);
  color: var(--text-primary);
  text-align: left;
}

body[data-page="account"] .accountProjectCrew button { cursor: pointer; }
body[data-page="account"] .accountProjectCrew :is(strong, small) { display: block; }
body[data-page="account"] .accountProjectCrew strong { font-size: 12px; }
body[data-page="account"] .accountProjectCrew small { margin-top: 4px; color: var(--text-muted); font-size: 9px; }

body[data-page="account"] .accountProjectDiscussion {
  padding: clamp(28px, 5vw, 64px) clamp(18px, 6vw, 76px) 80px;
  background: var(--surface);
}

body[data-page="account"] .accountProjectDiscussion .accountSocialPostActions {
  margin-top: 18px;
  border: 1px solid var(--border);
  background: var(--background-primary);
}

html[data-theme="light"] body[data-page="account"] .accountSocialHero {
  background:
    linear-gradient(112deg, rgba(201, 20, 50, .08), transparent 34%),
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(24, 29, 32, .04) calc(25% - 1px) 25%),
    var(--surface);
}

html[data-theme="light"] body[data-page="account"] :is(
  .accountPostComposer,
  .accountProjectCard,
  .accountProfessionalStream > .accountSocialPost,
  .accountProjectSheet,
  .accountProjectDna dl > div,
  .accountProjectEquipment a,
  .accountProjectCrew > div:last-child > :is(button, article),
  .accountProjectDiscussion
) {
  border-color: var(--border);
  background-color: var(--surface);
  color: var(--text-primary);
}

html[data-theme="light"] body[data-page="account"] :is(.accountProjectCover, .accountProjectHero) {
  --text: var(--on-media);
  --soft: var(--on-media-muted);
  --muted: var(--on-media-muted);
  color: var(--on-media);
}

html[data-theme="light"] body[data-page="account"] .accountProjectCard > header > span,
html[data-theme="light"] body[data-page="account"] .accountProjectDna dt { color: var(--accent); }

html[data-theme="light"] body[data-page="account"] .accountProjectCardBody h4 button,
html[data-theme="light"] body[data-page="account"] .accountProjectCrew > div:last-child > :is(button, article),
html[data-theme="light"] body[data-page="account"] .accountProjectEquipment a { color: var(--text-primary); }

html[data-theme="light"] body[data-page="account"] .accountProjectSheetHead { background: rgba(242, 240, 235, .91); }
html[data-theme="light"] body[data-page="account"] .accountNetworkRail > section { background: var(--surface); }

@media (max-width: 1120px) {
  body[data-page="account"] .accountProjectCard[data-project-rhythm] { grid-column: span 6; }
  body[data-page="account"] .accountProjectCard[data-project-rhythm="wide"] { grid-column: 1 / -1; }
  body[data-page="account"] .accountProjectEquipment > div:last-child { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  body[data-page="account"] .accountSocialLayout { grid-template-columns: 1fr; }
  body[data-page="account"] .accountProjectCard[data-project-rhythm] { grid-column: span 6; }
  body[data-page="account"] .accountNetworkRail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  body[data-page="account"] .accountSocialHero {
    min-height: 0;
    padding: 28px 18px;
  }

  body[data-page="account"] .accountSocialHero h3 { font-size: clamp(38px, 11vw, 48px); }
  body[data-page="account"] .accountSocialHeroActions { display: grid; width: 100%; }
  body[data-page="account"] .accountSocialHeroActions > button { width: 100%; min-height: 48px; }

  body[data-page="account"] .accountPostComposer {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 14px;
  }

  body[data-page="account"] .accountPostComposer > .accountAvatar { grid-row: 1; }
  body[data-page="account"] :is(.accountComposerIntro, .accountPostComposer .accountComposerActions, .accountComposerWide, .accountProjectComposerFields, .accountComposerSubmit) { grid-column: 1 / -1; }
  body[data-page="account"] .accountComposerIntro { grid-column: 2; }
  body[data-page="account"] .accountPostComposer .accountComposerActions,
  body[data-page="account"] .accountProjectComposerFields { grid-template-columns: 1fr; }
  body[data-page="account"] .accountProjectComposerFields .accountComposerWide { grid-column: 1; }
  body[data-page="account"] .accountComposerSubmit { align-items: stretch; flex-direction: column; }
  body[data-page="account"] .accountComposerSubmit > button { width: 100%; }

  body[data-page="account"] :is(.accountFeedScopes, .accountFeedFilters) { padding-right: 14px; padding-left: 14px; }
  body[data-page="account"] :is(.accountFeedScopes, .accountFeedFilters) button { min-height: 44px; }

  body[data-page="account"] .accountSocialFeed { order: 4; }
  body[data-page="account"] .accountNetworkRail > section:first-child { order: 5; }
  body[data-page="account"] .accountNetworkRail > section:last-child { order: 6; }

  body[data-page="account"] .accountProjectDiscover,
  body[data-page="account"] .accountProfessionalStream { padding: 22px 14px; }

  body[data-page="account"] .accountFeedSectionHead { align-items: start; }
  body[data-page="account"] .accountFeedSectionHead h4 { font-size: 31px; }

  body[data-page="account"] .accountProjectGrid { grid-template-columns: 1fr; gap: 12px; }
  body[data-page="account"] .accountProjectCard,
  body[data-page="account"] .accountProjectCard[data-project-rhythm],
  body[data-page="account"] .accountProjectCard.isCompact { grid-column: 1; }

  body[data-page="account"] .accountProjectCard > header { min-height: 68px; padding: 12px; }
  body[data-page="account"] .accountProjectCard > header > span { align-self: start; }
  body[data-page="account"] .accountProjectCover,
  body[data-page="account"] .accountProjectCard[data-project-rhythm] .accountProjectCover,
  body[data-page="account"] .accountProjectCard.isCompact .accountProjectCover { height: min(72vw, 390px); min-height: 260px; }
  body[data-page="account"] .accountProjectCardBody { padding: 18px 16px; }
  body[data-page="account"] .accountProjectCardBody h4 button { font-size: 30px; }
  body[data-page="account"] .accountProjectCard.isCompact .accountSocialPostActions { display: flex; }

  body[data-page="account"] .accountSocialPostActions {
    align-items: stretch;
    flex-direction: column;
    padding: 12px;
  }

  body[data-page="account"] .accountSocialPostActions > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-page="account"] .accountSocialPostActions button {
    justify-content: center;
    min-height: 44px;
    padding: 8px 6px;
  }

  body[data-page="account"] .accountProfileProjectShelf,
  body[data-page="account"] .accountProfileProjects { padding: 28px 14px; }

  body[data-page="account"] .accountProjectPanel:not([hidden]) {
    display: block;
    overflow-y: auto;
    background: var(--background-primary);
  }

  body[data-page="account"] .accountProjectPanel > .accountProfileBackdrop { display: none; }

  body[data-page="account"] .accountProjectSheet {
    min-height: 100svh;
    border: 0;
    box-shadow: none;
  }

  body[data-page="account"] .accountProjectSheetHead {
    min-height: 64px;
    padding: 10px 14px;
  }

  body[data-page="account"] .accountProjectSheetHead > div > span:last-child { display: none; }
  body[data-page="account"] .accountProjectHero,
  body[data-page="account"] .accountProjectHero img { min-height: 56svh; height: 56svh; }

  body[data-page="account"] .accountProjectSheetIntro,
  body[data-page="account"] :is(.accountProjectGallery, .accountProjectDna, .accountProjectEquipment, .accountProjectCrew) {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 34px 16px;
  }

  body[data-page="account"] .accountProjectSheetIntro > :is(.accountSocialAuthor, .accountProjectSheetMeta, h2, p) {
    grid-column: 1;
    grid-row: auto;
  }

  body[data-page="account"] .accountProjectSheetIntro > h2 { font-size: clamp(46px, 15vw, 66px); }
  body[data-page="account"] .accountProjectSheetIntro > p { font-size: 18px; }
  body[data-page="account"] .accountProjectGallery > div:last-child { grid-template-columns: 1fr; }
  body[data-page="account"] .accountProjectGallery figure,
  body[data-page="account"] .accountProjectGallery figure:only-child { grid-column: 1; }
  body[data-page="account"] .accountProjectDna dl > div { grid-template-columns: 1fr; }
  body[data-page="account"] .accountProjectEquipment > div:last-child { grid-template-columns: 1fr; }
  body[data-page="account"] .accountProjectEquipment a { grid-template-columns: 100px minmax(0, 1fr); grid-template-rows: auto auto; }
  body[data-page="account"] .accountProjectEquipment a > span { grid-row: 1 / 3; min-height: 100px; }
  body[data-page="account"] .accountProjectDiscussion { padding: 30px 14px calc(86px + env(safe-area-inset-bottom)); }

  body[data-page="account"] .accountProjectDiscussion .accountSocialPostActions {
    position: sticky;
    z-index: 3;
    bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(18px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="account"] .accountProjectCover img { transition: none; }
}

@media (orientation: landscape) and (max-height: 600px) and (min-width: 761px) and (max-width: 1000px) {
  .comparisonMatrixCell[data-compare-tone]::before {
    position: absolute;
    bottom: 5px;
    left: 6px;
    display: grid;
    width: 13px;
    height: 13px;
    border: 1px solid currentColor;
    background: var(--surface);
    color: var(--text-muted);
    font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    content: "·";
    place-items: center;
  }

  .comparisonMatrixCell[data-compare-tone="pass"]::before { color: var(--success); content: "✓"; }
  .comparisonMatrixCell[data-compare-tone="limit"]::before { color: var(--error); content: "!"; }
  .comparisonMatrixCell[data-compare-tone="caution"]::before { color: var(--warning); content: "△"; }
  .comparisonMatrixCell[data-compare-tone="conflict"]::before { color: var(--warning); content: "×"; }
  .comparisonMatrixCell[data-compare-tone="calculated"]::before { color: var(--blue); content: "≈"; }
  .comparisonMatrixCell[data-compare-tone="missing"]::before,
  .comparisonMatrixCell[data-compare-tone="na"]::before { color: var(--disabled-text); content: "—"; }
}

/* TASK 3 · semantic DARK / LIGHT theme system.
   DARK values mirror the established cinematic palette. LIGHT is a separate
   warm editorial palette; photographs, video and technical canvases are never
   inverted and may remain deliberate dark media islands. */
:root {
  color-scheme: dark;
  --background-primary: #020202;
  --background-secondary: #050505;
  --surface: #090909;
  --elevated-surface: #111111;
  --sunken-surface: #050505;
  --subtle-surface: #181818;
  --text-primary: #f4f1eb;
  --text-secondary: #d6d3ce;
  --text-muted: #8d8d8d;
  --border: rgba(255, 255, 255, .13);
  --border-strong: rgba(255, 255, 255, .28);
  --accent: #ed1739;
  --accent-hover: #ff3151;
  --interactive: #f0ede7;
  --interactive-text: #060606;
  --selected: rgba(237, 23, 57, .14);
  --selected-text: #ffffff;
  --hover: rgba(255, 255, 255, .055);
  --disabled: rgba(255, 255, 255, .055);
  --disabled-text: #737373;
  --success: #55d68b;
  --warning: #d7a64a;
  --error: #ff7182;
  --focus-ring: #ed1739;
  --overlay: rgba(0, 0, 0, .78);
  --header-surface: rgba(3, 3, 3, .82);
  --media-surface: #e9e5dc;
  --media-border: rgba(22, 24, 25, .16);
  --on-media: #ffffff;
  --on-media-muted: rgba(255, 255, 255, .7);
  --visualization-background: #030505;
  --visualization-surface: #070909;
  --visualization-border: rgba(255, 255, 255, .14);
  --visualization-text: #e9eee9;
  --visualization-muted: #87908c;
  --surface-shadow-theme:
    0 22px 58px rgba(0, 0, 0, .38),
    0 3px 10px rgba(0, 0, 0, .28),
    inset 0 1px rgba(255, 255, 255, .06);

  /* Compatibility aliases keep the established components on the semantic
     layer while later product work can consume the new names directly. */
  --bg: var(--background-primary);
  --panel: var(--surface);
  --panel-2: var(--elevated-surface);
  --panel-3: var(--subtle-surface);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --muted: var(--text-muted);
  --soft: var(--text-secondary);
  --text: var(--text-primary);
  --red: var(--accent);
  --red-dark: #9e0b23;
  --red-bright: var(--accent-hover);
  --blue: #8d8d8d;
  --blue-dark: #222222;
  --blue-bright: #d0d0d0;
  --shadow: 0 30px 90px rgba(0, 0, 0, .62);
  --surface-shadow: var(--surface-shadow-theme);
}

:root[data-theme="dark"] { color-scheme: dark; }

:root[data-theme="light"] {
  color-scheme: light;
  --background-primary: #f2f0eb;
  --background-secondary: #e7e4dd;
  --surface: #faf9f6;
  --elevated-surface: #ffffff;
  --sunken-surface: #e8e5de;
  --subtle-surface: #dedad2;
  --text-primary: #171a1c;
  --text-secondary: #3d4447;
  --text-muted: #5f676a;
  --border: rgba(24, 29, 32, .17);
  --border-strong: rgba(24, 29, 32, .34);
  --accent: #c91432;
  --accent-hover: #a90f29;
  --interactive: #202528;
  --interactive-text: #ffffff;
  --selected: rgba(201, 20, 50, .11);
  --selected-text: #171a1c;
  --hover: rgba(25, 31, 34, .055);
  --disabled: rgba(25, 31, 34, .07);
  --disabled-text: #687073;
  --success: #137a46;
  --warning: #825600;
  --error: #b5122f;
  --focus-ring: #c91432;
  --overlay: rgba(21, 23, 24, .56);
  --header-surface: rgba(247, 245, 240, .9);
  --media-surface: #ebe6dc;
  --media-border: rgba(24, 29, 32, .18);
  --on-media: #ffffff;
  --on-media-muted: rgba(255, 255, 255, .72);
  /* Photometric, loading and concept canvases remain calibrated dark stages. */
  --visualization-background: #030505;
  --visualization-surface: #070909;
  --visualization-border: rgba(255, 255, 255, .14);
  --visualization-text: #e9eee9;
  --visualization-muted: #87908c;
  --surface-shadow-theme:
    0 22px 55px rgba(35, 31, 25, .11),
    0 3px 10px rgba(35, 31, 25, .08),
    inset 0 1px rgba(255, 255, 255, .78);
  --red-dark: #8c0d22;
  --blue: #486476;
  --blue-dark: #324a5a;
  --blue-bright: #5f7e90;
  --shadow: 0 30px 90px rgba(35, 31, 25, .18);
}

/* Header theme control: supports a compact two-button segmented control and
   a single toggle button without requiring markup-specific icons. */
.themeSwitch {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(28px, 1fr);
  flex: 0 0 auto;
  min-width: 64px;
  min-height: 42px;
  padding: 3px;
  border: 1px solid var(--border);
  background: var(--sunken-surface);
  color: var(--text-muted);
}

button.themeSwitch {
  display: inline-flex;
  min-width: 42px;
  width: 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.themeSwitch > :is(button, [role="button"]) {
  display: inline-grid;
  min-width: 28px;
  min-height: 34px;
  padding: 0 7px;
  border: 0;
  background: transparent;
  color: inherit;
  font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
  place-items: center;
  cursor: pointer;
}

.themeSwitch:hover,
.themeSwitch:focus-within { border-color: var(--border-strong); }

.themeSwitch > :is(button, [role="button"]):hover { background: var(--hover); color: var(--text-primary); }

.themeSwitch > :is(button, [role="button"]):is(.active, [aria-pressed="true"]),
button.themeSwitch[aria-pressed="true"] {
  background: var(--interactive);
  color: var(--interactive-text);
}

/* LIGHT · global canvas, typography and shared controls. */
html[data-theme="light"] body {
  background:
    linear-gradient(118deg, rgba(72, 100, 118, .045), transparent 28%, transparent 72%, rgba(201, 20, 50, .04)),
    repeating-linear-gradient(0deg, rgba(24, 29, 32, .035) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, rgba(24, 29, 32, .035) 0 1px, transparent 1px 80px),
    var(--background-primary);
  color: var(--text-primary);
}

html[data-theme="light"] ::selection { background: rgba(201, 20, 50, .2); color: #111416; }

html[data-theme="light"] :is(input, select, textarea) {
  border-color: var(--border-strong);
  background: var(--elevated-surface);
  color: var(--text-primary);
  box-shadow: none;
}

html[data-theme="light"] :is(input, textarea)::placeholder { color: #727a7d; opacity: 1; }
html[data-theme="light"] option { background: var(--elevated-surface); color: var(--text-primary); }
html[data-theme="light"] :is(input, select, textarea):focus { border-color: var(--accent); }
html[data-theme="light"] :is(button, input, select, textarea):disabled {
  border-color: var(--border);
  background-color: var(--disabled);
  color: var(--disabled-text);
  opacity: 1;
}

html[data-theme="light"] :is(.button, .smallButton, .iconTextButton, .topAction) {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--text-primary);
}

html[data-theme="light"] :is(.button, .smallButton, .iconTextButton, .topAction):hover {
  border-color: var(--accent);
  background: var(--hover);
}

html[data-theme="light"] :is(.buttonPrimary, .accountDialogForm button[type="submit"], .accountCommentComposer button, .accountChatComposer button) {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

html[data-theme="light"] :is(.buttonPrimary, .accountDialogForm button[type="submit"], .accountCommentComposer button, .accountChatComposer button):hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  color: #ffffff;
}

html[data-theme="light"] :is(.eyebrow, .sectionKicker, .breadcrumb) { color: var(--text-muted); }
html[data-theme="light"] :is(.textLink, .accountTextLink) { border-color: var(--border-strong); color: var(--text-primary); }

/* LIGHT · header and navigation. */
html[data-theme="light"] .topbar {
  border-color: var(--border) !important;
  background: var(--header-surface) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 12px 42px rgba(35, 31, 25, .1);
}

html[data-theme="light"] .brand small,
html[data-theme="light"] body[data-page="home"] .brandIdentity small { color: var(--text-muted); }

html[data-theme="light"] .brandOfficialWordmark { filter: none; opacity: .72; }

html[data-theme="light"] .nav a { color: var(--text-muted); }
html[data-theme="light"] .nav a:is(:hover, .active) { color: var(--text-primary); }

html[data-theme="light"] .languageSwitch {
  border-color: var(--border);
  background: var(--sunken-surface);
}

html[data-theme="light"] .languageSwitch button { color: var(--text-muted); }
html[data-theme="light"] .languageSwitch button.active {
  background: var(--interactive);
  color: var(--interactive-text);
}

html[data-theme="light"] :is(.accountTopAction, .scrollTopAction, .topAction) {
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, .64);
  color: var(--text-primary);
}

html[data-theme="light"] :is(.accountTopAction, .scrollTopAction, .topAction):hover,
html[data-theme="light"] .accountTopAction.active {
  border-color: var(--accent);
  background: var(--selected);
  color: var(--text-primary);
}

/* Cinematic and media-led regions intentionally retain a dark art-directed
   canvas in LIGHT. Only their surrounding application chrome changes. */
html[data-theme="light"] :is(
  .cinematicHero,
  .projectsHero,
  .caseHero,
  .featuredProject,
  .projectCardCinematic,
  .eventStaticList li,
  .equipmentProjectUse,
  .caseWideImage,
  .caseGallery figure,
  .conceptRender,
  .conceptGeneratedMedia,
  .conceptImageOpen,
  .illuminationVisual,
  .illuminationMap,
  .illuminationScene,
  .illuminationCanvasWrap,
  .transportPlaceDiagram,
  .transportScene,
  .transportSceneCanvasWrap,
  .accountArtifactMedia,
  .accountSocialMedia
) {
  --text: #f4f1eb;
  --soft: #d6d3ce;
  --muted: #9b9b9b;
  --line: rgba(255, 255, 255, .14);
  --line-strong: rgba(255, 255, 255, .3);
  color: var(--on-media);
}

html[data-theme="light"] :is(.projectOverlay, .projectCardBody, .eventStaticList li > div, .equipmentProjectUseCopy) :is(h1, h2, h3, strong, a) {
  color: var(--on-media);
}

html[data-theme="light"] :is(.projectOverlay, .projectCardBody, .eventStaticList li > div, .equipmentProjectUseCopy) :is(p, small, span) {
  color: var(--on-media-muted);
}

html[data-theme="light"] :is(.illuminationVisual, .illuminationCanvasWrap, .transportScene, .transportSceneCanvasWrap, .conceptRender, .conceptGeneratedMedia) {
  border-color: var(--visualization-border);
  background-color: var(--visualization-background);
  color: var(--visualization-text);
}

/* LIGHT · homepage, project archive and editorial sections. */
html[data-theme="light"] :is(.projectShowcase, .projectArchive, .processSection, .conceptFeature, .closingCall, .cinematicFooter, .caseResult) {
  background: var(--background-secondary);
}

html[data-theme="light"] .quietGrid::before {
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(24, 29, 32, .055) calc(25% - 1px) 25%);
}

html[data-theme="light"] :is(.cinematicSectionHead > p, .scaleStatement p, .directionRows p, .conceptFeatureCopy p, .caseIntroText > p, .caseSolution p, .equipmentApplication p) {
  color: var(--text-muted);
}

html[data-theme="light"] .scaleMetrics > div {
  background:
    radial-gradient(circle at 82% 12%, rgba(201, 20, 50, .07), transparent 30%),
    linear-gradient(150deg, rgba(255, 255, 255, .62), transparent 48%);
}

html[data-theme="light"] .scaleMetrics strong { color: var(--text-primary); }
html[data-theme="light"] .scaleMetrics span { color: var(--text-muted); }
html[data-theme="light"] .scaleMetrics > div::after { background: linear-gradient(90deg, var(--accent) 0 18%, var(--border) 18% 100%); }
html[data-theme="light"] .directionRows a:hover { background: var(--hover); }

html[data-theme="light"] .processTrack {
  background: linear-gradient(90deg, transparent, rgba(25, 31, 34, .03) 40%, transparent);
}

html[data-theme="light"] .processTrack li::before {
  border-color: var(--background-secondary);
  background: var(--elevated-surface);
}

html[data-theme="light"] :is(.processTrack span, .processTrack small) { color: var(--text-muted); }

html[data-theme="light"] :is(.catalogPrototype .categoryCard, .interfacePage .categoryCard) {
  background: var(--surface);
  color: var(--text-primary);
}

html[data-theme="light"] :is(.catalogPrototype .categoryCard h3, .interfacePage .categoryCard h3) { color: var(--text-primary); }
html[data-theme="light"] :is(.catalogPrototype .categoryCard p, .interfacePage .categoryCard p, .catalogPrototype .categoryCardFooter) { color: var(--text-muted); }
html[data-theme="light"] .conceptFeatureCopy { background: var(--surface); }
html[data-theme="light"] .closingCall { background: linear-gradient(130deg, var(--elevated-surface), var(--background-secondary)); }
html[data-theme="light"] .cinematicFooter { color: var(--text-primary); }
html[data-theme="light"] .cinematicFooter :is(small, div:last-child) { color: var(--text-muted); }

/* LIGHT · interface heroes, catalogue, equipment and shared media containers. */
html[data-theme="light"] .interfacePage main { background: var(--background-primary); }

html[data-theme="light"] .interfacePage .pageHero {
  color: var(--text-primary);
  background:
    radial-gradient(circle at 78% 24%, rgba(201, 20, 50, .11), transparent 26%),
    linear-gradient(135deg, var(--surface) 0 62%, var(--background-secondary) 62% 100%);
}

html[data-theme="light"] .interfacePage .pageHero::before {
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(24, 29, 32, .06) calc(25% - 1px) 25%);
}

html[data-theme="light"] .interfacePage .pageHero :is(p, .breadcrumb, .pageHeroIndex) { color: var(--text-muted); }

html[data-theme="light"] :is(.categoryCardMedia, .equipmentPhoto, .compareProductImage, .comparisonProductMedia, .pickerThumb, .productPhotoLarge, .equipmentDetailMedia) {
  border-color: var(--media-border);
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .82), transparent 38%),
    linear-gradient(145deg, #f1eee7 0%, var(--media-surface) 56%, #d7d1c6 100%);
}

html[data-theme="light"] :is(.categoryGrid, .equipmentGrid, .catalogPrototype .categoryGrid) { background: var(--border); }

html[data-theme="light"] :is(.filters, .filterPanel, .catalogMobileControls) {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-primary);
}

html[data-theme="light"] :is(.equipmentCard, .equipmentCardBody) {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-primary);
}

html[data-theme="light"] .equipmentCard:hover { border-color: var(--border-strong); background: var(--elevated-surface); }
html[data-theme="light"] .equipmentCard h3 { color: var(--text-primary); }
html[data-theme="light"] .equipmentCard :is(p, small, .cardMeta, .cardTop) { color: var(--text-muted); }

html[data-theme="light"] :is(.equipmentSpecsPanel .specGroup, .sourceLinks, .equipmentFacts, .equipmentSummary, .equipmentApplication) {
  border-color: var(--border);
  background-color: var(--surface);
  color: var(--text-primary);
}

html[data-theme="light"] :is(.specGroup dt, .specGroup p, .sourceLinks p, .equipmentFacts dt) { color: var(--text-muted); }

html[data-theme="light"] :is(.catalogQuickFilters button, .catalogFilterToggle) {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text-secondary);
}

html[data-theme="light"] :is(.catalogQuickFilters button.isActive, .catalogFilterToggle:hover) {
  border-color: var(--interactive);
  background: var(--interactive);
  color: var(--interactive-text);
}

/* LIGHT · comparison workspace and all table families. */
html[data-theme="light"] :is(
  .comparePicker,
  .comparison,
  .comparisonIntelligence,
  .comparisonIntelligenceDisclosure,
  .comparisonControls,
  .comparisonMatrixShell,
  .comparisonSourceDialog,
  .compareTable
) {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-primary);
}

html[data-theme="light"] :is(.compareCategoryCard, .compareProduct, .pickerItem, .comparisonInsight, .comparisonSourceDocuments article) {
  border-color: var(--border);
  background: var(--elevated-surface);
  color: var(--text-primary);
}

html[data-theme="light"] :is(.compareCategoryCard, .pickerItem):hover { border-color: var(--accent); background: var(--hover); }

html[data-theme="light"] :is(.comparisonMatrixHeader, .comparisonParameterCell, .comparisonProductCard, .comparisonMatrixCell, .comparisonGroup > summary) {
  border-color: var(--border);
  background-color: var(--surface);
  color: var(--text-primary);
}

html[data-theme="light"] .comparisonMatrixRow:nth-child(even) :is(.comparisonParameterCell, .comparisonMatrixCell) {
  background-color: rgba(25, 31, 34, .025);
}

html[data-theme="light"] .comparisonMatrixCell[data-compare-tone="pass"] { background: linear-gradient(90deg, rgba(19, 122, 70, .09), transparent 42%), var(--surface); }
html[data-theme="light"] .comparisonMatrixCell[data-compare-tone="limit"] { background: linear-gradient(90deg, rgba(181, 18, 47, .08), transparent 42%), var(--surface); }
html[data-theme="light"] .comparisonMatrixCell:is([data-compare-tone="caution"], [data-compare-tone="conflict"]) { background: linear-gradient(90deg, rgba(130, 86, 0, .09), transparent 42%), var(--surface); }
html[data-theme="light"] .comparisonMatrixCell[data-compare-tone="calculated"] { background: linear-gradient(90deg, rgba(72, 100, 118, .09), transparent 42%), var(--surface); }
html[data-theme="light"] .comparisonMatrixCell[data-compare-tone="missing"] { background: repeating-linear-gradient(135deg, rgba(25, 31, 34, .025) 0 4px, transparent 4px 10px), var(--background-secondary); }

html[data-theme="light"] :is(.comparisonScenario select, .comparisonViewModes button, .comparisonUnitToggle, .comparisonInsightFields button, .comparisonSourceButton) {
  border-color: var(--border-strong);
  background: var(--elevated-surface);
  color: var(--text-secondary);
}

html[data-theme="light"] :is(.comparisonViewModes button[aria-pressed="true"], .comparisonUnitToggle[aria-pressed="true"]) {
  border-color: var(--interactive);
  background: var(--interactive);
  color: var(--interactive-text);
}

html[data-theme="light"] :is(.compareTable th, .compareTable td, .illuminationMountingTable th, .illuminationMountingTable td, .illuminationSystemBomTable th, .illuminationSystemBomTable td, .accountAdminTable th, .accountAdminTable td) {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-primary);
}

html[data-theme="light"] :is(.compareTable tr.diff td, .compareTable tbody tr:nth-child(even) td) { background: rgba(25, 31, 34, .028); }

html[data-theme="light"] :is(.compareStickyNames, body.compareFocusMode[data-page="compare"] .comparisonWorkspaceTopline) {
  border-color: var(--border);
  background: rgba(250, 249, 246, .94);
}

html[data-theme="light"] .compareStickyNamesTrack :is(span, b) { border-color: var(--border); color: var(--text-primary); }
html[data-theme="light"] .compareStickyNamesTrack span { background: rgba(250, 249, 246, .98); color: var(--text-muted); }

/* LIGHT · tools, forms, results, loading, error and empty states. */
html[data-theme="light"] :is(.toolsNav, .toolPanel, .toolForm, .toolResult, .conceptNotes, .conceptLibrary, .requestForm, .toolFeedback) {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: none;
}

html[data-theme="light"] :is(.toolHubFlow, .toolsLayout, .toolMetrics, .toolResultSections, .transportCargoGrid, .transportMetrics, .transportBreakdown > div, .transportGates, .transportAlternativeGrid, .transportWarnings ul, .transportLoadingOrder ol, .transportProvenance dl, .illuminationWorkspace, .illuminationMetricGrid, .illuminationDecisionGrid, .illuminationRecommendationList, .illuminationScheduleMeta) {
  background: var(--border);
}

html[data-theme="light"] :is(.toolCard, .toolMetric, .toolResultSections section, .conceptLibraryCard, .transportCargoField, .transportMetric, .transportBreakdown article, .transportGate, .transportAlternative, .transportWarnings li, .transportLoadingOrder li, .transportProvenance dl div, .illuminationMetric, .illuminationRecommendationList article, .illuminationScheduleMeta article, .illuminationProcurementOption) {
  border-color: var(--border);
  background: var(--elevated-surface);
  color: var(--text-primary);
}

html[data-theme="light"] .toolCard:hover { border-color: var(--border-strong); background: var(--hover); }
html[data-theme="light"] .toolCard.active { border-color: var(--accent); background: var(--selected); }

html[data-theme="light"] .interfacePage .toolCardReady { background: linear-gradient(110deg, rgba(19, 122, 70, .08), transparent 58%), var(--elevated-surface); }
html[data-theme="light"] .interfacePage .toolCardTesting,
html[data-theme="light"] .interfacePage .toolCardDevelopment { background: linear-gradient(110deg, rgba(181, 18, 47, .06), transparent 58%), var(--elevated-surface); }
html[data-theme="light"] .interfacePage :is(.toolCardReady, .toolCardTesting, .toolCardDevelopment).active { background: var(--selected); }

html[data-theme="light"] :is(.illuminationIntro, .illuminationForm, .illuminationUnitsExplainer, .illuminationSummaryPanel, .illuminationSceneHead, .illuminationHeatScale, .illuminationSceneNote, .illuminationTechnical, .illuminationSystemBom, .illuminationProcurement, .transportPlannerForm, .transportResultHost, .transportResult, .transportSceneControls) {
  border-color: var(--border);
  background-color: var(--surface);
  color: var(--text-primary);
}

html[data-theme="light"] .illuminationProcurementOption.isPrimary {
  border-color: rgba(19, 122, 70, .48);
  background: linear-gradient(145deg, rgba(19, 122, 70, .08), transparent 55%), var(--elevated-surface);
}

html[data-theme="light"] .illuminationProcurement :is(h5, .illuminationProcurementCode b) { color: var(--text-primary); }
html[data-theme="light"] .illuminationProcurement :is(.illuminationSectionHead p, .illuminationProcurementDifference, .illuminationProcurementNote, .illuminationProcurementCode, .illuminationProcurementOptionHead small) { color: var(--text-muted); }
html[data-theme="light"] .illuminationProcurementSpecs span { border-color: var(--border); background: var(--surface); color: var(--text-secondary); }
html[data-theme="light"] .illuminationProcurementLinks a { border-color: rgba(19, 122, 70, .32); background: rgba(19, 122, 70, .055); color: #0d6d3d; }

html[data-theme="light"] :is(.illuminationStatus, .illuminationStatus.warn, .illuminationStatus.excessive) {
  background-color: var(--elevated-surface);
}

html[data-theme="light"] :is(.illuminationFieldDescription, [role="tooltip"], .transportSceneTooltip, .illuminationCanvasTooltip) {
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, .98);
  color: var(--text-secondary);
  box-shadow: var(--surface-shadow);
}

html[data-theme="light"] .illuminationFieldHelp::before { border-color: var(--border-strong); background: var(--elevated-surface); }
html[data-theme="light"] .illuminationCameraNote { color: var(--text-muted); }
html[data-theme="light"] .illuminationFieldError { color: var(--error); }

html[data-theme="light"] :is(.emptyState, .catalogEmptyState, .pickerEmpty, .comparisonInsightsEmpty, .accountEmptyState, .accountConversationEmpty, .accountChatEmpty, .transportEmpty, .illuminationEmptyState) {
  border-color: var(--border);
  background-color: var(--surface);
  color: var(--text-secondary);
}

html[data-theme="light"] :is(.projectLoadingShell, .illuminationLoading, .transportLoadingOrder) {
  border-color: var(--border);
  background-color: var(--background-secondary);
  color: var(--text-secondary);
}

html[data-theme="light"] :is(.conceptGenerationError, .illuminationErrorState, .transportError, .accountWorkspaceStatus[data-type="error"]) {
  border-color: rgba(181, 18, 47, .4);
  background: linear-gradient(115deg, rgba(181, 18, 47, .08), transparent 52%), var(--surface);
  color: var(--error);
}

/* LIGHT · dialogs, overlays and feedback. */
html[data-theme="light"] :is(.itemDialogPanel, .conceptImageDialog, .comparisonSourceDialog, .globalFeedbackDialog, .accountDialogPanel, .accountCommentsSheet, .accountProfileSheet, .accountAccessPromptPanel) {
  border-color: var(--border);
  background-color: var(--elevated-surface);
  color: var(--text-primary);
  box-shadow: var(--surface-shadow);
}

html[data-theme="light"] :is(.itemDialog, .conceptImageDialog, .comparisonSourceDialog, .accountDialog, .accountCommentsPanel)::backdrop {
  background: var(--overlay);
}

html[data-theme="light"] :is(.globalFeedbackOverlay, .accountProfileBackdrop, .accountAccessPromptBackdrop) { background: var(--overlay); }

html[data-theme="light"] :is(.globalFeedbackClose, .accountDialogClose, .accountProfileHead > button, .accountAccessPromptClose) {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
}

/* LIGHT · account workspace and professional social surfaces. */
html[data-theme="light"] body[data-page="account"] {
  --paper: var(--text-primary);
  background: var(--background-primary);
  color: var(--text-primary);
}

html[data-theme="light"] :is(.accountPage, .accountCanvas) { background: var(--background-primary); }

html[data-theme="light"] .accountHero {
  background:
    radial-gradient(circle at 80% 18%, rgba(201, 20, 50, .12), transparent 32%),
    linear-gradient(145deg, var(--surface), var(--background-secondary));
  color: var(--text-primary);
}

html[data-theme="light"] :is(.accountPromiseGrid, .accountWelcomeGrid, .accountQuickActions, .accountOverviewRail, .accountMetricGrid, .accountOverviewGrid, .accountProfileHome, .accountProfileHomeBody, .accountSocialLayout, .accountMessenger, .accountRoomsWorkspace, .accountAccessGrid) {
  background: var(--border);
}

html[data-theme="light"] :is(
  .accountPromiseGrid article,
  .accountAuth,
  .accountSidebar,
  .accountWelcomeCard,
  .accountNextStep,
  .accountQuickActions > :is(a, button),
  .accountRecent,
  .accountActivityCard,
  .accountSyncCard,
  .accountMetricGrid article,
  .accountArtifactCard,
  .accountArtifactRow,
  .accountProfileHomeHero,
  .accountProfileAbout,
  .accountProfileHomeStats,
  .accountProfileSettings,
  .accountNotificationList > article,
  .accountNetworkRail,
  .accountPostComposer,
  .accountSocialPost,
  .accountProfileSheet,
  .accountConversationList,
  .accountChatContext,
  .accountChatMessages article > div,
  .accountRoomList,
  .accountRoomBoard,
  .accountRoomPulse,
  .accountAccessGrid article,
  .accountAdminTable,
  .accountToolPreview,
  .accountWorkspaceStatus
) {
  border-color: var(--border);
  background-color: var(--surface);
  color: var(--text-primary);
}

html[data-theme="light"] :is(.accountWelcomeCard, .accountProfileHomeHero, .accountPostComposer, .accountSyncCard, .accountToolPreview) {
  background-image: radial-gradient(circle at 86% 8%, rgba(201, 20, 50, .08), transparent 36%);
}

html[data-theme="light"] :is(.accountSidebar nav button, .accountIdentity, .accountActivityPreview > button, .accountRecentList button, #accountRecommendations > button, .accountConversationList > button, .accountRoomList button, .accountSocialAuthor, .accountSocialPost > footer button, .accountProfileActions button, .accountRoomBoard > nav button) {
  color: var(--text-secondary);
}

html[data-theme="light"] :is(.accountSidebar nav button, .accountActivityPreview > button, .accountRecentList button, #accountRecommendations > button, .accountConversationList > button, .accountRoomList button):hover {
  background: var(--hover);
  color: var(--text-primary);
}

html[data-theme="light"] :is(.accountIdentity.isActive, .accountSidebar nav button.isActive, .accountFeedFilters button.isActive, .accountConversationList > button.isActive, .accountRoomList button.isActive) {
  border-color: var(--accent);
  background: var(--selected);
  color: var(--selected-text);
}

html[data-theme="light"] :is(.accountPlan, .accountFeedScopes, .accountExchangeNote, .accountRoomDecision, .accountNotificationList > article.isUnread) {
  background: linear-gradient(90deg, rgba(201, 20, 50, .08), transparent 58%), var(--surface);
}

html[data-theme="light"] :is(.accountFeedFilters button, .accountProfileActions button, .accountComposerActions select, .accountRoomComposer select) {
  border-color: var(--border-strong);
  background: var(--elevated-surface);
  color: var(--text-secondary);
}

html[data-theme="light"] :is(.accountProfileActions button:first-child, .accountRoomDecision button) {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

html[data-theme="light"] :is(.accountPostComposer textarea, .accountCommentComposer textarea, .accountRoomComposer textarea, .accountChatComposer textarea, .accountDialogForm input, .accountDialogForm textarea, .accountDialogForm select, .accountAuthForm input, .accountPeopleSearch input) {
  border-color: var(--border-strong);
  background: var(--elevated-surface);
  color: var(--text-primary);
}

html[data-theme="light"] :is(.accountProfileHead, .accountCommentsHead) {
  border-color: var(--border);
  background: radial-gradient(circle at 85% 0, rgba(201, 20, 50, .11), transparent 42%), var(--surface);
  color: var(--text-primary);
}

html[data-theme="light"] :is(.accountSocialPost p, .accountSocialPost small, .accountRecentList time, .accountNotificationList p, .accountNotificationList time, .accountChatMessages small, .accountRoomTimeline small) {
  color: var(--text-muted);
}

html[data-theme="light"] .accountToast {
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, .96);
  color: var(--text-primary);
  box-shadow: var(--surface-shadow);
}

/* LIGHT · footer and shared terminal surfaces. */
html[data-theme="light"] :is(.footer, .cinematicFooter) {
  border-color: var(--border);
  background-color: var(--background-secondary);
  color: var(--text-primary);
}

html[data-theme="light"] .footer :is(p, small, a) { color: var(--text-muted); }
html[data-theme="light"] .footer a:hover { color: var(--accent); }

/* Theme-aware responsive header. The contact shortcut duplicates links already
   present in navigation and page content, so it yields its slot to theme access
   on phones instead of forcing horizontal overflow. */
@media (max-width: 760px) {
  .cinematicPage .topbar,
  .interfacePage .topbar,
  .topbar {
    grid-template-columns: minmax(72px, 1fr) 54px 42px auto 38px !important;
  }

  .topbar .topAction { display: none !important; }

  .topbar .themeSwitch {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 42px;
    min-width: 42px;
    min-height: 38px;
    padding: 2px;
  }

  .topbar .themeSwitch > :is(button, [role="button"]) {
    min-width: 17px;
    min-height: 32px;
    padding: 0 2px;
    font-size: 0;
  }

  .topbar .themeSwitch > :is(button, [role="button"])::before {
    font-size: 9px;
    content: "◐";
  }

  .topbar .accountTopAction { grid-column: 4 !important; }
  .topbar .scrollTopAction { grid-column: 5 !important; }

  html[data-theme="light"] .topbar .nav {
    border-color: var(--border) !important;
    background: rgba(247, 245, 240, .96) !important;
  }

  html[data-theme="light"] .scaleMetrics > div,
  html[data-theme="light"] .scaleMetrics > div:last-child {
    background:
      radial-gradient(circle at 86% 10%, rgba(201, 20, 50, .1), transparent 30%),
      linear-gradient(145deg, var(--elevated-surface), var(--background-secondary) 72%);
  }

  html[data-theme="light"] .comparisonMobileNavigator {
    border-color: var(--border);
    background: rgba(250, 249, 246, .98);
    color: var(--text-primary);
  }

  html[data-theme="light"] .comparisonMobileNavigator > button {
    border-color: var(--border);
    color: var(--accent);
  }

  html[data-theme="light"] .comparisonMobileNavigator > button:disabled { color: var(--disabled-text); }
  html[data-theme="light"] .comparisonMobileNavigator :is(small, b) { color: var(--text-muted); }
  html[data-theme="light"] .comparisonRemove { background: rgba(255, 255, 255, .9); color: var(--text-primary); }
}

@media (max-width: 390px) {
  .cinematicPage .topbar,
  .interfacePage .topbar,
  .topbar {
    grid-template-columns: minmax(62px, 1fr) 50px 36px auto 36px !important;
  }

  .topbar .themeSwitch { width: 36px; min-width: 36px; }
  .topbar .themeSwitch > :is(button, [role="button"]) { min-width: 14px; }
}

@media (max-width: 760px) {
  .topbar .brand { gap: 9px; }
  .topbar .brandMark { flex-basis: 46px; width: 46px; height: 46px; }
  .topbar .brandMark::after { inset: 6px; }
  .topbar .brandMark > img { left: 6px; height: 14px; }
  .topbar .brandIdentity { gap: 5px; min-width: 0; }
  .topbar .brandIdentity strong { font-size: 11px; letter-spacing: .12em; white-space: nowrap; }
  .topbar .brandIdentity small { display: block; overflow: hidden; max-width: 118px; font-size: 5px; letter-spacing: .2em; white-space: nowrap; }
  .pageHeroIndex { top: 16px; right: 14px; left: 14px; gap: 12px; font-size: 6px; letter-spacing: .06em; }
  .pageHeroIndex span:last-child { text-align: right; }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 1000px) {
  body.compareFocusMode[data-page="compare"] {
    overflow: auto;
    background: #030303;
  }

  body.compareFocusMode[data-page="compare"] > .topbar,
  body.compareFocusMode[data-page="compare"] .pageHero,
  body.compareFocusMode[data-page="compare"] .comparePicker,
  body.compareFocusMode[data-page="compare"] #compareEmpty,
  body.compareFocusMode[data-page="compare"] > .footer {
    display: none !important;
  }

  body.compareFocusMode[data-page="compare"] .compareSection {
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
  }

  body.compareFocusMode[data-page="compare"] .compareTableWrap {
    width: 100% !important;
    min-height: 100dvh;
  }

  body.compareFocusMode[data-page="compare"] .compareTopline {
    position: sticky;
    z-index: 20;
    top: 0;
    margin: 0 0 6px;
    padding: 6px;
    background: rgba(3, 3, 3, .9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* 2026-08-05: contact access, truthful catalog fallbacks and comparison context. */
.pageContactCta {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .7fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: end;
  border-top: 1px solid rgba(255, 255, 255, .16);
  background:
    linear-gradient(110deg, rgba(237, 23, 57, .07), transparent 32%),
    #050505;
}

.pageContactCta h2 {
  max-width: 900px;
  margin: 18px 0 0;
  font-size: clamp(38px, 5.5vw, 82px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.055em;
}

.pageContactCtaAction {
  display: grid;
  gap: 22px;
  justify-items: start;
}

.pageContactCtaAction p {
  max-width: 440px;
  margin: 0;
  color: #929292;
  font-size: 15px;
  line-height: 1.55;
}

.equipmentFallback {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  width: 100%;
  height: 100%;
  min-height: 190px;
  overflow: hidden;
  padding: 22px;
  background: transparent;
  color: #17130f;
  text-align: left;
}

.equipmentFallbackGrid {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(rgba(67, 52, 34, .085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 52, 34, .085) 1px, transparent 1px);
  background-size: 28px 28px;
}

.equipmentFallbackGlyph {
  position: absolute;
  z-index: -1;
  top: 14%;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  width: min(46%, 190px);
  height: min(46%, 150px);
  transform: translateX(-50%);
  opacity: .74;
  filter: drop-shadow(0 18px 20px rgba(49, 37, 24, .18));
}

.equipmentFallbackGlyph i {
  display: block;
  align-self: end;
  height: 58%;
  border: 2px solid rgba(23, 19, 15, .82);
  background: rgba(23, 19, 15, .1);
}

.equipmentFallbackGlyph i:nth-child(2) { height: 100%; }
.equipmentFallbackGlyph i:nth-child(3) { height: 74%; }

.equipmentFallback[data-fallback-category="audio"] .equipmentFallbackGlyph i {
  border-radius: 50% 50% 8px 8px;
  background:
    radial-gradient(circle at 50% 30%, transparent 0 18%, rgba(23, 19, 15, .8) 19% 23%, transparent 24%),
    rgba(23, 19, 15, .1);
}

.equipmentFallback[data-fallback-category="video"] .equipmentFallbackGlyph {
  grid-template-columns: 1fr;
  width: min(58%, 230px);
}

.equipmentFallback[data-fallback-category="video"] .equipmentFallbackGlyph i:first-child {
  height: 76%;
  border-width: 4px;
}

.equipmentFallback[data-fallback-category="video"] .equipmentFallbackGlyph i:not(:first-child) { display: none; }

.equipmentFallback[data-fallback-category="comms"] .equipmentFallbackGlyph {
  grid-template-columns: repeat(2, 1fr);
  width: min(38%, 150px);
  border-top: 4px solid rgba(23, 19, 15, .82);
  border-radius: 50% 50% 0 0;
}

.equipmentFallback[data-fallback-category="comms"] .equipmentFallbackGlyph i { height: 55%; }
.equipmentFallback[data-fallback-category="comms"] .equipmentFallbackGlyph i:last-child { display: none; }

.equipmentFallbackCopy {
  display: grid;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(23, 19, 15, .45);
}

.equipmentFallbackCopy small,
.equipmentFallbackCopy em {
  font-size: 9px;
  font-style: normal;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.equipmentFallbackCopy strong {
  overflow: hidden;
  font-size: 15px;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.equipmentFallbackCopy em { opacity: .58; }
.equipmentFallback.large { min-height: 360px; padding: 30px; }
.equipmentFallback.large .equipmentFallbackCopy strong { font-size: 22px; }
.equipmentFallback.compact,
.equipmentFallback.mini { min-height: 0; padding: 7px; }
.equipmentFallback.compact .equipmentFallbackGlyph,
.equipmentFallback.mini .equipmentFallbackGlyph { top: 10%; height: 55%; }
.equipmentFallback.compact .equipmentFallbackCopy em,
.equipmentFallback.mini .equipmentFallbackCopy em { display: none; }
.equipmentFallback.compact .equipmentFallbackCopy strong,
.equipmentFallback.mini .equipmentFallbackCopy strong { font-size: 8px; }
.equipmentFallback.mini .equipmentFallbackCopy small,
.equipmentFallback.mini .equipmentFallbackCopy strong { display: none; }

.compareStickyNames {
  position: fixed;
  z-index: 11;
  top: var(--compare-sticky-top, 0);
  display: block;
  height: 42px;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .15);
  border-bottom: 1px solid rgba(237, 23, 57, .5);
  background: rgba(5, 5, 5, .84);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 150ms ease, transform 150ms ease;
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
}

.compareStickyNames.isVisible {
  opacity: 1;
  transform: none;
}

.compareStickyNamesTrack {
  display: grid;
  grid-template-columns: var(--compare-label-width, 220px) repeat(var(--compare-products), var(--compare-product-width, 220px));
  height: 100%;
  will-change: transform;
}

.compareStickyNamesTrack span,
.compareStickyNamesTrack b {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0 12px;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, .12);
  color: #f4f1eb;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compareStickyNamesTrack span {
  position: sticky;
  z-index: 2;
  left: 0;
  background: rgba(5, 5, 5, .96);
  color: #8d8d8d;
  font-family: var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .cinematicPage .topbar,
  .interfacePage .topbar,
  .topbar {
    grid-template-columns: minmax(76px, 1fr) 54px auto 42px 38px !important;
  }

  .topbar .topAction {
    display: inline-flex !important;
    grid-column: 4 !important;
    grid-row: 1 !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-height: 38px;
    padding: 0 !important;
    border-color: rgba(255, 255, 255, .28);
    background: rgba(8, 8, 8, .68);
  }

  .topbar .topAction span {
    overflow: hidden;
    width: 0;
    font-size: 0;
  }

  .topbar .topAction::after {
    color: #f4f1eb;
    font-size: 8px;
    letter-spacing: .04em;
    content: "Связь";
  }

  .scrollTopAction { grid-column: 5; }

  .pageContactCta {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .pageContactCta h2 { font-size: clamp(36px, 12vw, 58px); }

  .compareStickyNames {
    z-index: 11;
    height: 38px;
  }

  .compareStickyNamesTrack span,
  .compareStickyNamesTrack b {
    padding: 0 8px;
    font-size: 9px;
  }
}

@media (max-width: 390px) {
  .cinematicPage .topbar,
  .interfacePage .topbar,
  .topbar {
    grid-template-columns: minmax(66px, 1fr) 50px auto 38px 36px !important;
    gap: 4px !important;
    padding-right: 7px !important;
    padding-left: 7px !important;
  }

  .topbar .languageSwitch { width: 50px !important; grid-template-columns: repeat(2, 24px) !important; }
  .topbar .topAction { width: 38px; }
  .scrollTopAction { width: 36px; }
  .accountTopAction { padding: 0 5px; font-size: 7px; }
}

/* 2026-08-06: keep product photography natural until per-model optical masks are available. */
.equipmentPhoto[data-equipment-category="light"]::before,
.equipmentCard:hover .equipmentPhoto[data-equipment-category="light"]::before {
  opacity: 0 !important;
}

.equipmentPhoto[data-equipment-category="light"] img,
.equipmentCard:hover .equipmentPhoto[data-equipment-category="light"] img,
.equipmentPhoto[data-equipment-category="light"]:focus-visible img {
  filter: saturate(1.08) contrast(1.025) brightness(1.035) drop-shadow(0 24px 28px rgba(49, 37, 24, .2)) !important;
  transform: translateZ(0) scale(1) !important;
}

/* 2026-08-10: the tube itself is the source, not the whole catalogue card. */
.equipmentPhoto[data-equipment-id="light-astera-titan-tube"]::before {
  inset: auto 9% 43% 9%;
  height: 14%;
  opacity: .62 !important;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(83, 135, 255, .18), rgba(248, 250, 255, .98) 47%, rgba(255, 72, 108, .22)) !important;
  box-shadow: 0 0 10px 3px rgba(176, 205, 255, .6), 0 0 30px 9px rgba(116, 135, 255, .22);
  filter: blur(3px);
  mix-blend-mode: screen;
  transform: rotate(-20deg);
  transition: opacity 260ms ease, box-shadow 260ms ease, filter 260ms ease;
}

.equipmentCard:hover .equipmentPhoto[data-equipment-id="light-astera-titan-tube"]::before,
.equipmentPhoto[data-equipment-id="light-astera-titan-tube"]:focus-visible::before {
  opacity: 1 !important;
  box-shadow: 0 0 13px 4px rgba(205, 222, 255, .86), 0 0 42px 13px rgba(112, 135, 255, .38);
  filter: blur(2px);
}

/* GTO LED catalogue renders are supplied with their own dark studio background. */
.equipmentPhoto[data-equipment-id^="light-gto-led-"] {
  background: #050b11 !important;
  background-image: none !important;
}

.equipmentPhoto[data-equipment-id^="light-gto-led-"] img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  object-fit: cover !important;
  mix-blend-mode: normal !important;
  filter: saturate(1.04) contrast(1.04) brightness(1.05) !important;
}

.equipmentCard:hover .equipmentPhoto[data-equipment-id^="light-gto-led-"] img,
.equipmentPhoto[data-equipment-id^="light-gto-led-"]:focus-visible img {
  filter: saturate(1.18) contrast(1.06) brightness(1.12) !important;
  transform: translateZ(0) scale(1.025) !important;
}

/* 2026-08-10: compact route introductions and working-tool status. */
.interfacePage .pageHero {
  min-height: clamp(330px, 34svh, 470px);
  padding-top: clamp(112px, 9vw, 144px);
  padding-bottom: clamp(32px, 3vw, 50px);
}

.toolNavGroupTitle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.toolNavGroupTitle small {
  color: #777;
  font: 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .05em;
  text-align: right;
  text-transform: none;
}

.toolNavGroupReady { border-left: 2px solid rgba(85, 214, 139, .55); padding-left: 8px; }
.toolNavGroupTesting { border-left: 2px solid rgba(237, 23, 57, .55); padding-left: 8px; }
.toolNavGroupReady .toolNavGroupTitle span { color: #72e5a0; }
.toolNavGroupTesting .toolNavGroupTitle span { color: #ff566c; }

.interfacePage .toolCardReady {
  border-color: rgba(85, 214, 139, .35);
  background: linear-gradient(110deg, rgba(85, 214, 139, .07), transparent 58%), #070707;
}

.interfacePage .toolCardReady:hover,
.interfacePage .toolCardReady.active {
  border-color: #55d68b;
  background: linear-gradient(110deg, rgba(85, 214, 139, .16), transparent 62%), #0a100c;
  box-shadow: inset 3px 0 #55d68b, 0 0 28px rgba(85, 214, 139, .1);
}

.interfacePage .toolCardTesting {
  border-color: rgba(237, 23, 57, .36);
  background: linear-gradient(110deg, rgba(237, 23, 57, .075), transparent 58%), #070707;
}

.interfacePage .toolCardTesting:hover,
.interfacePage .toolCardTesting.active {
  border-color: var(--red);
  background: linear-gradient(110deg, rgba(237, 23, 57, .16), transparent 62%), #100709;
  box-shadow: inset 3px 0 var(--red), 0 0 28px rgba(237, 23, 57, .1);
}

.toolCard small {
  display: grid;
  justify-items: end;
  gap: 3px;
  white-space: nowrap;
}

.toolCardReady small,
.toolCardReady small span { color: #72e5a0; }
.toolCardTesting small,
.toolCardTesting small span { color: #ff7081; }
.toolCard small span { font-size: 7px; letter-spacing: .09em; }

.interfacePage .toolCardDevelopment {
  min-height: 64px;
  opacity: 1;
  cursor: pointer;
}

.interfacePage .toolCardDevelopment:hover,
.interfacePage .toolCardDevelopment.active {
  border-color: var(--red);
  background: linear-gradient(110deg, rgba(237, 23, 57, .16), transparent 62%), #100709;
  box-shadow: inset 3px 0 var(--red), 0 0 28px rgba(237, 23, 57, .1);
  transform: translateX(2px);
}

.toolCardDevelopment small {
  max-width: 88px;
  white-space: normal;
  text-align: right;
}

.illuminationForm { align-items: end; }
.illuminationForm > .illuminationField:first-child { grid-column: 1 / -1; }
.illuminationForm > [data-illumination-field="camera"] { grid-column: span 2; }

.illuminationVisual {
  margin: -1px -1px 22px;
  border: 1px solid var(--line);
  background: #050606;
}

.illuminationVisualHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.illuminationVisualHead span,
.illuminationMapLegend {
  color: #75dc9d;
  font: 9px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.illuminationVisualHead strong { color: #e9e8e3; font-size: 14px; font-weight: 500; }

.illuminationMap {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  isolation: isolate;
  perspective: 900px;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(255, 234, 174, .18) 0 calc(var(--light-density) * .3), transparent calc(var(--light-density) * .68)),
    linear-gradient(135deg, #050806 0%, #0f1b13 48%, #050706 100%);
}

.illuminationMap::before {
  position: absolute;
  z-index: 1;
  top: 13%;
  right: 7%;
  left: 7%;
  height: 11%;
  border: 1px solid rgba(190, 236, 205, .3);
  background:
    repeating-linear-gradient(90deg, transparent 0 8%, rgba(185, 238, 207, .36) 8% 8.5%, transparent 8.5% 16%),
    linear-gradient(180deg, rgba(153, 223, 179, .16), rgba(5, 12, 8, .08));
  box-shadow: 0 18px 28px rgba(0, 0, 0, .42);
  content: "";
  transform: rotateX(60deg);
  transform-origin: 50% 0;
}

.illuminationMap::after {
  position: absolute;
  z-index: 0;
  right: 4%;
  bottom: 7%;
  left: 4%;
  height: 58%;
  border: 1px solid rgba(155, 225, 178, .18);
  background: linear-gradient(90deg, rgba(89, 209, 139, .04), transparent 50%, rgba(89, 209, 139, .04));
  box-shadow: 0 38px 55px rgba(0, 0, 0, .48);
  content: "";
  transform: rotateX(52deg);
  transform-origin: 50% 100%;
}

.illuminationMapGrid {
  position: absolute;
  z-index: 1;
  inset: 18% 7% 9%;
  border: 1px solid rgba(128, 229, 167, .17);
  background-image:
    linear-gradient(rgba(128, 229, 167, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128, 229, 167, .1) 1px, transparent 1px);
  background-size: 12.5% 16.667%;
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .48), 0 30px 45px rgba(0, 0, 0, .3);
  transform: rotateX(52deg);
  transform-origin: 50% 100%;
}

.illuminationMapGlow {
  position: absolute;
  z-index: 2;
  inset: 20% 7% 8%;
  opacity: .7;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 243, 195, .22), transparent 22%),
    linear-gradient(90deg, rgba(85, 214, 139, .06), transparent 20% 80%, rgba(85, 214, 139, .06));
  mix-blend-mode: screen;
  animation: illuminationBreath 4.8s ease-in-out infinite;
  transform: rotateX(52deg);
  transform-origin: 50% 100%;
}

.illuminationFixture {
  position: absolute;
  z-index: 4;
  left: var(--x);
  top: var(--y);
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  transform: translate(-50%, -50%);
}

.illuminationFixture::before {
  position: absolute;
  width: clamp(54px, 9vw, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 242, 181, .56), rgba(120, 235, 169, .18) 32%, transparent 69%);
  content: "";
  filter: blur(2px);
  animation: illuminationPulse 3.2s ease-in-out infinite;
}

.illuminationFixture::after {
  position: absolute;
  z-index: -1;
  top: 8px;
  left: 50%;
  width: clamp(62px, 12vw, 132px);
  height: clamp(88px, 15vw, 154px);
  background: linear-gradient(180deg, rgba(255, 246, 196, .29), rgba(102, 234, 162, .06) 64%, transparent);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  content: "";
  filter: blur(1px);
  opacity: .72;
  transform: translateX(-50%) perspective(430px) rotateX(48deg);
  transform-origin: 50% 0;
}

.illuminationFixture b {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff5ce;
  box-shadow: 0 0 0 3px rgba(99, 240, 159, .24), 0 0 13px 3px rgba(251, 230, 148, .78);
}

.illuminationMapLegend {
  position: absolute;
  z-index: 5;
  right: 16px;
  bottom: 14px;
  left: 16px;
  display: flex;
  justify-content: space-between;
  color: #c4d8c9;
}

@keyframes illuminationPulse {
  50% { opacity: .58; transform: scale(.88); }
}

@keyframes illuminationBreath {
  50% { opacity: .38; transform: scale(1.03); }
}

@media (max-width: 760px) {
  .interfacePage .pageHero {
    min-height: min(60svh, 500px);
    padding-top: calc(var(--gto-header-height) + 34px);
    padding-bottom: 34px;
  }

  .toolNavGroupTitle small { max-width: 120px; }
  .illuminationVisualHead { align-items: flex-start; flex-direction: column; }
  .illuminationMap { min-height: 244px; }
  .illuminationMapGrid { inset: 12px; }
  .illuminationMapLegend { right: 12px; bottom: 10px; left: 12px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .illuminationMapGlow,
  .illuminationFixture::before { animation: none; }
}

/* Transport planner: all geometry below is rendered from the packing engine. */
.transportPlannerForm {
  --transport-light: #8cb8a4;
  --transport-video: #8393bf;
  --transport-cable: #a18a82;
  --transport-sound: #bd9068;
  margin-bottom: 24px;
  border-color: rgba(139, 155, 166, .28);
  background:
    radial-gradient(circle at 76% 8%, rgba(103, 139, 156, .08), transparent 35%),
    #07090b;
}

.transportFormIntro {
  max-width: 900px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.transportFormIntro > span,
.transportResultHero > span,
.transportBreakdown header > span,
.transportAlternatives header > span,
.transportWarnings header > span,
.transportProvenance > span,
.transportEmpty > span,
.transportBlocked > span,
.transportError > span {
  color: #77dba1;
  font: 10px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.transportFormIntro h3,
.transportResultHero h3,
.transportEmpty h3,
.transportBlocked h3,
.transportError h3 {
  margin: 10px 0 8px;
  font-size: clamp(25px, 3vw, 46px);
  font-weight: 480;
  letter-spacing: -.045em;
}

.transportFormIntro p,
.transportEmpty p,
.transportBlocked p,
.transportError p {
  max-width: 820px;
  margin: 0;
  color: var(--muted);
}

.transportCargoGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.transportCargoField {
  --transport-field-color: #7e919b;
  display: grid;
  align-content: space-between;
  min-height: 164px;
  padding: 18px;
  border-top: 2px solid var(--transport-field-color);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--transport-field-color) 9%, transparent), transparent 54%),
    #090b0d;
}

.transportCargoField--light { --transport-field-color: var(--transport-light); }
.transportCargoField--video { --transport-field-color: var(--transport-video); }
.transportCargoField--cable { --transport-field-color: var(--transport-cable); }
.transportCargoField--sound { --transport-field-color: var(--transport-sound); }

.transportCargoFieldHead {
  display: grid;
  gap: 5px;
}

.transportCargoFieldHead label {
  color: #f0eee8;
  font-size: 15px;
  font-weight: 520;
}

.transportCargoFieldHead small {
  min-height: 32px;
  color: #777d80;
  font-size: 10px;
  line-height: 1.45;
}

.transportCounter {
  display: grid;
  grid-template-columns: 44px minmax(58px, 1fr) 44px;
  align-items: stretch;
  margin-top: 18px;
}

.transportCounter button,
.transportSceneControls button,
.transportSoundPresets button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(174, 185, 191, .24);
  border-radius: 0;
  color: #d8dcdd;
  background: #0c1013;
  cursor: pointer;
}

.transportCounter button:hover,
.transportCounter button:focus-visible,
.transportSceneControls button:hover,
.transportSceneControls button:focus-visible,
.transportSoundPresets button:hover,
.transportSoundPresets button:focus-visible {
  border-color: rgba(237, 25, 62, .72);
  color: #fff;
  outline: none;
}

.transportCounter input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 6px;
  border-right: 0;
  border-left: 0;
  text-align: center;
  font-size: clamp(18px, 2.1vw, 24px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.transportCounter input:disabled {
  color: #777;
  opacity: .65;
}

.transportStackChoice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  color: #83898b;
  font-size: 10px;
  line-height: 1.3;
}

.transportStackChoice select {
  min-width: 104px;
  min-height: 44px;
  padding: 0 30px 0 10px;
  border: 1px solid rgba(174, 185, 191, .24);
  border-radius: 0;
  color: #eef0ef;
  background-color: #0c1013;
  font-size: 13px;
}

.transportSoundPresets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.transportSoundPresets > span {
  margin-right: 8px;
  color: #8d9294;
  font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.transportSoundPresets button {
  padding: 8px 13px;
  font-size: 12px;
}

.transportPlaceDiagram {
  position: relative;
  width: 110px;
  height: 60px;
  margin-left: auto;
  border: 1px solid rgba(189, 144, 104, .52);
  background:
    linear-gradient(rgba(189, 144, 104, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(189, 144, 104, .08) 1px, transparent 1px),
    #0b0d0e;
  background-size: 10px 10px;
}

.transportPlaceDiagram b,
.transportPlaceDiagram span {
  position: absolute;
  color: #a49d96;
  font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.transportPlaceDiagram b { right: 4px; bottom: 4px; }
.transportPlaceDiagram span { top: 4px; left: 4px; writing-mode: vertical-rl; }

.transportExactSound,
.transportAdvanced,
.transportLoadingOrder {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .012);
}

.transportExactSound summary,
.transportAdvanced summary,
.transportLoadingOrder summary {
  min-height: 52px;
  padding: 15px 18px;
  color: #d5d6d4;
  cursor: pointer;
}

.transportExactSound[open] summary,
.transportAdvanced[open] summary,
.transportLoadingOrder[open] summary {
  border-bottom: 1px solid var(--line);
}

.transportExactSound > p {
  margin: 18px 18px 0;
  color: var(--muted);
}

.transportSoundBlocks {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.transportSoundBlock {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(189, 144, 104, .34);
}

.transportSoundBlock legend {
  padding: 0 8px;
  color: #bd9068;
  font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.transportSoundBlock label {
  display: grid;
  gap: 7px;
  color: #919698;
  font-size: 11px;
}

.transportSoundRemove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 38px;
  min-height: 38px;
  border: 1px solid rgba(237, 25, 62, .4);
  color: #ff6d83;
  background: #0b0c0e;
  cursor: pointer;
}

.transportCheck {
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: center;
}

.transportCheck input {
  width: 18px !important;
  min-width: 18px;
  height: 18px;
  min-height: 18px !important;
  margin: 0;
  accent-color: #ed193e;
}

.transportAddSound { margin: 0 18px 18px; }

.transportAdvancedGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.transportAdvancedGrid label {
  display: grid;
  gap: 8px;
  color: #8b9092;
  font-size: 11px;
}

.transportPlacePreview {
  display: grid;
  grid-template-columns: minmax(220px, .38fr) minmax(0, 1fr);
  gap: 18px 28px;
  align-items: center;
  padding: 18px;
  border-left: 2px solid #77dba1;
  background: linear-gradient(90deg, rgba(81, 177, 124, .08), transparent 54%);
}

.transportPlacePreviewValue {
  display: grid;
  gap: 5px;
}

.transportPlacePreviewValue span,
.transportPlacePreview small {
  color: #79817e;
  font: 9px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.transportPlacePreviewValue strong {
  color: #eef0ed;
  font-size: 22px;
  font-weight: 500;
}

.transportPlacePreview p { margin: 0; color: #b4b8b6; }
.transportPlacePreview small { grid-column: 2; text-transform: none; }
.transportFormStatus { min-height: 20px; margin: 0; color: #ff7187; }

.transportSubmit {
  display: flex;
  align-items: center;
  gap: 18px;
}

.transportSubmit .button { flex: 0 0 auto; min-width: 230px; }
.transportSubmit .buttonPrimary,
.transportResultActions .buttonPrimary {
  border-color: #e7e5df;
  color: #111417;
  background: #e7e5df;
  box-shadow: inset 0 -3px 0 #ed193e;
}
.transportSubmit .buttonPrimary:hover,
.transportSubmit .buttonPrimary:focus-visible,
.transportResultActions .buttonPrimary:hover,
.transportResultActions .buttonPrimary:focus-visible {
  border-color: #fff;
  background: #fff;
}
.transportSubmit small { max-width: 560px; color: #777d80; }

.transportResultAnnouncement {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.transportResultHost {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(139, 155, 166, .28);
  background: #07090b;
}

.transportEmpty,
.transportBlocked,
.transportError {
  min-height: 260px;
  padding: clamp(24px, 4vw, 54px);
  background:
    linear-gradient(115deg, rgba(96, 132, 148, .06), transparent 48%),
    #07090b;
}

.transportBlocked,
.transportError {
  border-left: 3px solid #ed193e;
  background: linear-gradient(115deg, rgba(237, 25, 62, .08), transparent 48%), #08090b;
}

.transportBlocked > span,
.transportError > span { color: #ff7187; }
.transportBlocked ul,
.transportError ul { max-width: 900px; margin: 22px 0 0; padding-left: 22px; color: #c6bec0; }

.transportResult {
  --transport-result-accent: #77dba1;
  color: #edede9;
  background:
    linear-gradient(90deg, rgba(95, 119, 129, .06) 1px, transparent 1px),
    linear-gradient(rgba(95, 119, 129, .06) 1px, transparent 1px),
    #07090b;
  background-size: 72px 72px;
}

.transportResult--provisional { --transport-result-accent: #e0b45f; }
.transportResultHero {
  padding: clamp(26px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 3px 0 0 var(--transport-result-accent);
}

.transportResultHero > span { color: var(--transport-result-accent); }
.transportResultHero p { max-width: 850px; margin: 0; color: #969b9d; }

.transportMetrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
  background: var(--line);
  gap: 1px;
}

.transportMetric {
  min-height: 152px;
  padding: 22px;
  background: #090b0d;
}

.transportMetric span,
.transportMetric small { display: block; color: #797f81; font-size: 10px; }
.transportMetric strong { display: block; margin: 17px 0 8px; font-size: clamp(26px, 3vw, 42px); font-weight: 470; letter-spacing: -.04em; }
.transportMetric--ready { box-shadow: inset 0 -2px 0 rgba(119, 219, 161, .66); }
.transportMetric--warning { box-shadow: inset 0 -2px 0 rgba(224, 180, 95, .78); }

.transportBreakdown,
.transportAlternatives,
.transportWarnings,
.transportProvenance,
.transportLoadingOrder,
.transportResultActions {
  margin: 0;
  padding: clamp(22px, 3vw, 38px);
  border-bottom: 1px solid var(--line);
}

.transportBreakdown header,
.transportAlternatives header,
.transportWarnings header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.transportBreakdown header strong { font-weight: 500; }
.transportBreakdown > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.transportBreakdown article { --transport-field-color: #8b979c; min-height: 110px; padding: 17px; border-top: 2px solid var(--transport-field-color); background: #090b0d; }
.transportBreakdown--light { --transport-field-color: var(--transport-light); }
.transportBreakdown--video { --transport-field-color: var(--transport-video); }
.transportBreakdown--cable { --transport-field-color: var(--transport-cable); }
.transportBreakdown--sound { --transport-field-color: var(--transport-sound); }
.transportBreakdown article span { display: block; margin-bottom: 12px; color: #7b8183; font-size: 10px; }
.transportBreakdown article b { font-weight: 490; line-height: 1.45; }
.transportBreakdown > p { color: #8e9495; }

.transportGates {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  padding: 1px 0;
  border-bottom: 1px solid var(--line);
  background: var(--line);
}

.transportGate { min-height: 82px; padding: 15px; background: #090b0d; }
.transportGate b,
.transportGate small { display: block; }
.transportGate b { color: #bbc0c0; font-size: 11px; font-weight: 500; }
.transportGate small { margin-top: 8px; color: #73797b; font-size: 9px; text-transform: uppercase; }
.transportGate--passed { box-shadow: inset 0 2px 0 #77dba1; }
.transportGate--assumed,
.transportGate--not_verified { box-shadow: inset 0 2px 0 #e0b45f; }
.transportGate--failed { box-shadow: inset 0 2px 0 #ed193e; }

.transportScene {
  border-bottom: 1px solid var(--line);
  background: #050708;
}

.transportSceneHead {
  display: grid;
  grid-template-columns: minmax(240px, .65fr) minmax(0, 1fr);
  gap: 24px;
  align-items: end;
  padding: clamp(22px, 3vw, 38px);
  border-bottom: 1px solid var(--line);
}

.transportSceneHead span { color: #77dba1; font: 10px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; }
.transportSceneHead h4 { margin: 8px 0 0; font-size: clamp(22px, 2.6vw, 36px); font-weight: 480; letter-spacing: -.035em; }
.transportSceneHead p { margin: 0; color: #818789; }

.transportSceneControls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 12px clamp(14px, 2vw, 24px);
  border-bottom: 1px solid var(--line);
  background: #090b0d;
}

.transportSceneViewControls,
.transportSceneLayerControls,
.transportSceneLevelControls,
.transportSceneCameraControls,
.transportSceneFleetControls {
  display: flex;
  gap: 4px;
}

.transportSceneControls button {
  padding: 8px 11px;
  font-size: 10px;
  white-space: nowrap;
}

.transportSceneControls button[aria-pressed="true"] {
  border-color: var(--transport-result-accent);
  color: #f4f5f1;
  background: color-mix(in srgb, var(--transport-result-accent) 13%, #0b0e10);
}

.transportSceneFleetControls { align-items: center; margin-left: auto; }
.transportSceneFleetControls span { min-width: 52px; text-align: center; color: #aab0b2; font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.transportSceneCameraControls span { align-self: center; padding: 0 5px; color: #757c7f; font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }

.transportSceneCanvasWrap {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(92, 130, 147, .13), transparent 48%),
    #040607;
}

.transportSceneCanvasWrap canvas {
  display: block;
  width: 100%;
  height: auto;
  min-height: 340px;
  aspect-ratio: 5 / 3;
  outline: none;
  touch-action: none;
}

.transportSceneCanvasWrap canvas:focus-visible { box-shadow: inset 0 0 0 2px #ed193e; }

.transportSceneTooltip {
  position: absolute;
  z-index: 5;
  max-width: 260px;
  padding: 10px 12px;
  border: 1px solid rgba(213, 222, 226, .28);
  color: #f3f4ef;
  background: rgba(5, 8, 10, .94);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .38);
  font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-line;
  pointer-events: none;
}

.transportSceneLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
}

.transportSceneLegend span { display: inline-flex; align-items: center; gap: 7px; color: #9da2a3; font-size: 9px; }
.transportSceneLegend i { width: 9px; height: 9px; background: #89989d; }
.transportSceneLegend--light i { background: #9fbab0; }
.transportSceneLegend--video i { background: #7f91b8; }
.transportSceneLegend--cable i { background: #a68e7f; }
.transportSceneLegend--sound i { background: #b58b65; }
.transportSceneLegend small { flex: 1 1 100%; color: #686e70; }

.transportAlternativeGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.transportAlternative { min-height: 210px; padding: 20px; border-top: 2px solid #778187; background: #090b0d; }
.transportAlternative--recommended { border-color: #77dba1; background: linear-gradient(145deg, rgba(119, 219, 161, .07), transparent 55%), #090b0d; }
.transportAlternative--free { border-color: #8393bf; }
.transportAlternative > span { color: #7c8284; font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.transportAlternative h5 { min-height: 44px; margin: 15px 0 7px; font-size: 17px; font-weight: 500; }
.transportAlternative > strong { font-size: 24px; font-weight: 480; }
.transportAlternative p,
.transportAlternative small { color: #7f8587; }
.transportAlternative dl { display: flex; gap: 18px; margin: 16px 0; }
.transportAlternative dl div { display: grid; gap: 4px; }
.transportAlternative dt { color: #6f7577; font-size: 9px; }
.transportAlternative dd { margin: 0; }

.transportWarnings h4 { margin: 7px 0 0; font-size: clamp(21px, 2.5vw, 34px); font-weight: 480; }
.transportWarnings ul { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); }
.transportWarnings li { display: grid; grid-template-columns: minmax(120px, .24fr) minmax(0, 1fr); gap: 18px; padding: 14px 16px; background: #090b0d; }
.transportWarnings li b { color: #e0b45f; font: 9px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
.transportWarnings li span { color: #9aa0a1; }

.transportLoadingOrder { padding: 0; border-width: 0 0 1px; }
.transportLoadingOrder ol { display: grid; gap: 1px; margin: 0; padding: 1px 0 0; list-style-position: inside; background: var(--line); }
.transportLoadingOrder li { display: grid; grid-template-columns: minmax(150px, .3fr) minmax(0, 1fr); gap: 18px; padding: 13px 18px; background: #090b0d; }
.transportLoadingOrder li b { font-weight: 500; }
.transportLoadingOrder li span { color: #7f8587; font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; }

.transportProvenance p { max-width: 820px; color: #8d9394; }
.transportProvenance dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 22px 0 0; background: var(--line); }
.transportProvenance dl div { padding: 15px; background: #090b0d; }
.transportProvenance dt { color: #6f7577; font-size: 9px; text-transform: uppercase; }
.transportProvenance dd { margin: 7px 0 0; color: #b9bdbd; }

.transportResultActions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-bottom: 0; }
.transportResultActions p { flex: 1 1 100%; min-height: 18px; margin: 0; color: #77dba1; }

@media (max-width: 1100px) {
  .transportCargoGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .transportGates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .transportCargoGrid,
  .transportAdvancedGrid,
  .transportSoundBlock,
  .transportMetrics,
  .transportBreakdown > div,
  .transportAlternativeGrid,
  .transportProvenance dl { grid-template-columns: 1fr; }
  .transportCargoField { min-height: 140px; }
  .transportPlacePreview { grid-template-columns: 1fr; }
  .transportPlacePreview small { grid-column: 1; }
  .transportSubmit { align-items: stretch; flex-direction: column; }
  .transportSubmit .button { width: 100%; min-width: 0; }
  .transportPlaceDiagram { flex: 0 0 110px; margin-left: 0; }
  .transportSceneHead { grid-template-columns: 1fr; }
  .transportSceneControls { align-items: stretch; flex-direction: column; }
  .transportSceneViewControls,
  .transportSceneLayerControls,
  .transportSceneLevelControls,
  .transportSceneCameraControls,
  .transportSceneFleetControls {
    max-width: 100%;
    margin-left: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
  .transportSceneControls button { flex: 0 0 auto; }
  .transportSceneCanvasWrap canvas { min-height: 300px; aspect-ratio: 4 / 3; }
  .transportGates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .transportBreakdown header,
  .transportAlternatives header,
  .transportWarnings header { align-items: flex-start; flex-direction: column; }
  .transportWarnings li,
  .transportLoadingOrder li { grid-template-columns: 1fr; gap: 7px; }
  .transportResultActions .button { width: 100%; }
}

/* Tool-specific developer feedback: sent server-side to a private Telegram group. */
.toolFeedback {
  margin-top: 34px;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid rgba(237, 25, 62, .42);
  background:
    linear-gradient(126deg, rgba(237, 25, 62, .075), transparent 38%),
    #080a0e;
}

.toolFeedbackHead {
  max-width: 720px;
  margin-bottom: 20px;
}

.toolFeedback h4 {
  margin: 9px 0;
  font-size: clamp(24px, 2.35vw, 38px);
  letter-spacing: -.045em;
}

.toolFeedback p {
  margin: 0;
  color: var(--muted);
}

.toolFeedbackForm {
  display: grid;
  grid-template-columns: minmax(230px, .45fr) minmax(0, 1fr);
  gap: 16px;
}

.toolFeedbackForm label {
  display: grid;
  gap: 8px;
  color: #b9bec8;
  font-size: 13px;
}

.toolFeedbackForm select,
.toolFeedbackForm textarea,
.toolFeedbackForm input[type="file"] {
  width: 100%;
  border: 1px solid rgba(222, 229, 240, .26);
  border-radius: 0;
  background: rgba(0, 0, 0, .46);
  color: var(--paper);
  font: inherit;
}

.toolFeedbackForm select { min-height: 52px; padding: 0 14px; }
.toolFeedbackForm textarea { min-height: 116px; padding: 14px; resize: vertical; }
.toolFeedbackForm input[type="file"] { min-height: 52px; padding: 12px; cursor: pointer; }
.toolFeedbackForm input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(237, 23, 57, .72);
  color: #f8f6f1;
  background: rgba(95, 10, 24, .45);
  font: 600 11px/1 var(--body-font);
  cursor: pointer;
}
.toolFeedbackUpload small { color: #9098a5; font-size: 11px; line-height: 1.4; }

.feedbackVoiceRecorder {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(222, 229, 240, .2);
  background: rgba(255, 255, 255, .018);
}

.feedbackVoiceRecorder legend {
  padding: 0 7px;
  color: #b9bec8;
  font-size: 13px;
}

.feedbackVoiceControls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.feedbackVoiceControls > span {
  min-width: 54px;
  font-variant-numeric: tabular-nums;
}

.feedbackVoiceRecorder [hidden] { display: none !important; }
.feedbackVoiceRecorder audio { width: 100%; }
.feedbackVoiceRecorder small { color: #9098a5; font-size: 11px; line-height: 1.4; }
.feedbackVoiceDelete { border: 0; color: var(--red-bright); background: transparent; cursor: pointer; }

.compareNotApplicable {
  color: #656565;
  font-size: .78em;
  letter-spacing: .02em;
}

.compareMissing {
  color: #a58e76;
  font-size: .78em;
  letter-spacing: .02em;
}
.toolFeedbackForm .toolFeedbackHoneypot,
.globalFeedbackForm .toolFeedbackHoneypot {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.toolFeedbackActions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.toolFeedbackActions small,
.toolFeedbackStatus {
  color: #9098a5;
  font-size: 12px;
  line-height: 1.45;
}

.toolFeedbackStatus:not(:empty) { color: #f2f3ef; }

/* 2026-08-10: compact, brighter first screens on work pages. */
.interfacePage .pageHero {
  min-height: clamp(330px, 45svh, 520px);
  padding-top: clamp(112px, 10vw, 168px);
  padding-bottom: clamp(34px, 5vw, 72px);
}

.interfacePage .pageHero h1 {
  max-width: 920px;
  margin: 18px 0;
  font-size: clamp(46px, 5.6vw, 92px);
}

/* Global feedback is available on every route, not only inside the tools hub. */
.globalFeedbackTrigger {
  position: fixed;
  z-index: 72;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 14px 0 8px;
  border: 1px solid rgba(237, 23, 57, .72);
  color: #f5f3ef;
  background: rgba(8, 8, 9, .84);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .32);
  backdrop-filter: blur(14px);
  cursor: pointer;
}

.globalFeedbackTrigger:hover,
.globalFeedbackTrigger:focus-visible {
  border-color: var(--red);
  background: rgba(37, 10, 16, .94);
}

.globalFeedbackTrigger span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid rgba(237, 23, 57, .72);
  color: var(--red);
  font: 700 15px/1 var(--display-font);
}

.globalFeedbackTrigger b {
  font: 600 10px/1.2 var(--body-font);
  letter-spacing: .025em;
}

.globalFeedbackOverlay {
  position: fixed;
  z-index: 130;
  inset: 0;
  display: grid;
  align-items: center;
  justify-items: end;
  overflow: hidden;
  overscroll-behavior: contain;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(8px);
}

.globalFeedbackOverlay[hidden] { display: none !important; }
body.globalFeedbackOpen { overflow: hidden; }

.globalFeedbackDialog {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100vh - 36px);
  max-height: calc(100svh - 36px);
  max-height: calc(100dvh - 36px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(238, 238, 235, .26);
  background: linear-gradient(145deg, rgba(22, 12, 15, .98), rgba(6, 7, 8, .99) 64%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .65);
}

.globalFeedbackDialog h2 {
  max-width: 520px;
  margin: 10px 40px 10px 0;
  color: #f4f2ed;
  font-family: var(--display-font);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.055em;
}

.globalFeedbackDialog > p {
  max-width: 510px;
  margin: 0 0 24px;
  color: #a6a6a9;
  font-size: 14px;
  line-height: 1.5;
}

.globalFeedbackClose {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(232, 232, 228, .28);
  color: #f3f0ea;
  background: transparent;
  font-size: 25px;
  cursor: pointer;
}

.globalFeedbackClose:hover,
.globalFeedbackClose:focus-visible { border-color: var(--red); color: var(--red); }
.globalFeedbackForm { grid-template-columns: 1fr; }
.globalFeedbackForm .toolFeedbackActions { align-items: flex-start; }

@media (max-height: 900px) {
  .globalFeedbackDialog {
    padding: 22px 26px;
  }

  .globalFeedbackDialog h2 {
    margin-top: 6px;
    font-size: clamp(28px, 5.4vh, 38px);
  }

  .globalFeedbackDialog > p {
    margin-bottom: 14px;
    font-size: 13px;
  }

  .globalFeedbackForm { gap: 10px; }
  .globalFeedbackForm select { min-height: 44px; }
  .globalFeedbackForm textarea { min-height: 82px; }
  .globalFeedbackForm .feedbackVoiceRecorder { gap: 7px; padding: 10px; }
  .globalFeedbackForm input[type="file"] { min-height: 46px; padding: 9px; }
  .globalFeedbackForm :is(.feedbackVoiceRecorder small, .toolFeedbackUpload small) {
    font-size: 10px;
  }
}

@media (max-width: 760px) {
  .toolFeedback { margin-top: 24px; padding: 20px; }
  .toolFeedbackForm { grid-template-columns: 1fr; }
  .toolFeedbackActions .button { width: 100%; }
  .globalFeedbackTrigger { right: 12px; bottom: 12px; min-height: 38px; padding-right: 10px; }
  .globalFeedbackTrigger b { font-size: 9px; }
  .globalFeedbackTrigger span { width: 22px; height: 22px; }
  .globalFeedbackOverlay { padding: 12px; }
  .globalFeedbackDialog {
    max-height: calc(100dvh - 24px);
    padding: 24px 20px 20px;
  }

  .interfacePage .pageHero {
    min-height: 0 !important;
    padding-top: 112px;
    padding-bottom: 40px;
  }

  .interfacePage .pageHero h1 {
    margin: 16px 0;
    font-size: clamp(38px, 10.6vw, 48px) !important;
    line-height: .96 !important;
  }

  .cinematicHeroContent {
    min-height: 390px !important;
    padding: 48px 20px 48px !important;
  }

  .projectsHeroCopy,
  .caseHeroCopy { padding: 34px 18px 36px !important; }

  .cinematicHeroShade,
  .projectsHeroShade,
  .caseHeroShade {
    background: linear-gradient(180deg, rgba(3, 3, 3, .05), rgba(3, 3, 3, .24) 62%, rgba(3, 3, 3, .52)) !important;
  }
}

/* 2026-08-13: project archive photo edit and restrained case typography. */
.caseHeroCopy {
  bottom: clamp(76px, 8vw, 126px);
  max-width: min(1180px, calc(100% - clamp(36px, 8.4vw, 144px)));
}

.caseHeroShade {
  background:
    linear-gradient(90deg, rgba(2, 2, 2, .78), rgba(2, 2, 2, .16) 74%),
    linear-gradient(0deg, rgba(2, 2, 2, .74), rgba(2, 2, 2, .06) 64%);
}

.caseHeroCopy > p {
  max-width: 660px;
  color: rgba(245, 245, 242, .82);
  line-height: 1.5;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .72);
}

.caseHero h1 {
  max-width: 1040px;
  margin: 18px 0 22px;
  font-size: clamp(48px, 5.5vw, 86px);
  line-height: .95;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
}

.caseIntro h2,
.caseSolution h2,
.equipmentApplication h2 {
  font-size: clamp(36px, 4.2vw, 66px);
  line-height: 1.01;
  text-wrap: balance;
}

.caseResult blockquote {
  max-width: 1120px;
  font-size: clamp(38px, 4.8vw, 74px);
  line-height: 1.04;
  text-wrap: balance;
}

.projectCardCinematic figure img,
.caseHero > img,
.caseWideImage img {
  filter: saturate(.96) contrast(1.025) brightness(.91);
  transition: transform 1100ms cubic-bezier(.2,.7,.2,1), filter 700ms ease;
}

.projectCardCinematic:hover figure img {
  filter: saturate(1.02) contrast(1.04) brightness(.95);
  transform: scale(1.018);
}

.projectCardBody {
  text-shadow: 0 2px 20px rgba(0,0,0,.72);
}

.projectsHero h1 {
  font-size: clamp(56px, 7.2vw, 112px);
  line-height: .9;
}

.projectCardCinematic h3 {
  max-width: 980px;
  font-size: clamp(34px, 4.2vw, 66px);
  line-height: .98;
  text-wrap: balance;
}

@media (max-width: 760px) {
  .caseHeroCopy { max-width: none; }
  .caseHero h1 { font-size: clamp(38px, 10vw, 46px) !important; }
  .caseIntro h2,
  .caseSolution h2,
  .equipmentApplication h2 { font-size: clamp(34px, 9vw, 40px); }
  .caseResult blockquote { font-size: clamp(34px, 9vw, 42px); }
  .caseGalleryFrame1,
  .caseGalleryFrame2,
  .caseGalleryFrame3,
  .caseGalleryFrame4 { min-height: min(118vw, 520px); }
}

/* 2026-08-12: catalogue photography and route hero release. */
.equipmentPhoto[data-equipment-id^="light-gto-led-"] {
  background-color: var(--equipment-creme) !important;
  background-image:
    linear-gradient(rgba(67, 52, 34, .095) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 52, 34, .095) 1px, transparent 1px),
    radial-gradient(circle at 50% 37%, var(--equipment-creme-light) 0, #d7cbb6 47%, var(--equipment-creme-dark) 100%) !important;
  background-position: center !important;
  background-size: 28px 28px, 28px 28px, 100% 100% !important;
}

.equipmentPhoto[data-equipment-id^="light-gto-led-"] img {
  width: auto !important;
  height: auto !important;
  max-width: 84% !important;
  max-height: 78% !important;
  padding: 0 !important;
  object-fit: contain !important;
  mix-blend-mode: darken !important;
  filter: saturate(1.06) contrast(1.025) brightness(1.04) drop-shadow(0 24px 28px rgba(49, 37, 24, .2)) !important;
}

.equipmentCard:hover .equipmentPhoto[data-equipment-id^="light-gto-led-"] img,
.equipmentPhoto[data-equipment-id^="light-gto-led-"]:focus-visible img {
  mix-blend-mode: darken !important;
  filter: saturate(1.15) contrast(1.035) brightness(1.08) drop-shadow(0 28px 34px rgba(49, 37, 24, .25)) !important;
  transform: translateZ(0) scale(1.025) !important;
}

.equipmentPhoto[data-equipment-id="light-gto-led-par-mini-6x15"] img,
.equipmentPhoto[data-equipment-id="light-claypaky-stormy-cc"] img,
.equipmentPhoto[data-equipment-id="light-claypaky-stormy-white"] img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  mix-blend-mode: normal !important;
}

.equipmentPhoto[data-equipment-id="light-tornado-acme-tornado"] img {
  max-width: 88% !important;
  max-height: 78% !important;
  object-fit: contain !important;
  mix-blend-mode: normal !important;
}

.interfacePage .pageHero {
  position: relative;
  isolation: isolate;
  min-height: clamp(300px, 34svh, 430px);
  overflow: hidden;
  background-color: #050505;
  background-image:
    linear-gradient(90deg, rgba(2, 2, 2, .88) 0%, rgba(2, 2, 2, .61) 42%, rgba(2, 2, 2, .20) 100%),
    linear-gradient(0deg, rgba(2, 2, 2, .48), transparent 58%),
    var(--route-hero-image, url("assets/projects/selected-2026/hero-catalog-control.webp")) !important;
  background-position: center !important;
  background-size: cover !important;
}

.interfacePage .pageHero::before {
  z-index: -1;
  opacity: .42;
}

body[data-page="catalog"] { --route-hero-image: url("assets/projects/selected-2026/hero-catalog-control.webp"); }
body[data-page="category"][data-category="light"] { --route-hero-image: url("assets/projects/selected-2026/hero-light-transport.webp"); }
body[data-page="category"][data-category="audio"] { --route-hero-image: url("assets/projects/selected-2026/hero-audio-etude.webp"); }
body[data-page="category"][data-category="video"] { --route-hero-image: url("assets/projects/selected-2026/hero-video-esports.webp"); }
body[data-page="category"][data-category="comms"] { --route-hero-image: url("assets/projects/selected-2026/hero-comms-tolstoy.webp"); }
body[data-page="compare"] { --route-hero-image: url("assets/projects/selected-2026/hero-compare-cinema.webp"); }
body[data-page="concept-generator"] { --route-hero-image: url("assets/projects/selected-2026/hero-concept-rezim-1672.webp"); }
body[data-page="tools"] { --route-hero-image: url("assets/projects/selected-2026/hero-tools-kremlin-setup.webp"); }
body[data-page="about"] { --route-hero-image: url("assets/projects/selected-2026/hero-about-kremlin-live.webp"); }
body[data-page="account"] { --route-hero-image: url("assets/projects/bel-suono-2026-hero.jpg"); }

body[data-page="home"] .cinematicHeroMedia {
  filter: saturate(1.08) contrast(1.015) brightness(1.08) !important;
}

body[data-page="home"] .cinematicHeroShade {
  background:
    linear-gradient(90deg, rgba(2, 2, 2, .64) 0%, rgba(2, 2, 2, .40) 36%, rgba(2, 2, 2, .04) 72%, rgba(2, 2, 2, .16) 100%),
    linear-gradient(0deg, rgba(2, 2, 2, .38) 0%, transparent 50%, rgba(2, 2, 2, .04) 100%) !important;
}

body[data-page="home"] .scaleSection {
  min-height: 360px;
}

body[data-page="home"] .scaleStatement {
  justify-content: center;
  gap: clamp(72px, 9vw, 150px);
  padding-top: 54px;
  padding-bottom: 54px;
}

body[data-page="home"] .scaleMetrics > div {
  justify-content: center;
  min-height: 360px;
  padding-top: 64px;
  padding-bottom: 64px;
}

body[data-page="home"] .scaleMetrics > div::after {
  bottom: 42px;
}

/* Equal product columns prevent the third item from shifting in a 3-way compare. */
.interfacePage[data-page="compare"] .compareTable {
  table-layout: fixed;
  width: max(100%, calc(220px + (var(--compare-products) * 300px)));
}

.interfacePage[data-page="compare"] .compareTable th:first-child,
.interfacePage[data-page="compare"] .compareTable td:first-child {
  width: 220px;
  min-width: 220px;
}

.interfacePage[data-page="compare"] .compareTable th:not(:first-child),
.interfacePage[data-page="compare"] .compareTable td:not(:first-child) {
  width: calc((100% - 220px) / var(--compare-products));
  min-width: 300px;
}

.topbar .brandIdentity strong {
  font-size: 13px;
  letter-spacing: .13em;
}

.topbar .brandIdentity small {
  color: rgba(255, 255, 255, .38);
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* 2026-08-12: one authoritative catalogue-photo standard.
   Product photography stays neutral; the site supplies the approved crème grid. */
.categoryCardMedia,
.equipmentPhoto,
.compareProductImage,
.pickerThumb,
.productPhotoLarge,
.equipmentDetailMedia,
.interfacePage[data-page="category"] .equipmentPhoto,
.interfacePage .compareProductImage,
.interfacePage .pickerThumb,
.interfacePage .productPhotoLarge,
.interfacePage .equipmentDetailMedia,
.interfacePage .categoryCardMedia,
.catalogPrototype .categoryCardMedia {
  background-color: var(--equipment-creme) !important;
  background-image:
    linear-gradient(rgba(67, 52, 34, .095) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 52, 34, .095) 1px, transparent 1px),
    radial-gradient(circle at 50% 37%, var(--equipment-creme-light) 0, #d7cbb6 47%, var(--equipment-creme-dark) 100%) !important;
  background-position: center !important;
  background-size: 28px 28px, 28px 28px, 100% 100% !important;
}

.equipmentPhoto::before,
.equipmentPhoto[data-equipment-category="light"]::before,
.equipmentPhoto[data-equipment-id="light-astera-titan-tube"]::before,
.equipmentCard:hover .equipmentPhoto::before,
.equipmentCard:hover .equipmentPhoto[data-equipment-category="light"]::before,
.equipmentCard:hover .equipmentPhoto[data-equipment-id="light-astera-titan-tube"]::before,
.equipmentPhoto:focus-visible::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.categoryCardMedia img,
.equipmentPhoto img,
.compareProductImage img,
.pickerThumb img,
.productPhotoLarge img,
.equipmentDetailMedia img,
.equipmentPhoto[data-equipment-category="light"] img,
.equipmentPhoto[data-equipment-id^="light-gto-led-"] img,
.equipmentPhoto[data-equipment-id="light-astera-titan-tube"] img,
.equipmentPhoto[data-equipment-id="light-tornado-acme-tornado"] img,
.categoryCard:hover .categoryCardMedia img,
.equipmentCard:hover .equipmentPhoto img,
.compareProduct:hover .compareProductImage img,
.pickerItem:hover .pickerThumb img,
.productPhotoLarge:hover img,
.equipmentDetailMedia:hover img,
.equipmentPhoto:focus-visible img {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  transform: none !important;
}

/* The product, not a baked-in rectangle, owns the frame. This final rule also
   overrides older one-off cover/zoom treatments for recently added fixtures. */
.equipmentPhoto {
  position: relative !important;
}

.interfacePage .equipmentPhoto img {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 86% !important;
  height: 80% !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: contain !important;
  transform: translate(-50%, -50%) !important;
}

.interfacePage .categoryCardMedia img,
.catalogPrototype .categoryCardMedia img {
  width: auto !important;
  height: auto !important;
  max-width: 72% !important;
  max-height: 58% !important;
  padding: 0 !important;
  object-fit: contain !important;
}

.equipmentPhoto[data-equipment-id="light-dialighting-led-wash"] img {
  width: 94% !important;
  height: 74% !important;
}

.equipmentPhoto[data-equipment-id="light-claypaky-tambora-batten-round"] img {
  width: 96% !important;
  height: 82% !important;
}

.equipmentPhoto[data-equipment-id="audio-dynacord-akusticheskaya-sistema-c153"] img {
  width: 94% !important;
  height: 90% !important;
}

.equipmentPhoto[data-equipment-id="audio-mpa504-usilitel-moschnosti-db-technologies-mpa504"] img {
  width: 94% !important;
  height: 76% !important;
}

/* Retire the former full-bleed treatment for the two STORMY cards. Their
   source files are now clean cut-outs and must use the same neutral frame as
   every other product. */
.equipmentPhoto[data-equipment-id="light-claypaky-stormy-cc"] img,
.equipmentPhoto[data-equipment-id="light-claypaky-stormy-white"] img {
  width: 86% !important;
  height: 80% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

.compareProductImage img,
.pickerThumb img,
.productPhotoLarge img,
.equipmentDetailMedia img {
  width: auto !important;
  height: auto !important;
  max-width: 88% !important;
  max-height: 82% !important;
  padding: 0 !important;
  object-fit: contain !important;
}

@media (max-width: 760px) {
  html,
  body[data-page="home"] {
    max-width: 100%;
    overflow-x: hidden;
  }

  body[data-page="home"] .cinematicHeroContent {
    box-sizing: border-box;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  body[data-page="home"] .cinematicHero h1 {
    font-size: clamp(40px, 10.6vw, 44px) !important;
    line-height: .96 !important;
  }

  body[data-page="home"] .cinematicLead {
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  body[data-page="home"] .heroActions,
  body[data-page="home"] .heroActions .button {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
  }

  .interfacePage .pageHero {
    min-height: 300px !important;
    padding-top: 112px;
    padding-bottom: 34px;
    background-image:
      linear-gradient(180deg, rgba(2, 2, 2, .14) 0%, rgba(2, 2, 2, .70) 72%, rgba(2, 2, 2, .92) 100%),
      var(--route-hero-image, url("assets/projects/symphony-innovation-2026-wide.jpg")) !important;
  }

  body[data-page="home"] .cinematicHeroPicture .cinematicHeroMedia {
    filter: saturate(1.06) contrast(1.02) brightness(1.02) !important;
  }

  body[data-page="home"] .cinematicHeroShade {
    background: linear-gradient(180deg, rgba(3, 3, 3, .02), rgba(3, 3, 3, .18) 56%, rgba(3, 3, 3, .58)) !important;
  }

  body[data-page="home"] .scaleStatement { gap: 42px; }
  body[data-page="home"] .scaleMetrics > div { min-height: 176px; padding: 62px 18px 42px; }
  body[data-page="home"] .scaleMetrics > div:last-child { min-height: 220px; }
}

/* 2026-08-17: complete illumination planning workspace. */
.illuminationIntro {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-left: 3px solid #55d68b;
  background:
    linear-gradient(110deg, rgba(85, 214, 139, .075), transparent 48%),
    #070909;
}

.illuminationIntro h4 {
  max-width: 800px;
  margin: 0;
  color: #f2efe8;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 450;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.illuminationIntro p {
  max-width: 780px;
  margin: 0;
  color: #929897;
  font-size: 14px;
  line-height: 1.55;
}

.illuminationForm {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .018), transparent 48%),
    #060707;
}

.illuminationForm > .illuminationField:first-child { grid-column: 1 / -1; }

.illuminationField {
  display: grid;
  align-content: end;
  gap: 7px;
  min-width: 0;
}

.illuminationField[hidden] { display: none; }

.illuminationField > label,
.illuminationFieldHead > label {
  color: var(--muted);
  font-size: 13px;
}

.illuminationFieldHead {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.illuminationHelpWrap {
  position: relative;
  display: inline-grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin: -13px -10px -13px 0;
  place-items: center;
}

.illuminationFieldHelp {
  position: relative;
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  appearance: none;
  background: transparent;
  color: #7f8987;
  padding: 0;
  font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  cursor: help;
}

.illuminationFieldHelp::before {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid rgba(178, 188, 187, .32);
  border-radius: 50%;
  background: #080b0a;
  content: "?";
}

.illuminationFieldHelp:hover,
.illuminationFieldHelp:focus-visible {
  color: #8fe8b2;
  outline: 0;
}

.illuminationFieldHelp:hover::before,
.illuminationFieldHelp:focus-visible::before {
  border-color: #55d68b;
}

.illuminationFieldDescription {
  position: absolute;
  z-index: 8;
  right: 9px;
  bottom: calc(100% + 9px);
  width: min(250px, 66vw);
  padding: 9px 10px;
  border: 1px solid rgba(85, 214, 139, .38);
  background: rgba(5, 9, 8, .97);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .42);
  color: #aab6b0;
  font: 10px/1.45 var(--body-font);
  letter-spacing: 0;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.illuminationFieldHelp[aria-expanded="true"] + .illuminationFieldDescription {
  opacity: 1;
  transform: none;
}

.illuminationVisuallyHidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.illuminationForm :is(input, select)[aria-invalid="true"] {
  border-color: var(--red) !important;
  box-shadow: inset 3px 0 rgba(237, 23, 57, .9);
}

.illuminationFieldError {
  min-height: 15px;
  color: #ff7182;
  font-size: 11px;
  line-height: 1.35;
}

.illuminationFieldError:empty { visibility: hidden; }

.illuminationCameraNote {
  min-height: 30px;
  color: #76807c;
  font-size: 10px;
  line-height: 1.45;
}

.illuminationFormStatus {
  min-height: 18px;
  margin: 0;
  color: #ff7182;
  font-size: 12px;
}

.illuminationUnitsExplainer {
  display: grid;
  grid-template-columns: minmax(180px, .42fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(14px, 2vw, 28px);
  padding: 16px 18px;
  border: 1px solid rgba(119, 174, 147, .24);
  background:
    linear-gradient(105deg, rgba(85, 214, 139, .065), transparent 58%),
    #080a0a;
}

.illuminationUnitsExplainer strong {
  color: #dfe7e1;
  font-size: 13px;
  font-weight: 560;
  line-height: 1.35;
}

.illuminationUnitsExplainer p {
  margin: 0;
  color: #858e8a;
  font-size: 12px;
  line-height: 1.52;
}

.illuminationActions {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 4px;
}

.illuminationActions .buttonPrimary {
  flex: 0 0 auto;
  min-width: min(270px, 100%);
  min-height: 48px;
  border-color: #f0ede6;
  background: #f0ede6;
  color: #090b0b;
  box-shadow: inset 0 -3px var(--red), 0 12px 28px rgba(0, 0, 0, .3);
}

.illuminationActions .buttonPrimary:hover {
  border-color: #fff;
  background: #fff;
  box-shadow: inset 0 -3px var(--red), 0 16px 32px rgba(0, 0, 0, .38);
}

.illuminationActions .buttonPrimary:disabled {
  cursor: not-allowed;
  opacity: .46;
  transform: none;
}

.illuminationResetButton {
  flex: 0 0 auto;
  min-height: 48px;
}

.illuminationActions small {
  max-width: 560px;
  color: #747b7a;
  font-size: 11px;
  line-height: 1.45;
}

.illuminationResult {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.interfacePage .toolPanel,
.interfacePage .toolPanel > *,
.interfacePage #toolBody { min-width: 0; }

.illuminationEmptyState,
.illuminationLoading,
.illuminationErrorState {
  position: relative;
  display: grid;
  min-height: 410px;
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 70% 55%, rgba(85, 214, 139, .07), transparent 30%),
    #050707;
}

.illuminationEmptyState {
  grid-template-columns: minmax(280px, 1.1fr) minmax(260px, .9fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(26px, 4vw, 58px);
}

.illuminationEmptyState > div:last-child {
  position: relative;
  z-index: 2;
  max-width: 520px;
}

.illuminationEmptyState span,
.illuminationSectionHead span,
.illuminationSceneHead > div > span,
.illuminationStatus > span,
.illuminationTechnical dt {
  color: #68d894;
  font: 9px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.illuminationEmptyState h4 {
  margin: 12px 0;
  color: #f2efe8;
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 430;
  line-height: 1;
  letter-spacing: -.045em;
}

.illuminationEmptyState p {
  margin: 0;
  color: #8f9694;
  line-height: 1.55;
}

.illuminationEmptyVolume {
  position: relative;
  min-height: 290px;
  perspective: 760px;
  transform-style: preserve-3d;
}

.illuminationEmptyVolume::before,
.illuminationEmptyVolume::after {
  position: absolute;
  content: "";
}

.illuminationEmptyVolume::before {
  inset: 22% 7% 8%;
  border: 1px solid rgba(96, 197, 137, .28);
  background-image:
    linear-gradient(rgba(96, 197, 137, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 197, 137, .1) 1px, transparent 1px);
  background-size: 16.66% 20%;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, .58), 0 30px 60px rgba(0, 0, 0, .5);
  transform: rotateX(58deg) rotateZ(-4deg);
}

.illuminationEmptyVolume::after {
  top: 15%;
  right: 8%;
  left: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(193, 230, 208, .38), transparent);
  box-shadow: 0 54px rgba(193, 230, 208, .11), 0 108px rgba(193, 230, 208, .07);
}

.illuminationEmptyVolume i {
  position: absolute;
  z-index: 2;
  top: 22%;
  left: calc(18% + var(--empty-x, 0%));
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d9f3e2;
  box-shadow: 0 0 0 4px rgba(85, 214, 139, .12), 0 0 22px rgba(85, 214, 139, .42);
}

.illuminationEmptyVolume i:nth-child(2) { --empty-x: 22%; top: 17%; }
.illuminationEmptyVolume i:nth-child(3) { --empty-x: 44%; top: 20%; }
.illuminationEmptyVolume i:nth-child(4) { --empty-x: 66%; top: 16%; }

.illuminationLoading {
  min-height: 260px;
  place-items: center;
  align-content: center;
  gap: 18px;
  color: #aab2af;
}

.illuminationLoading i {
  width: min(280px, 64%);
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
}

.illuminationLoading i::after {
  display: block;
  width: 34%;
  height: 100%;
  background: #55d68b;
  content: "";
  animation: illuminationLoadingLine 1.1s ease-in-out infinite alternate;
}

@keyframes illuminationLoadingLine { to { transform: translateX(194%); } }

.illuminationErrorState {
  min-height: 220px;
  align-content: center;
  gap: 14px;
  padding: clamp(24px, 4vw, 48px);
  border-color: rgba(237, 23, 57, .46);
  border-left: 3px solid var(--red);
  background: linear-gradient(120deg, rgba(237, 23, 57, .08), transparent 55%), #080607;
}

.illuminationErrorState > span { color: #ff7182; font-size: 18px; }
.illuminationErrorState ul { display: grid; gap: 7px; margin: 0; color: #b5a6a8; }

.illuminationWorkspace {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(270px, .78fr);
  gap: 1px;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--line);
}

.illuminationScenePanel,
.illuminationSummaryPanel {
  min-width: 0;
  background: #050707;
}

.illuminationSceneHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: #070909;
}

.illuminationSceneHead > div:first-child { display: grid; gap: 5px; }
.illuminationSceneHead > div > strong { color: #f0eee8; font-size: 14px; font-weight: 500; }

.illuminationSceneToolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}

.illuminationSceneToolbar button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 11px;
  border: 1px solid rgba(214, 221, 218, .19);
  background: #090b0c;
  color: #858d8b;
  font: 650 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em;
  cursor: pointer;
}

.illuminationSceneToolbar button:hover,
.illuminationSceneToolbar button:focus-visible {
  border-color: rgba(85, 214, 139, .7);
  color: #d8e7de;
  outline: 0;
}

.illuminationSceneToolbar button.isActive {
  border-color: rgba(85, 214, 139, .74);
  background: rgba(85, 214, 139, .1);
  color: #8ce8b0;
  box-shadow: inset 0 -2px #55d68b;
}

.illuminationViewSwitch { display: flex; }
.illuminationViewSwitch button + button { margin-left: -1px; }

.illuminationCanvasWrap {
  position: relative;
  height: clamp(440px, 51vw, 640px);
  min-height: 440px;
  overflow: hidden;
  background: #030505;
}

.illuminationCanvasWrap canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  outline: 0;
}

.illuminationCanvasWrap canvas:focus-visible {
  box-shadow: inset 0 0 0 2px #55d68b;
}

.illuminationCanvasTooltip {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 4px;
  width: min(218px, calc(100% - 24px));
  padding: 12px 13px;
  border: 1px solid rgba(122, 222, 161, .5);
  background: rgba(5, 9, 8, .93);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .46);
  pointer-events: none;
}

.illuminationCanvasTooltip[hidden] { display: none; }
.illuminationCanvasTooltip strong { color: #eef1eb; font-size: 12px; }
.illuminationCanvasTooltip span { color: #8ea096; font: 9px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }

.illuminationSceneReadout {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 12px;
  left: 14px;
  max-width: 680px;
  color: rgba(225, 231, 226, .72);
  font: 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .025em;
  pointer-events: none;
  text-shadow: 0 2px 10px #000;
}

.illuminationHeatScale {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) repeat(3, minmax(80px, .45fr));
  align-items: center;
  gap: 14px;
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  background: #070909;
}

.illuminationHeatScale > div {
  height: 7px;
  border: 1px solid rgba(224, 231, 226, .14);
  background: linear-gradient(90deg, #182c3d, #2b5360 28%, #459d6c 55%, #b9914d 78%, #9c3042);
  box-shadow: 0 0 18px rgba(85, 214, 139, .08);
}

.illuminationHeatScale > span { display: grid; gap: 2px; }
.illuminationHeatScale b { color: #dfe5df; font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.illuminationHeatScale small { color: #69716f; font-size: 8px; text-transform: uppercase; }
.illuminationSceneNote { margin: 0; padding: 0 18px 15px; color: #646c69; font-size: 10px; background: #070909; }

.illuminationSpacingPanel {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-top: 1px solid var(--line);
  background: #070909;
}

.illuminationSpacingHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}

.illuminationSpacingHead span {
  color: #55d68b;
  font: 700 9px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.illuminationSpacingHead strong {
  color: #dfe5df;
  font-size: 12px;
  font-weight: 500;
  text-align: right;
}

.illuminationSpacingSummary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  min-width: 0;
  margin: 0;
  background: transparent;
}

.illuminationSpacingSummary > div {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(214, 221, 218, .13);
  background: #090c0c;
}

.illuminationSpacingSummary dt {
  color: #737d79;
  font: 650 8px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.illuminationSpacingSummary dd {
  min-width: 0;
  margin: 0;
  color: #eef1eb;
  font: 600 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.illuminationSpacingSummary small {
  min-width: 0;
  color: #77807d;
  font-size: 9px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.illuminationSpacingPanel > p {
  margin: 0;
  color: #646c69;
  font-size: 9px;
  line-height: 1.45;
}

.illuminationSummaryPanel { display: grid; align-content: start; }

.illuminationSummaryPanel > * {
  min-width: 0;
  max-width: 100%;
}

.illuminationStatus :is(strong, p),
.illuminationMetric :is(strong, small, span) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.illuminationStatus {
  display: grid;
  gap: 8px;
  min-height: 184px;
  padding: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(85, 214, 139, .09), transparent 62%), #070909;
}

.illuminationStatus strong {
  color: #78e5a2;
  font-size: clamp(30px, 3vw, 48px);
  font-weight: 430;
  line-height: .95;
  letter-spacing: -.045em;
}

.illuminationStatus p { margin: auto 0 0; color: #9aa29f; font-size: 13px; line-height: 1.5; }
.illuminationStatus.warn { background: linear-gradient(145deg, rgba(237, 23, 57, .13), transparent 62%), #090708; }
.illuminationStatus.warn > span { color: #ff6679; }
.illuminationStatus.warn strong { color: #ff7b8b; }
.illuminationStatus.excessive { background: linear-gradient(145deg, rgba(211, 152, 72, .14), transparent 62%), #0a0806; }
.illuminationStatus.excessive > span { color: #d7a45e; }
.illuminationStatus.excessive strong { color: #e5b571; }

.illuminationMetricGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.illuminationMetric {
  display: grid;
  align-content: space-between;
  gap: 9px;
  min-height: 104px;
  padding: 14px;
  background: #070808;
}

.illuminationMetric > span { color: #737b78; font: 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.illuminationMetric strong { color: #eeeae3; font-size: clamp(18px, 2vw, 28px); font-weight: 430; line-height: 1; }
.illuminationMetric small { color: #626966; font-size: 9px; line-height: 1.25; }
.illuminationMetric.good { box-shadow: inset 0 -2px #55d68b; }
.illuminationMetric.warn { box-shadow: inset 0 -2px var(--red); }
.illuminationMetric.accent { box-shadow: inset 0 -2px #82a8c2; }

.illuminationProcurement {
  display: grid;
  gap: 20px;
  padding: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--line);
  background: #070909;
}

.illuminationProcurement .illuminationSectionHead { margin: 0; }

.illuminationProcurement .illuminationSectionHead p {
  max-width: 980px;
  margin: 0;
  color: #8d9692;
  font-size: 12px;
  line-height: 1.55;
}

.illuminationProcurementGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.illuminationProcurementOption {
  display: grid;
  align-content: start;
  gap: 13px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  background: #0a0c0d;
}

.illuminationProcurementOption.isPrimary {
  border-color: rgba(85, 214, 139, .58);
  background: linear-gradient(145deg, rgba(85, 214, 139, .095), transparent 55%), #0a0d0b;
  box-shadow: inset 0 2px #55d68b;
}

.illuminationProcurementOptionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.illuminationProcurementOptionHead > span {
  color: #55d68b;
  font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
}

.illuminationProcurementOptionHead small {
  color: #8e9994;
  font-size: 9px;
  line-height: 1.35;
  text-align: right;
  text-transform: uppercase;
}

.illuminationProcurementOption h5 {
  margin: 0;
  color: #f0ede6;
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 480;
  line-height: 1.18;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.illuminationProcurementCode {
  margin: -5px 0 0;
  color: #78827e;
  font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.illuminationProcurementCode b { color: #b7c0bc; font-weight: 500; }

.illuminationProcurementSpecs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
}

.illuminationProcurementSpecs span {
  padding: 5px 7px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .025);
  color: #bbc2bf;
  font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.illuminationProcurementDifference {
  margin: 0;
  color: #929b97;
  font-size: 11px;
  line-height: 1.55;
}

.illuminationProcurementLinks {
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}

.illuminationProcurementLinks a {
  padding: 8px 9px;
  border: 1px solid rgba(85, 214, 139, .3);
  background: rgba(85, 214, 139, .035);
  color: #a9dfbd;
  font-size: 10px;
  line-height: 1.35;
  text-decoration: none;
}

.illuminationProcurementLinks a:hover,
.illuminationProcurementLinks a:focus-visible {
  border-color: #55d68b;
  color: #d4f5df;
  outline: none;
}

.illuminationProcurementLinks small {
  color: #737c78;
  font-size: 10px;
  line-height: 1.45;
}

.illuminationProcurementNote {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid #55d68b;
  color: #78817d;
  font-size: 10px;
  line-height: 1.5;
}

.illuminationDecisionGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
  gap: 1px;
  margin-top: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.illuminationRecommendations,
.illuminationTechnical { min-width: 0; padding: clamp(22px, 3vw, 34px); background: #060707; }

.illuminationSectionHead { display: grid; gap: 9px; margin-bottom: 22px; }
.illuminationSectionHead h4 { margin: 0; color: #f0ede6; font-size: clamp(22px, 2.4vw, 32px); font-weight: 440; letter-spacing: -.035em; }

.illuminationRecommendationList { display: grid; gap: 1px; background: var(--line); }
.illuminationRecommendationList article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 13px;
  padding: 15px;
  background: #080909;
  box-shadow: inset 2px 0 #68726e;
}
.illuminationRecommendationList article.critical { box-shadow: inset 2px 0 var(--red); }
.illuminationRecommendationList article.warning { box-shadow: inset 2px 0 #c18d46; }
.illuminationRecommendationList article.success { box-shadow: inset 2px 0 #55d68b; }
.illuminationRecommendationList article > span { color: #616966; font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.illuminationRecommendationList article div { display: grid; gap: 5px; }
.illuminationRecommendationList strong { color: #e9e6df; font-size: 14px; font-weight: 520; }
.illuminationRecommendationList p { margin: 0; color: #818986; font-size: 12px; line-height: 1.48; }

.illuminationTechnical dl { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.illuminationTechnical dl > div { display: grid; grid-template-columns: minmax(110px, .7fr) minmax(0, 1.3fr); gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.illuminationTechnical dd { margin: 0; color: #a9b0ad; font-size: 12px; line-height: 1.45; text-align: right; overflow-wrap: anywhere; }
.illuminationTechnical > p { margin: 20px 0 0; padding: 14px; border-left: 2px solid #c18d46; background: rgba(193, 141, 70, .055); color: #858b89; font-size: 11px; line-height: 1.5; }
.illuminationTechnical > p + p {
  margin-top: 8px;
  border-left-color: rgba(85, 214, 139, .72);
  background: rgba(85, 214, 139, .045);
}
.illuminationMethodNotes {
  display: grid;
  gap: 9px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(130, 168, 194, .2);
  background: rgba(130, 168, 194, .035);
}
.illuminationMethodNotes strong { color: #b9c6ca; font-size: 11px; font-weight: 560; }
.illuminationMethodNotes ul { display: grid; gap: 7px; margin: 0; padding-left: 17px; color: #77817e; font-size: 10px; line-height: 1.45; }
.illuminationTechnical a { color: #a8d9bc; text-underline-offset: 3px; }
.illuminationTechnical a:hover,
.illuminationTechnical a:focus-visible { color: #7de4a6; }

.illuminationMountingSchedule,
.illuminationSystemBom {
  margin-top: 1px;
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(90, 139, 115, .035), transparent 45%),
    #060707;
}

.illuminationSystemBomLead {
  margin: -3px 0 18px;
  color: #8e9994;
  font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.illuminationSystemBomSource {
  margin: 14px 0 0;
  color: #737d78;
  font-size: 10px;
  line-height: 1.45;
}

.illuminationSystemBomTable { min-width: 720px; }

.illuminationSystemAssignments {
  margin-top: 14px;
  border: 1px solid var(--line);
  background: rgba(6, 9, 8, .72);
}

.illuminationSystemAssignments summary {
  min-height: 44px;
  padding: 14px 16px;
  color: #a8b3ae;
  cursor: pointer;
  font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.illuminationSystemAssignments[open] summary { border-bottom: 1px solid var(--line); }
.illuminationSystemAssignmentsTable { min-width: 520px; }

.illuminationMountingTableWrap {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  scrollbar-color: #53625a #090b0a;
  scrollbar-width: thin;
}

.illuminationScheduleMeta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 18px;
  background: var(--line);
}

.illuminationScheduleMeta article {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 112px;
  padding: 14px;
  background: #080a09;
}

.illuminationScheduleMeta span { color: #68d894; font: 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.illuminationScheduleMeta strong { color: #d8ded9; font-size: 12px; font-weight: 520; line-height: 1.35; }
.illuminationScheduleMeta small { color: #6f7874; font-size: 10px; line-height: 1.4; }

.illuminationMountingTable {
  width: 100%;
  min-width: 1180px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.illuminationMountingSchedule .illuminationMountingTable { min-width: 1680px; }
.illuminationSystemBom .illuminationSystemBomTable { min-width: 720px; }
.illuminationSystemAssignments .illuminationSystemAssignmentsTable { min-width: 520px; }

.illuminationMountingTable :is(th, td) {
  padding: 11px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.illuminationMountingTable :is(th, td):last-child { border-right: 0; }
.illuminationMountingTable tbody tr:last-child td { border-bottom: 0; }

.illuminationMountingTable th {
  position: sticky;
  z-index: 1;
  top: 0;
  color: #6fdc99;
  background: #0a0d0c;
  font: 650 8px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.illuminationMountingTable td {
  color: #aab2ae;
  background: #070909;
  font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.illuminationMountingTable tbody tr:hover td { background: rgba(85, 214, 139, .045); }
.illuminationMountingTable tbody tr.isStationStart td { border-top: 2px solid rgba(85, 214, 139, .3); }

/* The tools page already contains its own full feedback form. Keep the global
   entry point compact so it cannot cover calculation metrics or scene controls. */
body[data-page="tools"] .globalFeedbackTrigger {
  width: 42px;
  padding: 0;
  justify-content: center;
}

body[data-page="tools"] .globalFeedbackTrigger b { display: none; }

@media (max-width: 1180px) {
  .illuminationForm { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .illuminationWorkspace { grid-template-columns: 1fr; }
  .illuminationProcurementGrid { grid-template-columns: 1fr; }
  .illuminationSummaryPanel { grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr); }
  .illuminationStatus { border-right: 1px solid var(--line); border-bottom: 0; }
  .illuminationMetricGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .illuminationSpacingSummary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .illuminationScheduleMeta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .illuminationIntro { padding: 20px 18px; }
  .illuminationForm { grid-template-columns: 1fr; padding: 18px; }
  .illuminationForm > * { grid-column: 1 / -1 !important; }
  .illuminationUnitsExplainer { grid-template-columns: 1fr; padding: 14px; }
  .illuminationActions { align-items: stretch; flex-direction: column; }
  .illuminationActions :is(.buttonPrimary, .illuminationResetButton) { width: 100%; min-width: 0; }
  .illuminationEmptyState { grid-template-columns: 1fr; min-height: 480px; padding: 24px 18px; }
  .illuminationEmptyVolume { min-height: 210px; }
  .illuminationWorkspace { display: block; }
  .illuminationSceneHead { align-items: stretch; flex-direction: column; }
  .illuminationSceneToolbar { justify-content: flex-start; }
  .illuminationSceneToolbar button { min-width: 44px; min-height: 44px; padding: 8px 10px; }
  .illuminationCanvasWrap { height: 360px; min-height: 360px; }
  .illuminationCanvasWrap canvas { touch-action: pan-y; }
  .illuminationSceneReadout { right: 10px; bottom: 42px; left: 10px; max-width: calc(100% - 20px); padding-right: 42px; }
  .illuminationCanvasWrap.isTopView .illuminationSceneReadout { display: none; }
  .illuminationSpacingPanel { padding: 15px 12px; }
  .illuminationSpacingHead { align-items: flex-start; flex-direction: column; gap: 6px; }
  .illuminationSpacingHead strong { text-align: left; }
  .illuminationSpacingSummary { grid-template-columns: 1fr; }
  .illuminationHeatScale { grid-template-columns: repeat(3, minmax(64px, 1fr)); gap: 9px; padding: 12px; overflow: hidden; }
  .illuminationHeatScale > div { grid-column: 1 / -1; }
  .illuminationSummaryPanel { display: block; }
  .illuminationStatus { min-height: 170px; border-right: 0; border-bottom: 1px solid var(--line); }
  .illuminationMetricGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .illuminationDecisionGrid { grid-template-columns: 1fr; }
  .illuminationRecommendations,
  .illuminationTechnical { padding: 22px 18px; }
  .illuminationTechnical dl > div { grid-template-columns: 1fr; gap: 5px; }
  .illuminationTechnical dd { text-align: left; }
  .illuminationMountingSchedule { padding: 22px 18px; }
  .illuminationSystemBom { padding: 22px 18px; }
  .illuminationScheduleMeta { grid-template-columns: 1fr; }
  .illuminationMountingTable { min-width: 1060px; }
  .illuminationSystemBomTable { min-width: 680px; }
  /* A complete feedback form is already present below every tool. Hiding the
     duplicate floating entry point keeps scene controls, legend and status
     readable on narrow screens. */
  body[data-page="tools"] .globalFeedbackTrigger { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .illuminationLoading i::after { animation: none; transform: translateX(96%); }
}

/* 2026-08-18: source-aware equipment comparison. The established dark grid,
   crème equipment field and red accent stay intact; only the decision layer is
   rebuilt around scenarios, provenance and explicit missing-data states. */
body[data-page="compare"] .compareHero {
  min-height: 520px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 76% 24%, rgba(78, 110, 138, .1), transparent 29%),
    linear-gradient(135deg, rgba(237, 23, 57, .06), transparent 34%),
    #040505;
}

body[data-page="compare"] .compareHero > div { max-width: 1120px; }
body[data-page="compare"] .compareHero h1 { max-width: 980px; text-wrap: balance; }
body[data-page="compare"] .compareHero p { max-width: 780px; }

body[data-page="compare"] .compareSection {
  width: min(100%, 1840px);
  max-width: none;
  padding-right: clamp(14px, 3vw, 56px);
  padding-left: clamp(14px, 3vw, 56px);
}

body[data-page="compare"] .compareTableWrap,
body[data-page="compare"] .compareTableWrap.hasComparison {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  border: 0;
  background: transparent;
}

.comparisonWorkspaceTopline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 28px 0 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.comparisonWorkspaceTopline > span { display: grid; gap: 4px; }
.comparisonWorkspaceTopline b { color: #f2efe9; font-size: 14px; font-weight: 600; }
.comparisonWorkspaceTopline small {
  color: #6f7477;
  font: 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.comparisonWorkspaceTopline .compareViewportButton { display: inline-flex; }

.compareSaveCluster {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.comparisonSaveStatus {
  min-height: 14px;
  margin: 0;
  color: #777d80;
  font: 8px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: right;
}

.comparisonSaveStatus[data-state="saved"] { color: #53cc8c; }
.comparisonSaveStatus[data-state="failed"],
.comparisonSaveStatus[data-state="too-large"] { color: #ff4963; }
.comparisonSaveStatus[data-state="auth-required"] { color: #b4b8b8; }

.comparisonIntelligence {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(237, 23, 57, .045), transparent 38%),
    #070909;
}

.comparisonIntelligenceDisclosure { margin-top: 12px; border: 1px solid var(--line); background: #070909; }
.comparisonIntelligenceDisclosure > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; color: #d9d8d3; cursor: pointer; list-style: none; }
.comparisonIntelligenceDisclosure > summary::-webkit-details-marker { display: none; }
.comparisonIntelligenceDisclosure > summary span { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.comparisonIntelligenceDisclosure > summary small { color: #686f72; font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.comparisonIntelligenceDisclosure > summary::after { margin-left: 12px; color: #ed1739; content: "+"; }
.comparisonIntelligenceDisclosure[open] > summary::after { content: "−"; }
.comparisonIntelligenceDisclosure .comparisonIntelligence { border: 0; border-top: 1px solid var(--line); }

.comparisonIntelligenceHead {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 42px;
  min-height: 360px;
  padding: clamp(26px, 3.2vw, 54px);
  border-right: 1px solid var(--line);
}

.comparisonIntelligenceHead h2 {
  max-width: 620px;
  margin: 28px 0 0;
  color: #f2efe9;
  font-size: clamp(38px, 4.4vw, 70px);
  font-weight: 420;
  line-height: .95;
  letter-spacing: -.055em;
}

.comparisonIntelligenceHead > p {
  max-width: 560px;
  margin: 0;
  color: #8d9294;
  font-size: 15px;
  line-height: 1.55;
}

.comparisonInsightGrid { display: grid; align-content: start; }

.comparisonInsight,
.comparisonInsightsEmpty {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 18px;
  min-height: 118px;
  margin: 0;
  padding: 25px 28px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .012));
}

.comparisonInsight:last-child { border-bottom: 0; }
.comparisonInsight > span {
  padding-top: 2px;
  color: #5f666a;
  font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
}
.comparisonInsight strong { color: #e9e7e2; font-size: 17px; font-weight: 600; }
.comparisonInsight p { max-width: 820px; margin: 8px 0 0; color: #8b9093; font-size: 13px; line-height: 1.5; }
.comparisonInsight > small {
  grid-column: 2;
  color: #5f666a;
  font: 8px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.comparisonInsightFields {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.comparisonInsightFields button {
  min-height: 30px;
  border: 1px solid #2f3538;
  padding: 5px 8px;
  background: #090c0d;
  color: #737a7d;
  font: 8px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .05em;
  text-align: left;
  cursor: pointer;
}
.comparisonInsightFields button:hover,
.comparisonInsightFields button:focus-visible { border-color: #7d8589; color: #f1eee8; outline: none; }
.comparisonInsight[data-tone="pass"] { box-shadow: inset 3px 0 #4ed991; }
.comparisonInsight[data-tone="caution"] { box-shadow: inset 3px 0 #d4a84e; }
.comparisonInsight[data-tone="limit"] { box-shadow: inset 3px 0 #ed1739; }

.comparisonControls {
  position: relative;
  z-index: 7;
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  background: rgba(5, 7, 8, .96);
}

.comparisonScenario { display: grid; gap: 7px; min-width: min(100%, 320px); }
.comparisonScenario > span,
.comparisonRowCount {
  color: #6c7275;
  font: 8px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.comparisonScenario select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #30363a;
  border-radius: 0;
  padding: 0 42px 0 13px;
  background: #080a0b;
  color: #e9e7e2;
}

.comparisonViewModes { display: flex; border: 1px solid #30363a; }
.comparisonViewModes button {
  min-height: 44px;
  border: 0;
  border-right: 1px solid #30363a;
  padding: 0 15px;
  background: #080a0b;
  color: #858b8e;
  cursor: pointer;
}
.comparisonViewModes button:last-child { border-right: 0; }
.comparisonViewModes button[aria-pressed="true"] { background: #f1eee7; color: #070808; }

.comparisonCheck {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #30363a;
  color: #9ca1a3;
  font-size: 11px;
  cursor: pointer;
}
.comparisonCheck input { width: 16px !important; min-height: 16px !important; accent-color: #ed1739; }
.comparisonUnitToggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  border: 1px solid #30363a;
  padding: 0 12px;
  background: #080a0b;
  color: #9ca1a3;
  font-size: 11px;
  cursor: pointer;
}
.comparisonUnitToggle small { color: #62696c; font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.comparisonUnitToggle[aria-pressed="true"] { border-color: #8d9699; background: #15191a; color: #f1eee8; }
.comparisonUnitToggle:disabled { opacity: .42; cursor: not-allowed; }
.comparisonRowCount { margin-left: auto; padding: 0 5px 10px; }

.comparisonMatrixShell { margin-top: 12px; border: 1px solid var(--line); background: #060808; }
.comparisonMobileNavigator { display: none; }
.comparisonMobileHint { display: none; padding: 12px 14px; border-bottom: 1px solid var(--line); color: #7b8184; font-size: 11px; }
.comparisonMatrixViewport { width: 100%; overflow: visible; }
.comparisonMatrix { min-width: 100%; color: #f1eee8; }
.compareTableWrap[data-compare-count="1"] .comparisonMatrix { width: 100%; }
.compareTableWrap[data-compare-count="2"] .comparisonMatrix { width: max(100%, 780px); }
.compareTableWrap[data-compare-count="3"] .comparisonMatrix { width: max(100%, 1050px); }
.compareTableWrap[data-compare-count="4"] .comparisonMatrix { width: max(100%, 1320px); }

.comparisonMatrixHeader,
.comparisonMatrixRow {
  display: grid;
  grid-template-columns: 218px repeat(var(--comparison-products), minmax(0, 1fr));
}

.comparisonMatrixHeader {
  position: sticky;
  z-index: 5;
  top: var(--gto-header-height, 72px);
  border-bottom: 1px solid #454b4e;
  background: rgba(5, 7, 8, .98);
}
.comparisonHeaderLabel,
.comparisonProductCard,
.comparisonParameterCell,
.comparisonMatrixCell { min-width: 0; border-right: 1px solid var(--line); }
.comparisonHeaderLabel,
.comparisonParameterCell {
  position: sticky;
  z-index: 4;
  left: 0;
  background: #070909;
}
.comparisonHeaderLabel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 166px;
  padding: 14px;
  color: #73797c;
  font: 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.comparisonHeaderLabel small { color: #ed1739; }

.comparisonProductCard { position: relative; min-height: 166px; padding: 8px 10px; background: #080a0b; }
.comparisonProductOpen { display: grid; width: 100%; border: 0; padding: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.comparisonProductMedia {
  display: grid;
  width: 100%;
  height: 82px;
  overflow: hidden;
  place-items: center;
  background-color: var(--equipment-creme);
  background-image:
    linear-gradient(rgba(67, 52, 34, .095) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 52, 34, .095) 1px, transparent 1px),
    radial-gradient(circle at 50% 37%, var(--equipment-creme-light) 0, #d7cbb6 47%, var(--equipment-creme-dark) 100%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
}
.comparisonProductMedia img { width: 90%; height: 90%; object-fit: contain; mix-blend-mode: darken; filter: contrast(1.025) drop-shadow(0 16px 22px rgba(49, 37, 24, .18)); }
.comparisonProductIdentity { display: grid; gap: 3px; padding: 7px 2px 4px; }
.comparisonProductIdentity small { color: #73797c; font: 8px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
.comparisonProductIdentity strong { color: #f2efe9; font-size: clamp(13px, 1vw, 16px); font-weight: 580; line-height: 1.1; }
.comparisonProductMeta { display: flex; flex-wrap: wrap; gap: 3px 8px; padding-right: 58px; color: #666d70; font-size: 7px; line-height: 1.3; }
.comparisonProductMeta b { color: #aeb4b5; font-weight: 600; }
.comparisonRemove { position: absolute; right: 12px; bottom: 12px; min-width: 44px; min-height: 32px; border: 0; background: transparent; color: #777d80; font-size: 9px; cursor: pointer; }
.comparisonRemove:hover { color: #ed1739; }
.comparisonRemoveMobile { display: none; }

.comparisonGroup { border-bottom: 1px solid #383e41; }
.comparisonGroup > summary {
  position: sticky;
  z-index: 3;
  left: 0;
  display: grid;
  grid-template-columns: 42px minmax(180px, auto) 1fr;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  width: min(100vw - 2 * clamp(14px, 3vw, 56px), 1728px);
  padding: 0 18px;
  background: #0c0f10;
  cursor: pointer;
  list-style: none;
}
.comparisonGroup > summary::-webkit-details-marker { display: none; }
.comparisonGroup > summary > span { color: #ed1739; font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.comparisonGroup > summary > strong { color: #dfe0dc; font-size: 12px; letter-spacing: .025em; text-transform: uppercase; }
.comparisonGroup > summary > small { justify-self: end; color: #656b6e; font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.comparisonGroup > summary::after { content: "+"; grid-column: 4; color: #757b7e; }
.comparisonGroup[open] > summary::after { content: "−"; }

.comparisonMatrixRow { min-height: 58px; border-top: 1px solid var(--line); }
.comparisonMatrixRow.isDifferent { box-shadow: inset 2px 0 rgba(237, 23, 57, .42); }
.comparisonMatrixRow.isInsightTarget { box-shadow: inset 3px 0 #8ea7b8, 0 0 0 1px rgba(142, 167, 184, .45); outline: none; }
.comparisonParameterCell { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 12px; }
.comparisonParameterCell strong { color: #b6b9b8; font-size: 11px; font-weight: 520; line-height: 1.3; }
.comparisonParameterCell small { color: #555c5f; font: 7px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }

.comparisonMatrixCell { display: grid; grid-template-columns: minmax(0, 1fr) 28px; grid-template-rows: auto auto; gap: 4px 8px; align-content: center; min-height: 58px; padding: 8px 10px; background: #080a0b; }
.comparisonMatrixCell[data-compare-tone="pass"] { box-shadow: inset 3px 0 #43d489; background: linear-gradient(90deg, rgba(67, 212, 137, .08), transparent 42%), #080a0b; }
.comparisonMatrixCell[data-compare-tone="limit"] { box-shadow: inset 3px 0 #ed1739; background: linear-gradient(90deg, rgba(237, 23, 57, .08), transparent 42%), #080a0b; }
.comparisonMatrixCell[data-compare-tone="caution"],
.comparisonMatrixCell[data-compare-tone="conflict"] { box-shadow: inset 3px 0 #d7a64a; background: linear-gradient(90deg, rgba(215, 166, 74, .075), transparent 42%), #080a0b; }
.comparisonMatrixCell[data-compare-tone="calculated"] { box-shadow: inset 3px 0 #718da2; background: linear-gradient(90deg, rgba(113, 141, 162, .07), transparent 42%), #080a0b; }
.comparisonMatrixCell[data-compare-tone="missing"] { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .018) 0 4px, transparent 4px 10px), #070909; }
.comparisonMatrixCell[data-compare-tone="na"] { opacity: .56; }
.comparisonCellValue { display: block; min-height: 0; color: #efede7; font-size: clamp(12px, 1vw, 15px); line-height: 1.28; overflow-wrap: anywhere; }
.comparisonCellFoot { display: contents; }
.comparisonStatus { grid-column: 1; grid-row: 2; }
.comparisonStatus { color: #707679; font: 7px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .07em; text-transform: uppercase; }
.comparisonStatus[data-status="verified"] { color: #53cc8c; }
.comparisonStatus[data-status="conflict"] { color: #d9ae59; }
.comparisonStatus[data-status="calculated"] { color: #8ca5b7; }
.comparisonStatus[data-status="limited"] { color: #b49a6c; }
.comparisonStatus[data-status="missing"] { color: #7c6b70; }
.comparisonSourceButton { display: grid; grid-column: 2; grid-row: 1 / 3; align-self: center; width: 26px; height: 26px; border: 1px solid #343a3d; background: #0a0d0e; color: #a3aaac; place-items: center; cursor: pointer; }
.comparisonSourceButton:hover { border-color: #ed1739; color: #fff; }
.comparisonNoRows { padding: 52px 22px; color: #858b8e; }

.comparisonSourceDialog {
  width: min(720px, calc(100vw - 28px));
  max-height: min(880px, calc(100dvh - 28px));
  overflow: auto;
  border: 1px solid #3b4144;
  border-radius: 0;
  padding: 0;
  background: #070909;
  color: #ece9e3;
}
.comparisonSourceDialog::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(7px); }
.comparisonSourceDialog .dialogClose { position: sticky; z-index: 3; top: 12px; float: right; margin: 12px 12px -54px 0; }
.comparisonSourcePanel { min-height: 100%; }
.comparisonSourceIntro { padding: 48px 38px 28px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, rgba(237, 23, 57, .08), transparent 34%); }
.comparisonSourceIntro h2 { max-width: 560px; margin: 18px 0 10px; font-size: clamp(30px, 5vw, 52px); font-weight: 430; line-height: 1; letter-spacing: -.045em; }
.comparisonSourceIntro p { margin: 0; color: #888e91; }
.comparisonSourceValues { margin: 0; padding: 12px 38px; }
.comparisonSourceValues > div { display: grid; grid-template-columns: minmax(150px, .45fr) minmax(0, 1fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.comparisonSourceValues dt { color: #656c6f; font-size: 10px; }
.comparisonSourceValues dd { margin: 0; color: #d9dad6; line-height: 1.45; overflow-wrap: anywhere; }
.comparisonSourceValues pre { margin: 0; white-space: pre-wrap; font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.comparisonSourceDocuments { display: grid; gap: 12px; padding: 30px 38px 42px; }
.comparisonSourceDocuments article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 16px; padding: 18px; border: 1px solid var(--line); background: #090c0d; }
.comparisonSourceDocuments strong { display: block; color: #e8e6e0; font-size: 13px; }
.comparisonSourceDocuments small { display: block; margin-top: 5px; color: #666d70; font-size: 9px; }
.comparisonSourceDocuments a { color: #f0eee8; font-size: 10px; }
.comparisonSourceUnavailable { display: grid; align-self: start; gap: 5px; color: #a37e54; font: 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.comparisonSourceUnavailable code { max-width: 300px; overflow-wrap: anywhere; color: #62696c; font: inherit; }
.comparisonSourceDocuments p { grid-column: 1 / -1; margin: 0; color: #7b8184; font-size: 10px; line-height: 1.45; }

body.compareFocusMode[data-page="compare"] > .topbar,
body.compareFocusMode[data-page="compare"] .pageHero,
body.compareFocusMode[data-page="compare"] .comparePicker,
body.compareFocusMode[data-page="compare"] #compareEmpty,
body.compareFocusMode[data-page="compare"] > .footer { display: none !important; }
body.compareFocusMode[data-page="compare"] .compareSection { width: 100%; padding: 8px !important; }
body.compareFocusMode[data-page="compare"] .comparisonWorkspaceTopline { position: sticky; z-index: 12; top: 0; margin-top: 0; background: rgba(4, 5, 5, .96); }

@media (max-width: 980px) {
  .comparisonIntelligence { grid-template-columns: 1fr; }
  .comparisonIntelligenceHead { min-height: 300px; border-right: 0; border-bottom: 1px solid var(--line); }
  .comparisonInsightGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comparisonInsight { border-right: 1px solid var(--line); }
  .comparisonMatrixHeader,
  .comparisonMatrixRow { grid-template-columns: 180px repeat(var(--comparison-products), minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  body[data-page="compare"] .compareHero { min-height: 460px; }
  body[data-page="compare"] .compareHero h1 { font-size: clamp(46px, 13vw, 68px); }
  body[data-page="compare"] .compareSection { padding-right: 10px !important; padding-left: 10px !important; }
  body[data-page="compare"] .compareTableWrap.hasComparison { overflow: visible !important; border: 0 !important; }
  .comparisonWorkspaceTopline { align-items: flex-start; flex-direction: column; }
  .comparisonWorkspaceTopline .compareSaveCluster { width: 100%; justify-items: stretch; }
  .comparisonWorkspaceTopline .compareTopActions { width: 100%; }
  .comparisonWorkspaceTopline .compareTopActions .smallButton { flex: 1; }
  .comparisonWorkspaceTopline .comparisonSaveStatus { text-align: left; }
  .comparisonWorkspaceTopline .smallButton { min-height: 44px; }
  .comparisonIntelligenceHead { min-height: 320px; padding: 28px 20px; }
  .comparisonIntelligenceHead h2 { font-size: clamp(42px, 12vw, 58px); }
  .comparisonInsightGrid { grid-template-columns: 1fr; }
  .comparisonInsight { min-height: 112px; border-right: 0; }
  .comparisonControls { align-items: stretch; }
  .comparisonScenario { flex: 1 0 100%; min-width: 0; }
  .comparisonViewModes { flex: 1 0 100%; }
  .comparisonViewModes button { flex: 1; min-width: 0; padding: 0 8px; }
  .comparisonCheck { flex: 1 1 calc(50% - 5px); padding: 0 9px; }
  .comparisonUnitToggle { flex: 1 1 100%; }
  .comparisonRowCount { width: 100%; margin: 0; padding: 2px 0; }
  .comparisonMobileNavigator {
    position: sticky;
    z-index: 10;
    top: var(--gto-header-height, 112px);
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: stretch;
    min-height: 54px;
    border-bottom: 1px solid #343a3d;
    background: rgba(6, 8, 9, .98);
  }
  .comparisonMobileNavigator > button {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-right: 1px solid #30363a;
    background: transparent;
    color: #e6e4de;
    font-size: 19px;
  }
  .comparisonMobileNavigator > button:last-child { border-right: 0; border-left: 1px solid #30363a; }
  .comparisonMobileNavigator > button:disabled { color: #3f4649; }
  .comparisonMobileNavigator > button:not(:disabled) { color: #ff3151; }
  .comparisonMobileNavigator > span { display: grid; align-content: center; justify-items: center; gap: 4px; min-width: 0; padding: 7px 10px; text-align: center; }
  .comparisonMobileNavigator small { color: #62696c; font: 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
  .comparisonMobileNavigator b { overflow: hidden; color: #e9e7e2; font-size: 11px; font-weight: 580; text-overflow: ellipsis; white-space: nowrap; }
  .comparisonMobileHint { display: block; padding: 8px 10px; font-size: 9px; line-height: 1.35; }
  .compareTableWrap[data-compare-count="1"] .comparisonMatrix,
  .compareTableWrap[data-compare-count="2"] .comparisonMatrix,
  .compareTableWrap[data-compare-count="3"] .comparisonMatrix,
  .compareTableWrap[data-compare-count="4"] .comparisonMatrix { width: 100%; }
  .comparisonMatrixViewport { overflow-x: clip; touch-action: pan-y; }
  .comparisonMatrixHeader,
  .comparisonMatrixRow { grid-template-columns: 96px repeat(var(--comparison-visible-products), minmax(0, 1fr)); }
  .comparisonMatrixHeader { z-index: 9; top: calc(var(--gto-header-height, 112px) + 54px); }
  .comparisonProductCard.isMobileHidden,
  .comparisonMatrixCell.isMobileHidden { display: none; }
  .comparisonProductCard.isMobileCurrent,
  .comparisonMatrixCell.isMobileCurrent { box-shadow: none; }
  .comparisonHeaderLabel { min-height: 138px; padding: 10px 8px; }
  .comparisonProductCard { min-height: 138px; padding: 6px; }
  .comparisonProductMedia { height: 72px; aspect-ratio: auto; }
  .comparisonProductIdentity { gap: 3px; padding: 6px 1px 3px; }
  .comparisonProductIdentity small { overflow: hidden; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
  .comparisonProductIdentity strong { display: -webkit-box; overflow: hidden; font-size: 11px; line-height: 1.1; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .comparisonProductMeta { display: none; }
  .comparisonRemove { top: 6px; right: 6px; bottom: auto; display: grid; min-width: 28px; min-height: 28px; border: 1px solid rgba(0, 0, 0, .28); background: rgba(7, 8, 8, .82); color: #eeeae3; font-size: 16px; line-height: 1; place-items: center; }
  .comparisonRemoveDesktop { display: none; }
  .comparisonRemoveMobile { display: inline; }
  .comparisonGroup > summary { width: calc(100vw - 22px); grid-template-columns: 28px minmax(0, 1fr) auto auto; padding: 0 10px; }
  .comparisonGroup > summary > strong { font-size: 10px; }
  .comparisonMatrixRow { min-height: 62px; }
  .comparisonParameterCell { justify-content: flex-start; gap: 0; padding: 10px 8px; }
  .comparisonParameterCell strong { font-size: 10px; line-height: 1.25; }
  .comparisonParameterCell small { display: none; }
  .comparisonMatrixCell { position: relative; display: flex; align-items: flex-start; min-height: 62px; padding: 10px 32px 10px 9px; }
  .comparisonCellValue { min-height: 0; font-size: 12px; line-height: 1.25; }
  .comparisonCellFoot { position: absolute; right: 4px; bottom: 4px; display: block; margin: 0; }
  .comparisonStatus { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .comparisonSourceButton { width: 26px; height: 26px; font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
  .comparisonSourceIntro { padding: 54px 20px 24px; }
  .comparisonSourceValues { padding: 8px 20px; }
  .comparisonSourceValues > div { grid-template-columns: 1fr; gap: 7px; }
  .comparisonSourceDocuments { padding: 24px 20px 32px; }
  .comparisonSourceDocuments article { grid-template-columns: 1fr; }
  body[data-page="compare"] .globalFeedbackTrigger { width: 44px; padding: 0; justify-content: center; }
  body[data-page="compare"] .globalFeedbackTrigger b { display: none; }
}

/* Phones in landscape are wide enough for the whole selected set. Keep the
   same compact row rhythm, but show every product instead of a two-column
   window so three fixtures can be scanned without paging. */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1000px) {
  body[data-page="compare"] .comparisonWorkspaceTopline {
    align-items: center;
    flex-direction: row;
    margin: 8px 0;
    padding: 7px 0;
  }
  body[data-page="compare"] .comparisonWorkspaceTopline .smallButton { min-height: 34px; }
  body[data-page="compare"] .comparisonMobileNavigator,
  body[data-page="compare"] .comparisonMobileHint { display: none; }
  body[data-page="compare"] .compareTableWrap[data-compare-count="1"] .comparisonMatrix,
  body[data-page="compare"] .compareTableWrap[data-compare-count="2"] .comparisonMatrix,
  body[data-page="compare"] .compareTableWrap[data-compare-count="3"] .comparisonMatrix,
  body[data-page="compare"] .compareTableWrap[data-compare-count="4"] .comparisonMatrix { width: 100%; }
  body[data-page="compare"] .comparisonMatrixViewport { overflow-x: clip; }
  body[data-page="compare"] .comparisonMatrixHeader,
  body[data-page="compare"] .comparisonMatrixRow {
    grid-template-columns: 104px repeat(var(--comparison-products), minmax(0, 1fr));
  }
  body[data-page="compare"] .comparisonMatrixHeader {
    z-index: 9;
    top: var(--gto-header-height, 72px);
  }
  body.compareFocusMode[data-page="compare"] .comparisonMatrixHeader { top: 56px; }
  body[data-page="compare"] .comparisonProductCard.isMobileHidden { display: block; }
  body[data-page="compare"] .comparisonMatrixCell.isMobileHidden { display: flex; }
  body[data-page="compare"] .comparisonHeaderLabel,
  body[data-page="compare"] .comparisonProductCard { min-height: 116px; }
  body[data-page="compare"] .comparisonHeaderLabel { padding: 9px 8px; }
  body[data-page="compare"] .comparisonProductCard { padding: 5px; }
  body[data-page="compare"] .comparisonProductMedia { height: 56px; aspect-ratio: auto; }
  body[data-page="compare"] .comparisonProductIdentity { gap: 2px; padding: 5px 1px 2px; }
  body[data-page="compare"] .comparisonProductIdentity small { overflow: hidden; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
  body[data-page="compare"] .comparisonProductIdentity strong { display: -webkit-box; overflow: hidden; font-size: 10px; line-height: 1.08; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  body[data-page="compare"] .comparisonProductMeta { display: none; }
  body[data-page="compare"] .comparisonRemove {
    top: 5px;
    right: 5px;
    bottom: auto;
    display: grid;
    min-width: 26px;
    min-height: 26px;
    border: 1px solid rgba(0, 0, 0, .28);
    background: rgba(7, 8, 8, .82);
    color: #eeeae3;
    font-size: 15px;
    line-height: 1;
    place-items: center;
  }
  body[data-page="compare"] .comparisonRemoveDesktop { display: none; }
  body[data-page="compare"] .comparisonRemoveMobile { display: inline; }
  body[data-page="compare"] .comparisonMatrixRow { min-height: 56px; }
  body[data-page="compare"] .comparisonParameterCell { justify-content: flex-start; gap: 0; padding: 9px 8px; }
  body[data-page="compare"] .comparisonParameterCell strong { font-size: 9px; line-height: 1.2; }
  body[data-page="compare"] .comparisonParameterCell small { display: none; }
  body[data-page="compare"] .comparisonMatrixCell { position: relative; display: flex; align-items: flex-start; min-height: 56px; padding: 9px 31px 8px 8px; }
  body[data-page="compare"] .comparisonCellValue { min-height: 0; font-size: 10px; line-height: 1.22; }
  body[data-page="compare"] .comparisonCellFoot { position: absolute; right: 4px; bottom: 4px; display: block; margin: 0; }
  body[data-page="compare"] .comparisonStatus { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body[data-page="compare"] .comparisonSourceButton { width: 24px; height: 24px; font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
}

/* Final comparison rhythm: one continuous specification table. */
.comparisonMatrixRow:nth-child(even) .comparisonParameterCell,
.comparisonMatrixRow:nth-child(even) .comparisonMatrixCell { background-color: rgba(255, 255, 255, .012); }
.comparisonMatrixCell,
.comparisonMatrixCell[data-compare-tone="pass"],
.comparisonMatrixCell[data-compare-tone="limit"],
.comparisonMatrixCell[data-compare-tone="caution"],
.comparisonMatrixCell[data-compare-tone="conflict"],
.comparisonMatrixCell[data-compare-tone="calculated"],
.comparisonMatrixCell[data-compare-tone="missing"] { background-image: none; }
.comparisonMatrixCell[data-compare-tone="pass"] { box-shadow: inset 2px 0 rgba(67, 212, 137, .7); }
.comparisonMatrixCell[data-compare-tone="limit"] { box-shadow: inset 2px 0 rgba(237, 23, 57, .75); }
.comparisonMatrixCell[data-compare-tone="caution"],
.comparisonMatrixCell[data-compare-tone="conflict"] { box-shadow: inset 2px 0 rgba(215, 166, 74, .72); }
.comparisonMatrixCell[data-compare-tone="calculated"] { box-shadow: inset 2px 0 rgba(113, 141, 162, .72); }

/* TASK 3 · absolute final theme guard. */
html[data-theme="light"] .interfacePage .pageHero {
  --text: var(--on-media);
  --soft: var(--on-media);
  --muted: var(--on-media-muted);
  --line: rgba(255, 255, 255, .16);
  --line-strong: rgba(255, 255, 255, .32);
  background-color: #030303 !important;
  color: var(--on-media) !important;
}

html[data-theme="light"] .interfacePage .pageHero::before {
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255, 255, 255, .055) calc(25% - 1px) 25%);
}

html[data-theme="light"] .interfacePage .pageHero :is(h1, h2, strong) { color: var(--on-media); }
html[data-theme="light"] .interfacePage .pageHero :is(p, .breadcrumb, .pageHeroIndex) { color: var(--on-media-muted); }

.themeSwitchIcon {
  display: block;
  font-size: 16px;
  line-height: 1;
}

html[data-theme="light"] .topbar .brandIdentity strong { color: var(--text-primary); }

html[data-theme="light"] .illuminationUnitsExplainer strong { color: var(--text-primary); }
html[data-theme="light"] .illuminationUnitsExplainer p { color: var(--text-secondary); }

/* The calculation scene remains a deliberate dark visualisation island. The
   decision panels around it use the LIGHT editorial palette and cannot inherit
   the scene's pale technical ink. */
html[data-theme="light"] .illuminationScenePanel { background: var(--visualization-surface); color: var(--visualization-text); }
html[data-theme="light"] :is(.illuminationSceneHead, .illuminationSpacingPanel, .illuminationHeatScale, .illuminationSceneNote) {
  border-color: var(--visualization-border);
  background: var(--visualization-surface);
  color: var(--visualization-muted);
}
html[data-theme="light"] .illuminationSceneHead > div > strong,
html[data-theme="light"] .illuminationHeatScale b { color: var(--visualization-text); }
html[data-theme="light"] .illuminationHeatScale small,
html[data-theme="light"] .illuminationSceneNote,
html[data-theme="light"] .illuminationSpacingPanel > p { color: var(--visualization-muted); }
html[data-theme="light"] .illuminationSpacingSummary { background: transparent; }
html[data-theme="light"] .illuminationSpacingSummary > div { background: var(--visualization-surface); }
html[data-theme="light"] .illuminationSpacingHead strong,
html[data-theme="light"] .illuminationSpacingSummary dd { color: var(--visualization-text); }
html[data-theme="light"] .illuminationSpacingSummary :is(dt, small) { color: var(--visualization-muted); }

html[data-theme="light"] .illuminationSummaryPanel { background: var(--surface); color: var(--text-primary); }
html[data-theme="light"] .illuminationStatus {
  border-color: var(--border);
  background: linear-gradient(145deg, rgba(19, 122, 70, .1), transparent 62%), var(--elevated-surface);
  color: var(--text-primary);
}
html[data-theme="light"] .illuminationStatus > span,
html[data-theme="light"] .illuminationStatus strong { color: var(--success); }
html[data-theme="light"] .illuminationStatus p { color: var(--text-secondary); }
html[data-theme="light"] .illuminationStatus.warn {
  background: linear-gradient(145deg, rgba(181, 18, 47, .09), transparent 62%), var(--elevated-surface);
}
html[data-theme="light"] .illuminationStatus.warn > span,
html[data-theme="light"] .illuminationStatus.warn strong { color: var(--error); }
html[data-theme="light"] .illuminationStatus.excessive {
  background: linear-gradient(145deg, rgba(130, 86, 0, .09), transparent 62%), var(--elevated-surface);
}
html[data-theme="light"] .illuminationStatus.excessive > span,
html[data-theme="light"] .illuminationStatus.excessive strong { color: var(--warning); }

html[data-theme="light"] :is(.illuminationMetricGrid, .illuminationDecisionGrid, .illuminationRecommendationList, .illuminationScheduleMeta) {
  border-color: var(--border);
  background: var(--border);
}
html[data-theme="light"] :is(.illuminationMetric, .illuminationRecommendationList article, .illuminationScheduleMeta article) {
  border-color: var(--border);
  background: var(--elevated-surface);
  color: var(--text-primary);
}
html[data-theme="light"] .illuminationMetric > span,
html[data-theme="light"] .illuminationMetric small,
html[data-theme="light"] .illuminationRecommendationList article > span,
html[data-theme="light"] .illuminationScheduleMeta small { color: var(--text-muted); }
html[data-theme="light"] .illuminationMetric strong,
html[data-theme="light"] .illuminationRecommendationList strong,
html[data-theme="light"] .illuminationScheduleMeta strong { color: var(--text-primary); }
html[data-theme="light"] .illuminationRecommendationList p { color: var(--text-secondary); }
html[data-theme="light"] .illuminationScheduleMeta span { color: var(--success); }

html[data-theme="light"] :is(.illuminationRecommendations, .illuminationTechnical, .illuminationMountingSchedule, .illuminationSystemBom) {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-primary);
}
html[data-theme="light"] .illuminationSectionHead h4 { color: var(--text-primary); }
html[data-theme="light"] :is(.illuminationSectionHead span, .illuminationTechnical dt) { color: var(--success); }
html[data-theme="light"] .illuminationTechnical dd { color: var(--text-secondary); }
html[data-theme="light"] .illuminationTechnical > p { color: var(--text-secondary); }
html[data-theme="light"] .illuminationMethodNotes {
  border-color: var(--border);
  background: var(--background-secondary);
}
html[data-theme="light"] .illuminationMethodNotes strong { color: var(--text-primary); }
html[data-theme="light"] .illuminationMethodNotes ul,
html[data-theme="light"] :is(.illuminationSystemBomLead, .illuminationSystemBomSource) { color: var(--text-muted); }
html[data-theme="light"] .illuminationTechnical a { color: var(--accent); }
html[data-theme="light"] .illuminationTechnical a:hover,
html[data-theme="light"] .illuminationTechnical a:focus-visible { color: var(--accent-hover); }
html[data-theme="light"] .illuminationSystemAssignments {
  border-color: var(--border);
  background: var(--elevated-surface);
}
html[data-theme="light"] .illuminationSystemAssignments summary { color: var(--text-secondary); }
html[data-theme="light"] .illuminationMountingTableWrap { border-color: var(--border); scrollbar-color: var(--border-strong) var(--background-secondary); }
html[data-theme="light"] .illuminationMountingTable th {
  border-color: var(--border);
  background: var(--background-secondary);
  color: var(--success);
}
html[data-theme="light"] .illuminationMountingTable td {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-secondary);
}
html[data-theme="light"] .illuminationMountingTable tbody tr:hover td { background: var(--hover); }

/* Comparison is defined late in the legacy cascade. Rebind its text and
   controls after those rules so the LIGHT matrix never carries dark-theme
   ivory text onto paper surfaces. */
html[data-theme="light"] .comparisonWorkspaceTopline b,
html[data-theme="light"] .comparisonIntelligenceHead h2 { color: var(--text-primary); }
html[data-theme="light"] :is(.comparisonWorkspaceTopline small, .comparisonIntelligenceHead > p) { color: var(--text-muted); }
html[data-theme="light"] :is(.comparisonIntelligence, .comparisonIntelligenceDisclosure, .comparisonControls, .comparisonMatrixShell) {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-primary);
}
html[data-theme="light"] .comparisonIntelligenceDisclosure > summary { color: var(--text-primary); }
html[data-theme="light"] .comparisonIntelligenceDisclosure > summary small { color: var(--text-muted); }
html[data-theme="light"] :is(.comparisonInsight, .comparisonInsightsEmpty) {
  border-color: var(--border);
  background: var(--elevated-surface);
  color: var(--text-primary);
}
html[data-theme="light"] .comparisonInsight > span,
html[data-theme="light"] .comparisonInsight > small { color: var(--text-muted); }
html[data-theme="light"] .comparisonInsight strong { color: var(--text-primary); }
html[data-theme="light"] .comparisonInsight p { color: var(--text-secondary); }
html[data-theme="light"] .comparisonInsightFields button {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text-muted);
}
html[data-theme="light"] .comparisonInsightFields button:hover,
html[data-theme="light"] .comparisonInsightFields button:focus-visible { border-color: var(--accent); color: var(--text-primary); }
html[data-theme="light"] :is(.comparisonScenario > span, .comparisonRowCount) { color: var(--text-muted); }
html[data-theme="light"] :is(.comparisonScenario select, .comparisonViewModes, .comparisonCheck, .comparisonUnitToggle) { border-color: var(--border-strong); }
html[data-theme="light"] :is(.comparisonScenario select, .comparisonViewModes button, .comparisonUnitToggle) {
  background: var(--elevated-surface);
  color: var(--text-secondary);
}
html[data-theme="light"] .comparisonViewModes button { border-color: var(--border-strong); }
html[data-theme="light"] :is(.comparisonViewModes button[aria-pressed="true"], .comparisonUnitToggle[aria-pressed="true"]) {
  border-color: var(--interactive);
  background: var(--interactive);
  color: var(--interactive-text);
}
html[data-theme="light"] .comparisonCheck { color: var(--text-secondary); }
html[data-theme="light"] .comparisonUnitToggle small { color: var(--text-muted); }

html[data-theme="light"] .comparisonMatrix { color: var(--text-primary); }
html[data-theme="light"] .comparisonMatrixHeader {
  border-color: var(--border-strong);
  background: rgba(250, 249, 246, .98);
}
html[data-theme="light"] :is(.comparisonHeaderLabel, .comparisonProductCard, .comparisonParameterCell, .comparisonMatrixCell) {
  border-color: var(--border);
  background-color: var(--surface);
  color: var(--text-primary);
}
html[data-theme="light"] .comparisonHeaderLabel { color: var(--text-muted); }
html[data-theme="light"] .comparisonProductIdentity small,
html[data-theme="light"] .comparisonProductMeta,
html[data-theme="light"] .comparisonRemove { color: var(--text-muted); }
html[data-theme="light"] .comparisonProductIdentity strong { color: var(--text-primary); }
html[data-theme="light"] .comparisonProductMeta b { color: var(--text-secondary); }
html[data-theme="light"] .comparisonGroup { border-color: var(--border-strong); }
html[data-theme="light"] .comparisonGroup > summary {
  border-color: var(--border);
  background: var(--background-secondary);
  color: var(--text-primary);
}
html[data-theme="light"] .comparisonGroup > summary > strong { color: var(--text-primary); }
html[data-theme="light"] .comparisonGroup > summary > small,
html[data-theme="light"] .comparisonGroup > summary::after { color: var(--text-muted); }
html[data-theme="light"] .comparisonMatrixRow { border-color: var(--border); }
html[data-theme="light"] .comparisonParameterCell strong { color: var(--text-secondary); }
html[data-theme="light"] .comparisonParameterCell small { color: var(--text-muted); }
html[data-theme="light"] .comparisonCellValue { color: var(--text-primary); }
html[data-theme="light"] .comparisonStatus { color: var(--text-muted); }
html[data-theme="light"] .comparisonStatus[data-status="verified"] { color: var(--success); }
html[data-theme="light"] .comparisonStatus[data-status="conflict"] { color: var(--warning); }
html[data-theme="light"] .comparisonStatus[data-status="calculated"] { color: #45657a; }
html[data-theme="light"] .comparisonStatus[data-status="limited"] { color: var(--warning); }
html[data-theme="light"] .comparisonStatus[data-status="missing"] { color: #70535b; }
html[data-theme="light"] .comparisonSourceButton {
  border-color: var(--border-strong);
  background: var(--elevated-surface);
  color: var(--text-secondary);
}
html[data-theme="light"] .comparisonSourceButton:hover { border-color: var(--accent); color: var(--accent); }
html[data-theme="light"] .comparisonNoRows { color: var(--text-muted); }
html[data-theme="light"] .comparisonSourceDialog {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
}
html[data-theme="light"] .comparisonSourceIntro { border-color: var(--border); }
html[data-theme="light"] .comparisonSourceIntro p,
html[data-theme="light"] .comparisonSourceValues dt,
html[data-theme="light"] .comparisonSourceDocuments small,
html[data-theme="light"] .comparisonSourceDocuments p { color: var(--text-muted); }
html[data-theme="light"] .comparisonSourceValues dd,
html[data-theme="light"] .comparisonSourceDocuments strong,
html[data-theme="light"] .comparisonSourceDocuments a { color: var(--text-primary); }
html[data-theme="light"] .comparisonSourceDocuments article {
  border-color: var(--border);
  background: var(--elevated-surface);
}
html[data-theme="light"] body.compareFocusMode[data-page="compare"] .comparisonWorkspaceTopline {
  background: rgba(250, 249, 246, .96);
}

html[data-theme="light"] .equipmentDetailCopy > p { color: var(--text-secondary); }
html[data-theme="light"] .equipmentDetailHero .pageHeroIndex span { color: var(--text-muted); }
html[data-theme="light"] #resultCount strong { color: var(--text-primary); }
html[data-theme="light"] #resultCount small { color: var(--text-muted); }
html[data-theme="light"] .specList,
html[data-theme="light"] .specRow { border-color: var(--border); background: var(--border); }
html[data-theme="light"] .specRow > span { background: var(--surface); color: var(--text-primary); }
html[data-theme="light"] .specRow > span:first-child { color: var(--text-muted); }

/* The closing project invitation is intentionally cinematic on both themes. */
html[data-theme="light"] .pageContactCta {
  --text: var(--on-media);
  --soft: var(--on-media-muted);
  --muted: var(--on-media-muted);
  --line: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .16);
  background: linear-gradient(110deg, rgba(237, 23, 57, .09), transparent 32%), #050505;
  color: var(--on-media);
}
html[data-theme="light"] .pageContactCta :is(h2, .sectionKicker) { color: var(--on-media); }
html[data-theme="light"] .pageContactCtaAction p { color: var(--on-media-muted); }
html[data-theme="light"] .pageContactCta .buttonGhost {
  border-color: rgba(255, 255, 255, .42);
  background: transparent;
  color: var(--on-media);
}
html[data-theme="light"] .pageContactCta .buttonGhost:hover { border-color: rgba(255, 255, 255, .76); background: rgba(255, 255, 255, .1); }

html[data-theme="light"] .illuminationCanvasTooltip {
  border-color: rgba(122, 222, 161, .5);
  background: rgba(5, 9, 8, .95);
  color: var(--visualization-text);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .46);
}
html[data-theme="light"] .illuminationCanvasTooltip strong { color: var(--visualization-text); }
html[data-theme="light"] .illuminationCanvasTooltip span { color: var(--visualization-muted); }

html[data-theme="light"] .transportCargoFieldHead label { color: var(--text-primary); }
html[data-theme="light"] .transportCargoFieldHead small,
html[data-theme="light"] .transportStackChoice { color: var(--text-muted); }
html[data-theme="light"] :is(.transportExactSound, .transportAdvanced, .transportLoadingOrder) {
  border-color: var(--border);
  background: var(--surface);
}
html[data-theme="light"] :is(.transportExactSound, .transportAdvanced, .transportLoadingOrder) summary { color: var(--text-secondary); }
html[data-theme="light"] .transportAdvancedGrid label,
html[data-theme="light"] .transportPlacePreviewValue span,
html[data-theme="light"] .transportPlacePreview small { color: var(--text-muted); }
html[data-theme="light"] .transportPlacePreviewValue strong { color: var(--text-primary); }
html[data-theme="light"] .transportPlacePreview p { color: var(--text-secondary); }
html[data-theme="light"] .toolFeedbackForm label { color: var(--text-secondary); }
html[data-theme="light"] .toolFeedbackForm :is(select, textarea, input[type="file"]) {
  border-color: var(--border-strong);
  background: var(--elevated-surface);
  color: var(--text-primary);
}
html[data-theme="light"] .toolFeedbackForm input[type="file"]::file-selector-button {
  border-color: var(--interactive);
  background: var(--interactive);
  color: var(--interactive-text);
}
html[data-theme="light"] .toolFeedbackUpload small { color: var(--text-muted); }
html[data-theme="light"] .toolNavGroupReady .toolNavGroupTitle span,
html[data-theme="light"] :is(.toolCardReady small, .toolCardReady small span) { color: var(--success); }
html[data-theme="light"] .toolNavGroupTesting .toolNavGroupTitle span,
html[data-theme="light"] :is(.toolCardTesting small, .toolCardTesting small span) { color: var(--error); }

html[data-theme="light"] .transportResultHero > span { color: var(--warning); }
html[data-theme="light"] :is(.transportBreakdown header > span, .transportAlternatives header > span, .transportWarnings header > span, .transportProvenance > span) { color: var(--success); }
html[data-theme="light"] .transportResultHero p,
html[data-theme="light"] .transportBreakdown > p,
html[data-theme="light"] .transportProvenance p { color: var(--text-muted); }
html[data-theme="light"] :is(.transportMetric span, .transportMetric small, .transportBreakdown article span) { color: var(--text-muted); }
html[data-theme="light"] .transportBreakdown article b { color: var(--text-primary); }
html[data-theme="light"] .transportGate b { color: var(--text-secondary); }
html[data-theme="light"] .transportGate small { color: var(--text-muted); }
html[data-theme="light"] .transportAlternative > span,
html[data-theme="light"] .transportAlternative dt { color: var(--text-muted); }
html[data-theme="light"] :is(.transportAlternative h5, .transportAlternative > strong) { color: var(--text-primary); }
html[data-theme="light"] :is(.transportAlternative p, .transportAlternative small) { color: var(--text-secondary); }
html[data-theme="light"] .transportWarnings li b { color: var(--warning); }
html[data-theme="light"] .transportWarnings li span { color: var(--text-secondary); }
html[data-theme="light"] .transportProvenance dt { color: var(--text-muted); }
html[data-theme="light"] .transportProvenance dd { color: var(--text-secondary); }
html[data-theme="light"] .transportSceneTooltip {
  border-color: var(--visualization-border);
  background: rgba(5, 9, 8, .95);
  color: var(--visualization-text);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .46);
}

html[data-theme="light"] .globalFeedbackDialog {
  border-color: var(--border-strong);
  background: var(--elevated-surface);
  color: var(--text-primary);
  box-shadow: var(--surface-shadow);
}
html[data-theme="light"] .globalFeedbackDialog h2 { color: var(--text-primary); }
html[data-theme="light"] .globalFeedbackDialog > p { color: var(--text-secondary); }
html[data-theme] .globalFeedbackOverlay { z-index: 1200; }
html[data-theme="light"] .dialogClose {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
}
html[data-theme="light"] .feedbackVoiceRecorder {
  border-color: var(--border);
  background: var(--background-secondary);
}
html[data-theme="light"] .feedbackVoiceRecorder legend { color: var(--text-secondary); }
html[data-theme="light"] :is(.feedbackVoiceRecorder small, .toolFeedbackActions small) { color: var(--text-muted); }
html[data-theme="light"] .toolFeedbackStatus,
html[data-theme="light"] .toolFeedbackStatus:not(:empty) { color: var(--text-primary); }

html[data-theme="light"] .toolMetric strong,
html[data-theme="light"] .toolResultSections section > b,
html[data-theme="light"] .conceptLibraryCardBody strong { color: var(--text-primary); }
html[data-theme="light"] .toolResultSections ul,
html[data-theme="light"] .toolSafetyNote { color: var(--text-secondary); }
html[data-theme="light"] .conceptGenerationError strong { color: var(--error); }
html[data-theme="light"] .conceptLibraryNotice { color: var(--text-primary); }
html[data-theme="light"] .conceptGeneratingMark {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

html[data-theme="light"] :is(.transportFormStatus, .illuminationFormStatus) { color: var(--error); }
html[data-theme="light"] .transportResultActions p { color: var(--success); }
html[data-theme="light"] .transportError ul { color: var(--text-secondary); }
html[data-theme="light"] .transportSceneControls {
  border-color: var(--visualization-border);
  background: var(--visualization-surface);
  color: var(--visualization-text);
}

html[data-theme="light"] .interfacePage .aboutGrid > *,
html[data-theme="light"] .interfacePage .processGrid article,
html[data-theme="light"] .interfacePage .requestSection {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-primary);
}
html[data-theme="light"] .interfacePage .aboutSection {
  border-color: var(--border);
  background: var(--background-primary);
  color: var(--text-primary);
  box-shadow: none;
}
html[data-theme="light"] .requestFastStart > strong { color: var(--text-primary); }
html[data-theme="light"] .requestFastStart > small,
html[data-theme="light"] .requestOptionalHead > small { color: var(--text-muted); }
html[data-theme="light"] .requestRequiredField .requiredField { color: var(--error); }
html[data-theme="light"] .requestRequiredField input { border-color: var(--border-strong) !important; }
html[data-theme="light"] .requestOptionalHead > span { color: var(--text-muted); }
html[data-theme="light"] .requestFile {
  border-color: var(--border-strong);
  background: var(--background-secondary);
  color: var(--text-primary);
}
html[data-theme="light"] .requestFile small { color: var(--text-secondary); }
html[data-theme="light"] .requestStatus {
  border-color: var(--border);
  background: var(--elevated-surface);
  color: var(--text-secondary);
}
html[data-theme="light"] .requestStatus[data-type="success"] { border-color: var(--success); color: var(--success); }
html[data-theme="light"] .requestStatus[data-type="error"] { border-color: var(--error); color: var(--error); }

html[data-theme="light"] .accountChatWindow {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text-primary);
}
html[data-theme="light"] .accountChatWindow > header { border-color: var(--border); }
html[data-theme="light"] .accountChatWindow > header div strong { color: var(--text-primary); }
html[data-theme="light"] .accountChatWindow > header div small,
html[data-theme="light"] .accountChatWindow > header button { color: var(--text-muted); }
html[data-theme="light"] .accountChatMessages article > div {
  border-color: var(--border);
  background: var(--elevated-surface);
  color: var(--text-primary);
}
html[data-theme="light"] .accountChatMessages article.isOwn > div {
  border-color: rgba(201, 20, 50, .3);
  background: var(--selected);
}
html[data-theme="light"] .accountChatMessages p { color: var(--text-primary); }
html[data-theme="light"] .accountChatMessages time { color: var(--text-muted); }
html[data-theme="light"] .accountChatComposer { border-color: var(--border); }
html[data-theme="light"] .accountProfileBio { color: var(--text-secondary); }
html[data-theme="light"] .accountProfileHead div > span { color: var(--accent); }
html[data-theme="light"] .accountProfileHead p { color: var(--text-secondary); }
html[data-theme="light"] .accountProfileStats { border-color: var(--border); }
html[data-theme="light"] .accountProfileStats span { border-color: var(--border); color: var(--text-muted); }
html[data-theme="light"] .accountProfileStats strong { color: var(--text-primary); }
html[data-theme="light"] .accountProfileSkills span { border-color: var(--border); color: var(--text-muted); }
html[data-theme="light"] .accountProfileWall { border-color: var(--border); }
html[data-theme="light"] .accountRoomBoard > nav button.isActive {
  border-color: var(--accent);
  background: var(--selected);
  color: var(--selected-text);
}
html[data-theme="light"] .accountRoomAvatars span { color: var(--on-media); }
html[data-theme="light"] body[data-page="account"] :is(.accountWelcomeCard > button, .accountNextStep a, .accountNextStep button, .accountProfileHomeHero > button) {
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
html[data-theme="light"] body[data-page="account"] .accountActivityPreview > button.isUnread { color: var(--text-primary); }
html[data-theme="light"] .accountAccessPromptPanel {
  border-color: rgba(201, 20, 50, .46);
  background: radial-gradient(circle at 100% 0, rgba(201, 20, 50, .1), transparent 38%), var(--elevated-surface);
  color: var(--text-primary);
}
html[data-theme="light"] .accountAccessPromptPanel h2 { color: var(--text-primary); }
html[data-theme="light"] :is(.accountAccessPromptPanel > p, .accountAccessPromptPanel > small) { color: var(--text-muted); }
html[data-theme="light"] .accountAccessPromptPanel > a { color: var(--accent); }
html[data-theme="light"] .accountAccessPromptBenefits span { border-color: var(--border); color: var(--text-secondary); }
html[data-theme="light"] .accountToolPreview h4 { color: var(--text-primary); }
html[data-theme="light"] .accountToolPreview > p { color: var(--text-secondary); }
html[data-theme="light"] :is(.accountToolPreview article span, .accountToolPreview > small) { color: var(--text-muted); }
html[data-theme="light"] .accountToolPreview article strong { color: var(--text-primary); }
html[data-theme="light"] .accountToolPreviewStatus { color: var(--success); }
html[data-theme="light"] .accountAccessGrid p { color: var(--text-secondary); }
html[data-theme="light"] :is(.accountAccessGrid article > span, .accountAccessGrid strong, .accountAccessGrid button) { color: var(--text-muted); }
html[data-theme="light"] .accountAdminTable td strong { color: var(--text-primary); }
html[data-theme="light"] .accountAdminTable td small,
html[data-theme="light"] .accountAdminTable .isNo { color: var(--text-muted); }
html[data-theme="light"] .accountAdminTable .isYes { color: var(--success); }
html[data-theme="light"] .footerBrandLockup .brandIdentity strong { color: var(--text-primary); }
html[data-theme="light"] body[data-page="account"] .accountWorkspaceStatus button {
  border-color: var(--accent);
  color: var(--accent);
}
html[data-theme="light"] :is(.accountAuthForm label:not(.accountConsent), .accountConsent, .accountAuthStatus) { color: var(--text-muted); }
html[data-theme="light"] .accountAuthStatus[data-type="error"] { color: var(--error); }
html[data-theme="light"] body[data-page="account"] .accountProfileAbout > p { color: var(--text-secondary); }
html[data-theme="light"] body[data-page="account"] .accountProfileHomeStats button {
  background: var(--elevated-surface);
  color: var(--text-muted);
}
html[data-theme="light"] body[data-page="account"] .accountProfileHomeStats strong { color: var(--text-primary); }
html[data-theme="light"] body[data-page="account"] .accountEmptyState :is(a, button),
html[data-theme="light"] body[data-page="account"] .accountProfileSettings button,
html[data-theme="light"] body[data-page="account"] .accountBlockHead :is(button, a),
html[data-theme="light"] body[data-page="account"] .accountArtifactBody button,
html[data-theme="light"] body[data-page="account"] .accountChatContextCard button,
html[data-theme="light"] body[data-page="account"] .accountRoomPulse > button { color: var(--text-secondary); }
html[data-theme="light"] body[data-page="account"] .accountEmptyState :is(a, button):hover { border-color: var(--accent); color: var(--accent); }
html[data-theme="light"] body[data-page="account"] .accountRoomPulse li b { color: var(--text-muted); }
html[data-theme="light"] :is(.accountCommentOrigin p, .accountCommentList p) { color: var(--text-secondary); }
html[data-theme="light"] .accountCommentList time { color: var(--text-muted); }
html[data-theme="light"] .accountCommentComposer {
  border-color: var(--border);
  background: rgba(250, 249, 246, .96);
}
html[data-theme="light"] body[data-page="account"] .accountTextLink:hover { border-color: var(--accent); color: var(--accent); }
html[data-theme="light"] body[data-page="account"] :is(
  .accountBlockHead button,
  .accountBlockHead a,
  .accountPeopleStack button,
  #accountRecommendations > button,
  .accountConversationList > button,
  .accountRoomList button,
  .accountProfileActions button,
  .accountRoomBoard > nav button,
  .accountSocialPost > footer button,
  .accountProfileSettings button
):hover { color: var(--text-primary); }
html[data-theme="light"] body[data-page="account"] .accountProfileActions button:first-child:hover { color: #fff; }

:is(
  .accountProjectCardBody,
  .accountProjectSheetIntro,
  .accountProjectDna dd,
  .accountProjectGallery figure,
  .accountProjectEquipment a,
  .accountProjectCrew button,
  .accountProjectCrew article
) { min-width: 0; }

:is(
  .accountProjectCardBody h4,
  .accountProjectCardBody p,
  .accountProjectMeta span,
  .accountProjectSheetIntro h2,
  .accountProjectSheetIntro p,
  .accountProjectSheetMeta span,
  .accountProjectSheetMeta time,
  .accountProjectDna span,
  .accountProjectGallery figcaption,
  .accountProjectEquipment strong,
  .accountProjectEquipment small,
  .accountProjectCrew strong,
  .accountProjectCrew small
) { overflow-wrap: anywhere; }

html[data-theme="light"] body[data-page="home"] :is(.scaleSection, .directionsSection) {
  background: var(--background-primary);
  color: var(--text-primary);
}

html[data-theme="light"] body[data-page="home"] .directionRows :is(h3, a) { color: var(--text-primary); }

html[data-theme="light"] :is(.cinematicHero, .projectsHero, .caseHero) :is(.buttonGhost, .textLink) {
  border-color: rgba(255, 255, 255, .42);
  background: rgba(2, 2, 2, .22);
  color: var(--on-media);
}

html[data-theme="light"] :is(.cinematicHero, .projectsHero, .caseHero) :is(.buttonGhost, .textLink):hover {
  border-color: rgba(255, 255, 255, .76);
  background: rgba(255, 255, 255, .12);
  color: var(--on-media);
}

html[data-theme="light"] .comparisonMatrixRow:nth-child(even) :is(.comparisonParameterCell, .comparisonMatrixCell) {
  background-color: rgba(25, 31, 34, .025);
}

html[data-theme="light"] .comparisonMatrixCell[data-compare-tone="pass"] { background: linear-gradient(90deg, rgba(19, 122, 70, .09), transparent 42%), var(--surface); }
html[data-theme="light"] .comparisonMatrixCell[data-compare-tone="limit"] { background: linear-gradient(90deg, rgba(181, 18, 47, .08), transparent 42%), var(--surface); }
html[data-theme="light"] .comparisonMatrixCell:is([data-compare-tone="caution"], [data-compare-tone="conflict"]) { background: linear-gradient(90deg, rgba(130, 86, 0, .09), transparent 42%), var(--surface); }
html[data-theme="light"] .comparisonMatrixCell[data-compare-tone="calculated"] { background: linear-gradient(90deg, rgba(72, 100, 118, .09), transparent 42%), var(--surface); }
html[data-theme="light"] .comparisonMatrixCell[data-compare-tone="missing"] { background: repeating-linear-gradient(135deg, rgba(25, 31, 34, .035) 0 4px, transparent 4px 10px), var(--background-secondary); }

@media (min-width: 761px) and (max-width: 1100px) {
  :root { --gto-header-height: 123px; }

  .cinematicPage .topbar,
  .interfacePage .topbar,
  .topbar {
    position: relative;
    align-items: flex-start;
    flex-wrap: wrap;
    overflow: visible;
  }

  .topbar .brand { flex: 1 1 auto; }
  .cinematicPage .nav,
  .interfacePage .nav,
  .topbar .nav {
    order: 4;
    justify-content: flex-start;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .topbar .nav::-webkit-scrollbar { display: none; }
  .topbar .nav a { flex: 0 0 auto; }
  .cinematicHero,
  .projectsHero,
  .caseHero,
  .cinematicHeroContent { min-height: calc(100svh - var(--gto-header-height)); }
}

@media (max-width: 760px) {
  .comparisonMatrixCell[data-compare-tone]::before {
    position: absolute;
    bottom: 5px;
    left: 6px;
    display: grid;
    width: 13px;
    height: 13px;
    border: 1px solid currentColor;
    background: var(--surface);
    color: var(--text-muted);
    font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    content: "·";
    place-items: center;
  }

  .comparisonMatrixCell[data-compare-tone="pass"]::before { color: var(--success); content: "✓"; }
  .comparisonMatrixCell[data-compare-tone="limit"]::before { color: var(--error); content: "!"; }
  .comparisonMatrixCell[data-compare-tone="caution"]::before { color: var(--warning); content: "△"; }
  .comparisonMatrixCell[data-compare-tone="conflict"]::before { color: var(--warning); content: "×"; }
  .comparisonMatrixCell[data-compare-tone="calculated"]::before { color: var(--blue); content: "≈"; }
  .comparisonMatrixCell[data-compare-tone="missing"]::before,
  .comparisonMatrixCell[data-compare-tone="na"]::before { color: var(--disabled-text); content: "—"; }

  html[data-theme] body .topbar {
    grid-template-columns: minmax(72px, 1fr) 54px 42px auto 38px !important;
  }

  html[data-theme] .topbar .topAction { display: none !important; }
  html[data-theme] .topbar .themeSwitch {
    grid-column: 3 !important;
    grid-row: 1 !important;
    width: 42px;
    min-width: 42px;
    min-height: 38px;
    padding: 2px;
  }

  html[data-theme] .topbar .themeSwitch > :is(button, [role="button"]) {
    min-width: 17px;
    min-height: 32px;
    padding: 0 2px;
    font-size: 0;
  }

  html[data-theme] .topbar .themeSwitch > :is(button, [role="button"])::before {
    content: none;
  }

  html[data-theme] .topbar .themeSwitchIcon { font-size: 14px; }

  html[data-theme] .topbar .accountTopAction { grid-column: 4 !important; }
  html[data-theme] .topbar .scrollTopAction { grid-column: 5 !important; }

  html[data-theme="light"] .topbar .nav {
    border-color: var(--border) !important;
    background: rgba(247, 245, 240, .96) !important;
  }
}

@media (max-width: 390px) {
  html[data-theme] body .topbar {
    grid-template-columns: minmax(62px, 1fr) 50px 36px auto 36px !important;
  }

  html[data-theme] .topbar .themeSwitch { width: 36px; min-width: 36px; }
  html[data-theme] .topbar .themeSwitch > :is(button, [role="button"]) { min-width: 14px; }
}


/* 2026-08-27 · canonical row comparison, complete admin feedback and mobile concept library */
.comparisonMatrixShell {
  overflow: visible;
}

.comparisonMatrixViewport {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  scrollbar-color: #3a4144 #090b0c;
  -webkit-overflow-scrolling: touch;
}

.compareTableWrap[data-compare-count="1"] .comparisonMatrix { width: 100% !important; }
.compareTableWrap[data-compare-count="2"] .comparisonMatrix { width: max(100%, 700px) !important; }
.compareTableWrap[data-compare-count="3"] .comparisonMatrix { width: max(100%, 960px) !important; }
.compareTableWrap[data-compare-count="4"] .comparisonMatrix { width: max(100%, 1220px) !important; }

.comparisonMatrixHeader,
.comparisonMatrixRow {
  grid-template-columns: 180px repeat(var(--comparison-products), minmax(260px, 1fr)) !important;
}

.comparisonMatrixHeader {
  position: relative !important;
  top: auto !important;
  min-height: 82px;
}

.comparisonHeaderLabel,
.comparisonProductCard {
  min-height: 82px !important;
}

.comparisonHeaderLabel {
  align-items: center;
  padding: 12px 14px;
}

.comparisonProductCard {
  padding: 10px 42px 10px 12px;
}

.comparisonProductOpen {
  align-content: center;
  min-height: 38px;
}

.comparisonProductIdentity {
  gap: 4px;
  padding: 0 2px 5px;
}

.comparisonProductIdentity strong {
  font-size: clamp(13px, 1vw, 16px);
  line-height: 1.15;
}

.comparisonProductMeta {
  display: flex;
  gap: 3px 9px;
  padding-right: 0;
}

.comparisonProductMedia {
  display: none !important;
}

.comparisonRemove {
  top: 10px;
  right: 8px;
  bottom: auto;
}

.comparisonMobileNavigator {
  display: none !important;
}

.comparisonScopeGroup {
  width: 100%;
  border-bottom: 1px solid #495053;
}

.comparisonScopeHeading {
  position: sticky;
  z-index: 4;
  left: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 48px;
  width: 100%;
  padding: 0 18px;
  border-bottom: 1px solid #4a5154;
  background: #121617;
}

.comparisonScopeHeading span {
  color: #ed1739;
  font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}

.comparisonScopeHeading strong {
  color: #f2efe9;
  font-size: 13px;
  font-weight: 620;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.comparisonGroup > summary {
  width: 100% !important;
}

.comparisonParameterCell {
  position: sticky;
  z-index: 2;
  left: 0;
  background: #070909;
}

.comparisonMatrixCell[data-compare-tone="pass"] {
  background: linear-gradient(90deg, rgba(67, 212, 137, .17), rgba(67, 212, 137, .035) 58%, transparent), #080a0b !important;
  box-shadow: inset 4px 0 #43d489 !important;
}

.comparisonMatrixCell[data-compare-tone="limit"] {
  background: linear-gradient(90deg, rgba(237, 23, 57, .16), rgba(237, 23, 57, .03) 58%, transparent), #080a0b !important;
  box-shadow: inset 4px 0 #ed1739 !important;
}

.comparisonMatrixCell[data-compare-tone="pass"] .comparisonCellValue,
.comparisonMatrixCell[data-compare-tone="limit"] .comparisonCellValue {
  font-weight: 650;
}

.compareStickyNames {
  height: 44px;
  border-top-color: #343a3d;
  background: #080a0b;
  opacity: 0;
  transform: none;
  transition: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.compareStickyNames.isVisible {
  opacity: 1;
}

.compareStickyNamesTrack {
  will-change: auto;
}

.compareStickyNamesTrack b {
  color: #f2efe9;
  font-size: 10px;
  font-weight: 650;
}

.conceptLibraryCard {
  min-width: 0;
}

.accountFeedbackCommentList {
  display: grid;
  gap: 1px;
  background: var(--line);
}

.accountFeedbackLoadMore {
  min-height: 42px;
  border: 1px solid var(--line);
  background: #090909;
  color: #aaa;
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.accountFeedbackLoadMore:disabled {
  cursor: wait;
  opacity: .45;
}

.accountFeedbackComment {
  display: grid;
  gap: 16px;
  padding: 20px;
  background: #070707;
}

.accountFeedbackComment > header,
.accountFeedbackComment > footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.accountFeedbackComment > header strong,
.accountFeedbackComment > header small,
.accountFeedbackComment > footer span,
.accountFeedbackComment > footer small {
  display: block;
}

.accountFeedbackComment > header strong {
  color: #eee;
  font-size: 12px;
}

.accountFeedbackComment > header small,
.accountFeedbackComment time,
.accountFeedbackComment > footer small {
  margin-top: 4px;
  color: #686868;
  font: 8px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}

.accountFeedbackComment blockquote {
  margin: 0;
  padding: 16px 18px;
  border-left: 3px solid #ed1739;
  background: #0c0c0c;
  color: #e8e6e1;
  font-size: 14px;
  line-height: 1.55;
}

.accountFeedbackComment dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
}

.accountFeedbackComment dl > div {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 84px;
  padding: 12px;
  background: #090909;
}

.accountFeedbackComment :is(dt, dd) {
  margin: 0;
  overflow-wrap: anywhere;
}

.accountFeedbackComment dt {
  color: #646464;
  font: 8px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.accountFeedbackComment dd {
  color: #aaa;
  font-size: 10px;
  line-height: 1.5;
}

.accountFeedbackComment > p {
  margin: 0;
  color: #ff899a;
  font-size: 10px;
  line-height: 1.5;
}

.accountFeedbackComment > footer span {
  color: #8f9698;
  font-size: 10px;
}

html[data-theme="light"] .comparisonScopeHeading {
  border-color: var(--border-strong);
  background: var(--background-secondary);
}

html[data-theme="light"] .comparisonScopeHeading strong {
  color: var(--text-primary);
}

html[data-theme="light"] .comparisonMatrixCell[data-compare-tone="pass"] {
  background: linear-gradient(90deg, rgba(19, 122, 70, .13), transparent 64%), var(--surface) !important;
}

html[data-theme="light"] .comparisonMatrixCell[data-compare-tone="limit"] {
  background: linear-gradient(90deg, rgba(181, 18, 47, .12), transparent 64%), var(--surface) !important;
}

html[data-theme="light"] .compareStickyNames {
  border-color: var(--border-strong);
  background: var(--surface);
}

html[data-theme="light"] .accountFeedbackComment,
html[data-theme="light"] .accountFeedbackComment dl > div {
  background: var(--surface);
}

html[data-theme="light"] .accountFeedbackLoadMore {
  background: var(--surface);
  color: var(--text-primary);
}

html[data-theme="light"] .accountFeedbackComment blockquote {
  background: var(--background-secondary);
  color: var(--text-primary);
}

html[data-theme="light"] .accountFeedbackComment > header strong,
html[data-theme="light"] .accountFeedbackComment dd {
  color: var(--text-primary);
}

@media (max-width: 760px) {
  .conceptLibraryGrid {
    grid-template-columns: 1fr !important;
    width: 100%;
  }

  .conceptLibraryCard {
    width: 100%;
    grid-template-rows: minmax(118px, 42vw) auto;
  }

  body[data-page="compare"] .comparisonMobileHint {
    display: block !important;
  }

  body[data-page="compare"] .compareTableWrap[data-compare-count="1"] .comparisonMatrix { width: 100% !important; }
  body[data-page="compare"] .compareTableWrap[data-compare-count="2"] .comparisonMatrix { width: 492px !important; }
  body[data-page="compare"] .compareTableWrap[data-compare-count="3"] .comparisonMatrix { width: 682px !important; }
  body[data-page="compare"] .compareTableWrap[data-compare-count="4"] .comparisonMatrix { width: 872px !important; }

  body[data-page="compare"] .comparisonMatrixHeader,
  body[data-page="compare"] .comparisonMatrixRow {
    grid-template-columns: 112px repeat(var(--comparison-products), minmax(190px, 1fr)) !important;
  }

  body[data-page="compare"] .comparisonProductCard.isMobileHidden {
    display: block !important;
  }

  body[data-page="compare"] .comparisonMatrixCell.isMobileHidden {
    display: grid !important;
  }

  body[data-page="compare"] .comparisonHeaderLabel,
  body[data-page="compare"] .comparisonProductCard {
    min-height: 72px !important;
  }

  body[data-page="compare"] .comparisonHeaderLabel {
    padding: 9px 8px;
  }

  body[data-page="compare"] .comparisonProductCard {
    padding: 8px 34px 8px 9px;
  }

  body[data-page="compare"] .comparisonProductIdentity {
    padding: 0;
  }

  body[data-page="compare"] .comparisonProductIdentity small {
    overflow: hidden;
    font-size: 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-page="compare"] .comparisonProductIdentity strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.12;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-page="compare"] .comparisonProductMeta {
    display: none;
  }

  body[data-page="compare"] .comparisonMatrixCell {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 26px;
    grid-template-rows: auto auto;
    align-content: center;
    min-height: 62px;
    padding: 9px 8px;
  }

  body[data-page="compare"] .comparisonCellFoot {
    position: static;
    display: contents;
  }

  body[data-page="compare"] .comparisonStatus {
    position: static;
    grid-column: 1;
    grid-row: 2;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }

  body[data-page="compare"] .comparisonSourceButton {
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: center;
  }

  body[data-page="compare"] .comparisonScopeHeading {
    min-height: 42px;
    padding: 0 10px;
  }

  body[data-page="compare"] .comparisonGroup > summary {
    grid-template-columns: 28px minmax(0, 1fr) auto auto;
    padding: 0 10px;
  }

  .accountFeedbackComment {
    padding: 14px;
  }

  .accountFeedbackComment > header,
  .accountFeedbackComment > footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .accountFeedbackComment dl {
    grid-template-columns: 1fr;
  }

  .accountFeedbackComment dl > div {
    min-height: 0;
  }
}

/* 2026-08-27 · catalogue hover must never move product photography. */
body[data-page="category"] .equipmentCard {
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

body[data-page="category"] .equipmentCard:hover,
body[data-page="category"] .equipmentCard:focus-within {
  border-color: rgba(237, 23, 57, .72) !important;
  background: #0a0a0b !important;
  box-shadow: inset 3px 0 0 var(--red), inset 0 0 0 1px rgba(237, 23, 57, .16) !important;
  transform: none !important;
}

html[data-theme="light"] body[data-page="category"] .equipmentCard:hover,
html[data-theme="light"] body[data-page="category"] .equipmentCard:focus-within {
  background: var(--elevated-surface) !important;
}

body[data-page="category"] .equipmentCard:hover .equipmentPhoto,
body[data-page="category"] .equipmentCard:focus-within .equipmentPhoto {
  border-bottom-color: rgba(237, 23, 57, .58) !important;
}

body[data-page="category"] .equipmentCard:hover .equipmentPhoto img,
body[data-page="category"] .equipmentCard:focus-within .equipmentPhoto img,
body[data-page="category"] .equipmentPhoto:hover img,
body[data-page="category"] .equipmentPhoto:focus-visible img {
  transform: translate(-50%, -50%) !important;
  filter: none !important;
}

/* 2026-08-27 · the concept form starts directly after its editorial hero. */
body[data-page="concept-generator"] .conceptWorkspace {
  padding-top: clamp(26px, 2.8vw, 40px) !important;
}

@media (max-width: 760px) {
  body[data-page="concept-generator"] .conceptWorkspace {
    padding-top: 22px !important;
  }
}

@media (min-width: 761px) {
  .topbar[data-shell-ready] .accountTopAction {
    min-width: 112px;
  }
}

/* 2026-08-27 · developer feedback lives in the footer flow and cannot cover controls. */
.cinematicFooter > div:last-child {
  align-items: center;
  flex-wrap: wrap;
}

.cinematicFooter .globalFeedbackShell {
  display: block;
  flex: 0 0 auto;
}

.cinematicFooter .globalFeedbackTrigger,
body[data-page="tools"] .cinematicFooter .globalFeedbackTrigger,
body[data-page="compare"] .cinematicFooter .globalFeedbackTrigger {
  position: static !important;
  z-index: auto;
  right: auto;
  bottom: auto;
  display: inline-flex !important;
  width: auto !important;
  min-height: 38px;
  padding: 0 12px 0 7px;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  white-space: nowrap;
}

.cinematicFooter .globalFeedbackTrigger b,
body[data-page="tools"] .cinematicFooter .globalFeedbackTrigger b,
body[data-page="compare"] .cinematicFooter .globalFeedbackTrigger b {
  display: inline !important;
}

@media (max-width: 760px) {
  .cinematicFooter > div:last-child,
  .cinematicFooter .globalFeedbackShell {
    width: 100%;
  }

  .cinematicFooter .globalFeedbackTrigger {
    width: 100% !important;
    justify-content: flex-start;
  }
}

/* 2026-08-27 · photo-first comparison header, compact rows and explicit decision colours. */
body[data-page="compare"] .comparisonMatrixHeader {
  min-height: 270px !important;
}

body[data-page="compare"] .comparisonHeaderLabel,
body[data-page="compare"] .comparisonProductCard {
  min-height: 270px !important;
}

body[data-page="compare"] .comparisonProductCard {
  padding: 8px 42px 9px 10px;
}

body[data-page="compare"] .comparisonProductOpen {
  grid-template-rows: 168px auto;
  align-content: start;
  min-height: 0;
}

body[data-page="compare"] .comparisonProductMedia {
  position: relative;
  display: grid !important;
  width: 100%;
  height: 168px;
  margin: 0 0 6px;
  overflow: hidden;
  place-items: center;
}

body[data-page="compare"] .comparisonProductMedia img {
  position: absolute !important;
  top: 10px !important;
  right: 14px !important;
  bottom: 8px !important;
  left: 14px !important;
  box-sizing: border-box;
  width: calc(100% - 28px) !important;
  height: calc(100% - 18px) !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
}

body[data-page="compare"] .comparisonProductIdentity {
  padding: 2px 2px 5px;
}

body[data-page="compare"] .comparisonProductMeta {
  padding-right: 62px;
}

body[data-page="compare"] .comparisonRemove {
  top: auto;
  right: 8px;
  bottom: 9px;
}

.comparisonToneLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 10px 14px;
  border: 1px solid #343a3d;
  border-bottom: 0;
  background: #0a0d0e;
  color: #8f9698;
  font: 8px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.comparisonToneLegend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.comparisonToneLegend i {
  width: 9px;
  height: 9px;
  border: 1px solid currentColor;
  background: currentColor;
}

.comparisonToneLegend [data-tone="pass"] { color: #53cc8c; }
.comparisonToneLegend [data-tone="neutral"] { color: #90989b; }
.comparisonToneLegend [data-tone="limit"] { color: #ff526c; }

.comparisonMatrixCell[data-compare-tone="neutral"] {
  background: linear-gradient(90deg, rgba(137, 147, 151, .085), rgba(137, 147, 151, .018) 58%, transparent), #080a0b !important;
  box-shadow: inset 2px 0 #6f777b !important;
}

.comparisonMatrixCell[data-compare-tone="pass"] .comparisonCellValue,
.comparisonMatrixCell[data-compare-tone="limit"] .comparisonCellValue {
  font-weight: 650;
}

body[data-page="compare"] .comparisonMatrixRow,
body[data-page="compare"] .comparisonParameterCell,
body[data-page="compare"] .comparisonMatrixCell {
  min-height: 52px;
}

body[data-page="compare"] .comparisonParameterCell,
body[data-page="compare"] .comparisonMatrixCell {
  padding-top: 6px;
  padding-bottom: 6px;
}

html[data-theme="light"] .comparisonToneLegend {
  border-color: var(--border-strong);
  background: var(--background-secondary);
  color: var(--text-muted);
}

html[data-theme="light"] .comparisonMatrixCell[data-compare-tone="neutral"] {
  background: linear-gradient(90deg, rgba(85, 96, 101, .075), transparent 64%), var(--surface) !important;
}

@media (max-width: 760px) {
  body[data-page="compare"] .comparisonMatrixHeader,
  body[data-page="compare"] .comparisonHeaderLabel,
  body[data-page="compare"] .comparisonProductCard {
    min-height: 196px !important;
  }

  body[data-page="compare"] .comparisonProductCard {
    padding: 6px 30px 7px 7px;
  }

  body[data-page="compare"] .comparisonProductOpen {
    grid-template-rows: 112px auto;
  }

  body[data-page="compare"] .comparisonProductMedia {
    display: grid !important;
    height: 112px;
    margin-bottom: 5px;
  }

  body[data-page="compare"] .comparisonProductMedia img {
    top: 6px !important;
    right: 9px !important;
    bottom: 6px !important;
    left: 9px !important;
    width: calc(100% - 18px) !important;
    height: calc(100% - 12px) !important;
  }

  body[data-page="compare"] .comparisonProductIdentity {
    padding: 0;
  }

  body[data-page="compare"] .comparisonRemove {
    top: 5px;
    right: 5px;
    bottom: auto;
  }

  body[data-page="compare"] .comparisonMatrixRow,
  body[data-page="compare"] .comparisonParameterCell,
  body[data-page="compare"] .comparisonMatrixCell {
    min-height: 56px;
  }

  body[data-page="compare"] .comparisonParameterCell,
  body[data-page="compare"] .comparisonMatrixCell {
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .comparisonToneLegend {
    gap: 7px 12px;
    padding: 9px 10px;
    font-size: 7px;
  }

  .comparisonMatrixCell[data-compare-tone="neutral"]::before {
    color: #788083;
    content: "≠";
  }
}

/* 2026-09-05 · READY screen-size calculator. */
.screenCalculatorIntro {
  display: grid;
  gap: 10px;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--line);
  border-bottom: 0;
  background: linear-gradient(120deg, rgba(85, 214, 139, .075), transparent 58%), #080a09;
}

.screenCalculatorIntro > span,
.screenResultHero span,
.screenDecisionGrid article > span,
.screenBuildSummary span {
  color: #62dc94;
  font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.screenCalculatorIntro h4 {
  max-width: 920px;
  margin: 0;
  color: #f1eee8;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 450;
  letter-spacing: -.04em;
}

.screenCalculatorIntro p {
  max-width: 900px;
  margin: 0;
  color: #9aa39f;
  font-size: 13px;
  line-height: 1.6;
}

.screenCalculatorForm {
  margin-top: 0;
  border-top: 0;
}

.screenCalculatorForm label > small {
  color: #7b8580;
  font-size: 10px;
  font-weight: 450;
}

.screenCalculatorForm [hidden] { display: none; }

.screenFormStatus {
  min-height: 18px;
  margin: 0;
  color: #ff8b9b;
  font-size: 11px;
}

.screenCalculatorResult {
  overflow: hidden;
  padding: 0;
  border-color: rgba(85, 214, 139, .34);
  background: #050706;
}

.screenResultContent {
  display: grid;
  gap: 1px;
  background: var(--line);
}

.screenResultHero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 4vw, 44px);
  background: linear-gradient(125deg, rgba(85, 214, 139, .14), transparent 48%), #080b09;
}

.screenResultHero > div { display: grid; gap: 9px; }

.screenResultHero h4 {
  margin: 0;
  color: #f5f2eb;
  font-size: clamp(38px, 6vw, 78px);
  font-weight: 370;
  line-height: .95;
  letter-spacing: -.065em;
}

.screenResultHero p {
  margin: 0;
  color: #9ca59f;
  font-size: 12px;
  line-height: 1.5;
}

.screenResultHero > strong {
  color: rgba(211, 244, 221, .72);
  font: 500 clamp(24px, 3vw, 42px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.screenVisualization {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  min-height: 430px;
  background: #050606;
}

.screenFrontView,
.screenSightlineView {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(72, 186, 120, .1), transparent 45%),
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px),
    #060808;
  background-size: auto, 32px 32px, 32px 32px, auto;
}

.screenFrontView {
  display: grid;
  min-height: 430px;
  padding: 48px 58px 62px;
  place-items: center;
  border-right: 1px solid var(--line);
}

.screenFrame {
  position: relative;
  width: min(88%, 680px);
  aspect-ratio: var(--screen-ratio);
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, .36);
  background: #030404;
  box-shadow: 0 32px 70px rgba(0, 0, 0, .58), 0 0 52px rgba(85, 214, 139, .08);
  transform: perspective(1100px) rotateX(1.5deg);
}

.screenFrame::before,
.screenFrame::after {
  position: absolute;
  z-index: -1;
  bottom: -28px;
  width: 2px;
  height: 28px;
  background: rgba(255, 255, 255, .28);
  content: "";
}

.screenFrame::before { left: 8%; }
.screenFrame::after { right: 8%; }

.screenActiveImage {
  display: grid;
  width: 100%;
  height: 100%;
  padding: clamp(18px, 4vw, 42px);
  align-content: center;
  gap: 9px;
  background:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
    radial-gradient(circle at 73% 23%, rgba(85, 214, 139, .32), transparent 23%),
    linear-gradient(135deg, #08120d, #0d1b23 48%, #130b16);
  background-size:
    calc(100% / var(--grid-rows)) calc(100% / var(--grid-rows)),
    calc(100% / var(--grid-columns)) calc(100% / var(--grid-columns)),
    auto,
    auto;
}

.screenActiveImage > span {
  color: rgba(199, 255, 222, .72);
  font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
}

.screenActiveImage strong {
  max-width: 80%;
  color: #f0f4ef;
  font-size: clamp(19px, 3vw, 42px);
  font-weight: 420;
  line-height: 1.02;
  letter-spacing: -.04em;
}

.screenActiveImage small {
  color: rgba(211, 225, 219, .64);
  font: 9px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.screenDimension {
  position: absolute;
  color: #8e9c96;
  font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.screenDimension::before,
.screenDimension::after { position: absolute; background: #52605a; content: ""; }

.screenDimension.isWidth {
  right: 14%;
  bottom: 26px;
  left: 14%;
  height: 1px;
  border-top: 1px solid #52605a;
  text-align: center;
}

.screenDimension.isWidth::before,
.screenDimension.isWidth::after { top: -4px; width: 1px; height: 8px; }
.screenDimension.isWidth::before { left: 0; }
.screenDimension.isWidth::after { right: 0; }
.screenDimension.isWidth span { position: relative; top: 8px; padding: 0 8px; background: #060808; }

.screenDimension.isHeight {
  top: 16%;
  right: 22px;
  bottom: 20%;
  width: 1px;
  border-left: 1px solid #52605a;
}

.screenDimension.isHeight::before,
.screenDimension.isHeight::after { left: -4px; width: 8px; height: 1px; }
.screenDimension.isHeight::before { top: 0; }
.screenDimension.isHeight::after { bottom: 0; }
.screenDimension.isHeight span { position: absolute; top: 50%; left: 9px; width: 70px; transform: translateY(-50%); }

.screenSightlineView { min-height: 430px; }

.screenSightlineGround {
  position: absolute;
  right: 8%;
  bottom: 54px;
  left: 10%;
  height: 1px;
  background: rgba(255, 255, 255, .22);
}

.screenSightlineDisplay {
  position: absolute;
  z-index: 3;
  bottom: 55px;
  left: 12%;
  width: 8px;
  height: 64%;
  border: 1px solid rgba(85, 214, 139, .75);
  background: linear-gradient(#75e4a2, #1a6b3e);
  box-shadow: 0 0 28px rgba(85, 214, 139, .28);
}

.screenSightlineDisplay span {
  position: absolute;
  bottom: -27px;
  left: -8px;
  width: 80px;
  color: #748079;
  font: 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.screenSightlineBeam {
  position: absolute;
  z-index: 1;
  right: 10%;
  bottom: 76px;
  left: 13%;
  height: 55%;
  background: linear-gradient(90deg, rgba(85, 214, 139, .18), rgba(85, 214, 139, .015));
  clip-path: polygon(0 0, 100% 68%, 100% 76%, 0 100%);
}

.screenViewer {
  position: absolute;
  z-index: 4;
  bottom: 55px;
  display: grid;
  justify-items: center;
  gap: 6px;
  transform: translateX(-50%);
}

.screenViewer.isNear { left: var(--near-position); }
.screenViewer.isFar { right: 8%; transform: none; }

.screenViewer i {
  position: relative;
  display: block;
  width: 10px;
  height: 43px;
  border-radius: 7px 7px 2px 2px;
  background: #777f7b;
}

.screenViewer i::before {
  position: absolute;
  top: -13px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #a7b0ab;
  content: "";
}

.screenViewer span {
  color: #77817c;
  font: 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
  white-space: nowrap;
}

.screenMetricGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.screenMetric {
  display: grid;
  align-content: space-between;
  gap: 10px;
  min-height: 126px;
  padding: 18px;
  background: #090b0a;
}

.screenMetric > span { color: #737e78; font: 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; text-transform: uppercase; }
.screenMetric strong { color: #efede7; font-size: clamp(19px, 2.4vw, 32px); font-weight: 430; line-height: 1; overflow-wrap: anywhere; }
.screenMetric small { color: #7f8984; font-size: 9px; line-height: 1.4; }
.screenMetric.accent { box-shadow: inset 0 -2px #82a8c2; }
.screenMetric.good { box-shadow: inset 0 -2px #55d68b; }
.screenMetric.warn { box-shadow: inset 0 -2px #ed1739; }

.screenBuildSummary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.screenBuildSummary > div {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 16px 18px;
  background: #070908;
}

.screenBuildSummary strong { color: #dce3de; font-size: 14px; font-weight: 520; overflow-wrap: anywhere; }
.screenBuildSummary small { color: #76807b; font-size: 9px; line-height: 1.35; }

.screenWarnings {
  display: grid;
  gap: 9px;
  padding: 18px 22px;
  border-left: 3px solid #ed1739;
  background: #12090b;
}

.screenWarnings.isClear { border-left-color: #55d68b; background: #07110b; }
.screenWarnings strong { color: #f1e8e9; font-size: 13px; }
.screenWarnings ul { display: grid; gap: 6px; margin: 0; padding-left: 18px; color: #c6aeb2; font-size: 11px; line-height: 1.5; }
.screenWarnings p { margin: 0; color: #91aa9a; font-size: 11px; line-height: 1.5; }

.screenDecisionGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.screenDecisionGrid article {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: clamp(20px, 3vw, 30px);
  background: #070808;
}

.screenDecisionGrid h5 { margin: 0; color: #e8e6e0; font-size: 18px; font-weight: 480; letter-spacing: -.025em; }
.screenDecisionGrid p { margin: 0; color: #858f8a; font-size: 11px; line-height: 1.55; }

.screenChecklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.screenChecklist > div { padding: clamp(20px, 3vw, 30px); background: #080908; }
.screenChecklist strong { color: #e5e5df; font-size: 13px; }
.screenChecklist ul { display: grid; gap: 7px; margin: 13px 0 0; padding-left: 18px; color: #8b9590; font-size: 11px; line-height: 1.5; }
.screenChecklist p { display: grid; gap: 7px; margin: 13px 0 0; }
.screenChecklist a { color: #9bdbb5; font-size: 10px; line-height: 1.4; text-underline-offset: 3px; }

.screenMethodNote {
  margin: 0;
  padding: 16px 22px;
  background: #050606;
  color: #737d78;
  font-size: 10px;
  line-height: 1.55;
}

.screenError {
  display: grid;
  gap: 10px;
  padding: 24px;
  border-left: 3px solid #ed1739;
  background: #12090b;
  color: #f1d7dc;
}

.screenError ul { display: grid; gap: 6px; margin: 0; padding-left: 18px; font-size: 12px; }

html[data-theme="light"] :is(.screenCalculatorIntro, .screenCalculatorResult, .screenResultHero, .screenFrontView, .screenSightlineView, .screenMetric, .screenBuildSummary > div, .screenDecisionGrid article, .screenChecklist > div, .screenMethodNote) {
  border-color: var(--border);
  background-color: var(--surface);
  color: var(--text-primary);
}

html[data-theme="light"] .screenCalculatorIntro { background: linear-gradient(120deg, rgba(19, 122, 70, .08), transparent 58%), var(--surface); }
html[data-theme="light"] .screenResultHero { background: linear-gradient(125deg, rgba(19, 122, 70, .11), transparent 48%), var(--surface); }
html[data-theme="light"] :is(.screenCalculatorIntro h4, .screenResultHero h4, .screenMetric strong, .screenBuildSummary strong, .screenDecisionGrid h5, .screenChecklist strong) { color: var(--text-primary); }
html[data-theme="light"] :is(.screenCalculatorIntro p, .screenResultHero p, .screenMetric small, .screenBuildSummary small, .screenDecisionGrid p, .screenChecklist ul, .screenMethodNote) { color: var(--text-muted); }
html[data-theme="light"] .screenFrame { border-color: rgba(18, 42, 30, .36); }
html[data-theme="light"] .screenWarnings.isClear { background: #edf8f1; }
html[data-theme="light"] .screenWarnings:not(.isClear) { background: #fff1f3; }

@media (max-width: 1180px) {
  .screenVisualization { grid-template-columns: 1fr; }
  .screenFrontView { border-right: 0; border-bottom: 1px solid var(--line); }
  .screenSightlineView { min-height: 350px; }
  .screenBuildSummary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .screenCalculatorIntro { padding: 20px 18px; }
  .screenResultHero { align-items: start; flex-direction: column; padding: 24px 18px; }
  .screenResultHero h4 { font-size: clamp(36px, 12vw, 58px); }
  .screenFrontView { min-height: 330px; padding: 38px 36px 58px 28px; }
  .screenSightlineView { min-height: 300px; }
  .screenMetricGrid,
  .screenBuildSummary,
  .screenDecisionGrid,
  .screenChecklist { grid-template-columns: 1fr; }
  .screenMetric { min-height: 104px; }
  .screenViewer.isNear { left: clamp(28%, var(--near-position), 62%); }
}

/* 2026-09-08 · site-wide star field; transparent points preserve the deep black ground. */
.siteAmbientPixels {
  position: fixed;
  z-index: -1;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  opacity: 1;
  contain: strict;
  pointer-events: none;
}

.interfacePage main,
html[data-theme="light"] .interfacePage main {
  background: transparent;
}

body {
  isolation: isolate;
}

/* Manufacturer links identify their destination before the user opens them. */
.sourceLinks a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: stretch;
  min-width: min(100%, 260px);
  min-height: 56px;
  padding: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, .015);
}

.sourceLinks a > span {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  padding: 9px 11px;
}

.sourceLinks a small,
.sourceLinks a strong {
  display: block;
}

.sourceLinks a small {
  color: #6f777b;
  font: 7px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sourceLinks a strong {
  color: var(--soft);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

.sourceLinks a > i {
  display: grid;
  place-items: center;
  border-left: 1px solid var(--line);
  color: #8f9698;
  font-size: 14px;
  font-style: normal;
}

.sourceLinks .sourceLinkManufacturer {
  border-color: rgba(237, 23, 57, .62);
  background: linear-gradient(90deg, rgba(237, 23, 57, .075), transparent 72%), rgba(255, 255, 255, .012);
}

.sourceLinks .sourceLinkManufacturer small,
.sourceLinks .sourceLinkManufacturer > i {
  color: #ff526c;
}

.sourceLinks a:hover,
.sourceLinks a:focus-visible {
  border-color: var(--red);
  background-color: rgba(237, 23, 57, .035);
}

html[data-theme="light"] .sourceLinks a {
  background: rgba(255, 255, 255, .46);
}

html[data-theme="light"] .sourceLinks a strong {
  color: var(--text-primary);
}

@media (max-width: 760px) {
  .sourceLinks,
  .sourceLinks a {
    width: 100%;
  }

  .equipmentDetailHero,
  .equipmentDetailCopy {
    min-width: 0;
  }

  .equipmentDetailHero {
    width: 100%;
    max-width: 100vw;
    overflow-x: clip;
  }

  .equipmentDetailCopy {
    width: 100vw;
    max-width: 100vw;
  }

  .equipmentDetailCopy h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal !important;
    word-break: break-word;
  }

  .equipmentDetailCopy > p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* The parameter column remains pinned while product cells scroll beneath it
   on narrow screens. Both row tones must stay fully opaque so hidden values
   cannot bleed through the sticky labels. */
.comparisonMatrixRow:nth-child(even) .comparisonParameterCell {
  background-color: #0a0c0d;
}

html[data-theme="light"] .comparisonMatrixRow:nth-child(even) .comparisonParameterCell {
  background-color: var(--surface);
}

/* 2026-09-04 · READABILITY FIX / DENSITY FIX.
   Preserve the established dark technical direction while raising the
   contrast of information people actually scan and giving controls a clear
   surface. The specification selectors deliberately target direct cells: the
   inner translate-protection span must never receive a second padded layer. */
:root:not([data-theme="light"]) {
  --text-secondary: #e1ded8;
  --text-muted: #aaa9a6;
  --border: rgba(255, 255, 255, .19);
  --border-strong: rgba(255, 255, 255, .38);
  --hover: rgba(255, 255, 255, .085);
  --disabled-text: #858585;
  --visualization-muted: #a1aaa5;
}

:root:not([data-theme="light"]) :is(
  .interfacePage .pageHero p,
  .cinematicSectionHead > p,
  .equipmentCard p,
  .equipmentDetailCopy > p,
  .equipmentApplication p,
  .equipmentKeySpecs span,
  .toolHeader p,
  .toolForm label,
  .toolResultHead > p,
  .toolResultSections ul,
  .toolSafetyNote,
  .filterBlock > span,
  .searchBox > span,
  #resultCount small,
  .sourceLinks a small
) {
  color: var(--text-muted);
}

:root:not([data-theme="light"]) :is(
  .equipmentCardBody,
  .equipmentSpecsPanel .specGroup,
  .toolPanel,
  .toolResult,
  .filters,
  .filterPanel
) {
  border-color: var(--border);
  background-color: #0b0c0e;
}

:root:not([data-theme="light"]) :is(
  .buttonGhost,
  .smallButton:not(.active),
  .iconTextButton,
  .topAction,
  .catalogFilterToggle,
  .catalogQuickFilters button:not(.isActive)
) {
  border-color: rgba(255, 255, 255, .38);
  background: #111417;
  color: #f4f1eb;
  box-shadow: inset 0 1px rgba(255, 255, 255, .055);
}

:root:not([data-theme="light"]) :is(
  .buttonGhost,
  .smallButton,
  .iconTextButton,
  .topAction,
  .catalogFilterToggle,
  .catalogQuickFilters button
):is(:hover, :focus-visible) {
  border-color: var(--accent);
  background: #191d21;
  color: #fff;
}

:root:not([data-theme="light"]) :is(.buttonPrimary, .buttonPrimary:hover, .buttonPrimary:focus-visible) {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.equipmentCard {
  content-visibility: auto;
  contain-intrinsic-size: 520px;
}

.equipmentSpecsPanel {
  gap: 14px;
}

:root:not([data-theme="light"]) .specRow > span {
  background: #0b0c0d;
  color: var(--text-secondary);
}

:root:not([data-theme="light"]) .specRow:nth-child(even) > span {
  background: #0e0f10;
}

.specRow > span > [data-i18n-content] {
  display: inline;
  min-width: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  line-height: inherit;
}

:root:not([data-theme="light"]) .sourceLinks a {
  border-color: rgba(255, 255, 255, .28);
  background: #101214;
}

:root:not([data-theme="light"]) .sourceLinks .sourceLinkManufacturer {
  border-color: rgba(237, 23, 57, .7);
  background: linear-gradient(90deg, rgba(237, 23, 57, .11), transparent 72%), #101214;
}

.interfacePage :is(.button, .iconTextButton, .topAction) {
  font-size: 13px;
}

.interfacePage .smallButton {
  font-size: 11px;
}

:is(
  .equipmentDetailMedia,
  .equipmentPhoto,
  .productPhotoLarge,
  .pickerThumb,
  .comparisonProductMedia
)[data-equipment-id="light-claypaky-tambora-batten-round"] img {
  mix-blend-mode: multiply !important;
  filter: contrast(1.035) drop-shadow(0 22px 24px rgba(0, 0, 0, .22));
}

.equipmentDetailMedia[data-equipment-id="light-claypaky-tambora-batten-round"] img {
  width: 118% !important;
  max-width: 118% !important;
  max-height: 100% !important;
}

.conceptSaveToast {
  position: fixed;
  z-index: 1400;
  right: 20px;
  bottom: 20px;
  display: grid;
  width: min(430px, calc(100vw - 40px));
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(85, 214, 139, .72);
  background: #0d1511;
  color: #f4f1eb;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .62);
  font-size: 14px;
  line-height: 1.45;
}

.conceptSaveToast a {
  color: #77e1a1;
  font-weight: 650;
  text-decoration: none;
}

.conceptSaveToast.isError {
  border-color: rgba(255, 82, 108, .78);
  background: #190b0e;
  color: #ffd9df;
}

@media (max-width: 760px) {
  .specRow > span {
    padding: 8px 10px;
  }

  .equipmentCard {
    contain-intrinsic-size: 610px;
  }

  .conceptSaveToast {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }
}

/* 2026-09-05 · Internal technical-rider parser. */
.riderIntro {
  display: grid;
  gap: 12px;
  margin-bottom: 1px;
  padding: clamp(24px, 4vw, 46px);
  border: 1px solid var(--line);
  background: linear-gradient(125deg, rgba(87, 139, 111, .13), transparent 58%), #070908;
}

.riderIntro > span,
.riderEmpty > span,
.riderResultHero > div > span,
.riderError > span {
  color: #76d99f;
  font: 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.riderIntro h4,
.riderEmpty h4,
.riderError h4 {
  max-width: 940px;
  margin: 0;
  color: #f0eee8;
  font-size: clamp(25px, 3.5vw, 46px);
  font-weight: 430;
  line-height: 1.04;
  letter-spacing: -.04em;
}

.riderIntro p,
.riderEmpty p,
.riderError p {
  max-width: 820px;
  margin: 0;
  color: #a1aaa5;
  font-size: 12px;
  line-height: 1.65;
}

.riderForm { margin-top: 1px; }
.riderForm textarea { min-height: 190px; resize: vertical; line-height: 1.55; }

.riderDropzone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 126px;
  padding: 24px;
  border: 1px dashed #46504b;
  background: #070807;
  transition: border-color 150ms ease, background 150ms ease;
}

.riderDropzone.isDragOver,
.riderDropzone.hasFile {
  border-color: #66c68e;
  background: rgba(56, 151, 96, .08);
}

.riderDropzone > div { display: grid; gap: 7px; }
.riderDropzone span { color: #68c28d; font: 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.riderDropzone strong { color: #eeeae3; font-size: 17px; font-weight: 520; }
.riderDropzone small { color: #838c87; font-size: 10px; }
.riderDropzone button { flex: 0 0 auto; }

.riderFileStatus {
  min-height: 17px;
  margin: -6px 0 0;
  color: #76d99f;
  font-size: 10px;
  overflow-wrap: anywhere;
}

.riderFileStatus.isError { color: #ff8092; }
.riderPrivacy { color: #717a75; font-size: 9px; line-height: 1.55; }
.riderResult { padding: 0; overflow: hidden; }

.riderEmpty,
.riderError {
  display: grid;
  gap: 12px;
  min-height: 270px;
  align-content: center;
  padding: clamp(28px, 5vw, 62px);
  background: linear-gradient(130deg, rgba(74, 105, 87, .08), transparent 52%), #070807;
}

.riderError { border-left: 3px solid #ed1739; background: linear-gradient(130deg, rgba(237, 23, 57, .09), transparent 52%), #080707; }
.riderError > span { color: #ff6b80; }

.riderLoading {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 230px;
  padding: clamp(28px, 5vw, 60px);
  background: #070807;
}

.riderLoading i {
  width: 32px;
  height: 32px;
  border: 2px solid #25332a;
  border-top-color: #69cf94;
  border-radius: 50%;
  animation: riderSpin 800ms linear infinite;
}

.riderLoading div { display: grid; gap: 7px; }
.riderLoading strong { color: #e8e7e1; font-size: 17px; font-weight: 520; }
.riderLoading p { max-width: 640px; margin: 0; color: #838c87; font-size: 11px; line-height: 1.55; }
@keyframes riderSpin { to { transform: rotate(360deg); } }

.riderResultContent { display: grid; min-width: 0; max-width: 100%; background: #050605; }
.riderResultHero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, .46fr);
  gap: 30px;
  align-items: end;
  padding: clamp(28px, 5vw, 58px);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(125deg, rgba(61, 139, 94, .14), transparent 50%), #080a09;
}

.riderResultHero > div { display: grid; min-width: 0; gap: 10px; }
.riderResultHero h4 { margin: 0; color: #f2efe9; font-size: clamp(30px, 4.5vw, 62px); font-weight: 420; line-height: .98; letter-spacing: -.05em; overflow-wrap: anywhere; }
.riderResultHero p { max-width: 790px; margin: 0; color: #9fa8a3; font-size: 12px; line-height: 1.6; }
.riderResultHero dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; margin: 0; border: 1px solid #28302c; background: #28302c; gap: 1px; }
.riderResultHero dl > div { display: grid; gap: 13px; min-width: 0; padding: 16px; background: #090b0a; }
.riderResultHero dt { color: #76807b; font: 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
.riderResultHero dd { margin: 0; color: #e9ece8; font-size: clamp(23px, 3vw, 38px); font-weight: 430; }

.riderClientRule {
  margin: 0;
  padding: 14px clamp(20px, 4vw, 42px);
  border-bottom: 1px solid var(--line);
  background: #071009;
  color: #91b59e;
  font-size: 10px;
  line-height: 1.5;
}

.riderDepartments { display: grid; }
.riderDepartment { min-width: 0; border-bottom: 1px solid var(--line); }
.riderDepartment > header { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 22px clamp(20px, 4vw, 42px); background: #080908; }
.riderDepartment > header span { color: #69c991; font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.riderDepartment > header h5 { margin: 0; color: #eeece7; font-size: 23px; font-weight: 470; letter-spacing: -.025em; }
.riderDepartment > header small { color: #77807b; font-size: 9px; }
.riderTableWrap { overflow-x: auto; }
.riderDepartment table { width: 100%; min-width: 940px; border-collapse: collapse; table-layout: fixed; }
.riderDepartment th { padding: 10px 16px; border: 1px solid #282d2a; background: #050605; color: #69716d; font: 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.riderDepartment th:nth-child(1), .riderDepartment th:nth-child(2) { width: 23%; }
.riderDepartment th:nth-child(3) { width: 29%; }
.riderDepartment th:nth-child(4) { width: 25%; }
.riderDepartment td { padding: 16px; border: 1px solid #282d2a; vertical-align: top; background: #080908; color: #a9b0ac; }
.riderDepartment td strong { display: block; color: #e3e3dd; font-size: 12px; font-weight: 540; line-height: 1.4; overflow-wrap: anywhere; }
.riderDepartment td small { display: block; margin-top: 7px; color: #76c795; font-size: 10px; }
.riderDepartment td ul { display: grid; gap: 5px; margin: 0; padding-left: 16px; color: #9ba39f; font-size: 10px; line-height: 1.45; }
.riderDepartment td p { margin: 8px 0 0; color: #8b948f; font-size: 10px; line-height: 1.5; }
.riderReviewState { display: inline-flex; padding: 5px 7px; border: 1px solid #3c4b42; color: #9fcdb1; font: 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; text-transform: uppercase; }

.riderQuestionBlock,
.riderWarnings { margin: clamp(20px, 4vw, 42px); border: 1px solid #343a37; background: #080908; }
.riderQuestionBlock > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 20px; border-bottom: 1px solid #343a37; }
.riderQuestionBlock > header span { color: #efb266; font: 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.riderQuestionBlock > header strong { color: #efb266; font-size: 23px; font-weight: 430; }
.riderQuestionBlock ol { display: grid; margin: 0; padding: 0; list-style: none; }
.riderQuestionBlock li { padding: 16px 20px; border-bottom: 1px solid #2b302d; }
.riderQuestionBlock li:last-child { border-bottom: 0; }
.riderQuestionBlock li.isCritical { box-shadow: inset 3px 0 #ed1739; }
.riderQuestionBlock b { color: #dfdfd9; font-size: 12px; font-weight: 520; }
.riderQuestionBlock p { margin: 6px 0 0; color: #89918d; font-size: 10px; line-height: 1.5; }
.riderWarnings { padding: 20px; border-left: 3px solid #e09b48; color: #9ba39f; }
.riderWarnings strong { color: #e4e2dc; font-size: 12px; }
.riderWarnings ul { display: grid; gap: 6px; margin: 12px 0 0; padding-left: 18px; font-size: 10px; line-height: 1.5; }
.riderResultContent > footer { display: flex; justify-content: space-between; gap: 18px; padding: 18px clamp(20px, 4vw, 42px); border-top: 1px solid var(--line); color: #707975; font-size: 9px; }

html[data-theme="light"] :is(.riderIntro, .riderForm, .riderEmpty, .riderLoading, .riderResultContent, .riderResultHero, .riderDepartment > header, .riderDepartment td, .riderQuestionBlock, .riderWarnings) { background-color: var(--surface); }
html[data-theme="light"] :is(.riderIntro h4, .riderEmpty h4, .riderError h4, .riderResultHero h4, .riderDepartment > header h5, .riderDepartment td strong, .riderQuestionBlock b, .riderWarnings strong) { color: var(--text-primary); }
html[data-theme="light"] :is(.riderIntro p, .riderEmpty p, .riderError p, .riderResultHero p, .riderDepartment td, .riderDepartment td ul, .riderDepartment td p, .riderQuestionBlock p, .riderWarnings) { color: var(--text-muted); }

@media (max-width: 900px) {
  .riderResultHero { grid-template-columns: 1fr; }
  .riderDropzone { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 620px) {
  .riderIntro, .riderEmpty, .riderError { padding: 24px 18px; }
  .riderResultHero { padding: 28px 18px; }
  .riderResultHero dl { width: 100%; }
  .riderDepartment > header { grid-template-columns: 28px minmax(0, 1fr); padding: 18px; }
  .riderDepartment > header small { grid-column: 2; }
  .riderDepartment table { min-width: 0; }
  .riderDepartment thead { display: none; }
  .riderDepartment tbody, .riderDepartment tr, .riderDepartment td { display: block; width: 100%; }
  .riderDepartment tr { border-bottom: 7px solid #050605; }
  .riderDepartment td { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; border-width: 0 0 1px; }
  .riderDepartment td::before { color: #69716d; content: attr(data-label); font: 8px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
  .riderDepartment td > :is(strong, ul, span),
  .riderDepartment td > small,
  .riderDepartment td > p { grid-column: 2; }
  .riderQuestionBlock, .riderWarnings { margin: 18px; }
  .riderResultContent > footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .riderLoading i { animation-duration: 1.8s; }
}

/* Equipment cards: media proportions must not depend on document count. */
.dialogHero { align-items: start; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.dialogHero > div { min-width: 0; }
:root .dialogHero .productPhotoLarge,
:root .equipmentDetailMedia {
  position: relative;
  align-self: start;
  width: 100%;
  min-height: 0 !important;
  height: clamp(260px, 36vw, 460px);
  max-height: 60vh;
  overflow: hidden;
}
:root .dialogHero .productPhotoLarge img,
:root .equipmentDetailMedia img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: clamp(18px, 3vw, 32px);
  object-fit: contain !important;
  object-position: center;
  transform: none !important;
}
.equipmentDetailHero { align-items: start; }
.equipmentDetailCopy h1 { font-size: clamp(32px, 4.2vw, 72px); line-height: 1.04; overflow-wrap: anywhere; }
.sourceLinks { display: grid; width: 100%; min-width: 0; gap: 10px; }
.sourceLinks > a { width: 100%; min-width: 0; min-height: 48px; }
.sourceDocuments { min-width: 0; border: 1px solid var(--line); }
.sourceDocuments > summary { padding: 12px; cursor: pointer; font-size: 14px; line-height: 1.4; }
.sourceDocuments > summary span { margin-left: 8px; color: var(--text-muted, #aaa); }
.sourceDocuments > summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.sourceDocumentGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 8px; padding: 0 10px 10px; }
.sourceDocumentGrid a { width: auto; min-width: 0; min-height: 44px; grid-template-columns: minmax(0, 1fr) 24px; }
.sourceDocumentGrid a > span { padding: 8px 10px; }
.sourceLinks a strong { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.sourceDocumentGrid .sourceLinkDocument small { display: none; }
.sourceLinks > .sourceLinkManufacturer small { font-size: 10px; }

/* Preserve the verified manufacturer's Round photo; blend only its white paper
   into the same creme panel used by all equipment, including hover states. */
:root body :is(.interfacePage, .equipmentCard, .compareProduct, .pickerItem, .dialogHero, .equipmentDetailHero)
  :is(.equipmentPhoto, .productPhotoLarge, .equipmentDetailMedia, .pickerThumb, .compareProductImage, .comparisonProductMedia)[data-equipment-id="light-claypaky-tambora-batten-round"] img,
:root body.interfacePage :is(.equipmentPhoto, .productPhotoLarge, .equipmentDetailMedia, .pickerThumb, .compareProductImage, .comparisonProductMedia)[data-equipment-id="light-claypaky-tambora-batten-round"] img {
  mix-blend-mode: multiply !important;
  filter: none !important;
}
@media (max-width: 760px) {
  .dialogHero { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  :root .dialogHero .productPhotoLarge, :root .equipmentDetailMedia { height: clamp(240px, 68vw, 400px); max-height: none; }
}

/* 2026-09-07 · high-contrast UI, separate from photographs and technical canvases. */
:root:not([data-theme="light"]) {
  --background-primary: #000;
  --background-secondary: #000;
  --surface: #000;
  --elevated-surface: #080808;
  --sunken-surface: #000;
  --subtle-surface: #101010;
  --text-primary: #fff;
  --text-secondary: #fff;
  --text-muted: #e8e8e8;
  --header-surface: rgba(0, 0, 0, .96);
  --border: rgba(255, 255, 255, .28);
  --border-strong: rgba(255, 255, 255, .6);
  --control-surface: #181818;
  --control-hover: #282828;
  --control-text: #fff;
  --control-glow: rgba(255, 255, 255, .12);
}
:root[data-theme="light"] {
  --background-primary: #fff;
  --background-secondary: #fff;
  --surface: #fff;
  --elevated-surface: #fff;
  --sunken-surface: #fff;
  --subtle-surface: #f5f5f5;
  --text-primary: #000;
  --text-secondary: #000;
  --text-muted: #222;
  --header-surface: rgba(255, 255, 255, .97);
  --border: rgba(0, 0, 0, .24);
  --border-strong: rgba(0, 0, 0, .65);
  --control-surface: #111;
  --control-hover: #292929;
  --control-text: #fff;
  --control-glow: rgba(0, 0, 0, .13);
}
:root body { background: var(--background-primary); color: var(--text-primary); }
:root body :is(.equipmentCardBody, .equipmentSpecsPanel .specGroup, .toolPanel, .toolResult,
  .filters, .filterPanel, .conceptNotes, .conceptLibrary, .requestForm, .footer) {
  background: var(--surface);
  color: var(--text-primary);
  border-color: var(--border);
}
:root body :is(.nav a, .breadcrumb, .sectionKicker, .equipmentCard p,
  .equipmentDetailCopy > p, .equipmentApplication p, .equipmentKeySpecs span,
  .toolHeader p, .toolForm label, .toolResultHead > p, .toolResultSections ul,
  .toolSafetyNote, .filterBlock > span, .searchBox > span,
  .sourceLinks a small, .cinematicFooter small) { color: var(--text-secondary); }
:root body #resultCount small { color: var(--text-secondary); }
:root body .specRow > span { background: var(--surface); color: var(--text-primary); }
:root body .specRow:nth-child(even) > span { background: var(--subtle-surface); }
:root body .specRow > span > [data-i18n-content] { background: transparent; color: inherit; }
:root body :is(.toolForm, .requestForm, .accountForm) :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), textarea, select) {
  border-color: var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
}
:root body :is(.toolForm, .requestForm, .accountForm) :is(input, textarea)::placeholder { color: var(--text-muted); opacity: 1; }
:root body :is(.buttonGhost, .smallButton:not(.active), .iconTextButton, .topAction,
  .accountTopAction, .catalogFilterToggle, .catalogQuickFilters button:not(.isActive),
  .globalFeedbackTrigger, [data-concept-attachment-open], [data-concept-attachment-remove]) {
  background: var(--control-surface);
  color: var(--control-text);
  border-color: var(--border-strong);
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 0 14px var(--control-glow);
}
:root body :is(.buttonGhost, .smallButton, .iconTextButton, .topAction, .accountTopAction,
  .catalogFilterToggle, .catalogQuickFilters button, .globalFeedbackTrigger,
  [data-concept-attachment-open], [data-concept-attachment-remove]):not(:disabled):is(:hover, :focus-visible) {
  background: var(--control-hover); color: var(--control-text); border-color: var(--accent);
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 0 20px var(--control-glow);
}
:root body :is(button, a, input, textarea, select, summary):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
:root body :is(button, .button):disabled { opacity: .55; box-shadow: none; cursor: not-allowed; }
:root body .conceptResultNotice { padding: 12px 14px; border-left: 3px solid var(--border-strong); background: var(--subtle-surface); color: var(--text-primary); font-size: 14px; line-height: 1.5; }
:root body[data-page="account"] :is(.accountSettingsCard, .accountAdminMessageDesk) { background: var(--surface); color: var(--text-primary); }
:root body[data-page="account"] :is(.accountAdminRegistryStatus:not([data-type="error"]), .accountAdminMessageDelivery, .accountAdminMessageDesk h4) { color: var(--text-secondary); }
:root body[data-page="account"] :is(.accountAdminRegistryTabs button, .accountAdminTable button, .accountAdminTable a, .accountAdminTable select) {
  background: var(--control-surface); color: var(--control-text); border-color: var(--border-strong);
}
:root body[data-page="account"] .accountAdminRegistryTabs button.isActive { border-color: var(--accent); box-shadow: inset 0 -3px var(--accent); }
:root body[data-page="account"] .accountConceptAccess { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--text-primary); font-size: 12px; line-height: 1.4; }
:root body[data-page="account"] .accountConceptAccess input { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--accent); }
.conceptMemoryStatus { margin: 10px 0 0; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.conceptMemoryList:not([hidden]) { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 16px; max-height: 580px; overflow: auto; margin-top: 16px; padding: 4px; }
.conceptMemoryCard { min-width: 0; padding: 12px; background: var(--surface); color: var(--text-primary); border: 1px solid var(--border-strong); }
.conceptMemoryCard img { display: block; width: 100%; height: 130px; object-fit: contain; }
.conceptMemoryCard p { margin: 12px 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.conceptMemoryCard > div { display: flex; flex-wrap: wrap; gap: 8px; }
.conceptMemoryCard button { min-height: 44px; padding: 8px 12px; color: var(--control-text); background: var(--control-surface); border: 1px solid var(--border-strong); cursor: pointer; }


/* 2026-09-08 · compact equipment pages, cards and specifications. */
#equipmentDetail {
  --equipment-gutter: clamp(18px, 4.2vw, 64px);
}
#equipmentDetail .equipmentDetailHero {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  min-height: 0;
  margin: 0;
  padding: 30px var(--equipment-gutter);
}
#equipmentDetail .equipmentDetailCopy {
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 10px 0;
}
#equipmentDetail .equipmentDetailCopy .breadcrumb {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.4;
}
#equipmentDetail .equipmentDetailCopy .sectionKicker {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .08em;
}
#equipmentDetail .equipmentDetailCopy h1 {
  max-width: 24ch;
  margin: 16px 0;
  font-size: clamp(36px, 3.4vw, 48px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}
#equipmentDetail .equipmentDetailCopy > p {
  max-width: 62ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}
#equipmentDetail .equipmentDetailActions { gap: 8px; margin-top: 22px; }
#equipmentDetail .equipmentDetailActions .button {
  min-height: 44px;
  padding: 11px 16px;
  font-size: 13px;
  line-height: 1.4;
}
:root #equipmentDetail .equipmentDetailMedia {
  align-self: center;
  height: clamp(330px, 32vw, 440px);
  min-height: 0 !important;
  max-height: none;
}
:root #equipmentDetail .equipmentDetailMedia img {
  padding: 38px 30px !important;
  object-fit: contain !important;
}
#equipmentDetail .equipmentDetailMedia > span { top: 16px; left: 18px; font-size: 10px; }
#equipmentDetail .equipmentDetailMedia small { right: 18px; bottom: 16px; font-size: 9px; }
#equipmentDetail :is(.equipmentHighlights, .equipmentSpecsSection, .equipmentDocuments) {
  min-height: 0;
  margin: 0;
  padding: 28px var(--equipment-gutter);
}
#equipmentDetail :is(.equipmentHighlights, .equipmentSpecsSection, .equipmentDocuments) .sectionHead {
  display: block;
  margin: 0 0 18px;
  padding: 0;
}
#equipmentDetail :is(.equipmentHighlights, .equipmentSpecsSection, .equipmentDocuments) h2 {
  max-width: none;
  margin: 0 0 18px;
  font-size: clamp(24px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -.03em;
}
#equipmentDetail :is(.equipmentHighlights, .equipmentSpecsSection, .equipmentDocuments) .sectionHead h2 { margin: 8px 0 0; }
#equipmentDetail .equipmentHighlights { border-bottom: 1px solid var(--border); }
#equipmentDetail .equipmentKeySpecs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border: 1px solid var(--border);
  background: var(--border);
}
#equipmentDetail .equipmentKeySpecs:has(> div:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#equipmentDetail .equipmentKeySpecs > div {
  justify-content: flex-start;
  gap: 7px;
  min-width: 0;
  min-height: 0;
  padding: 14px 16px;
  border: 0;
  background: var(--subtle-surface);
}
#equipmentDetail .equipmentKeySpecs > div > span {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
#equipmentDetail .equipmentKeySpecs strong {
  display: block;
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
#equipmentDetail .equipmentKeySpecs strong > [data-i18n-content] {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
#equipmentDetail .equipmentSpecsPanel {
  display: block;
  border-top: 1px solid var(--border);
}
#equipmentDetail .equipmentSpecsPanel .specGroup {
  display: grid;
  grid-template-columns: minmax(160px, 21%) minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
#equipmentDetail .specGroup h3 {
  margin: 0;
  padding: 17px 18px 17px 0;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}
#equipmentDetail .specList { gap: 0; margin: 0; border: 0; background: transparent; }
#equipmentDetail .specRow {
  grid-template-columns: minmax(150px, 36%) minmax(0, 1fr);
  gap: 0;
  border: 0;
  background: transparent;
}
#equipmentDetail .specRow + .specRow { border-top: 1px solid var(--border); }
#equipmentDetail .specRow > span {
  padding: 11px 14px;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: normal;
}
#equipmentDetail .specRow > span:first-child { color: var(--text-secondary); }
#equipmentDetail .equipmentDocuments { padding-top: 16px; border-top: 1px solid var(--border); }
#equipmentDetail .equipmentDocuments .sourceLinks { gap: 8px; max-width: 100%; }
#equipmentDetail .equipmentDocuments .sourceLinks > a { min-height: 44px; }

/* A card grows with its content; image and metadata no longer reserve empty rows. */
body[data-page="category"] .equipmentGrid { align-items: stretch; }
body.interfacePage[data-page="category"] .equipmentCard {
  grid-template-rows: 220px minmax(0, 1fr) auto;
  min-height: 0;
  contain-intrinsic-size: 510px;
}
body.interfacePage[data-page="category"] .equipmentPhoto { height: 220px; min-height: 0; }
body.interfacePage[data-page="category"] .equipmentCard .equipmentPhoto img {
  width: 78% !important;
  height: 76% !important;
  max-width: 78% !important;
  max-height: 76% !important;
  padding: 0 !important;
  object-fit: contain !important;
}
body.interfacePage[data-page="category"] .equipmentCardBody { min-height: 0; padding: 17px 18px 14px; }
body.interfacePage[data-page="category"] .cardTop {
  justify-content: flex-start;
  gap: 6px 8px;
  min-height: 0;
  margin-bottom: 10px;
}
body.interfacePage[data-page="category"] .cardTop .badge {
  min-height: 0;
  padding: 3px 6px;
  font-size: 11px;
  line-height: 1.4;
}
body.interfacePage[data-page="category"] .cardTop .statusBadge {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.4;
}
body.interfacePage[data-page="category"] .equipmentCard h3 {
  display: block;
  min-height: 0;
  margin: 0;
  overflow: visible;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset;
}
body.interfacePage[data-page="category"] .equipmentCard p {
  min-height: 0;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  -webkit-line-clamp: 3;
}
body.interfacePage[data-page="category"] .cardMeta { gap: 5px 10px; margin: 12px 0 0; }
body.interfacePage[data-page="category"] .cardMeta .badge {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.4;
}
body.interfacePage[data-page="category"] .cardActions { gap: 6px; min-height: 0; padding: 0 18px 18px; }
body.interfacePage[data-page="category"] .cardActions .smallButton {
  min-height: 40px;
  padding: 9px 8px;
  font-size: 12px;
  line-height: 1.3;
}
body.interfacePage[data-page="category"] .cardActions .smallButton:last-child { grid-column: 1 / -1; }

/* Quick view follows the same type scale and keeps every specification available. */
:root body .itemDialog {
  width: min(1040px, calc(100% - 32px));
  max-height: 88vh;
  max-height: 88svh;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  color: var(--text-primary);
}
.itemDialog .dialogClose { z-index: 5; }
.itemDialog .dialogHero {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 24px;
  padding: 28px 48px 24px 24px;
}
:root .itemDialog .dialogHero .productPhotoLarge { height: 320px; min-height: 0 !important; max-height: none; }
:root .itemDialog .dialogHero .productPhotoLarge img { padding: 26px !important; object-fit: contain !important; }
.itemDialog .dialogHero h2 {
  margin: 12px 0;
  font-size: clamp(28px, 2.8vw, 36px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.itemDialog .dialogHero p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; }
.itemDialog .dialogHero .cardMeta { gap: 6px; margin: 12px 0; }
.itemDialog .dialogHero .button { min-height: 42px; margin-top: 10px; padding: 10px 13px; font-size: 13px; line-height: 1.4; }
:root body .itemDialog .specGroup { margin: 0 24px; padding: 16px 0; border-top: 1px solid var(--border); }
.itemDialog .specGroup h3 { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.4; }
.itemDialog .specList { margin-top: 10px; }
.itemDialog .specRow { grid-template-columns: minmax(150px, 35%) minmax(0, 1fr); }
:root body .itemDialog .specRow > span { padding: 10px 12px; font-size: 14px; line-height: 1.5; }

@media (max-width: 900px) {
  #equipmentDetail .equipmentDetailHero { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 24px; }
  #equipmentDetail .equipmentDetailCopy { padding: 0; }
  #equipmentDetail .equipmentDetailCopy h1 { max-width: 28ch; }
  :root #equipmentDetail .equipmentDetailMedia { height: 380px; }
  #equipmentDetail .equipmentSpecsPanel .specGroup { grid-template-columns: minmax(0, 1fr); }
  #equipmentDetail .specGroup h3 { padding: 16px 0 12px; }
  #equipmentDetail .specList { padding-bottom: 14px; }
}
@media (max-width: 760px) {
  #equipmentDetail .equipmentDetailHero { width: 100%; max-width: 100%; padding: 22px var(--equipment-gutter); }
  #equipmentDetail .equipmentDetailCopy { width: 100%; max-width: 100%; min-height: 0; padding: 0; }
  #equipmentDetail .equipmentDetailCopy .breadcrumb { margin-bottom: 16px; font-size: 12px; }
  #equipmentDetail .equipmentDetailCopy h1 { margin: 12px 0; font-size: clamp(28px, 7.5vw, 32px); }
  #equipmentDetail .equipmentDetailCopy > p { font-size: 14px; }
  #equipmentDetail .equipmentDetailActions { margin-top: 18px; }
  #equipmentDetail .equipmentDetailActions .button { flex: 1 1 145px; }
  :root #equipmentDetail .equipmentDetailMedia { height: clamp(250px, 65vw, 350px); }
  :root #equipmentDetail .equipmentDetailMedia img { padding: 32px 24px !important; }
  #equipmentDetail :is(.equipmentHighlights, .equipmentSpecsSection, .equipmentDocuments) { padding: 22px var(--equipment-gutter); }
  #equipmentDetail :is(.equipmentHighlights, .equipmentSpecsSection, .equipmentDocuments) h2 { font-size: 24px; }
  #equipmentDetail .equipmentKeySpecs,
  #equipmentDetail .equipmentKeySpecs:has(> div:nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #equipmentDetail .equipmentKeySpecs > div { grid-column: auto; padding: 12px; }
  #equipmentDetail .equipmentKeySpecs strong { font-size: 21px; }
  #equipmentDetail .specRow { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
  #equipmentDetail .specRow > span { padding: 10px; font-size: 13px; }
  body.interfacePage[data-page="category"] .equipmentCard { grid-template-rows: 230px minmax(0, 1fr) auto; contain-intrinsic-size: 520px; }
  body.interfacePage[data-page="category"] .equipmentPhoto { height: 230px; }
  body.interfacePage[data-page="category"] .equipmentCard h3 { font-size: 20px; }
  :root body .itemDialog { width: calc(100% - 20px); }
  .itemDialog .dialogHero { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 44px 16px 20px; }
  :root .itemDialog .dialogHero .productPhotoLarge { height: 260px; }
  .itemDialog .dialogHero h2 { font-size: 28px; }
  :root body .itemDialog .specGroup { margin: 0 16px; }
  .itemDialog .specRow { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
  :root body .itemDialog .specRow > span { padding: 9px; font-size: 13px; }
}

/* Supplementary manufacturer prose follows the technical rows. */
.equipmentSupportingDetails { min-width: 0; margin-top: 24px; border: 1px solid var(--border); background: var(--subtle-surface); }
.equipmentSupportingDetails > summary { padding: 16px 20px; cursor: pointer; font-size: 16px; line-height: 1.4; color: var(--text-primary); }
.equipmentSupportingDetails > summary:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.equipmentSupportingDetails .specGroup { padding-inline: 16px; }

/* 2026-09-08 · shared heading scale and compact section rhythm. */
:root {
  --site-heading-page: clamp(34px, 3.4vw, 48px);
  --site-heading-section: clamp(26px, 2.25vw, 32px);
  --site-section-space: clamp(36px, 4vw, 56px);
}
html[data-theme] body[data-page]:is(.cinematicPage, .interfacePage) main h1 {
  font-size: var(--site-heading-page) !important;
  line-height: 1.1 !important;
  letter-spacing: -.04em !important;
  font-weight: 500;
}
html[data-theme] body[data-page]:is(.cinematicPage, .interfacePage) main h2 {
  font-size: var(--site-heading-section) !important;
  line-height: 1.15 !important;
  letter-spacing: -.025em !important;
}
html[data-theme] body[data-page] main > .section,
html[data-theme] body[data-page] main > section > .section { padding-block: var(--site-section-space); }
html[data-theme] body[data-page] main .pageHero {
  min-height: 0 !important;
  padding-top: var(--site-section-space) !important;
  padding-bottom: 32px !important;
}
html[data-theme] body[data-page] main .pageHero h1 { max-width: 920px; margin: 16px 0; }
html[data-theme] body[data-page] main .pageHero p { max-width: 760px; margin: 16px 0 0; font-size: 17px; line-height: 1.55; }
html[data-theme] body[data-page] main :is(.sectionHead, .cinematicSectionHead) { margin-bottom: 24px; gap: 24px; }
body[data-page="home"] .cinematicHero h1 { max-width: 850px; }
body[data-page="about"] .aboutSection { padding-top: 0; }
body[data-page="about"] .aboutGrid { grid-template-columns: 1.1fr 1fr; gap: 18px; border: 0; background: transparent; }
body[data-page="about"] .aboutGrid > :is(p, ul) { margin: 0; padding: 24px; border: 1px solid var(--border); background: var(--subtle-surface); color: var(--text-primary); font-size: 17px; line-height: 1.6; }
body[data-page="about"] .aboutGrid ul { padding-left: 42px; }
body[data-page="about"] .processGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; border: 0; border-image: none; background: transparent; }
body[data-page="about"] .processGrid::before,
body[data-page="about"] .processGrid article::before { display: none; }
body[data-page="about"] .processGrid article { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: auto auto; gap: 7px 18px; min-height: 0; padding: 20px 22px; border: 1px solid var(--border); background: var(--subtle-surface); }
body[data-page="about"] .processGrid article:last-child { grid-column: 1 / -1; }
body[data-page="about"] .processGrid b { grid-column: 1; grid-row: 1 / 3; align-self: start; color: var(--red); font-size: 13px; line-height: 1.6; }
body[data-page="about"] .processGrid span { grid-column: 2; align-self: start; margin: 0; color: var(--text-primary); font-size: 18px; line-height: 1.35; }
body[data-page="about"] .processGrid small { grid-column: 2; max-width: none; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
body[data-page="about"] .requestIntro > p { font-size: 16px; line-height: 1.55; }
.aboutContacts { display: grid; gap: 12px; margin-top: 24px; }
.aboutContactCard { display: grid; gap: 6px; padding: 20px; border: 1px solid var(--border); border-left: 2px solid var(--red); background: var(--subtle-surface); }
.aboutContactCard strong { color: var(--text-primary); font-size: 19px; line-height: 1.3; font-weight: 500; }
.aboutContactCard span { color: var(--text-secondary); font-size: 14px; line-height: 1.4; }
.aboutContactCard a { width: fit-content; margin-top: 6px; color: var(--text-primary); font-size: 18px; line-height: 1.4; text-decoration: none; }
.aboutContactCard a:hover { text-decoration: underline; text-underline-offset: 4px; }
.aboutContactCard a:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }
@media (max-width: 760px) {
  :root { --site-heading-page: clamp(28px, 7.5vw, 32px); --site-heading-section: 25px; --site-section-space: 28px; }
  html[data-theme] body[data-page] main .pageHero { padding-bottom: 24px !important; }
  html[data-theme] body[data-page] main .pageHero p { font-size: 15px; }
  html[data-theme] body[data-page] main :is(.sectionHead, .cinematicSectionHead) { margin-bottom: 20px; gap: 16px; }
  body[data-page="about"] .aboutGrid, body[data-page="about"] .processGrid { grid-template-columns: minmax(0, 1fr); }
  body[data-page="about"] .aboutGrid > :is(p, ul) { padding: 20px; font-size: 15px; }
  body[data-page="about"] .aboutGrid ul { padding-left: 36px; }
  body[data-page="about"] .processGrid article { grid-template-columns: 26px minmax(0, 1fr); gap: 6px 12px; padding: 18px; }
}
html[data-theme] body[data-page="about"] :is(.aboutSection, .processSalesBand, .requestSection) { background: var(--background-primary); }
html[data-theme] body[data-page]:is(.cinematicPage, .interfacePage) main h2 { font-weight: 500; }

/* Alpha-only cutouts reveal the existing cream panel without tinting the fixture. */
html:root[data-theme] body[data-page] img[src*="assets/equipment/presentation-20260908/"] {
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Section whitespace exposes stars; cards, controls and photo surfaces retain their fills. */
html:root[data-theme] body[data-page] :is(.compactBand, .compareSection, .toolsSection, .aboutSection, .toolHubFlow, .eventReelSection, .projectArchive),
html[data-theme] body[data-page="about"] :is(.processSalesBand, .requestSection) {
  background: transparent;
}

.conceptAttachmentPreviews { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 8px; max-height: 320px; overflow: auto; }
.conceptAttachmentPreviews[hidden] { display: none; }
.conceptAttachmentPreviews .conceptAttachmentPreview { margin: 0; min-width: 0; }
.conceptAttachmentPreviews .conceptAttachmentPreview b { overflow-wrap: anywhere; }

/* Full welcome photograph on the Conceptor route; other page heroes retain their scale. */
html:root[data-theme] body[data-page="concept-generator"] main > .conceptPageHero {
  display: flex;
  align-items: flex-end;
  min-height: 0 !important;
  height: auto;
  aspect-ratio: 1672 / 941;
  padding-top: clamp(24px, 4vw, 56px) !important;
  padding-bottom: clamp(24px, 4vw, 56px) !important;
  background-size: 100% 100%, 100% 100%, contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 760px) {
  html:root[data-theme] body[data-page="concept-generator"] main > .conceptPageHero {
    --concept-welcome-photo-height: calc(100vw * 941 / 1672);
    align-items: stretch;
    aspect-ratio: auto;
    padding-top: calc(var(--concept-welcome-photo-height) + 24px) !important;
    padding-bottom: 24px !important;
    background-size:
      100% var(--concept-welcome-photo-height),
      100% var(--concept-welcome-photo-height),
      100% auto !important;
    background-position: center top !important;
  }
}

/* Per-concept iteration limit; reuses the main site's theme and controls. */
.conceptIterationLimitDialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100svh - 48px); margin: auto; padding: 28px; border: 1px solid var(--border-strong); background: var(--background-primary); color: var(--text-primary); overflow: auto; }
.conceptIterationLimitDialog::backdrop { background: rgba(0, 0, 0, .72); }
.conceptIterationLimitDialog h2 { margin: 0 0 18px; font-size: clamp(24px, 4vw, 32px); line-height: 1.15; }
.conceptIterationLimitDialog p { margin: 14px 0; color: var(--text-secondary); font-size: 16px; line-height: 1.55; }
.conceptIterationLimitActions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.conceptIterationLimitActions .button { min-width: 0; min-height: 44px; flex: 1 1 190px; white-space: normal; text-align: center; }
@media (max-width: 760px) { .conceptIterationLimitDialog { padding: 22px; } }

/* Responsive delivery of the same public route photographs. */
@supports (background-image: -webkit-image-set(url("x") 1x)) {
body[data-page="catalog"] { --route-hero-image: -webkit-image-set(url("assets/photo-delivery-20260910/hero-catalog-control-e7366e8631-1600.webp") 1x, url("assets/projects/selected-2026/hero-catalog-control.webp") 2x); }
body[data-page="category"][data-category="light"] { --route-hero-image: -webkit-image-set(url("assets/photo-delivery-20260910/hero-light-transport-c8567cc188-1600.webp") 1x, url("assets/projects/selected-2026/hero-light-transport.webp") 2x); }
body[data-page="category"][data-category="audio"] { --route-hero-image: -webkit-image-set(url("assets/photo-delivery-20260910/hero-audio-etude-5241935f84-1600.webp") 1x, url("assets/projects/selected-2026/hero-audio-etude.webp") 2x); }
body[data-page="category"][data-category="video"] { --route-hero-image: -webkit-image-set(url("assets/photo-delivery-20260910/hero-video-esports-1ae9d78c72-1600.webp") 1x, url("assets/projects/selected-2026/hero-video-esports.webp") 2x); }
body[data-page="category"][data-category="comms"] { --route-hero-image: -webkit-image-set(url("assets/photo-delivery-20260910/hero-comms-tolstoy-c3ea119673-1600.webp") 1x, url("assets/projects/selected-2026/hero-comms-tolstoy.webp") 2x); }
body[data-page="compare"] { --route-hero-image: -webkit-image-set(url("assets/photo-delivery-20260910/hero-compare-cinema-ad09324e8a-1600.webp") 1x, url("assets/projects/selected-2026/hero-compare-cinema.webp") 2x); }
body[data-page="concept-generator"] { --route-hero-image: -webkit-image-set(url("assets/projects/selected-2026/hero-concept-rezim-1600.webp") 1x, url("assets/projects/selected-2026/hero-concept-rezim-1672.webp") 2x); }
body[data-page="tools"] { --route-hero-image: -webkit-image-set(url("assets/photo-delivery-20260910/hero-tools-kremlin-setup-8a03b882c2-1600.webp") 1x, url("assets/projects/selected-2026/hero-tools-kremlin-setup.webp") 2x); }
body[data-page="about"] { --route-hero-image: -webkit-image-set(url("assets/photo-delivery-20260910/hero-about-kremlin-live-be04d42187-1600.webp") 1x, url("assets/projects/selected-2026/hero-about-kremlin-live.webp") 2x); }
body[data-page="account"] { --route-hero-image: -webkit-image-set(url("assets/photo-delivery-20260910/bel-suono-2026-hero-2606f66ae9-1600.webp") 1x, url("assets/projects/bel-suono-2026-hero.jpg") 2x); }
@media (max-width: 760px) {
body[data-page="catalog"] { --route-hero-image: -webkit-image-set(url("assets/photo-delivery-20260910/hero-catalog-control-e7366e8631-800.webp") 1x, url("assets/photo-delivery-20260910/hero-catalog-control-e7366e8631-1600.webp") 2x); }
body[data-page="category"][data-category="light"] { --route-hero-image: -webkit-image-set(url("assets/photo-delivery-20260910/hero-light-transport-c8567cc188-800.webp") 1x, url("assets/photo-delivery-20260910/hero-light-transport-c8567cc188-1600.webp") 2x); }
body[data-page="category"][data-category="audio"] { --route-hero-image: -webkit-image-set(url("assets/photo-delivery-20260910/hero-audio-etude-5241935f84-800.webp") 1x, url("assets/photo-delivery-20260910/hero-audio-etude-5241935f84-1600.webp") 2x); }
body[data-page="category"][data-category="video"] { --route-hero-image: -webkit-image-set(url("assets/photo-delivery-20260910/hero-video-esports-1ae9d78c72-800.webp") 1x, url("assets/photo-delivery-20260910/hero-video-esports-1ae9d78c72-1600.webp") 2x); }
body[data-page="category"][data-category="comms"] { --route-hero-image: -webkit-image-set(url("assets/photo-delivery-20260910/hero-comms-tolstoy-c3ea119673-800.webp") 1x, url("assets/photo-delivery-20260910/hero-comms-tolstoy-c3ea119673-1600.webp") 2x); }
body[data-page="compare"] { --route-hero-image: -webkit-image-set(url("assets/photo-delivery-20260910/hero-compare-cinema-ad09324e8a-800.webp") 1x, url("assets/photo-delivery-20260910/hero-compare-cinema-ad09324e8a-1600.webp") 2x); }
body[data-page="concept-generator"] { --route-hero-image: -webkit-image-set(url("assets/projects/selected-2026/hero-concept-rezim-800.webp") 1x, url("assets/projects/selected-2026/hero-concept-rezim-1600.webp") 2x); }
body[data-page="tools"] { --route-hero-image: -webkit-image-set(url("assets/photo-delivery-20260910/hero-tools-kremlin-setup-8a03b882c2-800.webp") 1x, url("assets/photo-delivery-20260910/hero-tools-kremlin-setup-8a03b882c2-1600.webp") 2x); }
body[data-page="about"] { --route-hero-image: -webkit-image-set(url("assets/photo-delivery-20260910/hero-about-kremlin-live-be04d42187-800.webp") 1x, url("assets/photo-delivery-20260910/hero-about-kremlin-live-be04d42187-1600.webp") 2x); }
body[data-page="account"] { --route-hero-image: -webkit-image-set(url("assets/photo-delivery-20260910/bel-suono-2026-hero-2606f66ae9-800.webp") 1x, url("assets/photo-delivery-20260910/bel-suono-2026-hero-2606f66ae9-1600.webp") 2x); }
}
}
@supports (background-image: image-set(url("x") 1x)) {
body[data-page="catalog"] { --route-hero-image: image-set(url("assets/photo-delivery-20260910/hero-catalog-control-e7366e8631-1600.webp") 1x, url("assets/projects/selected-2026/hero-catalog-control.webp") 2x); }
body[data-page="category"][data-category="light"] { --route-hero-image: image-set(url("assets/photo-delivery-20260910/hero-light-transport-c8567cc188-1600.webp") 1x, url("assets/projects/selected-2026/hero-light-transport.webp") 2x); }
body[data-page="category"][data-category="audio"] { --route-hero-image: image-set(url("assets/photo-delivery-20260910/hero-audio-etude-5241935f84-1600.webp") 1x, url("assets/projects/selected-2026/hero-audio-etude.webp") 2x); }
body[data-page="category"][data-category="video"] { --route-hero-image: image-set(url("assets/photo-delivery-20260910/hero-video-esports-1ae9d78c72-1600.webp") 1x, url("assets/projects/selected-2026/hero-video-esports.webp") 2x); }
body[data-page="category"][data-category="comms"] { --route-hero-image: image-set(url("assets/photo-delivery-20260910/hero-comms-tolstoy-c3ea119673-1600.webp") 1x, url("assets/projects/selected-2026/hero-comms-tolstoy.webp") 2x); }
body[data-page="compare"] { --route-hero-image: image-set(url("assets/photo-delivery-20260910/hero-compare-cinema-ad09324e8a-1600.webp") 1x, url("assets/projects/selected-2026/hero-compare-cinema.webp") 2x); }
body[data-page="concept-generator"] { --route-hero-image: image-set(url("assets/projects/selected-2026/hero-concept-rezim-1600.webp") 1x, url("assets/projects/selected-2026/hero-concept-rezim-1672.webp") 2x); }
body[data-page="tools"] { --route-hero-image: image-set(url("assets/photo-delivery-20260910/hero-tools-kremlin-setup-8a03b882c2-1600.webp") 1x, url("assets/projects/selected-2026/hero-tools-kremlin-setup.webp") 2x); }
body[data-page="about"] { --route-hero-image: image-set(url("assets/photo-delivery-20260910/hero-about-kremlin-live-be04d42187-1600.webp") 1x, url("assets/projects/selected-2026/hero-about-kremlin-live.webp") 2x); }
body[data-page="account"] { --route-hero-image: image-set(url("assets/photo-delivery-20260910/bel-suono-2026-hero-2606f66ae9-1600.webp") 1x, url("assets/projects/bel-suono-2026-hero.jpg") 2x); }
@media (max-width: 760px) {
body[data-page="catalog"] { --route-hero-image: image-set(url("assets/photo-delivery-20260910/hero-catalog-control-e7366e8631-800.webp") 1x, url("assets/photo-delivery-20260910/hero-catalog-control-e7366e8631-1600.webp") 2x); }
body[data-page="category"][data-category="light"] { --route-hero-image: image-set(url("assets/photo-delivery-20260910/hero-light-transport-c8567cc188-800.webp") 1x, url("assets/photo-delivery-20260910/hero-light-transport-c8567cc188-1600.webp") 2x); }
body[data-page="category"][data-category="audio"] { --route-hero-image: image-set(url("assets/photo-delivery-20260910/hero-audio-etude-5241935f84-800.webp") 1x, url("assets/photo-delivery-20260910/hero-audio-etude-5241935f84-1600.webp") 2x); }
body[data-page="category"][data-category="video"] { --route-hero-image: image-set(url("assets/photo-delivery-20260910/hero-video-esports-1ae9d78c72-800.webp") 1x, url("assets/photo-delivery-20260910/hero-video-esports-1ae9d78c72-1600.webp") 2x); }
body[data-page="category"][data-category="comms"] { --route-hero-image: image-set(url("assets/photo-delivery-20260910/hero-comms-tolstoy-c3ea119673-800.webp") 1x, url("assets/photo-delivery-20260910/hero-comms-tolstoy-c3ea119673-1600.webp") 2x); }
body[data-page="compare"] { --route-hero-image: image-set(url("assets/photo-delivery-20260910/hero-compare-cinema-ad09324e8a-800.webp") 1x, url("assets/photo-delivery-20260910/hero-compare-cinema-ad09324e8a-1600.webp") 2x); }
body[data-page="concept-generator"] { --route-hero-image: image-set(url("assets/projects/selected-2026/hero-concept-rezim-800.webp") 1x, url("assets/projects/selected-2026/hero-concept-rezim-1600.webp") 2x); }
body[data-page="tools"] { --route-hero-image: image-set(url("assets/photo-delivery-20260910/hero-tools-kremlin-setup-8a03b882c2-800.webp") 1x, url("assets/photo-delivery-20260910/hero-tools-kremlin-setup-8a03b882c2-1600.webp") 2x); }
body[data-page="about"] { --route-hero-image: image-set(url("assets/photo-delivery-20260910/hero-about-kremlin-live-be04d42187-800.webp") 1x, url("assets/photo-delivery-20260910/hero-about-kremlin-live-be04d42187-1600.webp") 2x); }
body[data-page="account"] { --route-hero-image: image-set(url("assets/photo-delivery-20260910/bel-suono-2026-hero-2606f66ae9-800.webp") 1x, url("assets/photo-delivery-20260910/bel-suono-2026-hero-2606f66ae9-1600.webp") 2x); }
}
}

/* Shared equipment detail and quick-view layout. Keep all dimensions independent
   of the cinematic page sections so opening a dialog cannot inflate the grid. */
:root body :is(#equipmentDetail, .itemDialog) {
  --equipment-space: clamp(18px, 3.5vw, 52px);
}
:root body #equipmentDetail .equipmentDetailHero {
  display: grid;
  grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 4vw, 56px);
  min-height: 0;
  padding: 28px var(--equipment-space) 24px;
}
:root body #equipmentDetail .equipmentDetailCopy {
  grid-column: 2; grid-row: 1; min-width: 0; padding: 0; align-self: start;
}
:root body #equipmentDetail .equipmentDetailMedia {
  grid-column: 1; grid-row: 1; width: 100%; height: auto !important;
  aspect-ratio: 1; min-height: 0 !important; align-self: start; overflow: hidden;
}
:root body #equipmentDetail .equipmentDetailMedia img {
  width: 100%; height: 100%; padding: 32px !important; object-fit: contain !important;
}
:root body #equipmentDetail .equipmentDetailCopy h1 {
  font-size: clamp(26px, 2.7vw, 38px) !important;
  line-height: 1.12 !important; letter-spacing: -.035em; margin: 12px 0 16px;
}
:root body #equipmentDetail .equipmentDetailCopy > p,
:root body .itemDialog .dialogHeroCopy > p {
  font-size: 14px; line-height: 1.6; margin: 0 0 18px; max-width: 76ch;
}
:root body #equipmentDetail .breadcrumb { margin-bottom: 18px; font-size: 12px; }
:root body :is(#equipmentDetail, .itemDialog) .sectionKicker { font-size: 10px; line-height: 1.6; }
:root body .itemDialog {
  width: min(1120px, calc(100% - 32px)); max-height: 90svh; padding: 0;
}
:root body .itemDialog .dialogHero {
  display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  align-items: start; gap: 28px; padding: 28px 48px 24px 28px;
}
:root body .itemDialog .dialogHero .productPhotoLarge {
  width: 100%; height: auto !important; aspect-ratio: 1; min-height: 0 !important;
  align-self: start; overflow: hidden;
}
:root body .itemDialog .dialogHero .productPhotoLarge img {
  width: 100%; height: 100%; object-fit: contain !important; padding: 28px !important;
}
:root body .itemDialog .dialogHeroCopy { min-width: 0; }
:root body .itemDialog .dialogHeroCopy h2 {
  font-size: clamp(25px, 2.3vw, 32px) !important; line-height: 1.15; margin: 12px 0 14px;
}
:root body .itemDialog .dialogHeroCopy .cardMeta { gap: 5px; margin: 0 0 16px; }
:root body .itemDialog .dialogHeroCopy .badge { font-size: 10px; padding: 3px 6px; }
:root body :is(#equipmentDetail, .itemDialog) .equipmentDetailActions {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0;
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentDetailActions .button {
  min-height: 42px; min-width: 0; font-size: 12px; padding: 11px 16px; line-height: 1.4;
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentDocumentLinks {
  display: block; padding: 16px 0 0; margin: 0; border-top: 1px solid var(--line);
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentDocumentLinks h3 {
  font-size: 11px !important; font-weight: 500; letter-spacing: .05em;
  text-transform: uppercase; line-height: 1.4; margin: 0 0 9px; color: var(--muted);
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentDocumentList {
  display: flex; flex-wrap: wrap; gap: 6px;
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentDocumentList a {
  display: inline-flex; align-items: center; gap: 9px; min-height: 34px; max-width: 100%;
  padding: 7px 10px; margin: 0; border: 1px solid var(--line);
  color: var(--text); background: var(--panel); font-size: 12px; line-height: 1.4;
  text-decoration: none; box-shadow: none; overflow-wrap: anywhere;
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentDocumentList a i {
  flex: 0 0 auto; color: var(--accent); font-style: normal; font-size: 14px;
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentDocumentList a:is(:hover, :focus-visible) {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--panel));
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentExtraDocuments {
  border: 0; padding: 0; margin: 10px 0 0; background: transparent;
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentExtraDocuments summary {
  padding: 0; margin: 0 0 8px; font-size: 12px; line-height: 1.6;
  color: var(--muted); cursor: pointer;
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentExtraDocuments summary span { margin-left: 5px; }
:root body :is(#equipmentDetail, .itemDialog) .equipmentDocumentNote {
  margin: 8px 0; font-size: 12px; line-height: 1.5; color: var(--muted);
}
:root body :is(#equipmentDetail, .itemDialog) :is(.equipmentHighlights, .equipmentSpecsSection) {
  min-height: 0; margin: 0; padding: 24px var(--equipment-space);
}
:root body .itemDialog :is(.equipmentHighlights, .equipmentSpecsSection) { padding: 22px 28px; }
:root body :is(#equipmentDetail, .itemDialog) :is(.equipmentHighlights, .equipmentSpecsSection) h2 {
  font-size: 22px !important; line-height: 1.25; letter-spacing: -.025em; margin: 0 0 16px;
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentSpecsSection .sectionHead {
  display: block; margin: 0; padding: 0;
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentFacts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentFacts > div {
  display: block; min-width: 0; min-height: 0; margin: 0; padding: 14px 16px 16px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel);
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentFacts dt {
  min-height: 2.8em; margin: 0 0 8px; color: var(--muted);
  font-size: 12px; line-height: 1.4; text-transform: none; overflow-wrap: anywhere;
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentFacts dd {
  margin: 0; color: var(--text); font-size: 20px; line-height: 1.35; font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -.015em; overflow-wrap: anywhere;
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentFacts dd span {
  display: inline; font: inherit; color: inherit; text-transform: none; letter-spacing: inherit;
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentSpecsPanel { display: block; padding: 0; }
:root body :is(#equipmentDetail, .itemDialog) .equipmentSpecGroup {
  display: block; padding: 0; margin: 0 0 18px; min-width: 0; border: 1px solid var(--line);
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentSpecGroup h3 {
  padding: 11px 14px; margin: 0; border-bottom: 1px solid var(--line);
  font-size: 14px !important; line-height: 1.5; font-weight: 500; letter-spacing: 0;
  background: var(--panel); color: var(--text);
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentSpecRows {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0;
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentSpecRow {
  display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  align-items: start; min-width: 0; padding: 10px 14px; column-gap: 14px;
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentSpecRowWide {
  grid-column: 1 / -1; grid-template-columns: minmax(0, 21fr) minmax(0, 79fr);
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentSpecRow :is(dt, dd) {
  min-width: 0; margin: 0; padding: 0; line-height: 1.5; text-transform: none;
  letter-spacing: 0; overflow-wrap: anywhere;
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentSpecRow dt { color: var(--muted); font-size: 12px; }
:root body :is(#equipmentDetail, .itemDialog) .equipmentSpecRow dd { color: var(--text); font-size: 13px; }
:root body :is(#equipmentDetail, .itemDialog) .equipmentSpecRow dd span { font: inherit; color: inherit; }
:root body :is(#equipmentDetail, .itemDialog) .equipmentSupportingDetails {
  margin: 20px 0 0; padding: 0; border: 0; background: transparent;
}
:root body :is(#equipmentDetail, .itemDialog) .equipmentSupportingDetails > summary {
  padding: 10px 0; font-size: 13px; color: var(--muted); cursor: pointer;
}
:root body.interfacePage[data-page="category"] .equipmentCard {
  grid-template-rows: auto minmax(0, 1fr) auto;
}
:root body.interfacePage[data-page="category"] .equipmentPhoto {
  width: 100%; height: auto !important; min-height: 0 !important; aspect-ratio: 1;
}
@media (max-width: 950px) {
  :root body #equipmentDetail .equipmentDetailHero { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: 22px; }
  :root body .itemDialog .dialogHero { grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: 20px; }
  :root body :is(#equipmentDetail, .itemDialog) .equipmentSpecRows { grid-template-columns: minmax(0, 1fr); }
  :root body :is(#equipmentDetail, .itemDialog) .equipmentSpecRowWide { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
}
@media (max-width: 680px) {
  :root body #equipmentDetail .equipmentDetailHero { grid-template-columns: minmax(0, 1fr); padding-top: 20px; }
  :root body #equipmentDetail .equipmentDetailMedia { grid-column: 1; grid-row: 1; max-width: 360px; justify-self: center; }
  :root body #equipmentDetail .equipmentDetailCopy { grid-column: 1; grid-row: 2; }
  :root body .itemDialog { width: calc(100% - 16px); max-height: 94svh; }
  :root body .itemDialog .dialogHero { grid-template-columns: minmax(0, 1fr); padding: 44px 16px 20px; }
  :root body .itemDialog .dialogHero .productPhotoLarge { max-width: 320px; justify-self: center; }
  :root body .itemDialog :is(.equipmentHighlights, .equipmentSpecsSection) { padding: 20px 16px; }
  :root body :is(#equipmentDetail, .itemDialog) .equipmentFacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root body :is(#equipmentDetail, .itemDialog) .equipmentFacts > div { padding: 12px; }
  :root body :is(#equipmentDetail, .itemDialog) .equipmentFacts dd { font-size: 18px; }
  :root body :is(#equipmentDetail, .itemDialog) .equipmentSpecRow { padding: 9px 10px; gap: 10px; }
  :root body :is(#equipmentDetail, .itemDialog) .equipmentDocumentList a { min-height: 38px; }
}

:root body :is(#equipmentDetail, .itemDialog) { --equipment-surface: #070808; }
html[data-theme="light"] body :is(#equipmentDetail, .itemDialog) { --equipment-surface: #fff; }
:root body :is(#equipmentDetail, .itemDialog) :is(.equipmentSpecGroup, .equipmentFacts > div) { background: var(--equipment-surface); }

:root body :is(#equipmentDetail, .itemDialog) .equipmentSpecStatement { grid-template-columns: minmax(0, 1fr); }
:root body :is(#equipmentDetail, .itemDialog) .equipmentSpecStatement dt { display: none; }