/* The CV builder: the wizard, and the sheet of paper it produces. Everything
   outside the tool -- hero, content sections, cards, FAQ -- comes from
   tool_page.css. */

/* The starfield behind the hero is a full-size absolutely positioned image at
   z-index 0, so anything sitting on top of it needs its own stacking context or
   the image eats every click. The other tool pages get this from .tp-hero;
   this one is an interactive form and needs it in its own right. */
.cvb {
  --cvb-accent: #7c3aed;
  --cvb-accent-soft: rgba(124, 58, 237, 0.16);
  --cvb-line: rgba(255, 255, 255, 0.11);
  --cvb-line-strong: rgba(255, 255, 255, 0.2);
  --cvb-surface: rgba(255, 255, 255, 0.045);
  --cvb-sunken: rgba(8, 2, 20, 0.42);
  --cvb-text: #f4f2ff;
  --cvb-muted: rgba(244, 242, 255, 0.58);
  --cvb-faint: rgba(244, 242, 255, 0.38);
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto 56px auto;
  padding: 0 16px;
  color: var(--cvb-text);
}

.cvb.is-side-by-side .cvb-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: 22px;
  align-items: start;
}

/* Top bar */

.cvb-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.cvb-bar-spacer {
  flex: 1 1 auto;
}

.cvb-segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--cvb-line-strong);
  background: var(--cvb-sunken);
}

.cvb-segment {
  border: none;
  background: none;
  color: var(--cvb-muted);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 15px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.cvb-segment:hover {
  color: var(--cvb-text);
}

.cvb-segment.is-active {
  background: var(--cvb-accent);
  color: #fff;
  box-shadow: 0 1px 10px rgba(124, 58, 237, 0.45);
}

.cvb-status {
  font-size: 12.5px;
  color: var(--cvb-faint);
}

.cvb-ghost-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--cvb-line-strong);
  background: var(--cvb-surface);
  color: var(--cvb-muted);
  border-radius: 9px;
  padding: 8px 13px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.cvb-ghost-button:hover {
  color: var(--cvb-text);
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.09);
}

.cvb-ghost-button[aria-pressed="true"] {
  color: var(--cvb-text);
  border-color: rgba(124, 58, 237, 0.7);
  background: var(--cvb-accent-soft);
}

.cvb-notice {
  margin: 0 0 14px 0;
  padding: 11px 16px;
  border-radius: 11px;
  font-size: 14px;
  background: var(--cvb-accent-soft);
  border: 1px solid rgba(124, 58, 237, 0.4);
  color: var(--cvb-text);
  animation: cvb-drop 0.24s ease both;
}

.cvb-notice.is-warn {
  background: rgba(255, 88, 88, 0.14);
  border-color: rgba(255, 120, 120, 0.4);
}

/* Wizard panel */

.cvb-panel {
  border-radius: 18px;
  border: 1px solid var(--cvb-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025));
  padding: 22px 24px 20px 24px;
  box-shadow: 0 20px 50px rgba(4, 0, 16, 0.35);
}

.cvb-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.cvb-progress-track {
  flex: 1 1 auto;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.cvb-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #8b5cf6, #c084fc);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cvb-progress-count {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--cvb-faint);
  font-variant-numeric: tabular-nums;
}

/* Stepper: numbered nodes joined by a rail that fills as you advance. */

.cvb-stepper {
  display: flex;
  gap: 2px;
  margin: 0 0 22px 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.cvb-stepper::-webkit-scrollbar {
  display: none;
}

.cvb-step-node {
  position: relative;
  flex: 1 1 0;
  min-width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border: none;
  background: none;
  padding: 2px 0 0 0;
  cursor: pointer;
  color: var(--cvb-faint);
  font-size: 11.5px;
  transition: color 0.18s ease;
}

/* The rail runs between the dots, not under the labels. */
.cvb-step-node::before {
  content: "";
  position: absolute;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.3s ease;
}

.cvb-step-node:first-child::before {
  display: none;
}

.cvb-step-node.is-done::before,
.cvb-step-node.is-active::before {
  background: var(--cvb-accent);
}

.cvb-step-dot {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.16);
  background: #180a2e;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.cvb-step-dot i {
  display: none;
  font-size: 15px;
}

.cvb-step-node:hover {
  color: var(--cvb-text);
}

.cvb-step-node:hover .cvb-step-dot {
  border-color: rgba(255, 255, 255, 0.4);
}

.cvb-step-node.is-done {
  color: var(--cvb-muted);
}

.cvb-step-node.is-done .cvb-step-dot {
  border-color: var(--cvb-accent);
  background: var(--cvb-accent);
  color: #fff;
}

