/* Smart CV Studio look (Nov 2026 refresh).
   Every rule is scoped to .cvb-app.cvb-studio, which the builder only adds
   when the studio flag is on (admins, preview cookie, or option cvb_studio_ui).
   Part 1 styles the two redesigned entry screens (.scv-entry, steps 0 and 1).
   Part 2 is COLOUR ONLY for every other builder screen: it remaps the existing
   tokens and overrides hard-coded brand colours. It must never change size,
   spacing, layout or type, and never touches template previews or swatches.
   Palette (owner, 2026-11-07): primary #001F3F, secondary teal #2FA4A9, white. Teal is decorative
   only (white text on teal fails contrast). */

/* ===== Part 1: entry screens ===== */

.cvb-app.cvb-studio.cvb-step-0,
.cvb-app.cvb-studio.cvb-step-1 {
  background: #fff;
  min-height: 0;
}

.cvb-app.cvb-studio .scv-entry {
  --scv-navy: #001F3F;
  --scv-blue: #001F3F;
  --scv-teal: #2FA4A9;
  --scv-muted: #526779;
  --scv-line: #dce4eb;
  display: grid;
  grid-template-columns: 45% 55%;
  min-height: 860px;
  color: var(--scv-navy);
  background: #fff;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

.cvb-app.cvb-studio .scv-entry *,
.cvb-app.cvb-studio .scv-entry *::before,
.cvb-app.cvb-studio .scv-entry *::after {
  box-sizing: border-box;
}

.cvb-app.cvb-studio .scv-entry button,
.cvb-app.cvb-studio .scv-entry input {
  font: inherit;
}

.cvb-app.cvb-studio .scv-entry button {
  cursor: pointer;
  /* The site theme sets nowrap and user-select:none on every button. */
  white-space: normal;
  -webkit-user-select: text;
  user-select: text;
  text-transform: none;
}

.cvb-app.cvb-studio .scv-entry button:focus-visible,
.cvb-app.cvb-studio .scv-entry a:focus-visible {
  outline: 3px solid var(--scv-blue);
  outline-offset: 4px;
}

.cvb-app.cvb-studio .scv-entry .scv-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -- Showcase (navy panel) -- */

.cvb-app.cvb-studio .scv-entry .scv-showcase {
  background: var(--scv-navy);
  color: #fff;
  padding: 42px 11% 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cvb-app.cvb-studio .scv-entry .scv-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 65%, rgba(47, 164, 169, 0.2), transparent 60%);
  pointer-events: none;
}

.cvb-app.cvb-studio .scv-entry .scv-logo-link {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  z-index: 2;
}

.cvb-app.cvb-studio .scv-entry .scv-logo-link:focus-visible {
  outline: 3px solid #7fced2;
  outline-offset: 2px;
}

.cvb-app.cvb-studio .scv-entry .scv-mobile-brand {
  display: none;
}

.cvb-app.cvb-studio .scv-entry .scv-logo {
  position: relative;
  display: block;
  width: 168px;
  height: auto;
  margin: -24px 0 -22px -14px;
}

.cvb-app.cvb-studio .scv-entry .scv-pitch {
  position: relative;
  margin-top: 46px;
  z-index: 1;
}

.cvb-app.cvb-studio .scv-entry .scv-kicker {
  font-size: 10px;
  letter-spacing: 2.5px;
  font-weight: 650;
  color: #7fced2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.cvb-app.cvb-studio .scv-entry .scv-kicker::before {
  content: "";
  height: 1px;
  width: 24px;
  background: var(--scv-teal);
}

.cvb-app.cvb-studio .scv-entry .scv-pitch-title {
  font-size: clamp(38px, 3.8vw, 59px);
  line-height: 1.08;
  letter-spacing: -2.7px;
  font-weight: 500;
  margin: 22px 0 20px;
  max-width: 480px;
  color: #fff;
}

.cvb-app.cvb-studio .scv-entry .scv-pitch-title em {
  font-family: Georgia, serif;
  font-weight: 400;
  color: #8ad3d6;
}

.cvb-app.cvb-studio .scv-entry .scv-pitch-lead {
  font-size: 14px;
  line-height: 1.8;
  max-width: 355px;
  color: #b7c8d2;
  margin: 0;
}

.cvb-app.cvb-studio .scv-entry .scv-display {
  position: relative;
  height: 365px;
  margin-top: 40px;
  isolation: isolate;
}

.cvb-app.cvb-studio .scv-entry .scv-orbit {
  position: absolute;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(114, 155, 170, 0.15);
  border-radius: 50%;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
}

.cvb-app.cvb-studio .scv-entry .scv-orbit::after {
  content: "";
  position: absolute;
  inset: 27px;
  border: 1px solid rgba(114, 155, 170, 0.13);
  border-radius: 50%;
}

.cvb-app.cvb-studio .scv-entry .scv-doc {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(-7deg);
  background: #fff;
  color: var(--scv-navy);
  width: 246px;
  height: 329px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.27);
  border-radius: 2px;
}

.cvb-app.cvb-studio .scv-entry .scv-doc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #f0f5fb;
  transform: rotate(11deg);
  z-index: -1;
  border: 1px solid #dbe5ee;
}

.cvb-app.cvb-studio .scv-entry .scv-page {
  background: #fff;
  position: absolute;
  inset: 0;
  padding: 28px 24px;
}

.cvb-app.cvb-studio .scv-entry .scv-doc-top {
  font-size: 7px;
  letter-spacing: 1.5px;
  color: #35627b;
}

