@font-face {
  font-family: "Case VAR";
  src:
    url("../portfolio-clarity-module/assets/CaseVAR.woff2") format("woff2-variations"),
    url("../portfolio-clarity-module/assets/CaseVAR.woff2") format("woff2");
  font-weight: 50 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Case VAR", "Case", "Helvetica Neue", Arial, sans-serif;
  --ink: #0b1b2b;
  --muted: #777777;
  --soft: #f5f5f5;
  --line: #e7e7e7;
  --electric: #00ffe1;
  --blue: #0b1b2b;
  --midnight: #0b1b2b;
  --radius: 10px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #f6f6f6;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  min-height: 100vh;
}

.workspace {
  min-width: 0;
  background: #f7f7f7;
}

.topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 0 32px;
  color: #8b8b8b;
  font-size: 14px;
}
.topbar .signout {
  position: absolute;
  right: 32px;
  color: #8b8b8b;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.topbar .signout:hover {
  color: var(--ink);
  border-bottom-color: var(--line);
}

.topbar-actions {
  position: absolute;
  right: 32px;
}

.crumb strong {
  color: var(--midnight);
  font-weight: 450;
}

.version-pill {
  display: inline-flex;
  align-items: center;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  color: #777;
  font-size: 13px;
}

.welcome-panel {
  display: grid;
  justify-items: center;
  padding: clamp(64px, 12vh, 118px) 32px 64px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 14px;
  color: #8c8c8c;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.welcome-panel h1 {
  margin: 0;
  color: var(--midnight);
  font-size: clamp(48px, 7vw, 84px);
  font-weight: 520;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.welcome-panel h1 em {
  font-style: italic;
  font-weight: 380;
}

.welcome-panel > p:not(.eyebrow) {
  max-width: 660px;
  margin: 24px 0 0;
  color: #7c7c7c;
  font-size: 18px;
  line-height: 1.35;
}

.hero-search {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 52px;
  align-items: center;
  width: min(760px, 100%);
  min-height: 68px;
  margin-top: 40px;
  border-radius: 16px;
  padding: 0 16px;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 18px 40px rgba(11, 27, 43, 0.18);
}

.hero-search span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 22px;
}

.hero-search input {
  width: 100%;
  border: 0;
  background: transparent;
  color: #fff;
  outline: none;
  font-size: 22px;
}

.hero-search input::placeholder {
  color: rgba(255, 255, 255, 0.68);
}

.hero-search kbd {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  font-family: var(--font-display);
}

.product-tabs {
  display: grid;
  grid-template-columns: 1.18fr repeat(8, minmax(0, 1fr));
  width: min(1320px, 100%);
  gap: 8px;
  margin-top: 26px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}

.product-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #555;
  font-size: 16px;
  font-weight: 430;
  white-space: nowrap;
  transition:
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.product-tab small {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #eeeeee;
  color: #777;
  font-size: 12px;
}

.product-tab:hover {
  color: var(--midnight);
}

.product-tab.is-active {
  background: var(--midnight);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}

.product-tab.is-active small {
  background: var(--electric);
  color: var(--midnight);
}

.product-tab--instructions {
  background: #dff7ff;
  color: var(--midnight);
}

.product-tab--instructions:hover,
.product-tab--instructions:focus-visible {
  background: #c9f2ff;
  color: var(--midnight);
  outline: none;
}

.product-tab--help {
  background: #f4fbfd;
  color: var(--midnight);
}

.product-tab--help:hover,
.product-tab--help:focus-visible {
  background: #e4f8ff;
  color: var(--midnight);
  outline: none;
}

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 760px;
  margin-top: 14px;
}

.quick-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 18px;
  background: #fff;
  color: var(--midnight);
  font-size: 15px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

.quick-chip:hover,
.quick-chip.is-active {
  border-color: #d8d8d8;
  background: #eeeeee;
}

.gallery-view,
.page-view {
  max-width: 1540px;
  margin: 0 auto;
  padding: 0 32px 80px;
}

.section-bar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  min-height: 96px;
  border: 1px solid var(--line);
  border-bottom: 0;
  padding: 22px 24px;
  background: #f7f7f7;
}

.section-bar h2,
.page-toolbar h2 {
  margin: 0;
  color: var(--midnight);
  font-size: 30px;
  font-weight: 430;
  letter-spacing: -0.04em;
}

