.utbb {
  --bb-ink: #19181c;
  --bb-wine: #7f1832;
  --bb-wine-deep: #531020;
  --bb-ivory: #fbf7f2;
  --bb-muted: #726a69;
  --bb-line: #e7ded8;
  --bb-green: #176c59;
  box-sizing: border-box;
  width: min(1220px, calc(100% - 48px));
  margin: 30px auto 84px;
  color: var(--bb-ink);
  font: inherit;
  line-height: 1.8;
  text-align: right;
}
.utbb *, .utbb *::before, .utbb *::after { box-sizing: border-box; }
.utbb [hidden] { display: none !important; }
.utbb button, .utbb input, .utbb textarea { font: inherit; }
.utbb button { cursor: pointer; transition: background .18s, border-color .18s, color .18s; }
.utbb button:disabled { cursor: not-allowed; opacity: .48; }
.utbb button:focus-visible, .utbb input:focus-visible, .utbb textarea:focus-visible, .utbb a:focus-visible, .utbb summary:focus-visible { outline: 3px solid #bd784d; outline-offset: 3px; }
.utbb h1, .utbb h2, .utbb p { margin: 0; }
.utbb-hero { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 32px 4px 35px; }
.utbb-kicker { display: flex; align-items: center; gap: 9px; color: var(--bb-wine); font-size: 11px; font-weight: 750; letter-spacing: .04em; }
.utbb-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--bb-wine); box-shadow: 0 0 0 4px #7f183211; }
.utbb-hero h1 { color: var(--bb-ink); font-size: clamp(36px, 4.4vw, 58px); line-height: 1.45; letter-spacing: -.05em; font-weight: 800; margin: 8px 0; }
.utbb-hero h1 em { color: var(--bb-wine); font-style: normal; }
.utbb-hero p { color: var(--bb-muted); max-width: 610px; font-size: 13px; }
.utbb-hero-stamp { display: grid; flex-shrink: 0; justify-items: center; min-width: 192px; padding: 18px 28px; border: 1px solid #ddc9c7; border-radius: 24px; background: linear-gradient(135deg, #fffaf6, #f2e4de); color: var(--bb-wine-deep); transform: rotate(-3deg); }
.utbb-hero-stamp > span { font-size: 10px; }
.utbb-hero-stamp strong { font: 800 60px/1.1 Arial, sans-serif; letter-spacing: -.06em; padding: 6px 0; direction: ltr; }
.utbb-hero-stamp small { font-size: 25px; }
.utbb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 24px; }
.utbb-workspace { min-width: 0; }
.utbb-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; scroll-margin-top: 110px; }
.utbb-progress button { display: flex; align-items: center; gap: 9px; border: 0; border-bottom: 2px solid #e4dbd6; border-radius: 0; background: transparent; padding: 0 0 14px; text-align: right; color: #877d79; font-size: 11px; line-height: 1.4; }
.utbb-progress button span { display: grid; place-items: center; width: 27px; height: 27px; flex-shrink: 0; background: #eee6e0; border-radius: 9px; font: 700 10px/1 Arial, sans-serif; }
.utbb-progress button[aria-current="step"], .utbb-progress button.is-done { border-color: var(--bb-wine); color: var(--bb-wine); font-weight: 750; opacity: 1; }
.utbb-progress button[aria-current="step"] span { background: var(--bb-wine); color: white; }
.utbb-stage { padding: 27px; background: #fffdfb; border: 1px solid var(--bb-line); border-radius: 24px; }
.utbb-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.utbb-overline { display: block; color: var(--bb-muted); font-size: 10px; margin-bottom: 6px; }
.utbb-section-head h2 { font-size: clamp(20px, 2vw, 26px); font-weight: 750; line-height: 1.5; color: var(--bb-ink); letter-spacing: -.04em; }
.utbb-step-label { color: #a29690; font: 10px/1.5 Arial, sans-serif; direction: ltr; flex-shrink: 0; }
.utbb-modes { display: grid; grid-template-columns: 1fr 1.1fr; gap: 10px; }
.utbb-modes button { display: grid; gap: 5px; text-align: right; border: 1px solid var(--bb-line); border-radius: 14px; padding: 15px 17px; color: var(--bb-ink); background: #fbf7f2; }
.utbb-modes button strong { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 750; }
.utbb-modes button span { font-size: 10px; color: var(--bb-muted); }
.utbb-modes button b { font-size: 9px; background: #e6efe7; color: #215943; border-radius: 5px; padding: 2px 6px; }
.utbb-modes button[aria-pressed="true"] { background: var(--bb-wine-deep); border-color: var(--bb-wine-deep); color: white; box-shadow: 0 7px 16px #53102018; }
.utbb-modes button[aria-pressed="true"] span { color: #e7cdd2; }
.utbb-modes button[aria-pressed="true"] b { background: #ead7a9; color: #483618; }
.utbb-mode-help { color: var(--bb-muted); font-size: 10px; padding-block: 16px 18px; min-height: 54px; }
.utbb-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.utbb-card { min-width: 0; border: 1px solid #e5dbd5; border-radius: 17px; background: white; overflow: hidden; }
.utbb-card.is-selected { border-color: #9c4c60; box-shadow: 0 0 0 1px #9c4c601c; }
.utbb-card-choice { position: relative; display: flex; align-items: center; cursor: pointer; min-height: 82px; padding: 15px 13px; gap: 10px; }
.utbb-card-choice > input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.utbb-card-choice:has(input:focus-visible) { outline: 3px solid #bd784d; outline-offset: -4px; }
.utbb-card-icon { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid #e6d9d7; background: #faf3f0; border-radius: 11px; color: var(--bb-wine); }
.utbb-card-icon svg { width: 21px; height: 21px; }
.utbb-card-title { display: grid; gap: 1px; min-width: 0; flex: 1; }
.utbb-card-title strong { font-size: 13px; font-weight: 750; }
.utbb-card-title small { color: var(--bb-muted); font-size: 8px; }
.utbb-check { display: grid; place-items: center; width: 19px; height: 19px; flex-shrink: 0; border: 1px solid #d1c7c1; border-radius: 6px; color: transparent; font: 12px/1 Arial, sans-serif; }
.is-selected .utbb-check { background: var(--bb-wine); border-color: var(--bb-wine); color: white; }
.is-selected .utbb-card-choice { background: #fcf7f4; }
.utbb-card-body { padding: 0 14px 16px; }
.utbb-card:not(.is-selected) .utbb-card-body { opacity: .65; }
.utbb-unit-price { display: flex; align-items: baseline; gap: 6px; margin: 3px 0 12px; }
.utbb-unit-price b { font: 700 17px/1.5 Arial, sans-serif; }
.utbb-unit-price span { font-size: 9px; color: var(--bb-muted); }
.utbb-qty-label { display: block; font-size: 9px; color: var(--bb-muted); margin-bottom: 6px; }
.utbb-quantity { display: grid; direction: ltr; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 4px; background: #faf7f3; border: 1px solid #e5dbd3; border-radius: 11px; padding: 4px; }
.utbb .utbb-quantity input { display: block; width: 100%; min-width: 0; border: 0; background: transparent; color: var(--bb-ink); font: 700 22px/1.2 Arial, sans-serif; height: 40px; min-height: 40px; border-radius: 5px; text-align: center; padding: 5px 2px; direction: ltr; box-shadow: none; }
.utbb .utbb-quantity input:disabled { color: #6f6560; -webkit-text-fill-color: #6f6560; opacity: 1; }
.utbb-quantity button { display: grid; place-items: center; min-width: 0; min-height: 40px; height: 40px; padding: 0; border: 1px solid #e2d8d0; border-radius: 8px; background: white; color: var(--bb-wine); font: 20px/1 Arial, sans-serif; }
.utbb-quantity button:not(:disabled):hover { background: var(--bb-wine); color: white; border-color: var(--bb-wine); }
.utbb-presets { display: flex; gap: 5px; flex-wrap: wrap; padding-block: 10px; }
.utbb-presets button { padding: 6px 9px; border: 1px solid #e4d8d1; border-radius: 6px; font: 11px/1.4 Arial, sans-serif; background: white; color: #66534d; min-height: 30px; }
.utbb-presets button:not(:disabled):hover { color: var(--bb-wine); background: #f7ebe7; border-color: #b97684; }
.utbb-limits { color: var(--bb-muted); font-size: 8px; line-height: 1.7; display: block; }
.utbb-field-error { color: #a21533; font-size: 10px; margin-top: 7px !important; }
.utbb-quantity:has(input[aria-invalid="true"]) { border-color: #b52342; }
.utbb-explainer { margin-top: 20px; border-top: 1px solid var(--bb-line); padding-top: 14px; }
.utbb-explainer summary { list-style: none; cursor: pointer; font-size: 11px; color: var(--bb-wine); display: flex; align-items: center; justify-content: space-between; }
.utbb-explainer summary::-webkit-details-marker { display: none; }
.utbb-explainer summary span { font: 20px/1 Arial, sans-serif; }
.utbb-explainer p { color: var(--bb-muted); font-size: 10px; padding-top: 12px; line-height: 1.95; }
.utbb-summary { position: sticky; top: 108px; min-width: 0; padding: 27px 24px 22px; border-radius: 24px; background: #211c20; color: #faf3ef; box-shadow: 0 20px 50px #23151c15; }
.utbb-summary-head span { color: #b6a3a9; font-size: 9px; }
.utbb-summary-head h2 { color: #fff9f5; font-size: 21px; margin: 4px 0 23px; font-weight: 750; }
.utbb-summary-items { padding-bottom: 18px; border-bottom: 1px solid #ffffff1a; }
.utbb-summary-items > div { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-block: 9px; font-size: 10px; }
.utbb-summary-items > div span { color: #e4d9d9; }
.utbb-summary-items > div b { color: white; direction: ltr; white-space: nowrap; font: 600 12px/1.8 Arial, sans-serif; }
.utbb-summary-items > p { color: #b6a3a9; font-size: 11px; }
.utbb-money-lines { margin: 17px 0 0; }
.utbb-money-lines > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; margin-block: 10px; }
.utbb-money-lines dt { color: #b9aeb1; }
.utbb-money-lines dd { margin: 0; font-size: 11px; color: #e7dbd9; white-space: nowrap; }
.utbb-money-lines .utbb-discount-line dt, .utbb-money-lines .utbb-discount-line dd { color: #b8d9ba; }
.utbb-discount-line small { font-size: 10px; }
.utbb-grand { display: grid; gap: 5px; padding-block: 20px 12px; }
.utbb-grand > span { font-size: 10px; color: #cfbfc4; }
.utbb-grand > strong { color: #f1d3a8; font-size: clamp(25px, 2.5vw, 31px); font-weight: 750; line-height: 1.5; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.utbb-grand > small { color: #c0b4b7; font-size: 10px; }
.utbb-grand > small b { color: #f2e8e2; display: inline-block; font-weight: 600; }
.utbb-fx { color: #a79a9e; font-size: 9px; line-height: 1.8; padding-bottom: 19px; }
.utbb .utbb-primary { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 51px; padding: 12px 20px; border: 1px solid var(--bb-wine); border-radius: 11px; background: var(--bb-wine); color: white; font-size: 11px; line-height: 1.7; font-weight: 700; box-shadow: none; }
.utbb .utbb-primary:not(:disabled):hover { background: #681029; border-color: #681029; }
.utbb-summary .utbb-primary { width: 100%; background: #a42b48; border-color: #a42b48; }
.utbb-summary-note { font-size: 9px; text-align: center; color: #afa0a5; margin-top: 12px !important; }
.utbb-summary-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-top: 22px; padding-top: 16px; border-top: 1px solid #ffffff12; color: #cdbac0; font-size: 8px; }
.utbb-summary-proof span::before { content: '✓'; color: #b8d9ba; margin-inline-end: 5px; }
.utbb-review-notice { background: #f0d4a513; border: 1px solid #f0d4a532; border-radius: 10px; padding: 12px; margin-bottom: 18px; }
.utbb-review-notice strong { color: #f1d3a8; font-size: 11px; }
.utbb-review-notice p { color: #d0c2bd; font-size: 10px; margin-top: 3px; }
.utbb-navigation { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 18px; }
.utbb-navigation .utbb-primary { min-width: 235px; }
.utbb-back, .utbb-link-button { border: 0; border-radius: 0; background: transparent; color: var(--bb-wine); padding: 12px; font-size: 11px; }
.utbb-back { margin-inline-end: auto; }
.utbb-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 17px; }
.utbb-field { display: grid; gap: 8px; min-width: 0; }
.utbb-field-wide { grid-column: 1 / -1; }
.utbb-field > span { color: #3c3032; font-size: 12px; font-weight: 650; }
.utbb .utbb-field input, .utbb .utbb-field textarea { width: 100%; min-width: 0; border: 1px solid #ddd1cb; border-radius: 10px; background: white; box-shadow: none; color: #292125; padding: 12px 13px; font-size: 12px; line-height: 1.8; min-height: 49px; }
.utbb .utbb-field textarea { resize: vertical; }
.utbb .utbb-field input::placeholder, .utbb .utbb-field textarea::placeholder { color: #a79893; opacity: 1; }
.utbb-field > small { color: #80716e; font-size: 9px; line-height: 1.7; }
.utbb-inline-note { font-size: 10px; line-height: 1.9; color: #5f6555; background: #f1f3ec; border-radius: 10px; padding: 13px 15px; margin-top: 26px !important; }
.utbb-review { border: 1px solid #e1d7d0; background: #fbf8f4; border-radius: 13px; padding: 7px 16px; }
.utbb-review > div { display: flex; justify-content: space-between; gap: 18px; font-size: 11px; padding: 14px 0; }
.utbb-review > div + div { border-top: 1px solid #e9e0d8; }
.utbb-review > div > span { color: #766762; }
.utbb-review > div > b { color: #322326; min-width: 0; text-align: left; overflow-wrap: anywhere; font-size: 11px; }
.utbb-review > .utbb-review-detail { flex-direction: column; gap: 5px; }
.utbb-review-detail > b { text-align: right !important; unicode-bidi: plaintext; font-weight: 600; }
.utbb-review-disclosure { margin-top: 20px; padding: 15px; border-radius: 11px; background: #f4eee8; }
.utbb-review-disclosure strong { font-size: 11px; color: #5b4139; }
.utbb-review-disclosure p { font-size: 10px; color: #7b6b64; margin-top: 5px; }
.utbb-consent { display: flex; align-items: flex-start; gap: 11px; margin-top: 23px; color: #554345; font-size: 11px; line-height: 2; }
.utbb-consent input { width: 19px; height: 19px; margin: 4px 0 0; flex-shrink: 0; accent-color: var(--bb-wine); }
.utbb-consent a { color: var(--bb-wine); text-decoration: underline; text-underline-offset: 4px; }
.utbb-merchant { color: #83736c; font-size: 9px; line-height: 1.9; border-top: 1px solid #e9e0d8; margin-top: 21px !important; padding-top: 15px; }
.utbb-merchant b { display: inline-block; color: #51403e; }
.utbb-message, .utbb-notice, .utbb-attempt { border: 1px solid #d8aaa8; background: #fff1ee; border-radius: 12px; color: #8c2937; padding: 15px 18px; margin-bottom: 18px; font-size: 12px; overflow-wrap: anywhere; }
.utbb-message[data-type="info"] { border-color: #d8cfb8; color: #675627; background: #fbf5e9; }
.utbb-message[data-type="success"] { border-color: #b4cfbe; color: #245d40; background: #f0f8ee; }
.utbb-attempt { background: #f7f0e6; border-color: #decbaf; color: #675232; }
.utbb-attempt strong { font-size: 12px; }
.utbb-attempt p { font-size: 11px; margin-top: 4px; }
.utbb-attempt .utbb-link-button { text-decoration: underline; padding: 9px 0 0; }
.utbb-status-link { display: block; color: #245d40; font-weight: 700; margin-top: 9px; text-decoration: underline; }
.utbb-honey { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.utbb-dock { display: none; }
@media (min-width: 1000px) { .utbb-navigation [data-action] { display: none; } }
@media (max-width: 1050px) {
  .utbb-layout { grid-template-columns: minmax(0, 1fr) 292px; gap: 18px; }
  .utbb-stage { padding: 21px; }
  .utbb-summary { padding: 25px 19px; }
  .utbb-card-choice { padding: 13px 10px; gap: 7px; }
  .utbb-card-title strong { font-size: 11px; }
  .utbb-card-icon { width: 30px; height: 33px; }
  .utbb-card-title small { font-size: 7px; }
}
@media (max-width: 850px) {
  .utbb { width: min(650px, calc(100% - 32px)); margin-top: 14px; padding-bottom: 64px; }
  .utbb-hero { padding-block: 22px 28px; gap: 20px; }
  .utbb-hero h1 { font-size: 41px; }
  .utbb-hero p { font-size: 11px; }
  .utbb-hero-stamp { min-width: 133px; padding: 14px; border-radius: 19px; }
  .utbb-hero-stamp strong { font-size: 44px; }
  .utbb-hero-stamp > span { font-size: 8px; }
  .utbb-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .utbb-summary { position: static; }
  .utbb:not([data-stage="3"]) .utbb-summary { display: none; }
  .utbb-summary [data-summary-action] { display: none; }
  .utbb-summary-head h2 { font-size: 23px; }
  .utbb-grand > strong { font-size: 32px; }
  .utbb-cards { gap: 12px; }
  .utbb-card-title strong { font-size: 13px; }
  .utbb-card-title small { font-size: 9px; }
  .utbb-card-icon { width: 35px; height: 35px; }
  .utbb-progress { scroll-margin-top: 100px; }
  .utbb-dock { position: fixed; z-index: 999; inset-inline: 10px; bottom: max(10px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.2fr); align-items: center; gap: 9px; padding: 9px; border-radius: 16px; background: #221b20f5; box-shadow: 0 7px 32px #1d101a50; border: 1px solid #ffffff24; backdrop-filter: blur(15px); }
  .utbb-dock > div { display: grid; gap: 1px; min-width: 0; padding-inline: 4px; }
  .utbb-dock > div > span { color: #c6b6bb; font-size: 8px; }
  .utbb-dock strong { color: #f1d3a8; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
  .utbb-dock small { color: #bdcfb8; font-size: 8px; }
  .utbb-dock .utbb-primary { padding-inline: 9px; min-height: 50px; font-size: 10px; border-radius: 10px; background: #9e2442; border-color: #9e2442; }
  .utbb-navigation { margin-top: 11px; }
  .utbb-navigation [data-action] { display: none; }
  .utbb-fields { gap: 20px 15px; }
}
@media (max-width: 520px) {
  .utbb { width: calc(100% - 24px); margin-top: 5px; }
  .utbb-hero { gap: 12px; padding: 23px 3px 25px; }
  .utbb-kicker { font-size: 8px; }
  .utbb-hero h1 { font-size: 33px; margin-block: 9px 7px; }
  .utbb-hero p { font-size: 10px; line-height: 1.9; }
  .utbb-hero-stamp { min-width: 101px; width: 101px; padding: 13px 8px; border-radius: 16px; }
  .utbb-hero-stamp strong { font-size: 38px; padding: 4px; }
  .utbb-hero-stamp strong small { font-size: 18px; }
  .utbb-hero-stamp > span { font-size: 6px; white-space: nowrap; }
  .utbb-progress { gap: 10px; margin-bottom: 17px; }
  .utbb-progress button { gap: 6px; font-size: 8px; padding-bottom: 11px; }
  .utbb-progress button span { width: 24px; height: 24px; font-size: 9px; }
  .utbb-stage { padding: 19px 14px; border-radius: 18px; }
  .utbb-section-head { margin-bottom: 18px; }
  .utbb-section-head h2 { font-size: 20px; }
  .utbb-overline { font-size: 8px; }
  .utbb-step-label { font-size: 8px; }
  .utbb-modes { gap: 8px; }
  .utbb-modes button { padding: 12px 10px; border-radius: 11px; }
  .utbb-modes button strong { font-size: 11px; gap: 5px; }
  .utbb-modes button b { font-size: 7px; padding: 1px 4px; }
  .utbb-modes button span { font-size: 8px; }
  .utbb-mode-help { font-size: 9px; padding-block: 14px; }
  .utbb-cards { gap: 9px; }
  .utbb-card { border-radius: 13px; }
  .utbb-card-choice { padding: 12px 9px; min-height: 72px; flex-wrap: wrap; gap: 6px; }
  .utbb-card-icon { width: 28px; height: 30px; border-radius: 8px; }
  .utbb-card-icon svg { width: 18px; height: 18px; }
  .utbb-card-title { min-width: 60px; }
  .utbb-card-title strong { font-size: 10px; }
  .utbb-card-title small { font-size: 6px; }
  .utbb-check { width: 15px; height: 15px; font-size: 10px; border-radius: 5px; }
  .utbb-card-body { padding: 0 9px 12px; }
  .utbb-unit-price { gap: 4px; margin-bottom: 10px; }
  .utbb-unit-price b { font-size: 15px; }
  .utbb-unit-price span { font-size: 7px; }
  .utbb-qty-label { font-size: 8px; }
  .utbb-quantity { grid-template-columns: 25px minmax(0, 1fr) 25px; padding: 3px; gap: 1px; border-radius: 8px; }
  .utbb .utbb-quantity input { font-size: 18px; height: 36px; min-height: 36px; padding-inline: 1px; }
  .utbb-quantity button { height: 36px; min-height: 36px; font-size: 17px; border-radius: 6px; }
  .utbb-presets { gap: 4px; padding-block: 8px; }
  .utbb-presets button { padding: 5px 6px; font-size: 9px; min-height: 28px; }
  .utbb-limits { font-size: 7px; }
  .utbb-explainer summary { font-size: 10px; }
  .utbb-explainer p { font-size: 9px; }
  .utbb-fields { grid-template-columns: minmax(0, 1fr); }
  .utbb-field > span { font-size: 11px; }
  .utbb .utbb-field input, .utbb .utbb-field textarea { font-size: 16px; }
  .utbb-field > small { font-size: 9px; }
  .utbb-review { padding-inline: 12px; }
  .utbb-review > div { font-size: 10px; gap: 10px; }
  .utbb-review > div > b { font-size: 10px; }
  .utbb-consent { font-size: 10px; }
  .utbb-dock strong { font-size: 14px; }
}
@media (max-width: 355px) {
  .utbb-hero-stamp { display: none; }
  .utbb-cards { grid-template-columns: minmax(0, 1fr); }
  .utbb-card-choice { min-height: 63px; }
  .utbb-card-title strong { font-size: 13px; }
  .utbb-card-title small { font-size: 9px; }
  .utbb-quantity { grid-template-columns: 40px minmax(0, 1fr) 40px; }
}
@media (prefers-reduced-motion: reduce) { .utbb button { transition: none; } .utbb-progress { scroll-behavior: auto; } }

/* Compact storefront rhythm; mobile services expand into a readable one-column editor. */
.utbb { margin-top: 12px; }
.utbb-hero { padding: 12px 4px 20px; }
.utbb-hero h1 { font-size: clamp(34px, 3.8vw, 48px); margin-block: 5px; }
.utbb-hero-stamp { min-width: 150px; padding: 12px 18px; border-radius: 19px; }
.utbb-hero-stamp strong { font-size: 46px; padding-block: 3px; }
.utbb-hero-stamp > span { font-size: 9px; }
.utbb-progress { margin-bottom: 17px; }
.utbb-stage { padding: 21px 24px; }
.utbb-section-head { margin-bottom: 16px; }
.utbb-section-head h2 { font-size: clamp(20px, 1.9vw, 24px); }
.utbb-modes button { padding: 12px 15px; }
.utbb-mode-help { padding-block: 12px 14px; min-height: 0; }
.utbb-card-choice { min-height: 72px; padding-block: 12px; }
.utbb-card-body { padding-bottom: 13px; }
.utbb-unit-price { margin-bottom: 9px; }
.utbb-presets { padding-block: 8px; }

@media (max-width: 850px) {
  .utbb { margin-top: 8px; }
  .utbb-hero { padding-block: 12px 20px; }
  .utbb-stage { padding: 20px; }
}

@media (max-width: 520px) {
  .utbb { width: calc(100% - 24px); margin-top: 7px; padding-bottom: 75px; }
  .utbb-hero { display: block; padding: 10px 3px 19px; }
  .utbb-kicker { font-size: 10px; line-height: 1.6; }
  .utbb-hero h1 { font-size: 30px; line-height: 1.45; margin-block: 6px 5px; }
  .utbb-hero p { font-size: 12px; line-height: 1.8; max-width: 350px; }
  .utbb-hero-stamp { display: none; }
  .utbb-progress { gap: 8px; margin-bottom: 13px; }
  .utbb-progress button { gap: 5px; font-size: 10px; line-height: 1.5; padding-bottom: 10px; }
  .utbb-progress button span { width: 24px; height: 24px; font-size: 10px; }
  .utbb-stage { padding: 17px 14px; border-radius: 17px; }
  .utbb-section-head { margin-bottom: 14px; gap: 8px; }
  .utbb-overline { font-size: 10px; margin-bottom: 3px; }
  .utbb-section-head h2 { font-size: 20px; line-height: 1.5; }
  .utbb-step-label { font-size: 10px; }
  .utbb-modes { grid-template-columns: 1fr 1.1fr; gap: 8px; }
  .utbb-modes button { padding: 11px 10px; gap: 3px; }
  .utbb-modes button strong { font-size: 12px; line-height: 1.6; gap: 5px; }
  .utbb-modes button span { font-size: 10px; line-height: 1.7; }
  .utbb-modes button b { font-size: 10px; line-height: 1.7; padding: 1px 4px; }
  .utbb-mode-help { font-size: 11px; line-height: 1.8; padding-block: 11px 13px; }
  .utbb-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .utbb-card { border-radius: 13px; }
  .utbb-card-choice { flex-wrap: nowrap; min-height: 64px; padding: 10px 12px; gap: 10px; }
  .utbb-card-icon { width: 35px; height: 36px; border-radius: 10px; }
  .utbb-card-icon svg { width: 21px; height: 21px; }
  .utbb-card-title { gap: 2px; }
  .utbb-card-title strong { font-size: 14px; line-height: 1.6; }
  .utbb-card-title small { font-size: 11px; line-height: 1.6; }
  .utbb-check { width: 20px; height: 20px; border-radius: 6px; font-size: 13px; }
  .utbb-card:not(.is-selected) .utbb-card-body { display: none; }
  .utbb-card.is-selected .utbb-card-body { padding: 5px 13px 15px; }
  .utbb-unit-price { margin: 0 0 8px; gap: 7px; }
  .utbb-unit-price b { font-size: 19px; }
  .utbb-unit-price span { font-size: 11px; }
  .utbb-qty-label { font-size: 11px; margin-bottom: 5px; }
  .utbb-quantity { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 5px; border-radius: 11px; padding: 4px; }
  .utbb .utbb-quantity input { height: 44px; min-height: 44px; font-size: 24px; padding-inline: 2px; }
  .utbb-quantity button { height: 44px; min-height: 44px; font-size: 22px; border-radius: 8px; }
  .utbb-presets { gap: 7px; padding-block: 10px; }
  .utbb-presets button { min-height: 36px; padding: 7px 11px; font-size: 12px; }
  .utbb-limits { font-size: 10px; line-height: 1.8; }
  .utbb-field-error { font-size: 11px; line-height: 1.8; }
  .utbb-explainer { margin-top: 16px; padding-top: 13px; }
  .utbb-explainer summary { font-size: 12px; line-height: 1.8; }
  .utbb-explainer p { font-size: 11px; line-height: 1.9; }
  .utbb .utbb-primary { font-size: 13px; min-height: 51px; }
  .utbb-back, .utbb-link-button { font-size: 12px; }
  .utbb-field > span { font-size: 13px; }
  .utbb-field > span small { font-size: 11px; }
  .utbb-field > small { font-size: 11px; line-height: 1.8; }
  .utbb-inline-note { font-size: 11px; line-height: 1.9; }
  .utbb-review > div, .utbb-review > div > b { font-size: 12px; line-height: 1.8; }
  .utbb-review-disclosure strong { font-size: 12px; }
  .utbb-review-disclosure p { font-size: 11px; line-height: 1.9; }
  .utbb-consent { font-size: 12px; line-height: 1.9; }
  .utbb-merchant { font-size: 11px; line-height: 1.9; }
  .utbb-summary-head span { font-size: 11px; }
  .utbb-summary-items > div { font-size: 12px; line-height: 1.8; }
  .utbb-summary-items > div b { font-size: 13px; }
  .utbb-money-lines > div { font-size: 12px; }
  .utbb-money-lines dd { font-size: 12px; }
  .utbb-discount-line small { font-size: 11px; }
  .utbb-grand > span, .utbb-grand > small { font-size: 12px; }
  .utbb-fx, .utbb-summary-note { font-size: 11px; line-height: 1.9; }
  .utbb-summary-proof { font-size: 10px; }
  .utbb-review-notice strong { font-size: 12px; }
  .utbb-review-notice p { font-size: 11px; }
  .utbb-dock { grid-template-columns: minmax(0, .95fr) minmax(0, 1.2fr); gap: 8px; padding: 10px; }
  .utbb-dock > div > span { font-size: 10px; line-height: 1.5; }
  .utbb-dock strong { font-size: 15px; line-height: 1.7; }
  .utbb-dock small { font-size: 10px; line-height: 1.5; }
  .utbb-dock .utbb-primary { font-size: 12px; padding: 10px 8px; min-height: 53px; }
  .utbb-attempt strong { font-size: 13px; }
  .utbb-attempt p { font-size: 12px; }
}

/* The same service picker handles one or several services; no mode decision is required. */
.utbb-stage > .utbb-mode-help { padding-top: 0; }
.utbb-discount-meter { padding: 15px 0 0; }
.utbb-discount-meter > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; color: #d2c3c7; }
.utbb-discount-meter strong { color: #c2e2bb; font: 700 17px/1.5 Arial, sans-serif; }
.utbb-discount-meter meter { display: block; width: 100%; height: 8px; margin: 9px 0 8px; border: 0; border-radius: 8px; appearance: none; -webkit-appearance: none; background: #ffffff14; accent-color: #a8cc9b; }
.utbb-discount-meter meter::-webkit-meter-bar { height: 8px; border: 0; border-radius: 8px; background: #ffffff14; box-shadow: none; }
.utbb-discount-meter meter::-webkit-meter-optimum-value { border-radius: 8px; background: #a8cc9b; }
.utbb-discount-meter meter::-moz-meter-bar { border: 0; border-radius: 8px; background: #a8cc9b; }
.utbb-discount-meter > small { display: block; color: #b8a9af; font-size: 10px; line-height: 1.8; }
.utbb-money-lines dt > small { margin-inline-start: 3px; font-size: 9px; color: #a7979d; }
@media (max-width: 520px) {
  .utbb-discount-meter > div { font-size: 12px; }
  .utbb-discount-meter strong { font-size: 18px; }
  .utbb-discount-meter > small { font-size: 11px; }
  .utbb-money-lines dt > small { font-size: 10px; }
}