.bbq {
  --quote-ink: var(--ink, #111d47);
  --quote-blue: var(--blue, #2044ca);
  --quote-orange: var(--orange, #ff842f);
  --quote-line: #dce2f0;
  --quote-muted: #485472;
  background: var(--paper, #fbf8f0);
  color: var(--quote-ink);
  padding-block: clamp(35px, 7vw, 84px);
}

.bbq [hidden] { display: none !important; }
.bbq-intro { margin-bottom: clamp(24px, 4vw, 43px); }
.bbq-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--quote-blue);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.bbq-eyebrow::before { content: ""; width: 24px; height: 3px; background: var(--quote-orange); border-radius: 3px; }
.bbq-intro h1 {
  max-width: 19ch;
  margin: .18em 0 .28em;
  font-size: clamp(2.45rem, 7vw, 5.15rem);
  line-height: 1.02;
  letter-spacing: -.065em;
  overflow-wrap: anywhere;
}
.bbq-intro h1 span { color: var(--quote-blue); }
.bbq-intro > p:last-child { max-width: 59ch; margin: 0; color: var(--quote-muted); font-size: clamp(1rem, 2vw, 1.17rem); }

.bbq-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.bbq-progress li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border: 1px solid var(--quote-line);
  border-radius: 10px;
  background: #fff;
  color: var(--quote-muted);
  font-size: .83rem;
  font-weight: 750;
  line-height: 1.25;
}
.bbq-progress span { font-size: .74em; font-variant-numeric: tabular-nums; }
.bbq-progress [aria-current="step"] { border-color: var(--quote-blue); background: var(--quote-blue); color: #fff; }

.bbq-split { display: grid; grid-template-columns: minmax(0, 1.24fr) minmax(0, .86fr); gap: clamp(12px, 3vw, 32px); align-items: start; }
.bbq-controls, .bbq-preview { min-width: 0; }
.bbq-panel, .bbq-preview {
  border: 1px solid var(--quote-line);
  border-radius: 17px;
  background: #fff;
}
.bbq-panel { padding: clamp(17px, 3.2vw, 34px); }
.bbq-panel h2 {
  margin: 0 0 6px;
  font-size: clamp(1.42rem, 3.3vw, 2rem);
  line-height: 1.15;
  letter-spacing: -.043em;
  scroll-margin-top: 110px;
}
.bbq-lead { margin: 0 0 22px; color: var(--quote-muted); }
.bbq-fieldset { min-inline-size: 0; margin: 0 0 18px; padding: 0; border: 0; }
.bbq-fieldset legend { margin: 0 0 8px; padding: 0; font-size: .92rem; font-weight: 800; }
.bbq-options { display: flex; flex-wrap: wrap; gap: 7px; }
.bbq-option, .bbq-swatch { position: relative; cursor: pointer; }
.bbq-option input, .bbq-swatch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  clip-path: inset(50%);
  overflow: hidden;
}
.bbq-option > span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--quote-line);
  border-radius: 8px;
  background: #fff;
  font-size: .86rem;
  font-weight: 750;
  line-height: 1.25;
}
.bbq-option small { display: block; margin-top: 3px; color: var(--quote-muted); font-size: .75rem; font-weight: 550; }
.bbq-option:hover > span, .bbq-option input:checked + span { border-color: var(--quote-blue); }
.bbq-option input:checked + span { background: #edf1ff; color: #19379d; }
.bbq-option input:focus-visible + span, .bbq-swatch input:focus-visible + span { outline: 2px solid var(--quote-blue); outline-offset: 3px; }
.bbq-options--orientation > .bbq-option { flex: 1 1 164px; }
.bbq-selected { margin-left: 3px; color: var(--quote-blue); font-size: .85em; font-weight: 700; }
.bbq-help { margin: 6px 0 0; color: var(--quote-muted); font-size: .79rem; line-height: 1.45; }
.bbq-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 6px; }
.bbq-swatch { min-width: 0; }
.bbq-swatch > span {
  display: grid;
  min-height: 36px;
  place-items: center;
  border: 1px solid #0003;
  border-radius: 8px;
  background: var(--swatch);
}
.bbq-swatch input:checked + span { outline: 2px solid var(--quote-blue); outline-offset: 1px; }
.bbq-swatch input:checked + span::after { content: "✓"; color: var(--swatch-mark, #fff); font-size: .98rem; font-weight: 900; }

.bbq-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.bbq-fields label { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; font-weight: 750; }
.bbq-fields label small { font-size: .79rem; color: var(--quote-muted); font-weight: 550; }
.bbq-wide { grid-column: 1 / -1; }
.bbq-fields input, .bbq-fields textarea {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  min-height: 44px;
  padding: 9px 10px;
  border: 1px solid #c3cde3;
  border-radius: 7px;
  color: var(--quote-ink);
  background: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
}
.bbq-fields textarea { resize: vertical; }
.bbq-fields input[type="file"] { padding: 5px; font-size: .84rem; }
.bbq-fields input::file-selector-button { min-height: 32px; margin-right: 8px; border: 0; border-radius: 5px; background: #e8eeff; color: #19379d; font: inherit; font-weight: 750; }
.bbq-fields [aria-invalid="true"] { border-color: #a12632; }
.bbq-error { margin: 0; color: #a12632; font-size: .83rem; font-weight: 700; }
.bbq-note { margin: 17px 0 0; padding: 12px 13px; border-left: 3px solid var(--quote-blue); border-radius: 5px; background: #eff3fd; color: var(--quote-muted); font-size: .84rem; }
.bbq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.bbq-actions > .button, .bbq-clear, .bbq-side button { font: inherit; cursor: pointer; }
.bbq-actions > .button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 15px;
  border: 1px solid var(--quote-blue);
  border-radius: 8px;
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.25;
}
.bbq-actions > .bbq-primary { color: #fff; background: var(--quote-blue); }
.bbq-actions > .bbq-primary:hover { color: #fff; background: #18359f; }
.bbq-actions > .bbq-primary:disabled { opacity: .65; cursor: default; }
.bbq-actions > .bbq-secondary { color: var(--quote-blue); background: #fff; }
.bbq-actions > .bbq-secondary:hover { color: var(--quote-blue); background: #edf1ff; }
.bbq-send-status { margin-top: 10px; color: #186246; font-size: .85rem; font-weight: 750; }
.bbq-send-status:empty { margin: 0; }
.bbq-send-status[data-error] { color: #a12632; }
.bbq-clear { min-height: 44px; padding: 6px; border: 0; background: transparent; color: var(--quote-muted); font-size: .79rem; text-decoration: underline; text-underline-offset: 3px; }
.bbq-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; }
.bbq-review > div { min-width: 0; padding: 12px; border: 1px solid var(--quote-line); border-radius: 8px; }
.bbq-review dt { color: var(--quote-muted); font-size: .79rem; }
.bbq-review dd { margin: 4px 0 0; font-size: .9rem; font-weight: 800; }

.bbq-preview { --balloon-color: #304cda; --balloon-ink: #fff; position: sticky; top: 105px; padding: 9px; scroll-margin-top: 12px; }
.bbq-logo-tools { padding: 5px 6px 10px; }
.bbq-logo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.bbq-logo-actions .button { min-height: 44px; padding: 8px 12px; font-size: .86rem; }
.bbq-logo-actions svg { flex: none; }
#bbq-logo-status:empty { margin: 0; }
#bbq-logo-status[data-error] { color: #a12632; }
.bbq-preview figure { margin: 0; }
.bbq-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 230px;
  overflow: hidden;
  border-radius: 10px;
  background: radial-gradient(circle at 52% 41%, #f8fbff, #dce6ff 68%, #cad8fc);
}
.bbq-stage-label, .bbq-stage-size {
  position: absolute;
  top: 12px;
  padding: 5px 8px;
  border: 1px solid #c9d5f2;
  border-radius: 5px;
  background: #f7f9ff;
  color: #263f8b;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.1;
}
.bbq-stage-label { left: 12px; }
.bbq-stage-size { right: 12px; }
.bbq-art { display: block; width: 100%; height: auto; max-height: 470px; }
.bbq-latex-light { stop-color: color-mix(in srgb, var(--balloon-color) 48%, white); }
.bbq-latex-base { stop-color: var(--balloon-color); }
.bbq-latex-mid { stop-color: color-mix(in srgb, var(--balloon-color) 79%, #141b41); }
.bbq-latex-dark { stop-color: color-mix(in srgb, var(--balloon-color) 47%, #141b41); }
.bbq-knot { fill: color-mix(in srgb, var(--balloon-color) 57%, #141b41); }
.bbq-svg-mark { color: var(--balloon-ink); }
.bbq-svg-mark text { fill: currentColor; }
.bbq-metal-glint { display: none; }
.bbq-preview[data-finish="metallic"] .bbq-metal-glint { display: block; }
.bbq-preview[data-finish="crystal"] .bbq-balloon { fill-opacity: .47; }
.bbq-preview[data-finish="crystal"] .bbq-knot { opacity: .72; }
.bbq-preview figcaption { padding: 8px 6px 3px; }
.bbq-preview-row { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; }
.bbq-preview-row strong { color: var(--quote-ink); font-size: .92rem; }
.bbq-preview figcaption p { margin: 4px 0 0; color: var(--quote-muted); font-size: .79rem; }
.bbq-side { display: inline-flex; gap: 3px; }
.bbq-side button {
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid var(--quote-line);
  border-radius: 5px;
  background: #fff;
  color: var(--quote-blue);
  font-size: .78rem;
  font-weight: 750;
}
.bbq-side button[aria-pressed="true"] { border-color: var(--quote-blue); background: #edf1ff; }
.bbq-preview-jump { display: none; }

@media (max-width: 820px) {
  .bbq-split { grid-template-columns: minmax(0, 1fr); }
  .bbq-preview { order: -1; position: static; }
  .bbq-art { max-height: 260px; }
  .bbq-preview-jump { display: inline; color: var(--quote-blue); font-weight: 800; }
}

@media (max-width: 460px) {
  .bbq-progress { gap: 5px; }
  .bbq-progress li { align-items: start; flex-direction: column; gap: 4px; padding: 8px; font-size: .76rem; }
  .bbq-fields { grid-template-columns: minmax(0, 1fr); }
  .bbq-art { max-height: 225px; }
}