.section-bar span {
  color: #8c8c8c;
  font-size: 14px;
}

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

.gallery-card {
  position: relative;
  min-height: 370px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 26px;
  background: #f7f7f7;
  color: var(--ink);
  text-align: left;
  transition: background 180ms ease;
}

.gallery-card:hover {
  background: #fff;
}

.status-badge {
  position: absolute;
  z-index: 2;
  top: 30px;
  right: 30px;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 999px;
  padding: 0 10px;
  background: var(--midnight);
  color: #fff;
  font-size: 12px;
}

.card-image {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid #e4e4e4;
  background: #fff;
}

.gallery-card.is-portrait-product .card-image {
  aspect-ratio: 4 / 5;
}

.card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 260ms ease;
}

.gallery-card:hover img {
  transform: scale(1.018);
}

.doc-preview {
  display: grid;
  align-content: space-between;
  min-height: 100%;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(0, 255, 225, 0.2), transparent 42%),
    linear-gradient(180deg, #0b1b2b, #102c49);
  color: #fff;
}

.doc-preview small {
  justify-self: start;
  border: 1px solid rgba(0, 255, 225, 0.42);
  border-radius: 999px;
  padding: 7px 11px;
  color: var(--electric);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.doc-preview b {
  display: block;
  max-width: 11ch;
  color: #fff;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 390;
  letter-spacing: -0.06em;
  line-height: 0.9;
}

.card-content {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
}

.card-content strong {
  display: block;
  overflow: hidden;
  color: #1e1e1e;
  font-size: 18px;
  font-weight: 430;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-overflow: ellipsis;
}

.card-content small {
  display: block;
  margin-top: 7px;
  color: #8b8b8b;
  font-size: 13px;
}

.bookmark {
  color: #a2a2a2;
  font-size: 20px;
}

.empty-gallery {
  grid-column: 1 / -1;
  padding: 80px 24px;
  text-align: center;
}

.empty-gallery h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 430;
}

.empty-gallery p {
  max-width: 560px;
  margin: 12px auto 0;
  color: #777;
}

.page-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 520px);
  gap: 28px;
  align-items: end;
  border: 1px solid var(--line);
  padding: 26px;
  background: #fff;
}

.page-toolbar p:not(.eyebrow) {
  max-width: 640px;
  margin: 12px 0 0;
  color: #777;
  line-height: 1.45;
}

.page-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: end;
}

.page-tools label {
  display: grid;
  gap: 8px;
  color: #777;
  font-size: 13px;
}

.page-tools select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #f7f7f7;
  outline: none;
}

.primary-button,
.secondary-button {
  min-height: 42px;
  border-radius: 8px;
  padding: 0 14px;
}

.primary-button {
  border: 1px solid var(--midnight);
  background: var(--midnight);
  color: #fff;
}

.secondary-button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--midnight);
}

