body.BrandBuilder,body.BrandBuilder button,body.BrandBuilder input{font-family:Montserrat,sans-serif}body.BrandBuilder .bb-page{max-width:var(--content-max-standard);margin:0 auto;padding:18px 0 56px;color:#25153c}body.BrandBuilder .bb-page *{box-sizing:border-box}.bb-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;padding:28px;border:1px solid #e7dbf1;border-radius:22px;background:linear-gradient(135deg,#faf5ff,#fff 55%,#fff7ed);box-shadow:0 14px 42px rgba(77,36,138,.06)}.bb-hero-copy{display:flex;gap:16px;min-width:0}.bb-tile,.bb-context-icon,.bb-empty-icon,.bb-card-icon{display:grid;place-items:center;flex:0 0 auto}.bb-tile{width:58px;height:58px;border-radius:17px;color:#fff;background:linear-gradient(135deg,#9333ea,#f97316);box-shadow:0 10px 22px rgba(147,51,234,.25)}.bb-tile svg{width:28px;height:28px}.bb-eyebrow,.bb-section-heading>span,.bb-kit-preview>div>span{display:block;margin-bottom:5px;color:#8a5ab1;font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.bb-hero h1{margin:0;font-size:32px;line-height:1.15;letter-spacing:-.03em}.bb-hero p{max-width:590px;margin:7px 0 0;color:#72588f;font-size:14px;line-height:1.55}.bb-hero-actions{display:flex;flex:0 0 auto;gap:9px}.bb-primary-button,.bb-secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 13px;border-radius:10px;cursor:pointer;font:inherit;font-size:13px;font-weight:700;transition:.18s ease}.bb-primary-button{border:0;color:#fff;background:linear-gradient(90deg,#9333ea,#f97316);box-shadow:0 8px 17px rgba(147,51,234,.2)}.bb-primary-button:hover{transform:translateY(-1px);filter:brightness(1.04)}.bb-secondary-button{border:1px solid #dfcdec;color:#713e99;background:#fff}.bb-secondary-button:hover{border-color:#c48be3;background:#fbf7ff}.bb-primary-button svg,.bb-secondary-button svg{width:16px;height:16px}.bb-kit-picker{position:relative}.bb-kit-picker [data-bb-kit-count]{min-width:18px;padding:1px 5px;border-radius:99px;color:#6c28a0;background:#eedffc;font-size:10px;text-align:center}.bb-kit-menu{position:absolute;z-index:20;top:calc(100% + 8px);right:0;width:290px;max-height:340px;overflow:auto;padding:8px;border:1px solid #e2d2ee;border-radius:13px;background:#fff;box-shadow:0 18px 42px rgba(49,21,76,.2)}.bb-kit-menu-heading{padding:6px 8px;color:#8d70a9;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.bb-kit-item{display:flex;align-items:center;gap:9px;width:100%;padding:9px;border:0;border-radius:8px;color:#321b4b;background:transparent;text-align:left;cursor:pointer}.bb-kit-item:hover,.bb-kit-item.is-selected{background:#f8f1fd}.bb-kit-item>svg{width:17px;color:#9236d4}.bb-kit-item span{min-width:0}.bb-kit-item strong,.bb-kit-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bb-kit-item strong{font-size:12px}.bb-kit-item small{margin-top:2px;color:#8d70a9;font-size:10px}.bb-kit-empty{padding:17px 8px;color:#876aa2;font-size:12px;text-align:center}.bb-context-card{display:flex;align-items:center;gap:13px;margin-top:24px;padding:16px 18px;border:1px solid #e5d7ef;border-radius:15px;background:#fff}.bb-context-icon{width:38px;height:38px;border-radius:11px;color:#8c3acf;background:#f3e7fb}.bb-context-icon svg{width:19px;height:19px}.bb-context-card>div{min-width:0;flex:1}.bb-context-card span,.bb-context-card strong,.bb-context-card p{display:block}.bb-context-card span{color:#8d70a9;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.bb-context-card strong{margin-top:3px;color:#351d50;font-size:14px}.bb-context-card p{margin:3px 0 0;color:#775b93;font-size:12px}.bb-context-link{display:inline-flex;align-items:center;gap:5px;color:#7836aa;font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap}.bb-context-link svg{width:14px;height:14px}.bb-empty{display:flex;align-items:flex-start;gap:19px;margin-top:28px;padding:34px;border:1px dashed #d9c5e9;border-radius:18px;background:linear-gradient(135deg,#fcf8ff,#fff)}.bb-empty-icon{width:53px;height:53px;border-radius:16px;color:#8736c5;background:#f4e8fc}.bb-empty-icon svg{width:25px;height:25px}.bb-empty h2{margin:0;font-size:22px;letter-spacing:-.02em}.bb-empty p{max-width:610px;margin:7px 0 0;color:#72588f;font-size:13px;line-height:1.55}.bb-empty-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:17px}.bb-builder{margin-top:26px}.bb-stepper{display:flex;align-items:flex-start;max-width:820px;margin:0 auto 32px}.bb-stepper>span{display:flex;align-items:center;gap:9px;color:#8d70a9}.bb-stepper b{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:2px solid #d7c4e6;border-radius:50%;background:#fff;font-size:12px}.bb-stepper .is-current{color:#6d259e}.bb-stepper .is-current b{border-color:#9333ea;color:#fff;background:linear-gradient(135deg,#9333ea,#f97316)}.bb-stepper small,.bb-stepper strong{display:block}.bb-stepper small{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.bb-stepper strong{margin-top:2px;color:#43285d;font-size:12px;white-space:nowrap}.bb-stepper>i{flex:1;height:2px;margin:14px 10px 0;background:#eadff2}.bb-section{margin-top:24px}.bb-section-heading{display:flex;align-items:center;gap:9px;margin-bottom:12px}.bb-section-heading h2{margin:0;font-size:20px;letter-spacing:-.02em}.bb-section-heading em{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:99px;color:#7035a0;background:#f3e8fc;font-size:10px;font-style:normal;font-weight:800}.bb-section-heading em svg{width:12px;height:12px}.bb-card{min-height:156px;padding:21px;border:1px solid #e6dbef;border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(52,24,82,.05)}.bb-card-icon{width:37px;height:37px;margin-bottom:11px;border-radius:11px;color:#8a35ce;background:#f4eafa}.bb-card-icon svg{width:19px;height:19px}.bb-card h3{margin:0;color:#301a4a;font-size:16px}.bb-card p{margin:6px 0 15px;color:#765b91;font-size:12px;line-height:1.55}.bb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}.bb-swatches{display:flex;margin-bottom:17px}.bb-swatches i{display:block;width:34px;height:34px;margin-right:-5px;border:3px solid #fff;border-radius:50%;box-shadow:0 2px 5px rgba(46,24,68,.12)}.bb-swatches i:nth-child(1){background:#6d28d9}.bb-swatches i:nth-child(2){background:#db2777}.bb-swatches i:nth-child(3){background:#f97316}.bb-swatches i:nth-child(4){background:#f5d0fe}.bb-kit-preview{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:28px;padding:24px;border:1px solid #e2d2ee;border-radius:16px;background:linear-gradient(135deg,#faf5ff,#fff 65%,#fff7ed)}.bb-kit-preview h2{margin:0;font-size:19px}.bb-kit-preview p{margin:5px 0 0;color:#765b91;font-size:13px}.bb-kit-status{padding:6px 10px;border-radius:99px;color:#7035a0;background:#f2e6fb;font-size:11px;font-weight:800}.bb-modal{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;padding:18px}.bb-modal-backdrop{position:absolute;inset:0;background:rgba(34,18,53,.46)}.bb-modal-card{position:relative;width:min(100%,440px);padding:27px;border-radius:18px;background:#fff;box-shadow:0 24px 70px rgba(28,13,46,.3)}.bb-modal-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:8px;color:#805f9d;background:transparent;cursor:pointer}.bb-modal-close:hover{background:#f6effa}.bb-modal-close svg{width:17px;height:17px}.bb-modal-card h2{margin:0;color:#2b1645;font-size:21px}.bb-modal-card p{margin:7px 0 0;color:#765b91;font-size:13px;line-height:1.5}.bb-field{display:block;margin-top:19px}.bb-field span{display:block;margin-bottom:7px;color:#452b60;font-size:12px;font-weight:800}.bb-field input{width:100%;height:42px;padding:0 12px;border:1px solid #ddcce9;border-radius:10px;outline:0;color:#2f1748;font:inherit;font-size:13px}.bb-field input:focus{border-color:#a85be1;box-shadow:0 0 0 3px rgba(168,91,225,.12)}.bb-modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:23px}@media(max-width:800px){body.BrandBuilder .bb-page{padding:10px 0 42px}.bb-hero{flex-direction:column;padding:22px}.bb-hero-actions{width:100%;flex-wrap:wrap}.bb-grid{grid-template-columns:1fr}.bb-stepper{overflow:auto}.bb-stepper>i{min-width:20px}.bb-context-card{align-items:flex-start}.bb-context-link{margin-top:3px}}@media(max-width:520px){.bb-hero-actions>*{flex:1}.bb-kit-picker>.bb-secondary-button{width:100%}.bb-empty{padding:25px;flex-direction:column}.bb-kit-preview{align-items:flex-start;flex-direction:column}.bb-modal-actions .bb-primary-button,.bb-modal-actions .bb-secondary-button{flex:1}}

/* The component declares display:grid; explicitly preserve the HTML hidden
   attribute when the modal is not open. */
.bb-modal[hidden] { display: none; }

.bb-interview-card { position:relative; }
.bb-interview-card[hidden] { display:none; }
.bb-interview-progress { display:flex; align-items:center; gap:12px; margin-bottom:18px; color:#81649d; font-size:11px; font-weight:750; }
.bb-interview-progress-track { display:block; flex:1; height:6px; overflow:hidden; border-radius:999px; background:#eee4f5; }
.bb-interview-progress-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#9333ea,#f97316); transition:width .25s ease; }
.bb-interview-question-icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:12px; border-radius:13px; color:#8634c7; background:#f4e8fb; }
.bb-interview-question-icon svg { width:21px; height:21px; }
.bb-interview-card h3 { max-width:730px; font-size:18px; line-height:1.4; }
.bb-interview-answer { display:block; margin-top:17px; }
.bb-interview-answer textarea { display:block; width:100%; padding:11px 12px; border:1px solid #ddcce9; border-radius:10px; outline:0; resize:vertical; color:#2f1748; background:#fff; font:inherit; font-size:13px; line-height:1.5; }
.bb-interview-answer textarea:focus { border-color:#a85be1; box-shadow:0 0 0 3px rgba(168,91,225,.12); }
.bb-interview-status { min-height:18px; margin:8px 0 0; color:#4b8c65; font-size:12px; font-weight:650; }
.bb-interview-status.is-error { color:#b13d55; }
.bb-interview-actions { display:flex; align-items:center; justify-content:flex-end; gap:9px; margin-top:14px; }
.bb-interview-actions [data-bb-interview-back] { margin-right:auto; }
.bb-interview-complete { display:flex; align-items:flex-start; gap:13px; }
.bb-interview-complete .bb-card-icon { margin:0; }
.bb-sr { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media (max-width:520px) { .bb-interview-actions { flex-wrap:wrap; } .bb-interview-actions [data-bb-interview-back] { margin-right:0; } }

.bb-interview-actions button:disabled { opacity:.62; cursor:wait; transform:none; }
.bb-interview-status:not(:empty)::before { content:""; display:inline-block; width:10px; height:10px; margin-right:6px; border:2px solid #c9a7df; border-top-color:#7d2db7; border-radius:50%; vertical-align:-1px; animation:bb-interview-spin .75s linear infinite; }
.bb-interview-status.is-error::before { display:none; }
@keyframes bb-interview-spin { to { transform:rotate(360deg); } }

/* Components use their own display modes; the semantic hidden attribute must
   still win for menus, interview controls and conditional content. */
body.BrandBuilder .bb-page [hidden] { display:none !important; }


/* Section-based Brand Builder layout. Interaction and persistence are added in
   subsequent implementation steps; these styles intentionally make the current
   structural placeholders feel complete and keep their data hooks stable. */
.bb-sections {
  display: grid;
  gap: 24px;
}

.bb-sections .bb-section {
  margin-top: 0;
}

.bb-section-heading {
  align-items: flex-start;
  gap: 12px;
}

.bb-section-heading > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0;
  border: 1px solid #d8c2e9;
  border-radius: 50%;
  color: #7135a0;
  background: #fbf7ff;
  font-size: 12px;
  letter-spacing: 0;
}

.bb-section-heading > div {
  min-width: 0;
}

.bb-section-heading h2 {
  margin-top: 1px;
}

.bb-section-heading p {
  margin: 4px 0 0;
  color: #765b91;
  font-size: 12px;
  line-height: 1.45;
}

.bb-section-card {
  min-height: 0;
  padding: 22px 23px;
}

.bb-section-card-copy {
  min-width: 0;
}

.bb-section-card-actions,
.bb-section-card-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bb-section-card-actions {
  flex-wrap: wrap;
  margin-top: 16px;
}

.bb-section-card-footer {
  justify-content: space-between;
  margin-top: 19px;
  padding-top: 16px;
  border-top: 1px solid #f0e8f5;
}

.bb-section-card-footer p {
  max-width: 680px;
  margin: 0;
}

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

.bb-name-style {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 13px;
  border: 1px solid #e5d8ee;
  border-radius: 12px;
  background: #fff;
}

.bb-name-style.is-selected {
  border-color: #b56de7;
  background: linear-gradient(135deg, #fbf5ff, #fff);
  box-shadow: 0 6px 18px rgba(112, 53, 160, .09);
}

.bb-name-style small {
  color: #896ca5;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.bb-name-style strong {
  overflow: hidden;
  color: #321a4d;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-name-style-serif strong {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 600;
}

.bb-name-style-caps strong {
  font-size: 16px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.bb-name-style-script strong {
  font-family: 'Brush Script MT', 'Segoe Script', cursive;
  font-size: 25px;
  font-weight: 500;
}

.bb-palette-preview,
.bb-identity-preview {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bb-palette-preview > span {
  display: block;
  width: 42px;
  height: 42px;
  margin-right: -20px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(46, 24, 68, .14);
}

.bb-palette-preview > div {
  margin-left: 16px;
}

.bb-palette-preview strong,
.bb-tone-card strong {
  display: block;
  color: #351d50;
  font-size: 14px;
}

.bb-palette-preview p,
.bb-tone-card p {
  margin: 4px 0 0;
}

.bb-tone-preview {
  display: flex;
  align-items: center;
  gap: 17px;
}

.bb-tone-card {
  flex: 1;
  padding: 15px 16px;
  border: 1px solid #e5d8ee;
  border-radius: 12px;
  background: linear-gradient(135deg, #fbf6ff, #fff);
}

.bb-tone-card small {
  display: block;
  margin-bottom: 7px;
  color: #8a5ab1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bb-tone-tags {
  display: flex;
  flex: 0 0 180px;
  flex-wrap: wrap;
  gap: 7px;
}

.bb-tone-tags span {
  padding: 6px 9px;
  border: 1px solid #e5d8ee;
  border-radius: 999px;
  color: #74429b;
  background: #fbf7ff;
  font-size: 11px;
  font-weight: 700;
}

.bb-identity-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  background: linear-gradient(135deg, #fff, #fbf5ff 72%, #fff8ef);
}

.bb-identity-preview {
  min-width: 0;
}

.bb-identity-preview .bb-card-icon {
  margin: 0;
}

.bb-identity-preview h3 {
  margin: 0;
}

.bb-identity-preview p {
  max-width: 620px;
  margin-bottom: 0;
}

.bb-identity-build-placeholder {
  margin-top: 14px;
}

@media (max-width: 800px) {
  .bb-name-design-preview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bb-identity-card,
  .bb-tone-preview {
    align-items: flex-start;
    flex-direction: column;
  }

  .bb-tone-tags {
    flex-basis: auto;
  }
}

@media (max-width: 520px) {
  .bb-section-card {
    padding: 18px;
  }

  .bb-section-card-footer,
  .bb-palette-preview {
    align-items: flex-start;
    flex-direction: column;
  }

  .bb-section-card-footer .bb-secondary-button,
  .bb-identity-card .bb-section-card-actions,
  .bb-identity-card .bb-section-card-actions button {
    width: 100%;
  }

  .bb-palette-preview > div {
    margin-left: 0;
  }
}


.bb-brand-name-card {
  padding: 24px;
  background: linear-gradient(135deg, #fff, #fbf6ff 72%, #fff9f1);
}

.bb-brand-name-intro,
.bb-brand-name-editor {
  display: flex;
  gap: 14px;
}

.bb-brand-name-intro {
  align-items: flex-start;
  max-width: 760px;
  margin-bottom: 21px;
}

.bb-brand-name-intro .bb-card-icon {
  margin: 0;
}

.bb-brand-name-intro h3 {
  margin: 1px 0 0;
}

.bb-brand-name-intro p {
  margin: 5px 0 0;
}

.bb-brand-name-editor {
  align-items: flex-end;
}

.bb-brand-name-field {
  display: block;
  flex: 1;
}

.bb-brand-name-field > span {
  display: block;
  margin-bottom: 7px;
  color: #452b60;
  font-size: 12px;
  font-weight: 800;
}

.bb-brand-name-field input {
  width: 100%;
  height: 48px;
  padding: 0 13px;
  border: 1px solid #ddcce9;
  border-radius: 11px;
  outline: 0;
  color: #301a4a;
  background: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
}

.bb-brand-name-field input:focus {
  border-color: #a85be1;
  box-shadow: 0 0 0 3px rgba(168, 91, 225, .12);
}

.bb-field-status {
  min-height: 18px;
  margin: 8px 0 0;
  color: #4b8c65;
  font-size: 12px;
  font-weight: 650;
}

.bb-field-status.is-error {
  color: #b13d55;
}

.bb-design-tabs {
  display: flex;
  gap: 4px;
  margin: -2px 0 19px;
  padding: 4px;
  border-radius: 11px;
  background: #f6effa;
}

.bb-design-tabs button {
  flex: 1;
  min-height: 36px;
  padding: 7px 11px;
  border: 0;
  border-radius: 8px;
  color: #795b95;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
}

.bb-design-tabs button:hover {
  color: #5f2f88;
}

.bb-design-tabs button.is-active {
  color: #61268f;
  background: #fff;
  box-shadow: 0 2px 7px rgba(54, 25, 82, .10);
}

.bb-name-style {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.bb-name-style:hover {
  border-color: #c58ce5;
  transform: translateY(-1px);
}

.bb-name-style:focus-visible {
  outline: 3px solid rgba(168, 91, 225, .22);
  outline-offset: 2px;
}

.bb-typography-preview {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 12px;
}

.bb-type-sample {
  min-height: 142px;
  padding: 17px;
  border: 1px solid #e5d8ee;
  border-radius: 12px;
  background: #fff;
}

.bb-type-sample small,
.bb-type-sample span {
  display: block;
  color: #896ca5;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.bb-type-sample strong {
  display: block;
  margin: 17px 0 22px;
  color: #321a4d;
  font-size: 25px;
  line-height: 1.12;
  letter-spacing: -.04em;
}

.bb-type-sample p {
  margin: 13px 0 15px;
  color: #57406d;
  font-size: 13px;
  line-height: 1.55;
}

.bb-type-sample span {
  color: #a083b6;
  font-size: 9px;
}

@media (max-width: 620px) {
  .bb-design-tabs {
    flex-direction: column;
  }

  .bb-typography-preview {
    grid-template-columns: 1fr;
  }
}


.bb-brand-name-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
}

.bb-brand-name-card .bb-field-status {
  margin-bottom: 0;
}

.bb-typography-preview .bb-type-sample {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.bb-typography-preview .bb-type-sample:hover {
  border-color: #c58ce5;
  transform: translateY(-1px);
}

.bb-typography-preview .bb-type-sample.is-selected {
  border-color: #b56de7;
  background: linear-gradient(135deg, #fbf5ff, #fff);
  box-shadow: 0 6px 18px rgba(112, 53, 160, .09);
}

.bb-type-serif strong {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 600;
}

.bb-type-caps strong {
  font-size: 19px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .bb-brand-name-editor {
    align-items: stretch;
    flex-direction: column;
  }

  .bb-brand-name-actions,
  .bb-brand-name-actions button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .bb-brand-name-card {
    padding: 19px;
  }
}


/* Colours editor and curated smart palettes. */
.bb-colours-card {
  background: linear-gradient(135deg, #fff, #fbf7ff 72%, #fff9f2);
}

.bb-colours-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.bb-colours-heading-row h3 {
  margin: 0;
}

.bb-colours-heading-row p {
  margin: 5px 0 0;
}

.bb-colour-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 13px;
  margin-top: 20px;
}

.bb-colour-row {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 73px;
}

.bb-colour-picker {
  position: relative;
  display: block;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(46, 24, 68, .18);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.bb-colour-picker:hover {
  box-shadow: 0 6px 14px rgba(46, 24, 68, .24);
  transform: translateY(-1px);
}

.bb-colour-picker input {
  position: absolute;
  inset: -9px;
  width: calc(100% + 18px);
  height: calc(100% + 18px);
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.bb-colour-picker span {
  display: block;
  width: 100%;
  height: 100%;
}

.bb-colour-hex {
  display: block;
  width: 100%;
}

.bb-colour-hex input {
  width: 100%;
  min-width: 0;
  padding: 3px 1px;
  border: 0;
  border-bottom: 1px solid transparent;
  outline: 0;
  color: #5a3a70;
  background: transparent;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .035em;
  text-align: center;
}

.bb-colour-hex input:focus {
  border-bottom-color: #b56de7;
}

.bb-colour-remove {
  position: absolute;
  top: -3px;
  right: 0;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #875f9d;
  background: #f5edf9;
  box-shadow: 0 1px 4px rgba(46, 24, 68, .13);
  cursor: pointer;
}

.bb-colour-remove:hover {
  color: #fff;
  background: #be4d67;
}

.bb-colour-remove svg {
  width: 10px;
  height: 10px;
}

.bb-colour-add-swatch {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  margin: 0 9px 0 1px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #693a91;
  background: conic-gradient(from 210deg, #f8c7dc, #f9dfa6, #cceec6, #bfe9ed, #cbd2fb, #e7c3f3, #f8c7dc);
  box-shadow: 0 3px 10px rgba(46, 24, 68, .16);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}

.bb-colour-add-swatch::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
}

.bb-colour-add-swatch:hover {
  box-shadow: 0 6px 14px rgba(46, 24, 68, .23);
  transform: translateY(-1px) rotate(8deg);
}

.bb-colour-add-swatch svg {
  position: relative;
  z-index: 1;
  width: 19px;
  height: 19px;
}

.bb-colours-empty {
  margin: 18px 0 0 !important;
  padding: 13px 14px;
  border: 1px dashed #d9c7e7;
  border-radius: 11px;
  color: #876a9e !important;
  background: #fcf9fe;
}

.bb-smart-palettes {
  margin-top: 24px;
  padding: 17px;
  border: 1px solid #eadcf2;
  border-radius: 14px;
  background: #fcf9fe;
}

.bb-smart-palettes-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.bb-smart-palettes-heading > div > span {
  display: block;
  margin-bottom: 3px;
  color: #9255bd;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bb-smart-palettes-heading h3 {
  margin: 0;
  font-size: 14px;
}

.bb-smart-palettes-heading p {
  margin: 3px 0 0;
}

.bb-smart-palettes-heading > svg {
  width: 20px;
  height: 20px;
  color: #9a50ca;
}

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

.bb-smart-palette-card {
  min-width: 0;
  padding: 10px;
  border: 1px solid #e3d5ec;
  border-radius: 11px;
  color: #3a2152;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.bb-smart-palette-card:hover {
  border-color: #c58ce5;
  box-shadow: 0 5px 13px rgba(76, 37, 110, .08);
  transform: translateY(-1px);
}

.bb-smart-palette-card:focus-visible {
  outline: 3px solid rgba(168, 91, 225, .22);
  outline-offset: 2px;
}

.bb-smart-palette-swatches {
  display: flex;
  height: 35px;
  margin-bottom: 9px;
  overflow: hidden;
  border-radius: 8px;
}

.bb-smart-palette-swatches i {
  display: block;
  flex: 1;
}

.bb-smart-palette-card strong,
.bb-smart-palette-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-smart-palette-card strong {
  font-size: 11px;
  font-weight: 800;
}

.bb-smart-palette-card small {
  margin-top: 3px;
  color: #9275a8;
  font-size: 9px;
  line-height: 1.3;
}

.bb-smart-palettes-loading {
  grid-column: 1 / -1;
  padding: 14px;
  border: 1px dashed #d9c7e7;
  border-radius: 10px;
  color: #8b6aa4;
  font-size: 12px;
  text-align: center;
}

.bb-show-more-palettes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin-top: 12px;
  padding: 5px;
  border: 0;
  color: #7433a5;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}

.bb-show-more-palettes:hover {
  color: #52217c;
}

.bb-show-more-palettes svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 800px) {
  .bb-smart-palette-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .bb-colours-heading-row {
    flex-direction: column;
  }

  .bb-colour-list {
    gap: 11px;
  }
}

@media (max-width: 420px) {
  .bb-smart-palette-grid {
    grid-template-columns: 1fr;
  }

  .bb-colours-heading-row .bb-secondary-button {
    width: 100%;
  }
}


/* Completion state shared by the section markers and progress sequence. */
.bb-section.is-complete .bb-section-heading > span,
.bb-stepper > span.is-complete b {
  border-color: #9333ea;
  color: #fff;
  background: linear-gradient(135deg, #9333ea, #f97316);
  box-shadow: 0 5px 12px rgba(147, 51, 234, .23);
}

.bb-section.is-complete .bb-section-heading > span {
  font-size: 0;
}

.bb-section.is-complete .bb-section-heading > span::after {
  content: "✓";
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.bb-stepper > span.is-complete {
  color: #6d259e;
}

.bb-stepper > span.is-complete b {
  font-size: 0;
}

.bb-stepper > span.is-complete b::after {
  content: "✓";
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}


/* Voice and Tone selection and customisation. */
.bb-voice-card {
  background: linear-gradient(135deg, #fff, #fbf6ff 67%, #fff8ef);
}

.bb-voice-intro,
.bb-tone-editor-heading,
.bb-tone-editor-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.bb-voice-intro h3,
.bb-tone-editor-heading h3 {
  margin: 0;
}

.bb-voice-intro p {
  margin: 5px 0 0;
}

.bb-tone-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.bb-tone-option {
  min-width: 0;
  padding: 15px;
  border: 1px solid #e5d8ee;
  border-radius: 13px;
  color: #3b2055;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.bb-tone-option:hover {
  border-color: #c58ce5;
  box-shadow: 0 6px 15px rgba(76, 37, 110, .08);
  transform: translateY(-1px);
}

.bb-tone-option:focus-visible {
  outline: 3px solid rgba(168, 91, 225, .22);
  outline-offset: 2px;
}

.bb-tone-option.is-selected {
  border-color: #b56de7;
  background: linear-gradient(135deg, #fbf4ff, #fff);
  box-shadow: 0 6px 18px rgba(112, 53, 160, .10);
}

.bb-tone-option-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 17px;
}

.bb-tone-option-top small {
  color: #9669b6;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bb-tone-option-top svg {
  width: 17px;
  height: 17px;
  padding: 2px;
  border-radius: 50%;
  color: transparent;
  background: #eee4f5;
}

.bb-tone-option.is-selected .bb-tone-option-top svg {
  color: #fff;
  background: linear-gradient(135deg, #9333ea, #f97316);
}

.bb-tone-option strong {
  display: block;
  margin-top: 10px;
  color: #321a4d;
  font-size: 15px;
}

.bb-tone-option p {
  min-height: 37px;
  margin: 5px 0 11px;
}

.bb-tone-option-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.bb-tone-option-tags i {
  padding: 4px 7px;
  border-radius: 999px;
  color: #74429b;
  background: #f5edf9;
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
}

.bb-tone-option em {
  display: block;
  overflow: hidden;
  margin-top: 11px;
  color: #896ba2;
  font-size: 10px;
  font-style: italic;
  line-height: 1.4;
}

.bb-tone-option em:empty {
  display: none;
}

.bb-tone-options-empty {
  grid-column: 1 / -1;
  padding: 15px;
  border: 1px dashed #d9c7e7;
  border-radius: 11px;
  color: #876a9e;
  background: #fcf9fe;
  font-size: 12px;
  text-align: center;
}

.bb-tone-editor {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #dfc9ed;
  border-radius: 13px;
  background: #fcf8ff;
}

.bb-tone-editor-heading > div > span,
.bb-tone-editor label > span {
  display: block;
  margin-bottom: 5px;
  color: #8b5bad;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bb-tone-editor label {
  display: block;
  margin-top: 15px;
}

.bb-tone-editor textarea {
  display: block;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #ddcce9;
  border-radius: 10px;
  outline: 0;
  resize: vertical;
  color: #301a4a;
  background: #fff;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
}

.bb-tone-editor textarea:focus {
  border-color: #a85be1;
  box-shadow: 0 0 0 3px rgba(168, 91, 225, .12);
}

.bb-tone-editor-actions {
  align-items: center;
  justify-content: flex-end;
  margin-top: 13px;
}

.bb-tone-customise {
  padding: 4px 0;
  border: 0;
  color: #7433a5;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}

.bb-tone-customise:hover {
  color: #52217c;
  text-decoration: underline;
}

@media (max-width: 620px) {
  .bb-voice-intro {
    flex-direction: column;
  }

  .bb-tone-option-grid {
    grid-template-columns: 1fr;
  }
}


/* Identity generation entry and revealed direction interview. */
.bb-identity-generate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 14px;
  padding: 15px 18px 15px 20px;
  border: 1px solid #e5d7ef;
  border-radius: 14px;
  background: linear-gradient(135deg, #faf6ff, #fff);
}

.bb-identity-generate-row p {
  max-width: 620px;
  margin: 0;
  color: #765b91;
  font-size: 12px;
  line-height: 1.5;
}

.bb-identity-build {
  margin-top: 14px;
}

.bb-identity-build .bb-interview-card {
  min-height: 0;
  background: linear-gradient(135deg, #fff, #fcf8ff 72%, #fffaf4);
}

.bb-identity-build .bb-interview-card > div:last-child {
  min-width: 0;
}

.bb-identity-build .bb-interview-start {
  align-items: flex-start;
}

@media (max-width: 620px) {
  .bb-identity-generate-row {
    align-items: stretch;
    flex-direction: column;
  }

  .bb-identity-generate-row .bb-primary-button {
    width: 100%;
  }
}


/* BrandKit-owned logo selection and generation. */
.bb-logo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.bb-logo-assets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 11px;
  margin-top: 18px;
}

.bb-logo-empty {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 10px;
  padding: 15px;
  border: 1px dashed #d9c7e7;
  border-radius: 12px;
  color: #85689d;
  background: #fcf9fe;
}

.bb-logo-empty svg {
  width: 20px;
  height: 20px;
  color: #a05acb;
}

.bb-logo-empty span {
  color: #57376e;
  font-size: 12px;
  font-weight: 800;
}

.bb-logo-empty small {
  font-size: 11px;
}

.bb-logo-asset {
  position: relative;
  min-width: 0;
  padding: 8px;
  border: 1px solid #e5d8ee;
  border-radius: 12px;
  color: #40255b;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.bb-logo-asset:hover {
  border-color: #c58ce5;
  transform: translateY(-1px);
}

.bb-logo-asset.is-selected {
  border-color: #b56de7;
  background: linear-gradient(135deg, #fbf5ff, #fff);
  box-shadow: 0 6px 18px rgba(112, 53, 160, .10);
}

.bb-logo-asset-image {
  display: grid;
  place-items: center;
  height: 106px;
  overflow: hidden;
  border-radius: 8px;
  color: #a078b5;
  background: linear-gradient(135deg, #faf6fd, #f3edf7);
}

.bb-logo-asset-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bb-logo-asset-image svg {
  width: 25px;
  height: 25px;
}

.bb-logo-asset-name {
  display: block;
  overflow: hidden;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-logo-asset > svg {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 19px;
  height: 19px;
  padding: 3px;
  border: 2px solid #fff;
  border-radius: 50%;
  color: transparent;
  background: #eee4f5;
}

.bb-logo-asset.is-selected > svg {
  color: #fff;
  background: linear-gradient(135deg, #9333ea, #f97316);
}

.bb-logo-brief {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid #f0e8f5;
}

.bb-logo-brief label {
  display: block;
}

.bb-logo-brief label > span {
  display: block;
  margin-bottom: 6px;
  color: #8b5bad;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bb-logo-brief textarea {
  display: block;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #ddcce9;
  border-radius: 10px;
  outline: 0;
  resize: vertical;
  color: #301a4a;
  background: #fff;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
}

.bb-logo-brief textarea:focus {
  border-color: #a85be1;
  box-shadow: 0 0 0 3px rgba(168, 91, 225, .12);
}

.bb-logo-brief > div {
  min-width: 152px;
}

.bb-logo-brief .bb-field-status {
  max-width: 180px;
  margin-bottom: 0;
}

[data-bb-generate-logo]:disabled {
  opacity: .7;
  cursor: wait;
  transform: none;
}

[data-bb-generate-logo]:disabled svg {
  animation: bb-logo-spin .8s linear infinite;
}

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

@media (max-width: 620px) {
  .bb-logo-brief {
    grid-template-columns: 1fr;
  }

  .bb-logo-brief > div,
  .bb-logo-brief .bb-primary-button {
    width: 100%;
  }

  .bb-logo-empty {
    flex-wrap: wrap;
  }
}


/* Identity and Logo: a stacked brand configuration area rather than a single action row. */
.bb-identity-card {
  display: block;
}

.bb-brand-lockup {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px;
  border: 1px solid #eadcf2;
  border-radius: 13px;
  background: linear-gradient(135deg, #fcf8ff, #fff 72%, #fff8ef);
}

.bb-brand-lockup .bb-card-icon {
  margin: 0;
}

.bb-brand-lockup > div {
  min-width: 0;
}

.bb-brand-lockup > div > span,
.bb-identity-details-grid label > span,
.bb-logo-style-heading span {
  display: block;
  margin-bottom: 5px;
  color: #8b5bad;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bb-identity-brand-name {
  display: block;
  overflow: hidden;
  color: #321a4d;
  font-size: 27px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bb-identity-brand-name.bb-name-style-editorial-serif {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 600;
}

.bb-identity-brand-name.bb-name-style-display-caps {
  font-size: 21px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.bb-identity-brand-name.bb-name-style-elegant-script {
  font-family: 'Brush Script MT', 'Segoe Script', cursive;
  font-size: 34px;
  font-weight: 500;
}

.bb-brand-lockup em {
  display: block;
  margin-top: 5px;
  color: #765b91;
  font-size: 12px;
  font-style: italic;
}

.bb-identity-details-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 13px;
  margin-top: 18px;
}

.bb-identity-details-grid label {
  display: block;
}

.bb-identity-details-grid label > span small {
  color: #ab91bd;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.bb-identity-details-grid input,
.bb-identity-details-grid textarea {
  display: block;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #ddcce9;
  border-radius: 10px;
  outline: 0;
  resize: vertical;
  color: #301a4a;
  background: #fff;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
}

.bb-identity-details-grid input {
  height: 42px;
  resize: none;
}

.bb-identity-details-grid input:focus,
.bb-identity-details-grid textarea:focus {
  border-color: #a85be1;
  box-shadow: 0 0 0 3px rgba(168, 91, 225, .12);
}

.bb-logo-style-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #f0e8f5;
}

.bb-logo-style-heading p {
  margin: 0;
}

.bb-logo-style-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.bb-logo-style-options button {
  min-height: 84px;
  padding: 12px;
  border: 1px solid #e5d8ee;
  border-radius: 12px;
  color: #40255b;
  background: #fff;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.bb-logo-style-options button:hover {
  border-color: #c58ce5;
  transform: translateY(-1px);
}

.bb-logo-style-options button.is-selected {
  border-color: #b56de7;
  background: linear-gradient(135deg, #fbf5ff, #fff);
  box-shadow: 0 6px 18px rgba(112, 53, 160, .09);
}

.bb-logo-style-options strong,
.bb-logo-style-options span {
  display: block;
}

.bb-logo-style-options strong {
  font-size: 12px;
}

.bb-logo-style-options span {
  margin-top: 5px;
  color: #896ca5;
  font-size: 10px;
  line-height: 1.35;
}

.bb-identity-card .bb-logo-actions {
  align-items: center;
  margin-top: 19px;
  padding-top: 17px;
  border-top: 1px solid #f0e8f5;
}

.bb-identity-card .bb-logo-actions .bb-field-status {
  flex: 1;
  min-width: 180px;
  margin: 0 0 0 3px;
}

@media (max-width: 800px) {
  .bb-logo-style-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .bb-identity-details-grid,
  .bb-logo-style-options {
    grid-template-columns: 1fr;
  }

  .bb-logo-style-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .bb-logo-style-heading .bb-secondary-button,
  .bb-identity-card .bb-logo-actions .bb-primary-button,
  .bb-identity-card .bb-logo-actions .bb-secondary-button {
    width: 100%;
  }

  .bb-identity-card .bb-logo-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .bb-identity-card .bb-logo-actions .bb-field-status {
    min-width: 0;
    margin-left: 0;
  }
}


/* Keep routine logo-save messages quiet; surface only actual errors. */
.bb-identity-card [data-bb-logo-status]:empty,
.bb-identity-card [data-bb-logo-status]:not(.is-error) {
  display: none;
}

.bb-logo-modal {
  position: fixed;
  z-index: 1001;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.bb-logo-modal[hidden] {
  display: none;
}

.bb-logo-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(34, 18, 53, .55);
}

.bb-logo-modal-card {
  position: relative;
  z-index: 1;
  width: min(100%, 760px);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 24px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(28, 13, 46, .34);
}

.bb-logo-modal-card h3 {
  margin: 0 38px 17px 0;
  color: #301a4a;
  font-size: 18px;
}

.bb-logo-modal-image {
  display: grid;
  min-height: min(64vh, 560px);
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  color: #85689d;
  background: linear-gradient(135deg, #faf6fd, #f3edf7);
}

.bb-logo-modal-image img {
  display: block;
  width: 100%;
  max-height: min(64vh, 560px);
  object-fit: contain;
}

.bb-logo-modal-image svg {
  width: 32px;
  height: 32px;
}

.bb-logo-modal-image p {
  margin: 8px 0 0;
  font-size: 12px;
}


/* Compact reusable workspace-context treatment for Brand Builder. */
.bb-context-card {
  align-items: center;
  min-height: 0;
  padding: 11px 14px;
}

.bb-context-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.bb-context-icon svg {
  width: 17px;
  height: 17px;
}

.bb-context-card span {
  font-size: 9px;
}

.bb-context-card strong {
  font-size: 13px;
}

.bb-context-card p {
  font-size: 11px;
}


/* Keep the workspace tile genuinely square even when page-level flex rules
   provide generous available width. */
.bb-context-card > .bb-context-icon {
  flex: 0 0 34px;
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  aspect-ratio: 1 / 1;
}