.cvb-step-node.is-done .cvb-step-num {
  display: none;
}

.cvb-step-node.is-done .cvb-step-dot i {
  display: block;
}

.cvb-step-node.is-active {
  color: var(--cvb-text);
  font-weight: 600;
}

.cvb-step-node.is-active .cvb-step-dot {
  border-color: var(--cvb-accent);
  background: var(--cvb-accent);
  color: #fff;
  transform: scale(1.1);
  box-shadow: 0 0 0 5px rgba(124, 58, 237, 0.18);
}

.cvb-step-name {
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Step body */

.cvb-step[hidden] {
  display: none;
}

.cvb-step.is-entering {
  animation: cvb-step-in 0.28s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes cvb-step-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes cvb-drop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes cvb-card-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.99);
  }
}

.cvb-step-title {
  color: var(--cvb-text);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.2px;
  margin: 0 0 5px 0;
}

.cvb-step-hint {
  color: var(--cvb-muted);
  font-size: 13.5px;
  line-height: 21px;
  margin: 0 0 20px 0;
  max-width: 62ch;
}

.cvb-section + .cvb-section {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--cvb-line);
}

.cvb-section-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--cvb-muted);
  text-transform: uppercase;
  margin: 0 0 12px 0;
}

/* Fields */

.cvb-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 16px;
}

.cvb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  min-width: 0;
}

.cvb-field--wide {
  grid-column: 1 / -1;
}

.cvb-field-label {
  color: var(--cvb-muted);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.1px;
}

.cvb-field-hint,
.cvb-field-counter {
  color: var(--cvb-faint);
  font-size: 11.5px;
  line-height: 16px;
}

.cvb-field-counter {
  align-self: flex-end;
  font-variant-numeric: tabular-nums;
}

.cvb-field input[type="text"],
.cvb-field input[type="email"],
.cvb-field input[type="tel"],
.cvb-field input[type="url"],
.cvb-field textarea,
.cvb-field select {
  width: 100%;
  border-radius: 9px;
  border: 1px solid var(--cvb-line-strong);
  background: var(--cvb-sunken);
  color: var(--cvb-text);
  font-size: 14px;
  line-height: 21px;
  padding: 10px 12px;
  font-family: inherit;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.cvb-field textarea {
  resize: vertical;
  min-height: 92px;
}

.cvb-field input:focus,
.cvb-field textarea:focus,
.cvb-field select:focus {
  outline: none;
  border-color: #a78bfa;
  background: rgba(8, 2, 20, 0.6);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.22);
}

.cvb-field input::placeholder,
.cvb-field textarea::placeholder {
  color: rgba(244, 242, 255, 0.26);
}

.cvb-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(244, 242, 255, 0.5) 50%),
    linear-gradient(135deg, rgba(244, 242, 255, 0.5) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}

.cvb-field select option {
  color: #1a1a1a;
}

.cvb-field--check {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  align-self: end;
  padding-bottom: 11px;
  cursor: pointer;
}

.cvb-field--check input {
  width: 16px;
  height: 16px;
  accent-color: var(--cvb-accent);
  flex: 0 0 auto;
}

.cvb-month {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 8px;
}

.cvb-month.is-disabled {
  opacity: 0.4;
}

/* Repeatable cards */

.cvb-items {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.cvb-item {
  border-radius: 13px;
  border: 1px solid var(--cvb-line);
  background: rgba(8, 2, 20, 0.26);
  padding: 15px 16px;
  transition: border-color 0.18s ease;
}

.cvb-item:focus-within {
  border-color: rgba(124, 58, 237, 0.5);
}

.cvb-item.is-new {
  animation: cvb-card-in 0.26s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.cvb-item-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
}

.cvb-item-title {
  color: var(--cvb-text);
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cvb-item-actions {
  display: inline-flex;
  gap: 3px;
}

.cvb-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: none;
  color: var(--cvb-faint);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.cvb-icon-button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--cvb-text);
}

.cvb-icon-button:disabled {
  opacity: 0.25;
  cursor: default;
}

.cvb-icon-button--danger:hover:not(:disabled) {
  background: rgba(255, 88, 88, 0.18);
  color: #ffb4b4;
}

.cvb-empty {
  color: var(--cvb-faint);
  font-size: 13.5px;
  line-height: 20px;
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--cvb-line-strong);
  border-radius: 12px;
  text-align: center;
}

/* Buttons */

/* Carried by a <label> as well as a <button>, so the class states the whole box
   itself: the site-wide stylesheet gives every label a bottom margin, which
   left the file-picker sitting 8px off the row it shares. */
.cvb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}