.cvb-app.cvb-studio .scv-entry .scv-doc-name {
  font-family: Georgia, serif;
  font-size: 25px;
  line-height: 1.1;
  margin: 10px 0 7px;
}

.cvb-app.cvb-studio .scv-entry .scv-doc-role {
  font-size: 7px;
  letter-spacing: 1px;
  color: var(--scv-blue);
}

.cvb-app.cvb-studio .scv-entry .scv-doc-rule {
  height: 2px;
  background: var(--scv-teal);
  width: 32px;
  margin: 16px 0;
}

.cvb-app.cvb-studio .scv-entry .scv-doc-section {
  font-size: 6px;
  letter-spacing: 1.3px;
  font-weight: 700;
  margin: 15px 0 8px;
}

.cvb-app.cvb-studio .scv-entry .scv-lines i {
  display: block;
  height: 3px;
  background: #dce4eb;
  margin-bottom: 5px;
}

.cvb-app.cvb-studio .scv-entry .scv-lines i:last-child {
  width: 70%;
}

.cvb-app.cvb-studio .scv-entry .scv-doc-job {
  font-size: 7px;
  font-weight: 650;
  margin-bottom: 7px;
}

.cvb-app.cvb-studio .scv-entry .scv-annotation {
  position: absolute;
  right: -8px;
  top: 165px;
  padding: 13px 17px;
  background: #0A2E55;
  border: 1px solid rgba(47, 164, 169, 0.45);
  border-radius: 9px;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
  font-size: 11px;
  display: flex;
  gap: 10px;
  align-items: center;
  transform: rotate(2deg);
  color: #fff;
}

.cvb-app.cvb-studio .scv-entry .scv-annotation svg {
  width: 23px;
  height: 23px;
  color: #72c7cc;
  flex-shrink: 0;
}

.cvb-app.cvb-studio .scv-entry .scv-annotation strong {
  display: block;
  font-size: 12px;
  font-weight: 550;
}

.cvb-app.cvb-studio .scv-entry .scv-annotation span {
  display: block;
  font-size: 10px;
  color: #b7c8d2;
  margin-top: 3px;
}

.cvb-app.cvb-studio .scv-entry .scv-left-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #315263;
  padding-top: 20px;
  margin-top: auto;
  font-size: 10px;
  letter-spacing: 0.3px;
  color: #a9becb;
}

.cvb-app.cvb-studio .scv-entry .scv-left-foot span:last-child {
  color: #7fced2;
}

/* -- Workspace -- */

.cvb-app.cvb-studio .scv-entry .scv-workspace {
  padding: 34px 8% 22px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* The existing journey rail, restyled for a white ground. Same markup and
   stage links as every other step. */
.cvb-app.cvb-studio .scv-entry .cvb-stage-tabs {
  max-width: none;
  margin: 0 0 40px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  overflow: visible;
}

.cvb-app.cvb-studio .scv-entry .cvb-stage-tabs > span,
.cvb-app.cvb-studio .scv-entry .cvb-stage-tabs > button.cvb-stage-link {
  color: #5f7381;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
}

/* The label is a nested span; the base rule colours every span in the rail. */
.cvb-app.cvb-studio .scv-entry .cvb-stage-tabs .cvb-stage-label {
  color: inherit;
  font-size: inherit;
}

.cvb-app.cvb-studio .scv-entry .cvb-stage-tabs > span.active {
  color: var(--scv-blue);
  font-weight: 700;
}

.cvb-app.cvb-studio .scv-entry .cvb-stage-tabs > span.active::after,
.cvb-app.cvb-studio .scv-entry .cvb-stage-tabs .cvb-stage-link.active::after {
  content: none;
}

.cvb-app.cvb-studio .scv-entry .cvb-stage-mark {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  border: 1px solid #c9d6e0;
  background: #fff;
  color: #5f7381;
  font-size: 9px;
  font-weight: 600;
}

.cvb-app.cvb-studio .scv-entry .cvb-stage-mark.current {
  background: var(--scv-blue);
  border-color: var(--scv-blue);
  color: #fff;
}

.cvb-app.cvb-studio .scv-entry .cvb-stage-mark.done {
  background: var(--scv-teal);
  border-color: var(--scv-teal);
  color: var(--scv-navy);
}

.cvb-app.cvb-studio .scv-entry .cvb-stage-tabs > button.cvb-stage-link:hover,
.cvb-app.cvb-studio .scv-entry .cvb-stage-tabs > button.cvb-stage-link:focus-visible {
  color: var(--scv-blue);
}

.cvb-app.cvb-studio .scv-entry .cvb-stage-tabs > button.cvb-stage-link:focus-visible {
  outline: 3px solid var(--scv-blue);
  outline-offset: 4px;
}

.cvb-app.cvb-studio .scv-entry .scv-heading .scv-index {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--scv-blue);
  font-weight: 650;
}

.cvb-app.cvb-studio .scv-entry .scv-heading h1 {
  font-family: inherit;
  font-size: 39px;
  line-height: 1.13;
  letter-spacing: -1.4px;
  font-weight: 600;
  color: var(--scv-navy);
  margin: 15px 0 13px;
  max-width: 460px;
}

.cvb-app.cvb-studio .scv-entry .scv-heading p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--scv-muted);
  margin: 0;
  max-width: 420px;
}

