/* Brand page — v2.
   White ground, hairlines, one ink and one lime. No rail, no card around every
   block, no second accent. Every horizontal offset is logical, so the page
   mirrors between Arabic and English without a second stylesheet.
   Colour comes from tokens.css; geometry is local to this composition. */

.bp {
  background: var(--color-white);
  color: var(--color-brand-forest);
}

.bp-body {
  background: var(--color-white);
}

.bp-wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 20px;
}

.bp-pad {
  padding-bottom: 104px;
}

/* ------------------------------------------------------------- type */

.bp-h1 {
  margin: 0;
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--color-brand-forest);
}

.bp-h2 {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.22;
  color: var(--color-brand-forest);
}

.bp-body-text,
.bp .bp-story p {
  margin: 14px 0 0;
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

.bp-kicker {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.bp-note {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 62ch;
}

/* ---------------------------------------------------------- breadcrumb */

.bp .bp-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 22px 0 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: none;
  border: 0;
}

.bp .bp-crumbs a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.bp .bp-crumbs a:hover {
  color: var(--color-brand-forest);
}

.bp .bp-crumbs__current {
  color: var(--color-brand-forest);
}

/* ------------------------------------------------------------- buttons */

.bp .bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 54px;
  padding-inline: 26px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.bp .bp-btn svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.bp .bp-btn--sm {
  min-height: 48px;
  padding-inline: 20px;
  font-size: 15px;
}

.bp .bp-btn--primary {
  background: var(--color-brand-forest);
  color: var(--color-brand-green);
}

.bp .bp-btn--primary:hover,
.bp .bp-btn--primary:focus-visible {
  background: color-mix(in srgb, var(--color-brand-forest) 88%, var(--color-brand-green));
  color: var(--color-brand-green);
}

.bp .bp-btn--ghost {
  background: var(--color-white);
  color: var(--color-brand-forest);
  border: 1.5px solid var(--color-neutral);
}

.bp .bp-btn--ghost:hover,
.bp .bp-btn--ghost:focus-visible {
  border-color: var(--color-brand-forest);
  color: var(--color-brand-forest);
}

.bp .bp-btn--lime {
  background: var(--color-brand-green);
  color: var(--color-brand-forest);
}

.bp .bp-btn--lime:hover {
  background: var(--color-green-hover);
}

.bp .bp-btn--outline {
  background: transparent;
  color: var(--color-white);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.bp .bp-btn--outline:hover {
  border-color: var(--color-white);
  color: var(--color-white);
}

/* Direction-aware arrows: the glyph points the way the language reads. */
.bp [dir="rtl"] .bp-btn svg,
[dir="rtl"] .bp .bp-btn svg,
[dir="rtl"] .bp .bp-gal__arrow svg {
  transform: scaleX(-1);
}

/* --------------------------------------------------------------- hero */

.bp-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 28px 0 48px;
}

.bp-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding-inline: 13px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: var(--color-brand-green);
  color: var(--color-brand-forest);
  font-size: 12.5px;
  font-weight: 700;
}

.bp-chip svg {
  width: 12px;
  height: 12px;
}

.bp-domain-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.bp-domain {
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  word-break: break-word;
}

.bp-hear {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding-inline: 18px;
  border-radius: 999px;
  border: 1.5px solid var(--color-neutral);
  background: var(--color-white);
  color: var(--color-brand-forest);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.bp-hear:hover {
  border-color: var(--color-brand-forest);
}

.bp-hear[aria-pressed="true"] {
  background: var(--color-green-soft);
  border-color: var(--color-brand-forest);
}

.bp-hear svg {
  width: 16px;
  height: 16px;
}

.bp-hear .bp-hear__stop,
.bp-hear[aria-pressed="true"] .bp-hear__play {
  display: none;
}

.bp-hear[aria-pressed="true"] .bp-hear__stop {
  display: inline-flex;
}

.bp-scripts {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.bp-script {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  padding: 9px 14px;
  border-radius: 12px;
  background: var(--color-neutral);
}

.bp-script__label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.bp-script__value {
  font-size: 17px;
  font-weight: 700;
}

.bp-why {
  margin-top: 26px;
  padding: 22px 0;
  border-block: 1px solid var(--color-neutral);
}

.bp-why__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 700;
}

.bp-why__title svg {
  width: 19px;
  height: 19px;
}

.bp-why__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bp-why__list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 5px 0;
  font-size: 16.5px;
  line-height: 1.55;
}

.bp-why__list svg {
  width: 17px;
  height: 17px;
  margin-top: 4px;
  flex: 0 0 auto;
}