.cvb-button:active:not(:disabled) {
  transform: translateY(1px);
}

.cvb-button--primary {
  background: var(--cvb-accent);
  color: #fff;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.36);
}

.cvb-button--primary:hover:not(:disabled) {
  background: #8b5cf6;
}

.cvb-button--ghost {
  border-color: var(--cvb-line-strong);
  background: var(--cvb-surface);
  color: var(--cvb-muted);
}

.cvb-button--ghost:hover:not(:disabled) {
  color: var(--cvb-text);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.32);
}

.cvb-button:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

.cvb-button.is-busy {
  cursor: progress;
  opacity: 0.7;
}

.cvb-add {
  margin-top: 13px;
  width: 100%;
  border-style: dashed;
}

.cvb-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--cvb-line);
}

.cvb-nav-spacer {
  flex: 1 1 auto;
}

/* Review step */

.cvb-checks {
  list-style: none;
  margin: 0 0 22px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cvb-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 20px;
  color: rgba(244, 242, 255, 0.8);
}

.cvb-check i {
  font-size: 16px;
  line-height: 20px;
  flex: 0 0 auto;
}

.cvb-check.is-pass i {
  color: #4ade80;
}

.cvb-check.is-warn i {
  color: #fbbf24;
}

/* Each action grows to fill whatever row it lands on, so the group ends flush
   at any panel width instead of leaving the ragged edge four naturally sized
   buttons produced. The basis values keep all four on one line when there is
   room and let them wrap into full rows when there is not; the primary asks for
   more of it, being the action the tool exists for. */
.cvb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.cvb-actions .cvb-button--primary {
  flex: 1.4 1 190px;
}

.cvb-actions .cvb-button--ghost {
  flex: 1 1 150px;
}

/* The input is kept in the layout only so a click on the label reaches it;
   the label positions it rather than letting it escape to whatever ancestor
   happens to be positioned. */
.cvb-file-button {
  position: relative;
  overflow: hidden;
}

.cvb-file-button input {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cvb-danger {
  margin-top: 20px;
}

.cvb-danger button {
  border: none;
  background: none;
  padding: 0;
  color: var(--cvb-faint);
  font-size: 12.5px;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.cvb-danger button:hover {
  color: #ffb4b4;
}

/* The sheet of paper */

.cvb-preview-pane {
  margin-top: 22px;
}

.cvb.is-side-by-side .cvb-preview-pane {
  margin-top: 0;
}

.cvb.is-side-by-side .cvb-paper-wrap {
  position: sticky;
  top: 20px;
}

.cvb-paper-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
}

.cvb-paper-label {
  color: var(--cvb-faint);
  font-size: 12.5px;
  margin: 0;
}

.cvb-pages {
  margin-left: auto;
  font-size: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: var(--cvb-muted);
  font-variant-numeric: tabular-nums;
}

.cvb-pages.is-warn {
  background: rgba(251, 191, 36, 0.16);
  color: #fcd34d;
}
.cvb-paper {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.36);
  padding: 44px 46px;
  overflow-y: auto;
  /* A serif stack that starts with the face the PDF actually embeds, so the
     preview is the same document rather than a similar one. Liberation Serif is
     metrically Times, which is what the fallbacks resolve to elsewhere. */
  font-family: "Liberation Serif", "Times New Roman", Times, Tinos, serif;
  color: #000;
  font-size: 13.5px;
  line-height: 1.24;
}

.cvb.is-side-by-side .cvb-paper {
  max-height: calc(100vh - 110px);
  padding: 36px 34px;
  font-size: 12.5px;
}

.cvb-doc-placeholder {
  color: #8a8a8a;
  font-size: 14px;
  text-align: center;
  margin: 48px 0;
}

.cvb-doc-head {
  text-align: center;
  border-top: 1px solid #000;
  padding-top: 10px;
}

.cvb-doc-name {
  font-size: 27px;
  font-weight: 700;
  margin: 0 0 1px 0;
  line-height: 1.1;
}

.cvb-doc-headline {
  font-size: 14px;
  font-style: italic;
  margin: 0 0 4px 0;
}

.cvb-doc-contacts {
  font-size: 12px;
  margin: 0;
  word-break: break-word;
}

.cvb-doc-contact {
  color: #000;
}

a.cvb-doc-contact:hover {
  color: #6e00ff;
}

/* Capitalised heading with a rule under it -- the same two blocks the PDF
   emits. Left-aligned on purpose: a centred heading is grouped into its own
   band by text extractors and ends up filed after the content it introduces.
   Capitalisation is done in JavaScript against the document's own language, not
   with text-transform, which would follow the page's. */