.cvb-app.cvb-studio .scv-entry .scv-back {
  display: inline-block;
  background: none;
  border: 0;
  padding: 4px 0;
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--scv-blue);
  text-decoration: none;
}

.cvb-app.cvb-studio .scv-entry .scv-back:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Document choices */

.cvb-app.cvb-studio .scv-entry .scv-choices {
  display: grid;
  gap: 17px;
  margin-top: 27px;
}

.cvb-app.cvb-studio .scv-entry .scv-choice {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid #d4e0eb;
  border-radius: 11px;
  background: #fff;
  color: var(--scv-navy);
  text-align: left;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 31, 63, 0.03);
}

.cvb-app.cvb-studio .scv-entry .scv-choice:hover {
  border-color: var(--scv-blue);
  box-shadow: 0 7px 22px rgba(0, 31, 63, 0.07);
}

.cvb-app.cvb-studio .scv-entry .scv-choice > span {
  display: flex;
}

.cvb-app.cvb-studio .scv-entry .scv-choice-top {
  justify-content: space-between;
  align-items: center;
  padding: 17px 21px 0;
}

.cvb-app.cvb-studio .scv-entry .scv-choice-number {
  font-size: 9px;
  letter-spacing: 1.6px;
  font-weight: 650;
  color: var(--scv-blue);
}

.cvb-app.cvb-studio .scv-entry .scv-letter .scv-choice-number {
  color: #44677a;
}

.cvb-app.cvb-studio .scv-entry .scv-choice-arrow {
  font-size: 21px;
  color: var(--scv-blue);
  line-height: 1;
}

.cvb-app.cvb-studio .scv-entry .scv-choice-content {
  gap: 24px;
  padding: 18px 23px 23px;
  align-items: center;
}

.cvb-app.cvb-studio .scv-entry .scv-choice-text {
  display: block;
}

.cvb-app.cvb-studio .scv-entry .scv-choice-title {
  display: block;
  font-size: 23px;
  line-height: 1.16;
  font-weight: 550;
  letter-spacing: -0.7px;
  margin: 0 0 10px;
  max-width: 260px;
}

.cvb-app.cvb-studio .scv-entry .scv-choice-desc {
  display: block;
  font-size: 12px;
  line-height: 1.75;
  color: var(--scv-muted);
  max-width: 380px;
}

.cvb-app.cvb-studio .scv-entry .scv-mini-doc {
  display: block;
  width: 70px;
  height: 96px;
  border: 1px solid #d3dfea;
  box-shadow: 4px 5px 0 #edf2f8;
  padding: 15px 10px;
  background: #fff;
  transform: rotate(-5deg);
  flex-shrink: 0;
}

.cvb-app.cvb-studio .scv-entry .scv-mini-doc b {
  display: block;
  width: 28px;
  height: 5px;
  background: var(--scv-blue);
  margin-bottom: 6px;
}

.cvb-app.cvb-studio .scv-entry .scv-mini-doc i {
  display: block;
  height: 2px;
  background: #cbd8e4;
  margin-bottom: 4px;
}

.cvb-app.cvb-studio .scv-entry .scv-mini-doc i:nth-of-type(3n) {
  width: 75%;
}

.cvb-app.cvb-studio .scv-entry .scv-mini-doc hr {
  border: 0;
  height: 1px;
  background: var(--scv-teal);
  margin: 9px 0 7px;
  width: 15px;
}

.cvb-app.cvb-studio .scv-entry .scv-mini-letter {
  transform: rotate(5deg);
}

.cvb-app.cvb-studio .scv-entry .scv-mini-letter b {
  width: 18px;
  height: 3px;
}

.cvb-app.cvb-studio .scv-entry .scv-mini-letter em {
  display: block;
  border-bottom: 1px solid var(--scv-blue);
  width: 17px;
  height: 7px;
  transform: rotate(-15deg);
  margin-top: 5px;
}

.cvb-app.cvb-studio .scv-entry .scv-choice-bottom {
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #e4ebf2;
  background: #f6f9fd;
  padding: 14px 21px;
}

.cvb-app.cvb-studio .scv-entry .scv-letter .scv-choice-bottom {
  background: #fbfcfe;
}

.cvb-app.cvb-studio .scv-entry .scv-choice-cta {
  font-size: 13px;
  color: var(--scv-blue);
  font-weight: 650;
}

.cvb-app.cvb-studio .scv-entry .scv-choice-cta b {
  margin-left: 12px;
  font-weight: 400;
}

.cvb-app.cvb-studio .scv-entry .scv-choice-bottom small {
  font-size: 9px;
  letter-spacing: 0.7px;
  color: #56708a;
}

.cvb-app.cvb-studio .scv-entry .scv-choice-note {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 13px;
  color: var(--scv-muted);
  margin: 23px 0 30px;
}

/* CV intake */

.cvb-app.cvb-studio .scv-entry .scv-upload {
  margin-top: 31px;
  border: 1px solid #b7cbdc;
  border-radius: 12px;
  overflow: hidden;
  background: #fbfcfe;
}

.cvb-app.cvb-studio .scv-entry .scv-upload.is-drag {
  border-color: var(--scv-teal);
  box-shadow: 0 0 0 1px var(--scv-teal);
  background: #eef9fa;
}

.cvb-app.cvb-studio .scv-entry .scv-zone-body {
  padding: 27px 25px 24px;
  text-align: center;
  background-image: radial-gradient(rgba(0, 31, 63, 0.055) 0.65px, transparent 0.65px);
  background-size: 9px 9px;
}