.primary-button:disabled,
.secondary-button:disabled,
.page-tools select:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.active-page-modules {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.page-view.is-static-preview .page-tools {
  display: none;
}

.page-view.is-static-preview .active-page-modules {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}

.product-preview-card {
  position: relative;
  min-height: 420px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px;
  background: #fff;
  color: var(--midnight);
  text-align: left;
  cursor: pointer;
}

.product-preview-card:nth-child(3n) {
  border-right: 0;
}

.preview-card-image {
  display: block;
  height: 300px;
  overflow: hidden;
  background: #f4f4f4;
}

.product-preview-card.is-portrait-product .preview-card-image {
  height: 520px;
}

.preview-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-card-content {
  display: block;
  padding-top: 20px;
}

.preview-card-content strong {
  display: block;
  color: var(--midnight);
  font-size: 22px;
  font-weight: 520;
  line-height: 1.05;
}

.preview-card-content small {
  display: block;
  margin-top: 8px;
  color: #999;
  font-size: 15px;
}

.active-page-module {
  min-height: 104px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px;
  background: #f7f7f7;
  color: var(--midnight);
  text-decoration: none;
}

.active-page-module:nth-child(4n) {
  border-right: 0;
}

.active-page-module span {
  color: var(--blue);
  font-size: 12px;
}

.active-page-module strong {
  display: block;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 430;
  line-height: 1.1;
}

.active-page-module small {
  display: block;
  margin-top: 8px;
  color: #888;
}

.empty-page-state {
  grid-column: 1 / -1;
  min-height: 180px;
  border-bottom: 1px solid var(--line);
  padding: 32px;
  background: #f7f7f7;
}

.empty-page-state h3 {
  margin: 0;
  color: var(--midnight);
  font-size: 28px;
  font-weight: 430;
  letter-spacing: -0.035em;
}

.empty-page-state p {
  max-width: 620px;
  margin: 12px 0 0;
  color: #777;
  line-height: 1.45;
}

.source-page-browser {
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 0;
  background: #000d1a;
}

.source-page-frame {
  display: block;
  width: 100%;
  height: min(82vh, 920px);
  min-height: 760px;
  border: 0;
  background: #000d1a;
}

.is-hidden {
  display: none !important;
}

.modal-open {
  overflow: hidden;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 32px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 12, 12, 0.48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.module-modal-card,
.instructions-card,
.help-card {
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  max-height: 88vh;
  overflow: auto;
  border: 1px solid #dedede;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.2);
}

.module-toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-height: 58px;
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.module-open-button,
.open-menu-toggle,
.copy-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 9px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 430;
  text-decoration: none;
}

.module-open-button {
  border: 1px solid #dddddd;
  background: #fff;
  color: #161616;
}

.open-menu,
.copy-menu {
  position: relative;
}

.open-menu-toggle {
  gap: 10px;
}

.copy-menu-toggle {
  gap: 10px;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
  box-shadow: 0 10px 24px rgba(11, 27, 43, 0.18);
}

.open-menu-toggle span,
.copy-menu-toggle span {
  font-size: 14px;
  line-height: 1;
}

.open-menu-panel,
.copy-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5;
  display: none;
  width: min(340px, calc(100vw - 40px));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 6px;
  background: var(--midnight);
  color: #fff;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.28);
}

.open-menu-panel {
  width: min(300px, calc(100vw - 40px));
}

.open-menu.is-open .open-menu-panel,
.copy-menu.is-open .copy-menu-panel {
  display: grid;
}

.open-menu-panel a,
.copy-menu-panel button {
  display: grid;
  gap: 6px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 14px 16px;
  background: transparent;
  color: #fff;
  text-align: left;
  text-decoration: none;
}

.open-menu-panel a:hover,
.open-menu-panel a:focus-visible,
.copy-menu-panel button:hover,
.copy-menu-panel button:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.open-menu-panel a.is-disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.copy-menu-panel button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.open-menu-panel strong,
.copy-menu-panel strong {
  font-size: 15px;
  font-weight: 520;
}

.open-menu-panel small,
.copy-menu-panel small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  line-height: 1.3;
}

.modal-close {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  min-height: 34px;
  border: 1px solid #dedede;
  border-radius: 999px;
  padding: 0 12px;
  background: #fff;
  color: #333;
}

.module-toolbar .modal-close {
  position: static;
  inset: auto;
}

.module-modal-card img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  object-position: top center;
  border-bottom: 1px solid var(--line);
  background: #f7f7f7;
}

.modal.is-portrait-preview .module-modal-card img {
  max-height: 72vh;
  object-fit: contain;
  background: #f4f4f4;
}

.modal-body,
.instructions-card,
.help-card {
  padding: clamp(28px, 5vw, 44px);
}

.modal-body h2,
.instructions-card h2,
.help-card h2 {
  margin: 0;
  color: var(--midnight);
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 450;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.modal-body p:not(.eyebrow),
.instructions-intro,
.help-intro {
  max-width: 680px;
  margin: 18px 0 0;
  color: #707070;
  font-size: 18px;
  line-height: 1.45;
}

.modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.modal-tags span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  color: #555;
  font-size: 13px;
}

.copy-status {
  min-height: 20px;
  margin: 18px 0 0 !important;
  color: var(--blue) !important;
  font-size: 14px !important;
}

.primary-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 26px;
  border-radius: 9px;
  padding: 0 16px;
  background: var(--midnight);
  color: #fff;
  text-decoration: none;
}

.instructions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 34px;
  border: 1px solid var(--line);
  background: var(--line);
}