.bp-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.bp-price {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.bp-price--ask {
  font-size: 28px;
}

.bp-price__note {
  font-size: 15px;
  color: var(--color-text-secondary);
}

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

.bp-onecopy {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0;
  font-size: 15px;
  font-weight: 700;
}

.bp-onecopy svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.bp-escrow {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 44ch;
}

/* ------------------------------------------------------------ gallery */

.bp-gal {
  position: relative;
  min-height: 240px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--color-brand-green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bp-gal.is-featured {
  background: var(--color-brand-forest);
}

.bp-gal__slide {
  width: 100%;
  min-height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bp-gal__slide[hidden] {
  display: none;
}

.bp-gal__slide img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}

.bp-gal__slide:not(.bp-gal__slide--mark) {
  background: var(--color-neutral);
}

.bp-gal__word {
  display: block;
  padding-inline: 18px;
  text-align: center;
  color: var(--color-brand-forest);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.bp-gal.is-featured .bp-gal__word {
  color: var(--color-brand-green);
}

.bp-gal__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-brand-forest);
  cursor: pointer;
  z-index: 2;
}

.bp-gal__arrow svg {
  width: 17px;
  height: 17px;
}

.bp-gal__arrow--prev {
  inset-inline-start: 12px;
}

.bp-gal__arrow--next {
  inset-inline-end: 12px;
}

.bp-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.bp-thumb {
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-neutral);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bp-thumb--mark {
  background: var(--color-brand-green);
  color: var(--color-brand-forest);
}

.bp-thumb--mark.is-featured {
  background: var(--color-brand-forest);
  color: var(--color-brand-green);
}

.bp-thumb--mark span {
  display: block;
  padding-inline: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

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

.bp-thumb.is-on {
  border-color: var(--color-brand-forest);
}

.bp-lede {
  margin: 16px 0 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 46ch;
  text-wrap: pretty;
}

.bp-story {
  margin-top: 4px;
}

.bp .bp-story p {
  font-size: 17px;
}

/* ------------------------------------------------------------ figures */

.bp-figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
  border-block: 1px solid var(--color-neutral);
}

.bp-figure {
  padding: 22px 0;
  border-top: 1px solid var(--color-neutral);
}

.bp-figure:nth-child(-n + 2) {
  border-top: 0;
}

.bp-figure__label {
  margin: 0 0 6px;
  font-size: 13.5px;
  color: var(--color-text-secondary);
}

.bp-figure__value {
  margin: 0;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.bp-figure__ref {
  margin: 5px 0 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* -------------------------------------------------------------- trust */

.bp-trust {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 34px 0 0;
}

.bp-trust__card {
  border: 1px solid var(--color-neutral);
  border-radius: 18px;
  padding: 22px;
  background: var(--color-white);
}

.bp-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--color-green-soft);
  color: var(--color-brand-forest);
}

.bp-trust__icon svg {
  width: 21px;
  height: 21px;
}

.bp-trust__line {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.bp-seller {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 22px;
  border: 1px solid var(--color-neutral);
  border-radius: 18px;
  background: var(--color-white);
}

.bp-seller__avatar img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: block;
}

.bp-seller__id {
  min-width: 0;
}

.bp-seller__name {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.bp-seller__verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-brand-forest);
  color: var(--color-brand-green);
}

.bp-seller__verified svg {
  width: 11px;
  height: 11px;
}

.bp-seller__meta {
  margin: 5px 0 0;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.bp-seller .bp-btn {
  margin-inline-start: auto;
}

/* ------------------------------------------------------------ sections */

.bp-section {
  padding: 56px 0;
  border-bottom: 1px solid var(--color-neutral);
}

.bp-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* ------------------------------------------------------------- package */

.bp-completion {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.bp-completion__label {
  font-size: 14px;
  color: var(--color-text-secondary);
}

.bp-completion__value {
  margin-inline-start: auto;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.bp-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--color-neutral);
  overflow: hidden;
}

.bp-bar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--color-brand-green);
  transition: width .4s cubic-bezier(.2, .7, .2, 1);
}

.bp-plist {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 40px;
  margin: 22px 0 0;
  padding: 0;
}

.bp-prow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--color-neutral);
  font-size: 16px;
  color: var(--color-text-secondary);
}

.bp-prow.is-in {
  font-weight: 600;
  color: var(--color-brand-forest);
}

.bp-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 1.5px solid var(--color-neutral);
  border-radius: 50%;
}

.bp-prow.is-in .bp-tick {
  border-color: var(--color-brand-green);
  background: var(--color-brand-green);
  color: var(--color-brand-forest);
}

.bp-tick svg {
  width: 12px;
  height: 12px;
}

.bp-prow__label {
  min-width: 0;
}