.cvb-app.cvb-studio .scv-entry .scv-upload-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #d8e4ed;
  box-shadow: 0 3px 6px rgba(0, 31, 63, 0.02);
  color: var(--scv-blue);
}

.cvb-app.cvb-studio .scv-entry .scv-upload-icon svg {
  width: 23px;
  height: 23px;
}

.cvb-app.cvb-studio .scv-entry .scv-zone-body h2 {
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--scv-navy);
  margin: 0 0 7px;
  letter-spacing: -0.3px;
}

.cvb-app.cvb-studio .scv-entry .scv-zone-body p {
  font-size: 12px;
  color: var(--scv-muted);
  margin: 0;
}

.cvb-app.cvb-studio .scv-entry .scv-browse {
  display: inline-flex;
  margin-top: 19px;
  align-items: center;
  justify-content: center;
  gap: 30px;
  background: var(--scv-blue);
  color: #fff;
  border: 0;
  border-radius: 6px;
  min-height: 45px;
  padding: 11px 20px;
  font-size: 13px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.cvb-app.cvb-studio .scv-entry .scv-browse:hover {
  background: var(--scv-teal);
  color: var(--scv-navy);
}

.cvb-app.cvb-studio .scv-entry .scv-browse:focus-within {
  outline: 3px solid var(--scv-blue);
  outline-offset: 4px;
}

.cvb-app.cvb-studio .scv-entry .scv-browse input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.cvb-app.cvb-studio .scv-entry .scv-formats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 19px;
}

.cvb-app.cvb-studio .scv-entry .scv-formats span {
  font-size: 9px;
  letter-spacing: 0.6px;
  color: #56708a;
  border: 1px solid #d9e3ec;
  background: #fff;
  padding: 3px 6px;
  border-radius: 3px;
}

.cvb-app.cvb-studio .scv-entry .scv-zone-bottom {
  border-top: 1px solid #e0e8f0;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  font-size: 11px;
  line-height: 1.5;
  color: var(--scv-muted);
}

.cvb-app.cvb-studio .scv-entry .scv-zone-bottom svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--scv-blue);
}

.cvb-app.cvb-studio .scv-entry .scv-selection {
  padding: 18px 20px;
  background: #fff;
  border-top: 1px solid var(--scv-line);
}

.cvb-app.cvb-studio .scv-entry .scv-filename {
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
  margin: 0 0 12px;
  color: var(--scv-navy);
}

.cvb-app.cvb-studio .scv-entry .scv-selection-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.cvb-app.cvb-studio .scv-entry .scv-primary {
  border: 0;
  background: var(--scv-blue);
  color: #fff;
  padding: 11px 18px;
  min-height: 44px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}

.cvb-app.cvb-studio .scv-entry .scv-primary:hover {
  background: var(--scv-teal);
  color: var(--scv-navy);
}

.cvb-app.cvb-studio .scv-entry .scv-remove {
  border: 0;
  background: transparent;
  color: var(--scv-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 11px 4px;
  min-height: 44px;
  font-size: 13px;
}

.cvb-app.cvb-studio .scv-entry .scv-divider {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #5f7381;
  font-size: 10px;
  letter-spacing: 0.5px;
  margin: 23px 0;
}

.cvb-app.cvb-studio .scv-entry .scv-divider::before,
.cvb-app.cvb-studio .scv-entry .scv-divider::after {
  content: "";
  height: 1px;
  background: var(--scv-line);
  flex: 1;
}

.cvb-app.cvb-studio .scv-entry .scv-manual {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  gap: 15px;
  padding: 19px 20px;
  background: #fff;
  border: 1px solid var(--scv-line);
  border-radius: 10px;
  color: var(--scv-navy);
}

.cvb-app.cvb-studio .scv-entry .scv-manual:hover {
  border-color: #6484a3;
  background: #f8fbff;
}

.cvb-app.cvb-studio .scv-entry .scv-manual-icon {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid #dce5ed;
  border-radius: 8px;
  color: var(--scv-blue);
  flex-shrink: 0;
}

.cvb-app.cvb-studio .scv-entry .scv-manual svg {
  width: 18px;
  height: 18px;
}

.cvb-app.cvb-studio .scv-entry .scv-manual strong {
  font-size: 14px;
  display: block;
  font-weight: 600;
}

.cvb-app.cvb-studio .scv-entry .scv-manual small {
  font-size: 12px;
  color: var(--scv-muted);
  display: block;
  margin-top: 5px;
  line-height: 1.5;
}

.cvb-app.cvb-studio .scv-entry .scv-manual-arrow {
  margin-left: auto;
  font-size: 20px;
  color: var(--scv-blue);
}

.cvb-app.cvb-studio .scv-entry .scv-privacy {
  font-size: 11px;
  line-height: 1.7;
  color: var(--scv-muted);
  margin: 20px 0 28px;
  max-width: 420px;
}

.cvb-app.cvb-studio .scv-entry .scv-privacy a {
  color: var(--scv-blue);
  text-underline-offset: 3px;
}

.cvb-app.cvb-studio .scv-entry .scv-foot {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--scv-muted);
  gap: 12px;
}

.cvb-app.cvb-studio .scv-entry .scv-foot a {
  color: var(--scv-blue);
  text-decoration: none;
}

.cvb-app.cvb-studio .scv-entry .scv-foot a:hover {
  text-decoration: underline;
}