.instructions-grid article {
  min-height: 180px;
  padding: 24px;
  background: #fff;
}

.instructions-grid h3 {
  margin: 0 0 10px;
  font-size: 23px;
  font-weight: 440;
  letter-spacing: -0.035em;
}

.instructions-grid p {
  margin: 0;
  color: #777;
  line-height: 1.45;
}

.help-form {
  display: grid;
  gap: 18px;
  margin-top: 34px;
}

.help-form label {
  display: grid;
  gap: 8px;
  color: #777;
  font-size: 13px;
}

.help-form input,
.help-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 14px;
  background: #f7f7f7;
  color: var(--midnight);
  font: inherit;
  outline: none;
}

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

.help-form input:focus,
.help-form textarea:focus {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(11, 27, 43, 0.08);
}

.help-form .primary-button {
  justify-self: start;
  padding: 0 18px;
}

.help-status {
  min-height: 20px;
  margin: 0;
  color: var(--blue);
  font-size: 14px;
}

.help-success {
  display: grid;
  justify-items: start;
  gap: 16px;
  margin-top: 34px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(28px, 5vw, 42px);
  background:
    linear-gradient(135deg, rgba(0, 255, 225, 0.1), transparent 46%),
    #f8faf9;
}

.success-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--electric);
  color: var(--midnight);
  font-size: 22px;
  font-weight: 540;
}

.help-success h3 {
  margin: 0;
  color: var(--midnight);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 450;
  letter-spacing: -0.045em;
  line-height: 1;
}

.help-success p {
  max-width: 520px;
  margin: 0;
  color: #707070;
  font-size: 18px;
  line-height: 1.45;
}

.help-success .primary-button {
  margin-top: 4px;
  padding: 0 18px;
}

.bot-field {
  display: none;
}

@media (max-width: 1120px) {
  .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-toolbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .topbar {
    justify-content: flex-start;
  }

  .topbar-actions {
    display: none;
  }

  .welcome-panel {
    align-items: stretch;
    justify-items: stretch;
    padding: 54px 18px 42px;
    text-align: left;
  }

  .hero-search {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .hero-search kbd {
    display: none;
  }

  .quick-actions {
    justify-content: flex-start;
  }

  .product-tabs {
    grid-template-columns: 1fr 1fr;
    width: 100%;
    border-radius: 14px;
  }

  .product-tab {
    min-height: 40px;
    font-size: 15px;
  }

  .gallery-view,
  .page-view {
    padding: 0 18px 60px;
  }

  .section-bar,
  .page-toolbar,
  .page-tools {
    grid-template-columns: 1fr;
  }

  .module-grid,
  .active-page-modules,
  .instructions-grid {
    grid-template-columns: 1fr;
  }

  .page-view.is-static-preview .active-page-modules {
    grid-template-columns: 1fr;
  }

  .product-preview-card:nth-child(3n) {
    border-right: 1px solid var(--line);
  }

  .product-preview-card {
    min-height: auto;
    padding: 18px;
  }

  .preview-card-image,
  .product-preview-card.is-portrait-product .preview-card-image {
    height: 360px;
  }

  .gallery-card {
    min-height: auto;
    padding: 18px;
  }

  .source-page-frame {
    height: 760px;
    min-height: 760px;
  }

  .modal {
    padding: 14px;
  }

  .module-toolbar {
    align-items: stretch;
    justify-content: stretch;
  }

  .module-open-button,
  .open-menu,
  .open-menu-toggle,
  .copy-menu,
  .copy-menu-toggle,
  .module-toolbar .modal-close {
    flex: 1;
  }

  .open-menu-panel,
  .copy-menu-panel {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ==================================================================
   BRAND VOICE
   Added with the Brand Voice tool. Nothing above this block was
   changed except .product-tabs (5 columns to 6) and .product-tab
   (added white-space: nowrap).
   ================================================================== */

.product-tab--voice.is-active {
  background: var(--midnight);
  color: #fff;
}

.bv-view {
  max-width: 1540px;
  margin: 0 auto;
  padding: 0 32px 80px;
}

.bv-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  border: 1px solid var(--line);
  border-bottom: 0;
  padding: 26px;
  background: #fff;
}

.bv-toolbar h2 {
  margin: 0;
  color: var(--midnight);
  font-size: 30px;
  font-weight: 430;
  letter-spacing: -0.04em;
}

.bv-toolbar p:not(.eyebrow) {
  max-width: 680px;
  margin: 12px 0 0;
  color: #777;
  line-height: 1.45;
}

.bv-source-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--midnight);
  border-radius: 999px;
  padding: 0 22px;
  background: var(--midnight);
  color: #fff;
  font-size: 15px;
  font-weight: 430;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
  transition:
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.bv-source-link::after {
  content: "→";
  font-size: 15px;
  opacity: 0.7;
}

.bv-source-link:hover,
.bv-source-link:focus-visible {
  background: #071523;
  color: var(--electric);
  outline: none;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.18);
}