.bp-extra {
  margin-top: 18px;
}

.bp-extra__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
}

.bp-extra__list li {
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--color-neutral);
  font-size: 14px;
  font-weight: 600;
}

.bp-extra__list .is-primary {
  background: var(--color-green-soft);
}

/* ---------------------------------------------------------------- mark */

.bp-mark {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.bp-mark__panel {
  position: relative;
  min-height: 150px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.bp-mark__panel--light {
  background: var(--color-neutral);
  color: var(--color-brand-forest);
}

.bp-mark__panel--dark {
  background: var(--color-brand-forest);
  color: var(--color-brand-green);
}

.bp-mark__panel img {
  max-height: 96px;
  width: auto;
  object-fit: contain;
}

.bp-mark__word {
  text-align: center;
  overflow-wrap: anywhere;
}

.bp-mark__label {
  position: absolute;
  bottom: 10px;
  inset-inline-start: 12px;
  font-size: 12px;
  font-weight: 600;
  opacity: .72;
}

.bp-palette {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 18px 0 0;
  padding: 0;
}

.bp-palette li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.bp-palette__swatch {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid var(--color-neutral);
}

/* --------------------------------------------------------------- steps */

.bp-steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 0;
  padding: 0;
  counter-reset: none;
}

.bp-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--color-brand-forest);
  color: var(--color-brand-green);
  font-size: 14px;
  font-weight: 700;
}

.bp-steps__title {
  margin: 0 0 7px;
  font-size: 18px;
  font-weight: 700;
}

.bp-steps__note {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

/* ----------------------------------------------------------------- FAQ */

.bp .faq-section--brand {
  padding: 56px 0;
  border-bottom: 1px solid var(--color-neutral);
}

.bp .faq-section--brand .section__title {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-brand-forest);
}

.bp-ask {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 24px 0 0;
}

.bp-ask__line {
  margin: 0;
  font-size: 16px;
  color: var(--color-text-secondary);
}

.bp-ask .bp-btn svg {
  width: 16px;
  height: 16px;
}

/* ---------------------------------------------------------------- band */

.bp-band {
  background: var(--color-brand-forest);
  padding: 56px 0;
  margin-top: 8px;
}

.bp-band__title {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--color-white);
}

.bp-band__note {
  margin: 14px 0 26px;
  font-size: 17.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  max-width: 56ch;
}

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

/* ---------------------------------------------------------- price bar */

.bp-bar-fixed {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: var(--color-white);
  border-top: 1px solid var(--color-neutral);
  padding-block: 10px;
}