@media (prefers-reduced-motion: no-preference) {
  .cvb-app.cvb-studio .scv-entry .scv-manual,
  .cvb-app.cvb-studio .scv-entry .scv-browse,
  .cvb-app.cvb-studio .scv-entry .scv-choice {
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
  }
}

@media (min-width: 1600px) {
  .cvb-app.cvb-studio .scv-entry .scv-showcase { padding-left: 15%; padding-right: 15%; }
  .cvb-app.cvb-studio .scv-entry .scv-workspace { padding-left: 13%; padding-right: 13%; }
}

@media (max-width: 1200px) {
  .cvb-app.cvb-studio .scv-entry .scv-showcase { padding: 35px 9% 26px; }
  .cvb-app.cvb-studio .scv-entry .scv-workspace { padding: 30px 7% 22px; }
  .cvb-app.cvb-studio .scv-entry .cvb-stage-tabs { gap: 4px; }
  .cvb-app.cvb-studio .scv-entry .cvb-stage-tabs > span,
  .cvb-app.cvb-studio .scv-entry .cvb-stage-tabs > button.cvb-stage-link { flex-direction: column; align-items: flex-start; }
  .cvb-app.cvb-studio .scv-entry .cvb-stage-mark { margin: 0 0 7px; }
  .cvb-app.cvb-studio .scv-entry .scv-pitch-title { font-size: 45px; }
  .cvb-app.cvb-studio .scv-entry .scv-annotation { right: -20px; }
  .cvb-app.cvb-studio .scv-entry .scv-heading h1 { font-size: 35px; }
  .cvb-app.cvb-studio .scv-entry .scv-choice-content { gap: 18px; }
  .cvb-app.cvb-studio .scv-entry .scv-choice-bottom small { display: none; }
  .cvb-app.cvb-studio .scv-entry .scv-choice-title { font-size: 21px; }
}

@media (max-width: 1023px) {
  .cvb-app.cvb-studio .scv-entry { grid-template-columns: 38% 62%; }
  .cvb-app.cvb-studio .scv-entry .scv-showcase { padding: 30px 7%; }
  .cvb-app.cvb-studio .scv-entry .scv-pitch { margin-top: 48px; }
  .cvb-app.cvb-studio .scv-entry .scv-pitch-title { font-size: 33px; letter-spacing: -1.4px; }
  .cvb-app.cvb-studio .scv-entry .scv-pitch-lead { font-size: 12px; }
  .cvb-app.cvb-studio .scv-entry .scv-display { margin-top: 40px; transform: scale(0.72); transform-origin: center top; }
  .cvb-app.cvb-studio .scv-entry .scv-annotation { right: -60px; }
  .cvb-app.cvb-studio .scv-entry .scv-left-foot { display: block; line-height: 2; }
  .cvb-app.cvb-studio .scv-entry .scv-left-foot span { display: block; }
  .cvb-app.cvb-studio .scv-entry .scv-workspace { padding: 28px 6% 20px; }
  .cvb-app.cvb-studio .scv-entry .cvb-stage-tabs { margin-bottom: 32px; }
  .cvb-app.cvb-studio .scv-entry .scv-heading h1 { font-size: 31px; }
  .cvb-app.cvb-studio .scv-entry .scv-heading p { font-size: 13px; }
  .cvb-app.cvb-studio .scv-entry .scv-choice-content { padding: 17px 18px 20px; }
  .cvb-app.cvb-studio .scv-entry .scv-choice-title { font-size: 20px; }
  .cvb-app.cvb-studio .scv-entry .scv-mini-doc { width: 57px; height: 84px; padding: 12px 8px; }
  .cvb-app.cvb-studio .scv-entry .scv-choice-top { padding: 16px 18px 0; }
  .cvb-app.cvb-studio .scv-entry .scv-choice-bottom { padding: 13px 18px; }
}

/* Phones: content first. The site header already carries the logo, so the
   showcase is dropped rather than shrunk. Bottom padding clears the fixed
   Smart CV tab bar. */
@media (max-width: 680px) {
  .cvb-app.cvb-studio .scv-entry { display: block; min-height: 0; }
  .cvb-app.cvb-studio .scv-entry .scv-showcase { display: none; }
  .cvb-app.cvb-studio .scv-entry .scv-mobile-brand { display: inline-block; margin: -14px 0 6px -12px; }
  .cvb-app.cvb-studio .scv-entry .scv-mobile-brand img { display: block; width: 140px; height: auto; }
  .cvb-app.cvb-studio .scv-entry .scv-workspace { padding: 22px 18px calc(84px + env(safe-area-inset-bottom, 0px)); }
  .cvb-app.cvb-studio .scv-entry .cvb-stage-tabs { margin: 0 0 30px; }
  .cvb-app.cvb-studio .scv-entry .cvb-stage-tabs > span,
  .cvb-app.cvb-studio .scv-entry .cvb-stage-tabs > button.cvb-stage-link { font-size: 10px; }
  .cvb-app.cvb-studio .scv-entry .scv-heading h1 { font-size: 30px; max-width: none; }
  .cvb-app.cvb-studio .scv-entry .scv-heading p { font-size: 14px; }
  .cvb-app.cvb-studio .scv-entry .scv-choices { margin-top: 22px; }
  .cvb-app.cvb-studio .scv-entry .scv-choice-content { padding: 16px 18px 20px; gap: 18px; }
  .cvb-app.cvb-studio .scv-entry .scv-choice-title { font-size: 21px; }
  .cvb-app.cvb-studio .scv-entry .scv-mini-doc { width: 56px; height: 80px; padding: 11px 8px; }
  .cvb-app.cvb-studio .scv-entry .scv-zone-body { padding: 24px 16px; }
  .cvb-app.cvb-studio .scv-entry .scv-upload { margin-top: 24px; }
  .cvb-app.cvb-studio .scv-entry .scv-manual { padding: 17px 15px; }
  .cvb-app.cvb-studio .scv-entry .scv-foot { flex-wrap: wrap; }
}