.bv-source-link:hover::after,
.bv-source-link:focus-visible::after {
  opacity: 1;
}

.bv-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--line);
  background: #fff;
}

.bv-panel {
  padding: 26px;
  min-width: 0;
}

.bv-panel + .bv-panel {
  border-left: 1px solid var(--line);
  background: #f7f7f7;
}

.bv-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.bv-panel-head h3 {
  margin: 0;
  color: var(--midnight);
  font-size: 20px;
  font-weight: 450;
  letter-spacing: -0.02em;
}

.bv-count {
  color: #9a9a9a;
  font-size: 13px;
}

.bv-count.is-over {
  color: #b4231f;
}

.bv-field {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  color: #777;
  font-size: 13px;
}

.bv-field--inline {
  margin-bottom: 0;
}

.bv-field textarea {
  width: 100%;
  min-height: 300px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: #f7f7f7;
  color: var(--midnight);
  font: inherit;
  line-height: 1.5;
  outline: none;
}

.bv-field textarea:focus {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(11, 27, 43, 0.08);
}

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

.bv-options select {
  min-height: 42px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: #fff;
  color: var(--midnight);
  outline: none;
}

.bv-options select:focus {
  border-color: var(--blue);
}

.bv-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.bv-actions .primary-button {
  padding: 0 22px;
}

.bv-status {
  min-height: 20px;
  margin: 12px 0 0;
  color: #777;
  font-size: 14px;
}

.bv-status.is-error {
  color: #b4231f;
}

.bv-result-empty {
  display: grid;
  gap: 10px;
  border: 1px dashed #d9d9d9;
  border-radius: 12px;
  padding: 32px 26px;
  background: #fff;
  color: #8c8c8c;
  font-size: 15px;
  line-height: 1.5;
}

.bv-result-empty strong {
  color: var(--midnight);
  font-weight: 450;
  font-size: 17px;
}

.bv-result-empty ol {
  margin: 4px 0 0;
  padding-left: 18px;
}

.bv-result-empty li {
  margin-bottom: 4px;
}

.bv-output {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  background: #fff;
  color: var(--midnight);
  font-size: 16px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 460px;
  overflow: auto;
}

.bv-rationale {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  background:
    linear-gradient(135deg, rgba(0, 255, 225, 0.12), transparent 52%),
    #fbfdfd;
}

.bv-rationale p.eyebrow {
  margin-bottom: 8px;
}

.bv-rationale p:not(.eyebrow) {
  margin: 0;
  color: #5f6b74;
  font-size: 15px;
  line-height: 1.5;
}

.bv-meta {
  margin: 14px 0 0;
  color: #9a9a9a;
  font-size: 13px;
}

.bv-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(11, 27, 43, 0.18);
  border-top-color: var(--midnight);
  border-radius: 999px;
  animation: bv-spin 700ms linear infinite;
  vertical-align: -2px;
  margin-right: 8px;
}

@keyframes bv-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1120px) {
  .bv-workbench {
    grid-template-columns: minmax(0, 1fr);
  }

  .bv-panel + .bv-panel {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

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

@media (max-width: 760px) {
  .bv-view {
    padding: 0 18px 60px;
  }

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

  .bv-field textarea {
    min-height: 220px;
  }
}

/* The hidden attribute must beat display: grid on the empty state. */
.bv-result-empty[hidden] {
  display: none;
}


/* ==================================================================
   NAVIGATION + ENTRY GATE
   Added 2026-09-18. The homepage search bar was removed and its
   treatment moved onto the primary navigation, which was white.

   --blue and --midnight are the same value, so an active tab on the
   new navy bar would have been invisible against it. The active tab
   takes the MOOV electric accent instead, which the active count
   badge already used.
   ================================================================== */

.product-tabs {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  background: var(--blue);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 40px rgba(11, 27, 43, 0.18);
}

.product-tab,
.product-tab--voice,
.product-tab--manifesto,
.product-tab--help {
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
}

.product-tab:hover,
.product-tab--voice:hover,
.product-tab--manifesto:hover,
.product-tab--help:hover,
.product-tab--help:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  outline: none;
}

.product-tab small {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.86);
}