.bp-bar-fixed__in {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bp-bar-fixed__id {
  min-width: 0;
}

.bp-bar-fixed__domain {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bp-bar-fixed__rule {
  width: 1px;
  height: 34px;
  background: var(--color-neutral);
  flex: 0 0 auto;
}

.bp-bar-fixed__total {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}

.bp-bar-fixed__spacer {
  flex: 1;
}

.bp-bar-fixed__onecopy {
  display: none;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* ------------------------------------------------------- owner revisions */

.bp-owner-note {
  margin: 0 0 28px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #edf7dc;
  color: var(--color-brand-forest);
  font-size: 15px;
  line-height: 1.6;
}

.bp-owner-note--return { background: #fff3df; color: #6d4a0a; }

.bp-owner-editor {
  /* The edit links carry #bp-owner-editor. The header is sticky and its real
     height is written to --actual-header-height at runtime, so the anchor needs
     that much clearance or the card's own heading lands behind the chrome. */
  scroll-margin-block-start: calc(var(--actual-header-height, var(--header-h, 80px)) + 18px);
  margin: 0 0 34px;
  padding: 20px;
  border: 1px solid var(--color-neutral);
  border-radius: 18px;
  background: #f8faf5;
}

.bp-owner-editor__head { max-width: 62ch; }
.bp-owner-editor__head .bp-kicker { margin: 0 0 7px; }
.bp-owner-editor__head .bp-h2 { margin: 0; }
.bp-owner-editor__head .bp-body-text { margin: 9px 0 0; }
.bp-owner-form { margin-top: 24px; }
.bp-owner-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.bp-owner-form label, .bp-owner-form__price { display: grid; gap: 7px; min-width: 0; color: var(--color-brand-forest); font-size: 14px; font-weight: 700; }
.bp-owner-form label.is-wide { grid-column: 1 / -1; }
.bp-owner-form input, .bp-owner-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--color-neutral);
  border-radius: 12px;
  background: var(--color-white);
  color: var(--color-brand-forest);
  padding: 12px 13px;
  font: inherit;
  font-weight: 500;
  line-height: 1.5;
  resize: vertical;
}
.bp-owner-form__price { max-width: 320px; }
.bp-owner-form__includes { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 20px 0 0; padding: 0; border: 0; }
.bp-owner-form__includes legend { width: 100%; margin-bottom: 1px; color: var(--color-brand-forest); font-size: 14px; font-weight: 700; }
.bp-owner-form__includes label { display: inline-flex; align-items: center; gap: 7px; color: var(--color-text-secondary); font-size: 14px; font-weight: 600; }
.bp-owner-form__includes input { width: 16px; height: 16px; padding: 0; accent-color: var(--color-brand-forest); }
.bp-owner-form__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.bp-seller__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-inline-start: auto; }

/* ---------------------------------------------------------- breakpoints */

/* Touch first: the gallery arrows are the one control the composition draws at
   42px, so below the breakpoint they grow to a full touch target. */
@media (max-width: 759px) {
  .bp-gal__arrow {
    width: 44px;
    height: 44px;
  }

  .bp-owner-editor {
    scroll-margin-block-start: calc(var(--actual-header-height, var(--header-h-mobile, 60px)) + 14px);
    margin-inline: -4px;
    padding: 20px;
    border-radius: 18px;
  }
  .bp-owner-form__grid { grid-template-columns: 1fr; }
  .bp-owner-form label.is-wide { grid-column: auto; }
  .bp-owner-form__actions .bp-btn { width: 100%; }
}

@media (min-width: 760px) {
  .bp-wrap {
    padding-inline: 40px;
  }

  .bp-hero {
    grid-template-columns: 1fr 1fr;
    gap: 44px;
    padding: 44px 0 64px;
  }

  .bp-gal {
    min-height: 380px;
  }

  .bp-figures {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0;
  }

  .bp-figure {
    padding: 26px 24px;
    border-top: 0;
    border-inline-start: 1px solid var(--color-neutral);
  }

  .bp-figure:first-child {
    border-inline-start: 0;
    padding-inline-start: 0;
  }

  .bp-figure:last-child {
    padding-inline-end: 0;
  }

  .bp-trust {
    grid-template-columns: repeat(3, 1fr);
  }

  .bp-section__grid {
    grid-template-columns: 1fr 1.35fr;
    gap: 40px;
  }

  .bp-plist {
    grid-template-columns: 1fr 1fr;
  }

  .bp-steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .bp-bar-fixed {
    padding-block: 12px;
  }

  .bp-bar-fixed__onecopy {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bp *,
  .bp *::before,
  .bp *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ------------------------------------------------- owner media editor */

/* One control repeated: a frame showing what is published, a way to replace
   it, its alt text, and a way to remove it. Wise's pattern — one question per
   block, the answer sitting directly under its label. */

.bp-media__proposed-note {
  margin: 0 0 22px;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.bp-owner-note__list { margin: 8px 0 0; padding-inline-start: 20px; }
.bp-owner-note__list li { margin-block: 4px; }

.bp-media__group {
  margin: 0 0 34px;
  padding: 0;
  border: 0;
}

.bp-media__group:disabled { opacity: 0.55; }

.bp-media__group legend {
  padding: 0;
  color: var(--color-brand-forest);
  font-size: 17px;
  font-weight: var(--fw-bold, 600);
  line-height: 1.4;
}

.bp-media__hint {
  margin: 6px 0 16px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

.bp-media__grid {
  display: grid;
  gap: 10px;
  margin-block-start: 10px;
}

.bp-media__tile {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 8px;
  border: 1px solid var(--color-neutral);
  border-radius: 12px;
  background: var(--color-white);
}

.bp-media__frame {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 9px;
  /* White so a transparent logo/ad image reads correctly while uploading. */
  background: #FFFFFF;
}

/* Pencil overlay: click the image to replace it; the file input is triggered
   by the label's `for`, and the preview swaps in immediately on selection. */
.bp-media__edit {
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  background: rgba(22, 51, 0, 0.9);
  color: #FFFFFF;
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  transition: background 0.15s ease, transform 0.15s ease;
}

.bp-media__edit:hover {
  background: var(--color-brand-forest, #163300);
  transform: scale(1.06);
}

.bp-media__edit svg {
  width: 17px;
  height: 17px;
}

.bp-media__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bp-media__empty {
  color: var(--color-text-muted);
  font-size: 11px;
}

.bp-media__name {
  margin: 0;
  color: var(--color-brand-forest);
  font-size: 12px;
  font-weight: var(--fw-bold, 600);
}

/* The file input itself is never shown — it cannot be styled consistently and
   its native text is untranslatable. The label is the control. */
.bp-media__pick {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding-inline: 10px;
  border: 1px solid var(--color-green-hover);
  border-radius: 9px;
  background: var(--color-green-soft);
  color: var(--color-brand-forest);
  font-size: 12px;
  font-weight: var(--fw-bold, 600);
  cursor: pointer;
}

.bp-media__pick:hover { background: var(--color-green-hover); }

.bp-media__pick input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The input is visually hidden, so the ring has to be drawn by the label or a
   keyboard user loses the control entirely. */
.bp-media__pick:focus-within {
  outline: 2px solid var(--color-brand-green);
  outline-offset: 2px;
}

.bp-media__pick--wide { margin-block-start: 16px; }

.bp-media__alt-input,
.bp-media__order-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid var(--color-neutral);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-brand-forest);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
}

.bp-media__order-input { max-width: 68px; }

.bp-media__remove {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-text-secondary);
  font-size: 11.5px;
  font-weight: 600;
}

.bp-media__remove input {
  width: 14px;
  height: 14px;
  accent-color: var(--color-brand-forest);
}

/* Every media grid shares one ramp, so the logo pair never ends up twice the
   size of a mockup. The tile is a thumbnail with three small controls under
   it — around 180px is where it stops reading as a thumbnail. */
.bp-media__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 600px) { .bp-media__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) { .bp-media__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bp-media__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* The logo and the listing image are two of the same tiles, not a half-width
   pair: they sit in the first two cells of the same ramp. */
.bp-media__grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 600px) { .bp-media__grid--pair { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) { .bp-media__grid--pair { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bp-media__grid--pair { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.bp-media__move { display: flex; gap: 6px; }

.bp-media__move-btn {
  flex: 1;
  min-height: 36px;
  padding-inline: 8px;
  border: 1px solid var(--color-neutral);
  border-radius: 10px;
  background: var(--color-white);
  color: var(--color-brand-forest);
  font: inherit;
  font-size: 13px;
  font-weight: var(--fw-bold, 600);
  cursor: pointer;
}

.bp-media__move-btn:hover { background: var(--color-green-soft); }

/* ----------------------------------------------- owner editor: tabs */

/* The editor sits in the listing column between the hero and the figures, so
   it has to stay narrow and quiet. Everything here is a size down from the
   page's own scale: 12–13px labels, 32px controls, 8–10px gaps. */

/* The rail is a column beside the panel, not a strip above it: six sections
   read faster stacked, and the panel keeps its full height for the form. The
   hidden inputs are display:none, so they never become grid items. */
.bp-owner-form--tabbed {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.bp-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.bp-tabs::-webkit-scrollbar { display: none; }

.bp-tabs__btn {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border: 1px solid var(--color-neutral);
  border-radius: 9px;
  background: var(--color-white);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 12.5px;
  font-weight: var(--fw-bold, 600);
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}

.bp-tabs__num {
  color: var(--color-text-muted);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

.bp-tabs__btn.is-active .bp-tabs__num { color: var(--color-brand-forest); }

.bp-tabs__btn:hover { border-color: var(--color-text-muted); }

.bp-tabs__btn.is-active {
  border-color: var(--color-green-hover);
  background: var(--color-green-soft);
  color: var(--color-brand-forest);
}

/* Informational only: it deliberately has neither button treatment nor an
   interactive role, since translating is handled after the owner submits. */
.bp-content-language { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; grid-column: 1 / -1; }
.bp-content-language__switch { display: inline-flex; padding: 3px; border: 1px solid var(--color-neutral); border-radius: 999px; background: var(--color-white); }
.bp-content-language__switch button, .bp-content-language__translate { border: 0; font: inherit; font-size: 12px; font-weight: var(--fw-bold, 600); cursor: pointer; }
.bp-content-language__switch button { padding: 6px 11px; border-radius: 999px; background: transparent; color: var(--color-text-secondary); }
.bp-content-language__switch button.is-active { background: var(--color-green-soft); color: var(--color-brand-forest); }
.bp-content-language__translate { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid var(--color-neutral); border-radius: 999px; background: transparent; color: var(--color-text-secondary); }
.bp-content-language__translate:hover { border-color: var(--color-text-muted); color: var(--color-brand-forest); }
.bp-content-language__translate:disabled { opacity: .55; cursor: wait; }
.bp-content-language__translate svg { width: 15px; height: 15px; }
.bp-content-language__notice { flex-basis: 100%; margin: 0; color: var(--color-text-muted); font-size: 11.5px; }

/* Narrow screens keep the strip: a 150px rail on a phone is a third of the
   width, and the panel is what the owner came for. */
@media (min-width: 700px) {
  .bp-owner-form--tabbed {
    /* The module names are English and several are two or three words, so the
       rail is sized to hold "Brand Voice & Messaging" on two lines, not five. */
    grid-template-columns: 196px minmax(0, 1fr);
    align-items: start;
    column-gap: 22px;
  }

  .bp-tabs {
    display: grid;
    gap: 2px;
    position: sticky;
    inset-block-start: calc(var(--actual-header-height, var(--header-h, 80px)) + 14px);
    overflow: visible;
    padding-inline-end: 14px;
    border-inline-end: 1px solid var(--color-neutral);
  }

  .bp-tabs__btn {
    flex: 1 1 auto;
    justify-content: flex-start;
    line-height: 1.35;
    text-align: start;
    white-space: normal;
  }

  .bp-tabs__label { flex: 1 1 auto; }

  .bp-owner-form--tabbed .bp-owner-form__actions { grid-column: 1 / -1; }
}

.bp-panel { padding-block: 0 4px; }
.bp-panel.is-hidden { display: none; }

/* The panel keeps its own heading for the no-script stack, where there is no
   tab strip to name the section. The tabs hide it once they take over. */
.bp-panel__title {
  margin: 0 0 10px;
  color: var(--color-brand-forest);
  font-size: 15px;
  font-weight: var(--fw-bold, 600);
}

.has-tabs .bp-panel__title { display: none; }

.bp-owner-form__legend {
  margin: 16px 0 2px;
  color: var(--color-brand-forest);
  font-size: 12.5px;
  font-weight: var(--fw-bold, 600);
}

.bp-owner-form__hint {
  margin: 0 0 8px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.bp-media__block + .bp-media__block { margin-block-start: 16px; }

/* ------------------------------------------- owner editor: swatches */

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

.bp-swatch {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border: 1px solid var(--color-neutral);
  border-radius: 9px;
  background: var(--color-white);
}

/* An empty slot still reads as a slot: the chip keeps its outline so the row
   does not collapse into six invisible boxes. */
.bp-swatch__chip {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-neutral);
  border-radius: 6px;
  background: var(--color-two-column-background);
}

.bp-swatch input {
  width: 100%;
  min-width: 0;
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: var(--color-brand-forest);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
}

.bp-swatch input:focus { outline: none; }
.bp-swatch:focus-within { outline: 2px solid var(--color-brand-green); outline-offset: 1px; }

/* ---------------------------------------------- owner editor: chips */

.bp-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.bp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--color-neutral);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.bp-chip input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
  accent-color: var(--color-brand-forest);
}

.bp-chip:has(input:checked) {
  border-color: var(--color-green-hover);
  background: var(--color-green-soft);
  color: var(--color-brand-forest);
}

/* ------------------------------- owner editor: compact form controls */

.bp-owner-form--tabbed .bp-owner-form__grid { gap: 10px; }

.bp-owner-form--tabbed label,
.bp-owner-form--tabbed .bp-owner-form__includes legend {
  font-size: 12.5px;
}

.bp-owner-form--tabbed input[type="text"],
.bp-owner-form--tabbed input[type="number"],
.bp-owner-form--tabbed textarea {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 13.5px;
}

.bp-owner-form--tabbed .bp-owner-form__includes { gap: 7px 14px; margin-block-start: 14px; }
.bp-owner-form--tabbed .bp-owner-form__includes label { font-size: 12.5px; }

/* The submit bar stays with the editor while a long panel scrolls. Sticky
   inside the card, never fixed: .site-main traps stacking contexts here. */
.bp-owner-form--tabbed .bp-owner-form__actions {
  position: sticky;
  inset-block-end: 0;
  margin-block-start: 14px;
  padding-block: 12px;
  background: linear-gradient(to bottom, transparent, #f8faf5 30%);
}

@media (min-width: 600px) {
  .bp-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
  .bp-swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* The editor's generic `.bp-owner-form label` rule is a stacked label-over-
   field pair, and it outranks a single class. Every control that is a label
   but not that pair has to say so at matching weight. */

.bp-owner-form .bp-swatch {
  display: flex;
  align-items: center;
  gap: 7px;
}

.bp-owner-form--tabbed input.bp-swatch__input {
  min-height: 0;
  padding: 3px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
}

.bp-owner-form .bp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.bp-owner-form .bp-chip:has(input:checked) { color: var(--color-brand-forest); }

.bp-owner-form .bp-media__pick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: var(--color-brand-forest);
  font-size: 12px;
}

.bp-owner-form .bp-media__remove {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-text-secondary);
  font-size: 11.5px;
  font-weight: 600;
}

.bp-owner-form--tabbed input.bp-media__alt-input,
.bp-owner-form--tabbed input.bp-media__order-input {
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 12px;
}

/* ------------------------------------------- owner editor: social rows */

/* One row per account: the platform, then the username. Flex rather than a
   fixed grid because the custom-name field appears and disappears, and a
   hidden grid item would leave its column standing empty. */
.bp-social { display: grid; gap: 6px; }

.bp-social__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.bp-social__brand {
  display: inline-flex;
  flex: 0 0 128px;
  align-items: center;
  gap: 6px;
  color: var(--color-brand-forest);
  font-size: 12px;
  font-weight: var(--fw-bold, 600);
}

.bp-social__icon { flex: 0 0 auto; }

.bp-social__brand--pick select {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 4px 6px;
  border: 1px solid var(--color-neutral);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-brand-forest);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
}

.bp-owner-form--tabbed input.bp-social__custom {
  flex: 0 0 132px;
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 12px;
}

/* The @ belongs to the field, not to the value: the seller types the name and
   the listing shows the sign. */
.bp-social__handle {
  display: flex;
  flex: 1 1 170px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--color-neutral);
  border-radius: 8px;
  background: var(--color-white);
}

.bp-social__at {
  padding-inline: 8px;
  color: var(--color-text-muted);
  font-size: 12px;
}

.bp-owner-form--tabbed .bp-social__handle input[type="text"] {
  min-width: 0;
  min-height: 30px;
  padding-inline: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 12.5px;
}

.bp-social__handle:focus-within { outline: 2px solid var(--color-brand-green); outline-offset: 1px; }
.bp-social__handle input:focus { outline: none; }

.bp-social__add {
  margin-block-start: 8px;
  padding: 6px 12px;
  border: 1px solid var(--color-neutral);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-brand-forest);
  font: inherit;
  font-size: 12px;
  font-weight: var(--fw-bold, 600);
  cursor: pointer;
}

.bp-social__add:hover { background: var(--color-green-soft); border-color: var(--color-green-hover); }

/* Hidden until the script claims it: without one, emptying the field is what
   removes an account, and a button that does nothing is worse than no button. */
.bp-social__drop {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-neutral);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.bp-social__drop:hover {
  border-color: var(--color-error);
  color: var(--color-error);
}

/* ------------------------------------------- owner editor: modules */

/* A listing is one domain plus whatever the seller has added since. The rail
   says which modules are in, the panel says how to add one, and neither shouts
   about what is missing — an absent module is a choice, not a failure. */

.bp-owner-editor__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0;
  color: var(--color-text-secondary);
  font-size: 12.5px;
  line-height: 1.6;
}

.bp-owner-editor__summary span {
  color: var(--color-text-muted);
  font-weight: var(--fw-bold, 600);
}

.bp-tabs__state {
  margin-inline-start: auto;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1;
}

.bp-tabs__state.is-on { color: var(--color-brand-forest); }

/* The activation control reads as a sentence, not a switch: one of the two
   spans shows, depending on the checkbox. */
.bp-module-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 14px;
  padding: 7px 12px;
  border: 1px solid var(--color-neutral);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-text-secondary);
  font-size: 12.5px;
  font-weight: var(--fw-bold, 600);
  cursor: pointer;
}