@media (max-width: 360px) {
  .cvb-app.cvb-studio .scv-entry .cvb-stage-label { font-size: 9px; }
  .cvb-app.cvb-studio .scv-entry .scv-heading h1 { font-size: 27px; }
  .cvb-app.cvb-studio .scv-entry .scv-mini-doc { display: none; }
}

/* ===== Part 2: colour only, every other builder screen ===== */

/* Existing tokens, remapped. Interactive "teal-dark" becomes brand blue;
   decorative teal stays teal (used on navy grounds and as accents). */
.cvb-app.cvb-studio {
  --cvb-navy: #001F3F;
  --cvb-dark-bg: #001F3F;
  --cvb-side-top: #001F3F;
  --cvb-side-bottom: #0B3350;
  --cvb-teal: #2FA4A9;
  --cvb-teal-dark: #001F3F;
  --cvb-teal-hover: #001F3F;
  --cvb-teal-accent: #001F3F;
  --cvb-gold: #001F3F;
  --cvb-gold-border: #001F3F;
  --cvb-page-bg: #F4F7FB;
  --cvb-border: #DCE5EE;
  --cvb-divider: #DCE5EE;
  --cvb-input-border: #D2DDE7;
  --cvb-text: #001F3F;
  --cvb-muted: #526779;
  --cvb-surface: #F7F9FC;
  --cvb-btn-border: #C6D3DF;
  --cvb-btn-hover-bg: #EAF0F8;
  --cvb-shadow: 0 8px 24px rgba(0, 31, 63, 0.06);
}

/* Main CTA (was gold with dark text): blue with white text. Hover is teal
   (owner's choice) with navy text: white on teal is only 3:1. */
.cvb-app.cvb-studio .cvb-btn.gold {
  color: #fff;
}

.cvb-app.cvb-studio .cvb-btn.gold:hover,
.cvb-app.cvb-studio .cvb-btn.gold:focus {
  background: #2FA4A9;
  border-color: #2FA4A9;
  color: #001F3F;
}

/* Secondary filled button (was teal with white text): white with blue text.
   White on teal fails contrast, and two identical blue buttons side by side
   would lose the main-versus-secondary cue the old gold/teal pair gave. */
.cvb-app.cvb-studio .cvb-btn.primary {
  background: #fff;
  border-color: #001F3F;
  color: #001F3F;
}

.cvb-app.cvb-studio .cvb-btn.primary:hover,
.cvb-app.cvb-studio .cvb-btn.primary:focus {
  background: #EAF0F8;
  color: #001F3F;
}

/* Filled teal controls with white text -> blue. */
.cvb-app.cvb-studio.cvb-step-10 .cvb-file-trigger,
.cvb-app.cvb-studio .cvb-cover-choice.active {
  background: #001F3F;
  border-color: #001F3F;
  color: #fff;
}

.cvb-app.cvb-studio.cvb-step-10 .cvb-file-trigger:hover {
  background: #2FA4A9;
  border-color: #2FA4A9;
  color: #001F3F;
}

.cvb-app.cvb-studio .cvb-sec-state.done {
  color: #001F3F;
}

/* Gold "partial" marker sits on the navy sidebar; blue would vanish there. */
.cvb-app.cvb-studio .cvb-sec-state.partial {
  border-color: #E6BE4F;
  color: #E6BE4F;
}

/* The ad-match "gap" chip is a warning; keep its amber edge. */
.cvb-app.cvb-studio .cvb-ad-chip.gap {
  border-color: #D7B248;
}

/* Focus rings: teal is under 3:1 on white, so focus uses blue. */
.cvb-app.cvb-studio .cvb-btn:focus-visible,
.cvb-app.cvb-studio .cvb-rich-btn:focus-visible {
  outline-color: #001F3F;
}

.cvb-app.cvb-studio .cvb-head .cvb-btn:focus-visible,
.cvb-app.cvb-studio .cvb-left-nav .cvb-btn:focus-visible {
  outline-color: #7FCED2;
}

.cvb-app.cvb-studio .cvb-field input:focus,
.cvb-app.cvb-studio .cvb-field select:focus,
.cvb-app.cvb-studio .cvb-field textarea:focus,
.cvb-app.cvb-studio .cvb-rich-wrap:focus-within {
  border-color: #001F3F;
  box-shadow: 0 0 0 3px rgba(0, 31, 63, 0.14);
}

.cvb-app.cvb-studio .cvb-design-card.active:hover,
.cvb-app.cvb-studio .cvb-design-card.active:focus,
.cvb-app.cvb-studio .cvb-design-card.active:focus-visible {
  box-shadow: 0 0 0 3px #001F3F, 0 6px 18px rgba(0, 31, 63, 0.2) !important;
}

.cvb-app.cvb-studio .cvb-design-card:hover,
.cvb-app.cvb-studio .cvb-design-card:focus,
.cvb-app.cvb-studio .cvb-design-card:focus-visible,
.cvb-app.cvb-studio .cvb-design-card:active {
  border-color: #001F3F;
  box-shadow: 0 4px 14px rgba(0, 31, 63, 0.12);
}