.product-tab.is-active,
.product-tab--voice.is-active {
  background: var(--electric);
  color: var(--midnight);
  box-shadow: none;
}

.product-tab.is-active small {
  background: var(--midnight);
  color: var(--electric);
}

.entry-view {
  display: grid;
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: clamp(40px, 7vw, 88px) 32px clamp(56px, 8vw, 96px);
  text-align: left;
}

.entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 6vw, 72px);
}

.entry-heading {
  margin: 0 0 18px;
  color: var(--midnight);
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 520;
  letter-spacing: -0.045em;
  line-height: 1;
}

.entry-copy {
  margin: 0;
  color: #6f6f6f;
  font-size: 19px;
  line-height: 1.45;
}

/* The button belongs to the whole section, not to the What column, so it
 * centres against the full width rather than sitting under the left one. */
.entry-launch {
  justify-self: center;
  margin-top: clamp(36px, 5vw, 56px);
  min-width: 180px;
}

.entry-note {
  justify-self: center;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

@media (max-width: 760px) {
  .entry-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .entry-view {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ==================================================================
   MOBILE NAVIGATION RAIL
   Added 2026-09-18.

   The navy nav block above sets grid-template-columns to eight equal
   columns. It is not inside a media query and it sits later in this
   file than the 760px block, and a media query adds no specificity, so
   it was overriding the existing two column mobile rule. Eight columns
   in 390px is what pushed the labels through each other.

   Below tablet the nav stops being a grid and becomes a horizontally
   scrollable rail: every label keeps its full width, nothing is
   compressed, and only the rail scrolls, never the page.
   ================================================================== */

@media (max-width: 900px) {
  .product-tabs {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
  }

  /* Swipe stays, the scrollbar goes. */
  .product-tabs::-webkit-scrollbar {
    display: none;
  }

  .product-tab {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    padding: 0 16px;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  /* The rail is the only thing that scrolls sideways. */
  .welcome-panel {
    max-width: 100%;
    overflow-x: clip;
  }
}

/* ==================================================================
   MANIFESTO, IN PAGE
   Added 2026-09-18. Same shell placement as Brand Voice. The document
   inside the frame keeps its own topbar, contents rail and design.
   ================================================================== */

.manifesto-view {
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  padding: 0 32px 48px;
}

.manifesto-frame {
  display: block;
  width: 100%;
  height: calc(100vh - 170px);
  min-height: 560px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
}

@media (max-width: 760px) {
  .manifesto-view {
    padding: 0 16px 32px;
  }

  .manifesto-frame {
    height: calc(100vh - 130px);
    border-radius: 12px;
  }
}

/* ==================================================================
   INTELLIGENCE ARCHITECTURE  ::  UGC -> ONE BRAND VOICE AI -> UGI
   Added 2026-09-20.

   The flat product row became three layer panels. The buttons inside
   them are the same .product-tab elements with the same data
   attributes, so this file changes where they sit and how the panels
   read, not how anything behaves.
   ================================================================== */

.hero-link-row { margin: 18px 0 0; }

.hero-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--midnight);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  border-bottom: 1px solid rgba(11, 27, 43, 0.28);
  padding-bottom: 2px;
  transition: border-color 160ms ease, opacity 160ms ease;
}
.hero-link:hover { border-bottom-color: var(--midnight); }
.hero-link:focus-visible { outline: 2px solid var(--midnight); outline-offset: 4px; }
.hero-link span { margin-left: 4px; }

/* ---------------- the three layers ---------------- */

.layers {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  width: min(1320px, 100%);
  margin-top: 46px;
  text-align: left;
}

/* Equal columns and stretched rows. The engine layer is not smaller for
 * holding one button. */
.layer {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 38px);
  border: 1px solid var(--line);
  border-radius: 20px;
  min-width: 0;
}

.layer--light {
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
}

.layer--dark {
  background: var(--midnight);
  border-color: var(--midnight);
  color: #fff;
  box-shadow: 0 18px 40px rgba(11, 27, 43, 0.22);
}

.layer__mark {
  margin: 0 0 6px;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 560;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--midnight);
}
.layer--dark .layer__mark { color: var(--electric); }