.bp-owner-form .bp-module-toggle { display: inline-flex; }

.bp-module-toggle input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--color-brand-forest);
}

.bp-module-toggle:has(input:checked) {
  border-color: var(--color-green-hover);
  background: var(--color-green-soft);
  color: var(--color-brand-forest);
}

.bp-module-toggle__on,
.bp-module-toggle__off { display: none; }
.bp-module-toggle:has(input:checked) .bp-module-toggle__on { display: inline; }
.bp-module-toggle:not(:has(input:checked)) .bp-module-toggle__off { display: inline; }

/* Without :has support both labels would vanish, so the fallback shows the
   invitation — the more useful of the two when the state is unknown. */
@supports not selector(:has(*)) {
  .bp-module-toggle__off { display: inline; }
}

.bp-module-toggle__keep { margin-block: -8px 14px; }

/* An inactive module keeps its fields in the DOM so they post and so the form
   survives with scripting off; the script is what folds them away. */
.bp-module-body.is-folded { display: none; }

.bp-chip.is-static { cursor: default; background: var(--color-green-soft); border-color: var(--color-green-hover); color: var(--color-brand-forest); }

.bp-owner-form__fieldhint {
  color: var(--color-text-muted);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
}

.bp-owner-form--tabbed select {
  width: 100%;
  box-sizing: border-box;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--color-neutral);
  border-radius: 9px;
  background: var(--color-white);
  color: var(--color-brand-forest);
  font: inherit;
  font-size: 13.5px;
}