.cvb-app.cvb-studio .cvb-design-card:focus,
.cvb-app.cvb-studio .cvb-design-card:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 31, 63, 0.2);
}

.cvb-app.cvb-studio .cvb-color-swatch:hover {
  box-shadow: 0 10px 24px rgba(0, 31, 63, 0.16);
}

.cvb-app.cvb-studio .cvb-color-swatch:focus,
.cvb-app.cvb-studio .cvb-color-swatch:focus-visible,
.cvb-app.cvb-studio .cvb-color-swatch:active {
  box-shadow: 0 0 0 3px rgba(0, 31, 63, 0.2);
}

.cvb-app.cvb-studio .cvb-color-swatch.active {
  box-shadow: 0 0 0 3px rgba(47, 164, 169, 0.2);
}

/* Hard-coded old-brand text colours -> navy / blue / muted. */
.cvb-app.cvb-studio .cvb-hero h1,
.cvb-app.cvb-studio .cvb-step-card h2,
.cvb-app.cvb-studio .cvb-process-card h2,
.cvb-app.cvb-studio .cvb-step5-hero h1,
.cvb-app.cvb-studio .cvb-auth-modal h3 {
  color: #001F3F;
}

.cvb-app.cvb-studio .cvb-hero p,
.cvb-app.cvb-studio .cvb-auth-modal p,
.cvb-app.cvb-studio .cvb-step5-progress-top {
  color: #526779;
}

.cvb-app.cvb-studio .cvb-step5-progress-top strong,
.cvb-app.cvb-studio .cvb-stage-row.active,
.cvb-app.cvb-studio .cvb-price-note .cvb-currency-switch {
  color: #001F3F;
}

.cvb-app.cvb-studio .cvb-stage-row.done {
  color: #1E6E73;
}

.cvb-app.cvb-studio .cvb-step8-block > label,
.cvb-app.cvb-studio .cvb-field label,
.cvb-app.cvb-studio .cvb-design-name,
.cvb-app.cvb-studio .cvb-design-zoom,
.cvb-app.cvb-studio .cvb-thumb-modal-title {
  color: #001F3F;
}

/* Progress, spinner and markers. */
.cvb-app.cvb-studio .cvb-step5-progress {
  border-color: #DCE5EE;
  background: #F7F9FC;
}

.cvb-app.cvb-studio .cvb-step5-progress-bar {
  background: #E3EAF2;
}

.cvb-app.cvb-studio .cvb-step5-progress-bar span {
  background: linear-gradient(90deg, #2FA4A9, #001F3F);
}

.cvb-app.cvb-studio .cvb-spinner {
  border-color: #DCE5EE;
  border-top-color: #2FA4A9;
}

.cvb-app.cvb-studio .cvb-check {
  background: #2FA4A9;
}

/* Sidebar active item (was bright teal with white text). */
.cvb-app.cvb-studio .cvb-left-item.active {
  background: #1C4A66;
}

/* Notes and panels tinted with the old teal. */
.cvb-app.cvb-studio .cvb-section-note {
  background: rgba(47, 164, 169, 0.07);
}

.cvb-app.cvb-studio .cvb-price-note {
  border-left-color: #2FA4A9;
  background: #EAF0F8;
  color: #001F3F;
}

.cvb-app.cvb-studio .cvb-global-busy {
  background: rgba(0, 31, 63, 0.28);
}

.cvb-app.cvb-studio .cvb-head {
  box-shadow: 0 2px 10px rgba(0, 31, 63, 0.28);
}

/* Editor footer Back button: the ghost style is drawn for the navy header and
   was white on white here (invisible before this refresh too). */
.cvb-app.cvb-studio .cvb-row-actions .cvb-btn.ghost {
  border-color: #C6D3DF;
  background-color: #fff;
  color: #001F3F;
}

.cvb-app.cvb-studio .cvb-row-actions .cvb-btn.ghost:hover,
.cvb-app.cvb-studio .cvb-row-actions .cvb-btn.ghost:focus {
  background-color: #EAF0F8;
  color: #001F3F;
}

/* Muted buttons (Clear All Fields) were 2.8:1. Desktop only: on phones the
   same button is already drawn in a readable red. */
@media (min-width: 768px) {
  .cvb-app.cvb-studio .cvb-btn.cvb-btn-muted {
    color: #5F7381;
  }

  .cvb-app.cvb-studio .cvb-btn.cvb-btn-muted:hover,
  .cvb-app.cvb-studio .cvb-btn.cvb-btn-muted:focus {
    color: #3F5463;
  }
}

/* ===== Part 3: owner tweaks after go-live ===== */

/* Journey rail inside the action bar (moved there by mergeRailIntoHead()). */
/* Three columns: an empty left column the same width as the actions, the
   steps centred over the builder, and Save / Next on the right. The rail must
   not scroll here: overflow:auto (inherited from its old bar) showed scrollbar
   arrows because the current-step underline pokes below the row. */
.cvb-app.cvb-studio .cvb-head.has-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
  align-items: center;
  column-gap: 24px;
}

.cvb-app.cvb-studio .cvb-head.has-rail .cvb-stage-tabs {
  grid-column: 2;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  justify-content: center;
}

.cvb-app.cvb-studio .cvb-head.has-rail .cvb-head-actions {
  grid-column: 3;
  justify-self: end;
}