.layer__sub {
  margin: 0 0 18px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8c8c8c;
}
.layer--dark .layer__sub { color: rgba(255, 255, 255, 0.58); }

.layer__copy {
  margin: 0 0 26px;
  font-size: 15.5px;
  line-height: 1.5;
  color: #6f6f6f;
}
.layer--dark .layer__copy { color: rgba(255, 255, 255, 0.76); }

/* Buttons sit at the foot of every panel so the three rows align. */
.layer__nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.layer__nav .product-tab {
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--midnight);
  font-size: 16px;
  font-weight: 500;
}
.layer__nav .product-tab:hover { background: var(--soft); color: var(--midnight); }
.layer__nav .product-tab small { background: #eeeeee; color: #777; }
.layer__nav .product-tab.is-active {
  background: var(--midnight);
  color: #fff;
  border-color: var(--midnight);
  box-shadow: none;
}
.layer__nav .product-tab.is-active small { background: var(--electric); color: var(--midnight); }

/* On the dark panel the polarity flips so contrast holds. */
.layer--dark .layer__nav .product-tab {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.26);
  color: #fff;
}
.layer--dark .layer__nav .product-tab:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.layer--dark .layer__nav .product-tab.is-active {
  background: var(--electric);
  border-color: var(--electric);
  color: var(--midnight);
}

/* ---------------- the connectors ---------------- */

.layer-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(10px, 1.4vw, 22px);
  color: rgba(11, 27, 43, 0.34);
  pointer-events: none;
}
.layer-arrow svg { display: block; }

/* ---------------- need help ---------------- */

.help-footer {
  width: min(1320px, 100%);
  margin: clamp(64px, 9vw, 110px) auto 0;
  padding: clamp(36px, 4vw, 56px) clamp(26px, 3vw, 44px) clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
  text-align: center;
}

.help-footer__title {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 560;
  letter-spacing: -0.035em;
  color: var(--midnight);
}

.help-footer__copy {
  max-width: 54ch;
  margin: 0 auto 26px;
  font-size: 16px;
  line-height: 1.45;
  color: #7c7c7c;
}

.help-footer__form {
  display: flex;
  gap: 10px;
  width: min(620px, 100%);
  margin: 0 auto;
}

.help-footer__form input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 54px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--midnight);
  font-family: inherit;
  font-size: 16px;
}
.help-footer__form input:focus { outline: none; border-color: var(--midnight); }
.help-footer__form .primary-button { flex: 0 0 auto; min-height: 54px; padding: 0 30px; }

.help-footer__status { margin: 14px 0 0; min-height: 20px; font-size: 14px; color: var(--muted); }

/* ---------------- stacked ---------------- */

@media (max-width: 1000px) {
  .layers {
    grid-template-columns: 1fr;
    margin-top: 34px;
  }

  /* The progression turns downward rather than disappearing. */
  .layer-arrow {
    padding: 14px 0;
    transform: rotate(90deg);
  }

  .layer__nav { margin-top: 22px; }
}

@media (max-width: 560px) {
  .layer { padding: 24px 20px; border-radius: 16px; }
  .help-footer__form { flex-direction: column; }
  .help-footer__form .primary-button { width: 100%; }
}

/* ==================================================================
   SCROLL DESTINATIONS
   Added 2026-09-21. There is no sticky or fixed page header, so this
   is breathing room, not an offset around persistent UI. The section
   lands a comfortable distance below the top edge instead of flush
   against it.
   ================================================================== */

#entryView,
#brandVoiceView,
#manifestoView {
  scroll-margin-top: 28px;
}

/* html already scrolls smoothly site wide; honour reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Screen reader only. The help footer's label needs this and the class
 * did not exist in this stylesheet, so the label was rendering visibly
 * beside the field. Fixed 2026-09-21. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}