/* ------------------------------------------------- listing page: modules */

/* One section per module the seller added. A listing that is only a domain
   renders none of this, so the page stays as short as the offer is. */

.bp-module__list { margin: 0; display: grid; gap: 18px; }

.bp-module__row { display: grid; gap: 4px; }

.bp-module__row dt {
  color: var(--color-text-muted);
  font-size: 12.5px;
  font-weight: var(--fw-bold, 600);
}

.bp-module__row dd {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 15px;
  line-height: 1.7;
}

.bp-module__row.is-long dd { max-width: 62ch; }

.bp-module__palette {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.bp-module__palette li { display: grid; gap: 5px; justify-items: center; }
.bp-module__palette span { display: block; width: 56px; height: 56px; border: 1px solid var(--line); border-radius: 12px; }
.bp-module__palette code { color: var(--color-text-muted); font-size: 11.5px; }

.bp-module__assets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.bp-module__assets img,
.bp-module__doc img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 14px; }
.bp-module__doc { margin: 18px 0 0; max-width: 420px; }

.bp-module__social {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.bp-module__social li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--color-text-primary);
  font-size: 14px;
}

.bp-module__social-name { font-weight: var(--fw-bold, 600); }
.bp-module__social-handle { color: var(--color-text-muted); }

@media (min-width: 760px) {
  .bp-module__assets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------- owner editor: payout */

/* The same shape the add-a-domain step uses: what the buyer pays, what
   Brandagy takes, what the seller keeps — in that order, with the net as the
   only large number on the card. */

.bp-payout {
  margin-block-start: 26px;
  padding-block-start: 4px;
}

.bp-payout__title {
  margin: 0 0 6px;
  color: var(--color-brand-forest);
  font-size: 15px;
  font-weight: var(--fw-bold, 600);
}

/* The tier leads the chips it is made of, so it reads as their total rather
   than as a badge floating next to the money. */
.bp-owner-form .bp-chip.is-tier {
  border-color: var(--color-brand-forest);
  background: var(--color-brand-forest);
  color: var(--color-brand-green);
  cursor: default;
}

.bp-payout__kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-block-start: 1px solid var(--color-neutral);
  color: var(--color-text-secondary);
  font-size: 14px;
}