.cvb-doc-section {
  margin-top: 14px;
}

.cvb-doc-heading {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  margin: 0 0 7px 0;
  padding-bottom: 3px;
  border-bottom: 1px solid #000;
}

.cvb-doc-paragraph {
  margin: 0;
  text-align: justify;
}

.cvb-doc-entry + .cvb-doc-entry {
  margin-top: 10px;
}

.cvb-doc-row2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.cvb-doc-row2 > span:first-child {
  min-width: 0;
}

.cvb-doc-row2 > span:last-child {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

.cvb-doc-entry-title,
.cvb-doc-entry-date {
  font-weight: 700;
}

.cvb-doc-entry-org {
  font-style: italic;
}

.cvb-doc-entry-linkline {
  margin: 1px 0 0 0;
  font-size: 12.5px;
}

.cvb-doc-entry-link {
  color: #000;
  text-decoration: underline;
}

/* The site-wide stylesheet strips list markers, and it does so on the li
   rather than the ul, so putting them back has to happen there too. The PDF
   draws them; without this the two documents disagree. */
.cvb-doc-bullets {
  margin: 3px 0 0 0;
  padding-left: 17px;
}

.cvb-doc-bullets li {
  list-style: disc outside;
  margin-bottom: 1px;
}

.cvb-doc-line {
  margin: 0 0 3px 0;
}

.cvb-doc-line-label {
  font-weight: 700;
}

/* Where the PDF starts a new page. The position comes from pdfmake's own laid
   out pages, not from measuring this preview, so the rule sits exactly where
   the paper will be cut. */
.cvb-doc-break {
  position: relative;
  height: 0;
  margin: 13px 0;
  border-top: 1px dashed #c026d3;
}

.cvb-doc-break-label {
  position: absolute;
  top: -8px;
  right: 0;
  background: #fff;
  padding: 0 7px;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.3px;
  color: #c026d3;
  white-space: nowrap;
}

.cvb-doc-break.is-inside {
  border-top-style: dotted;
}

.is-split {
  background: rgba(192, 38, 211, 0.09);
  box-shadow: 0 0 0 3px rgba(192, 38, 211, 0.09);
  border-radius: 2px;
}
/* Side by side needs room for a readable sheet next to a two-column form.
   Below that the choice does not exist: the preview goes under the wizard and
   the toggle that offers the alternative is taken away rather than left to do
   nothing. */
@media (max-width: 1080px) {
  .cvb.is-side-by-side .cvb-shell {
    display: block;
  }

  .cvb.is-side-by-side .cvb-preview-pane {
    margin-top: 22px;
  }

  .cvb.is-side-by-side .cvb-paper-wrap {
    position: static;
  }

  .cvb.is-side-by-side .cvb-paper {
    max-height: none;
    padding: 44px 46px;
    font-size: 13.5px;
  }

  .cvb-layout-toggle {
    display: none;
  }
}

@media (max-width: 720px) {
  .cvb {
    padding: 0 12px;
  }

  .cvb-panel {
    padding: 18px 16px 16px 16px;
    border-radius: 15px;
  }

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

  .cvb-field--check {
    align-self: start;
    padding-bottom: 0;
  }

  /* The rail and the labels stop fitting; the dots stay, scrolled, and the
     progress line above them carries the sense of position. */
  .cvb-stepper {
    gap: 6px;
    margin-bottom: 20px;
  }

  .cvb-step-node {
    flex: 0 0 auto;
    min-width: 0;
  }

  .cvb-step-node::before {
    display: none;
  }

  .cvb-step-name {
    display: none;
  }

  .cvb-step-node.is-active .cvb-step-name {
    display: block;
  }

  .cvb-bar {
    gap: 9px;
  }

  .cvb-segment {
    padding: 7px 12px;
    font-size: 12.5px;
  }

  .cvb-actions .cvb-button--ghost {
    flex: 1 1 100%;
  }

  .cvb-paper {
    padding: 26px 22px;
    font-size: 12.5px;
  }

  .cvb-doc-name {
    font-size: 22px;
  }

  /* A date flush right stops fitting beside a wrapping title long before the
     PDF has the same problem, so on a narrow screen the row stacks. The PDF is
     unaffected -- this is the preview making itself readable, not the document
     changing. */
  .cvb-doc-row2 {
    display: block;
  }

  .cvb-doc-row2 > span:last-child {
    display: block;
    text-align: left;
    white-space: normal;
    color: #333;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cvb-step.is-entering,
  .cvb-item.is-new,
  .cvb-notice {
    animation: none;
  }

  .cvb-progress-fill,
  .cvb-step-dot,
  .cvb-button {
    transition: none;
  }
}