/* Tablets and landscape phones (768-1023px): the rail and the actions did not
   fit on one row, and the rail ran underneath Back / Continue (mobile
   redesign review, 6 Nov 2026). Rail on its own scrolling row, actions below.
   1024px and wider is unchanged. */
@media (min-width: 768px) and (max-width: 1023px) {
  .cvb-app.cvb-studio .cvb-head.has-rail { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .cvb-app.cvb-studio .cvb-head.has-rail .cvb-stage-tabs {
    grid-column: 1;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }
  .cvb-app.cvb-studio .cvb-head.has-rail .cvb-stage-tabs::-webkit-scrollbar { display: none; }
  .cvb-app.cvb-studio .cvb-head.has-rail .cvb-head-actions { grid-column: 1; justify-self: end; }
}

@media (max-width: 1023px) {
  .cvb-app.cvb-studio .cvb-head.has-rail .cvb-stage-tabs { gap: 16px; }
  .cvb-app.cvb-studio .cvb-head.has-rail .cvb-stage-tabs > span,
  .cvb-app.cvb-studio .cvb-head.has-rail .cvb-stage-tabs > button { font-size: 14px; }
}

/* If the window is narrowed to phone width after the move, the rail drops to
   its own scrolling row inside the bar. */
@media (max-width: 767px) {
  .cvb-app.cvb-studio .cvb-head.has-rail { display: flex; }
  .cvb-app.cvb-studio .cvb-head.has-rail .cvb-stage-tabs { flex: 1 0 100%; order: 2; overflow-x: auto; justify-content: flex-start; }
}

/* Next / Continue in the navy action bar: teal (owner request). Navy text,
   because white on teal is under 3:1. Buttons on white stay blue. */
.cvb-app.cvb-studio .cvb-head .cvb-btn.gold {
  background: #2FA4A9;
  border-color: #2FA4A9;
  color: #001F3F;
}

.cvb-app.cvb-studio .cvb-head .cvb-btn.gold:hover,
.cvb-app.cvb-studio .cvb-head .cvb-btn.gold:focus {
  background: #7FCED2;
  border-color: #7FCED2;
  color: #001F3F;
}

/* Same gap under the bar on every step. Build and Approve get 14px from the
   editor layout padding; the single-card steps (Refine, Design, Download,
   cover letter) started flush against the bar once the rail moved into it. */
.cvb-app.cvb-studio .cvb-head.has-rail + .cvb-step-card {
  margin-top: 14px;
}

/* Design step header: title, payment note, ATS checks, then the designs.
   ".cvb-step-card p { margin: 0 }" outranked the note's own margin, so the
   "ATS Optimised" label sat flush against the note. */
.cvb-app.cvb-studio.cvb-step-8 .cvb-step-card > h2 {
  margin-bottom: 16px;
}

.cvb-app.cvb-studio.cvb-step-8 .cvb-step-card > .cvb-price-note {
  margin: 0 0 28px;
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
}

.cvb-app.cvb-studio.cvb-step-8 .cvb-step8-block > label {
  margin-bottom: 12px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #001F3F;
}

.cvb-app.cvb-studio.cvb-step-8 .cvb-ats-chips {
  gap: 10px 24px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #E3EAF2;
}

.cvb-app.cvb-studio.cvb-step-8 .cvb-step8-template-grid {
  gap: 20px;
}

@media (max-width: 767px) {
  .cvb-app.cvb-studio.cvb-step-8 .cvb-step-card > .cvb-price-note { margin-bottom: 22px; }
  .cvb-app.cvb-studio.cvb-step-8 .cvb-ats-chips { margin-bottom: 18px; padding-bottom: 18px; }
}

/* Phones: the main action gets two thirds of the row and may wrap. The site
   theme forces nowrap on buttons, which clipped "Continue to Checkout - $15". */
@media (max-width: 767px) {
  .cvb-app.cvb-studio .cvb-head-actions .cvb-btn.gold {
    flex: 2 1 0;
    white-space: normal;
    line-height: 1.2;
    height: auto;
    min-height: 44px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* Owner palette 2026-11-07: primary #001F3F for headings, main buttons and the
   bottom navigation; secondary #2FA4A9 for active steps, icons and highlights.
   Current step = teal disc with a navy number (white on teal is under 3:1).
   Done = pale teal disc, teal ring, dark-teal tick (reads on navy and on white). */
.cvb-app.cvb-studio .cvb-stage-mark.current,
.cvb-app.cvb-studio .scv-entry .cvb-stage-mark.current {
  background: #2FA4A9;
  border-color: #2FA4A9;
  color: #001F3F;
}

.cvb-app.cvb-studio .cvb-stage-mark.done,
.cvb-app.cvb-studio .scv-entry .cvb-stage-mark.done {
  background: #E6F4F5;
  border-color: #2FA4A9;
  color: #1E6E73;
}

.cvb-app.cvb-studio .cvb-stage-tabs span.active::after,
.cvb-app.cvb-studio .cvb-stage-tabs .cvb-stage-link.active::after {
  background: #2FA4A9;
}

.cvb-app.cvb-studio .scv-entry .scv-upload-icon,
.cvb-app.cvb-studio .scv-entry .scv-upload-icon svg,
.cvb-app.cvb-studio .scv-entry .scv-zone-bottom svg,
.cvb-app.cvb-studio .scv-entry .scv-manual-icon,
.cvb-app.cvb-studio .scv-entry .scv-manual-icon svg {
  color: #2FA4A9;
}