.bp-payout__kv bdi { color: var(--color-text-primary); font-weight: var(--fw-bold, 600); }
.bp-payout__minus { color: var(--color-error); }

/* The net is the answer the seller came for, so it is the one thing set large
   and the rule above it is the heavier one. */
.bp-payout__kv--net {
  border-block-start-width: 2px;
  border-block-start-color: var(--color-brand-forest);
  color: var(--color-brand-forest);
  font-weight: var(--fw-bold, 600);
}

.bp-payout__kv--net bdi {
  color: var(--color-brand-forest);
  font-size: 28px;
  line-height: 1.1;
}

.bp-payout .bp-owner-form__hint { margin-block-start: 10px; }

.bp-payout__ladder {
  margin-block-start: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--color-green-soft);
  color: var(--color-brand-forest);
}

/* Dragging a showcase tile. The cursor is the only affordance added — the
   arrows below each tile remain the accessible path. */
.bp-media__tile[draggable="true"] { cursor: grab; }
.bp-media__tile.is-dragging { opacity: 0.45; cursor: grabbing; }

.bp-file__type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 4px 8px;
  border-radius: 7px;
  background: var(--color-neutral);
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: var(--fw-bold, 600);
  letter-spacing: 0.03em;
}

.bp-module__files { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.bp-module__files li { display: flex; align-items: center; gap: 10px; color: var(--color-text-primary); font-size: 14px; }

.bp-owner-form--tabbed input.bp-social__url {
  flex: 1 1 150px;
  min-width: 0;
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 12px;
}

.bp-owner-form .bp-social__included {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
  font-size: 11.5px;
  font-weight: 600;
}

.bp-social__included input[type="checkbox"] { width: 14px; height: 14px; margin: 0; accent-color: var(--color-brand-forest); }

.bp-owner-form__group { margin-block-start: 22px; padding-block-start: 14px; border-block-start: 1px solid var(--color-neutral); }
.bp-owner-form__count { margin-inline-start: 8px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.bp-owner-form__count.is-over { color: var(--color-warning); font-weight: var(--fw-bold, 600); }

.bp-tagline { margin: 10px 0 0; color: var(--color-text-secondary); font-size: 15px; font-weight: var(--fw-bold, 600); }

.bp-module__variants figure { margin: 0; }
.bp-module__variants figcaption { margin-top: 6px; color: var(--color-text-muted); font-size: 12px; text-align: center; }