@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Geist:wght@400..700&family=Instrument+Serif:ital@1&display=swap');
/* ==========================================================================
   Order wizard — focused, full-bleed chrome (no sidebar).
   Built on top of wb.css tokens and utilities; only wizard-specific layout
   lives here.
   ========================================================================== */

.wz-body { display: flex; flex-direction: column; min-height: 100vh; }

/* ---- top bar --------------------------------------------------------- */
.wz-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--wb-bar-h);
  padding: 0 22px;
  background: var(--wb-surface);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--wb-border);
}

.wz-bar__logo { flex-shrink: 0; display: flex; }
.wz-bar__logo img { height: 24px; width: auto; }
:root[data-theme="dark"] .wz-bar__logo img { filter: invert(1) brightness(1.9); }

.wz-progress {
  flex: 1;
  height: 6px;
  border-radius: var(--wb-r-pill);
  background: var(--wb-surface-sunk);
  overflow: hidden;
}

.wz-progress span {
  display: block;
  height: 100%;
  width: 11.11%; /* step 1 of 9 */
  border-radius: var(--wb-r-pill);
  background: var(--wb-brand-grad);
  transition: width .4s var(--wb-ease);
}

/* ---- steps -------------------------------------------------------------- */
.wz-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.wz-step {
  display: none;
  width: 100%;
  max-width: 980px;
  text-align: center;
  animation: wz-in .35s var(--wb-ease);
}

.wz-step.is-active { display: block; }

@keyframes wz-in {
  from { opacity: 0; transform: translateY(10px); }
}

.wz-step h1 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 10px; }

.wz-sub {
  max-width: 60ch;
  margin: 0 auto 30px;
  color: var(--wb-muted);
  font-size: .98rem;
  line-height: 1.6;
}

/* Step 5's heading/subtitle double as a live preview of the chosen palette
   and font — background, text colour and typography are all set inline by
   wizard.js once the client picks something, so the choice is not abstract. */
.wz-style-preview {
  border-radius: var(--wb-r);
  padding: 28px 24px;
  margin-bottom: 30px;
  transition: background .3s var(--wb-ease), color .3s var(--wb-ease);
}
.wz-style-preview h1,
.wz-style-preview .wz-sub { transition: color .3s var(--wb-ease), font-family .3s var(--wb-ease); }
.wz-style-preview .wz-sub { margin-bottom: 0; }

.wz-narrow { max-width: 560px; margin: 0 auto; text-align: left; }
.wz-left { text-align: left; }

.wz-input-lg { padding: 16px 18px; font-size: 1.05rem; text-align: center; border-radius: var(--wb-r); }

/* ---- domain step ---------------------------------------------------------- */
.wz-domain-search { display: flex; gap: 10px; }
.wz-domain-search .wb-input { flex: 1; }

.wz-domain-results { margin-top: 16px; }

.wz-domain-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-r-sm);
  margin-bottom: 8px;
  font-weight: 600;
  font-size: .92rem;
}

.wz-domain-row .wb-btn { padding: 7px 16px; font-size: .82rem; }
.wz-domain-row.is-taken { opacity: .55; }

.wz-domain-loading {
  padding: 16px;
  text-align: center;
  color: var(--wb-muted);
  font-size: .9rem;
}

/* ---- style step ------------------------------------------------------------ */
.wz-style-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  text-align: left;
  max-width: 760px;
  margin: 0 auto;
}

.wz-swatch-grid, .wz-font-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}

.wz-swatch {
  border: 2px solid var(--wb-border);
  border-radius: var(--wb-r-sm);
  padding: 8px;
  cursor: pointer;
  background: var(--wb-surface-solid);
  transition: all .18s var(--wb-ease);
}

.wz-swatch:hover { border-color: var(--wb-border-strong); }
.wz-swatch.is-on { border-color: var(--wb-brand-1); box-shadow: 0 0 0 3px rgba(142,45,226,.16); }

.wz-swatch__strip { display: flex; height: 30px; border-radius: 6px; overflow: hidden; margin-bottom: 6px; }
.wz-swatch__strip span { flex: 1; }
.wz-swatch__label { font-size: .72rem; font-weight: 600; color: var(--wb-text-soft); }

.wz-font-card {
  border: 2px solid var(--wb-border);
  border-radius: var(--wb-r-sm);
  padding: 12px 10px;
  cursor: pointer;
  background: var(--wb-surface-solid);
  text-align: center;
  transition: all .18s var(--wb-ease);
}

.wz-font-card:hover { border-color: var(--wb-border-strong); }
.wz-font-card.is-on { border-color: var(--wb-brand-1); box-shadow: 0 0 0 3px rgba(142,45,226,.16); }
.wz-font-card__sample { font-size: 1.1rem; font-weight: 700; margin-bottom: 3px; }
.wz-font-card__label { font-size: .68rem; color: var(--wb-muted); }

/* ---- wireframe builder (step 6) ---------------------------------------------
   Three panes: page tabs on top, the section library on the left, the active
   page's wireframe in the middle. The library used to be an absolutely
   positioned dropdown under an "add section" button; it opened underneath the
   sticky footer and left a few scrollable rows visible, so it is a permanent
   pane now and the canvas is what changes.
   ----------------------------------------------------------------------------- */

.wz-step--wide { max-width: 1280px; }

.wz-builder-head { margin-bottom: 14px; }
.wz-step--wide h1 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 4px; }
.wz-builder-head .wz-sub { margin-bottom: 0; font-size: .9rem; }

.wz-builder {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  text-align: left;
  min-height: 0;
}

/* The two panes scroll internally and the page itself does not, so nothing can
   end up behind the sticky footer — which is what the old dropdown did. That
   needs a definite height to divide up, so on this step alone the body is
   pinned to the viewport and the builder takes whatever the heading and the
   page tabs leave over. Measuring it as `100vh - <constant>` instead breaks the
   moment the heading wraps to another line. */
@media (min-width: 961px) {
  body:has(#wz-step-6.is-active) { height: 100vh; overflow: hidden; }

  body:has(#wz-step-6.is-active) .wz-main {
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
    padding-top: 28px;
    padding-bottom: 28px;
  }

  #wz-step-6.is-active {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }

  .wz-builder { flex: 1; }
}

/* page chips above the builder */
.wz-pages-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.wz-page-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--wb-r-pill);
  border: 1px solid var(--wb-border);
  background: var(--wb-surface-solid);
  color: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s var(--wb-ease);
}

.wz-page-chip:hover { border-color: var(--wb-border-strong); }

.wz-page-chip.is-on {
  color: var(--wb-accent-contrast);
  background: var(--wb-brand-grad);
  border-color: transparent;
  box-shadow: var(--wb-shadow-sm);
}

.wz-page-chip__count {
  font-size: .72rem;
  font-weight: 700;
  opacity: .6;
}

.wz-page-chip--add {
  background: none;
  border-style: dashed;
  color: var(--wb-muted);
}
.wz-page-chip--add:hover { color: var(--wb-accent); border-color: var(--wb-border-strong); }

/* ---- left pane: the section library ----------------------------------------- */
.wz-lib {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--wb-surface-solid);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-r);
  box-shadow: var(--wb-shadow-sm);
}

.wz-lib__search {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--wb-border);
}
.wz-lib__search svg { flex-shrink: 0; color: var(--wb-muted); }
.wz-lib__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .88rem;
  color: var(--wb-text);
}
.wz-lib__search input:focus { outline: none; }

.wz-lib__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 12px 4px;
}

.wz-lib__custom {
  flex-shrink: 0;
  padding: 12px 14px;
  border-top: 1px solid var(--wb-border);
  background: var(--wb-surface-sunk);
}
.wz-lib__custom .wb-label { margin-bottom: 7px; }
.wz-lib__custom-row { display: flex; gap: 8px; }
.wz-lib__custom-row .wb-input { flex: 1; min-width: 0; }
.wz-lib__custom-row .wb-btn { flex-shrink: 0; padding: 0 13px; }

.wz-picker-cat { margin-bottom: 14px; }

.wz-picker-cat__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wb-muted);
  margin: 0 0 6px 8px;
}

.wz-picker-grid { display: flex; flex-direction: column; gap: 2px; }

.wz-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: var(--wb-r-sm);
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s var(--wb-ease), border-color .15s var(--wb-ease);
}
.wz-picker-item:hover { background: var(--wb-surface-sunk); border-color: var(--wb-border); }

.wz-picker-item__ico {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--wb-surface-sunk);
  color: var(--wb-muted);
  transition: color .15s var(--wb-ease);
}
.wz-picker-item:hover .wz-picker-item__ico { color: var(--wb-accent); }

.wz-picker-item__txt { flex: 1; min-width: 0; }
.wz-picker-item__txt strong { display: block; font-size: .82rem; font-weight: 600; }
.wz-picker-item__txt span {
  display: block;
  font-size: .72rem;
  color: var(--wb-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wz-picker-item__plus {
  flex-shrink: 0;
  color: var(--wb-accent);
  opacity: 0;
  transition: opacity .15s var(--wb-ease);
}
.wz-picker-item:hover .wz-picker-item__plus,
.wz-picker-item:focus-visible .wz-picker-item__plus { opacity: 1; }

.wz-lib__empty {
  padding: 24px 10px;
  text-align: center;
  font-size: .84rem;
  color: var(--wb-muted);
}

/* ---- centre pane: the page canvas -------------------------------------------- */
.wz-canvas {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--wb-surface-solid);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-r);
  box-shadow: var(--wb-shadow-sm);
}

.wz-canvas__chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 10px 13px;
  border-bottom: 1px solid var(--wb-border);
  background: var(--wb-surface-sunk);
}

.wz-canvas__dots { display: flex; gap: 5px; flex-shrink: 0; }
.wz-canvas__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--wb-border-strong); }

/* the page name doubles as the address bar of the mock browser */
.wz-canvas__name {
  flex: 1;
  min-width: 0;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: var(--wb-r-pill);
  background: var(--wb-surface-solid);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--wb-text);
  text-align: center;
}
.wz-canvas__name:hover { border-color: var(--wb-border); }
.wz-canvas__name:focus { outline: none; border-color: var(--wb-accent); }

.wz-canvas__del {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--wb-border);
  border-radius: 9px;
  background: none;
  color: var(--wb-muted);
  cursor: pointer;
  transition: all .15s var(--wb-ease);
}
.wz-canvas__del:hover:not(:disabled) { color: var(--wb-bad); border-color: var(--wb-bad); }
.wz-canvas__del:disabled { opacity: .3; cursor: not-allowed; }

.wz-canvas__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--wb-surface-sunk);
}

.wz-canvas__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 180px;
  padding: 26px;
  text-align: center;
  color: var(--wb-muted);
  border: 1.5px dashed var(--wb-border-strong);
  border-radius: var(--wb-r-sm);
}
.wz-canvas__empty strong { font-size: .92rem; color: var(--wb-text-soft); }
.wz-canvas__empty span { font-size: .8rem; max-width: 32ch; }

/* ---- a section on the canvas -------------------------------------------------- */
.wz-block {
  flex-shrink: 0;
  overflow: hidden;
  background: var(--wb-surface-solid);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-r-sm);
  transition: border-color .18s var(--wb-ease), box-shadow .18s var(--wb-ease), opacity .15s var(--wb-ease);
}
.wz-block:hover { border-color: var(--wb-border-strong); box-shadow: var(--wb-shadow-sm); }
.wz-block.is-dragging { opacity: .4; }
.wz-block.is-drop-target { border-color: var(--wb-accent); }

@keyframes wz-block-in {
  from { opacity: 0; transform: translateY(-8px); }
}
.wz-block { animation: wz-block-in .26s var(--wb-ease); }

.wz-block__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--wb-border);
  background: var(--wb-surface-sunk);
}

.wz-block__handle {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--wb-muted);
  cursor: grab;
}
.wz-block__handle:active { cursor: grabbing; }
.wz-block__handle svg { width: 14px; height: 14px; }

.wz-block__name {
  flex: 1;
  min-width: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wb-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wz-block__moves {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity .15s var(--wb-ease);
}
.wz-block:hover .wz-block__moves,
.wz-block:focus-within .wz-block__moves { opacity: 1; }

/* hover never fires on touch, so the controls have to stay put there */
@media (hover: none) {
  .wz-block__moves { opacity: 1; }
  .wz-picker-item__plus { opacity: 1; }
}

.wz-row-btn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--wb-border);
  border-radius: 7px;
  background: var(--wb-surface-solid);
  color: var(--wb-muted);
  cursor: pointer;
  transition: all .15s var(--wb-ease);
}
.wz-row-btn svg { width: 12px; height: 12px; }
.wz-row-btn:hover:not(:disabled) { color: var(--wb-accent); border-color: var(--wb-border-strong); }
.wz-row-btn:disabled { opacity: .3; cursor: not-allowed; }
.wz-row-btn.is-del:hover { color: var(--wb-bad); border-color: var(--wb-bad); }

/* ---- the skeleton drawn inside each block ------------------------------------
   Grey bars standing in for real content. Deliberately abstract: this is a
   structure sketch, and anything more finished would read as a design proof. */
.wf {
  --wf-ink: rgba(20, 20, 26, .30);
  --wf-soft: rgba(20, 20, 26, .13);
  --wf-line: rgba(20, 20, 26, .14);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}
:root[data-theme="dark"] .wf {
  --wf-ink: rgba(255, 255, 255, .34);
  --wf-soft: rgba(255, 255, 255, .14);
  --wf-line: rgba(255, 255, 255, .16);
}

.wf--center { align-items: center; }
.wf--tall { padding: 26px 16px; }
.wf--row { flex-direction: row; align-items: center; gap: 16px; }

.wf-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wf-col--center { align-items: center; }

.wf-t { display: block; height: 12px; border-radius: 4px; background: var(--wf-ink); }
.wf-p { display: block; height: 7px; border-radius: 4px; background: var(--wf-soft); }

.wf-btn {
  display: block;
  width: 88px;
  height: 22px;
  margin-top: 3px;
  border-radius: var(--wb-r-pill);
  background: var(--wb-accent);
  opacity: .55;
}

.wf-img {
  flex: 1;
  min-height: 84px;
  border-radius: 8px;
  background: var(--wf-soft);
}
.wf-img--wide { width: 100%; }

.wf-grid { display: grid; gap: 10px; }
.wf-grid--2 { grid-template-columns: repeat(2, 1fr); }
.wf-grid--3 { grid-template-columns: repeat(3, 1fr); }
.wf-grid--4 { grid-template-columns: repeat(4, 1fr); }

.wf-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px;
  border: 1px solid var(--wf-line);
  border-radius: 8px;
}
.wf-card--hi { border-color: var(--wb-accent); }
.wf-card--center { align-items: center; }

.wf-dot { width: 24px; height: 24px; border-radius: 7px; background: var(--wb-accent); opacity: .4; flex-shrink: 0; }
.wf-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--wf-soft); flex-shrink: 0; }
.wf-line { display: flex; align-items: center; gap: 9px; }
.wf-line .wf-col { gap: 5px; }
.wf-num { display: block; height: 18px; border-radius: 4px; background: var(--wf-ink); }

.wf-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--wf-line);
  border-radius: 7px;
}
.wf-bar .wf-p { flex: 1; }

.wf-field {
  display: block;
  height: 26px;
  border: 1px solid var(--wf-line);
  border-radius: 7px;
  background: var(--wf-soft);
  opacity: .5;
}

/* a section the client typed themselves — no template to draw, so it says so */
.wf--custom {
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 74px;
  padding: 18px;
  border: 1.5px dashed var(--wb-border-strong);
  border-radius: 8px;
  margin: 10px;
  text-align: center;
}
.wf--custom strong { font-size: .86rem; color: var(--wb-text-soft); }
.wf--custom span { font-size: .74rem; color: var(--wb-muted); }

/* ---- plan cards (step 9) --------------------------------------------------- */
.wz-plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.wz-plan-card {
  position: relative;
  padding: 26px 22px;
  text-align: left;
  background: var(--wb-surface-solid);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-r-lg);
  box-shadow: var(--wb-shadow-sm);
}

.wz-plan-card--hi { border-color: var(--wb-brand-1); box-shadow: var(--wb-glow); }
.wz-plan-card--soon { opacity: .68; }

.wz-plan-badge {
  position: absolute;
  top: -12px;
  left: 22px;
  padding: 4px 12px;
  border-radius: var(--wb-r-pill);
  background: var(--wb-brand-grad);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.wz-plan-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
.wz-plan-price { font-size: 2.1rem; font-weight: 800; margin: 0 0 16px; }
.wz-plan-price span { font-size: .85rem; font-weight: 600; color: var(--wb-muted); }

.wz-plan-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wz-plan-list li {
  font-size: .85rem;
  color: var(--wb-text-soft);
  padding-left: 22px;
  position: relative;
}
.wz-plan-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 5px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--wb-ok-bg);
}
.wz-plan-list li::after {
  content: '';
  position: absolute;
  left: 4px; top: 8px;
  width: 6px; height: 3px;
  border-left: 2px solid var(--wb-ok);
  border-bottom: 2px solid var(--wb-ok);
  transform: rotate(-45deg);
}

/* ---- footer nav ------------------------------------------------------------- */
.wz-foot {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 24px;
  background: var(--wb-surface);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid var(--wb-border);
}

.wz-foot #wz-back { visibility: hidden; }
.wz-foot #wz-back.is-visible { visibility: visible; }
.wz-foot #wz-next.wb-hide { display: none; }

.wz-foot__end { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wz-foot__skip { color: var(--wb-muted); }
.wz-foot__skip:hover { color: var(--wb-text); }

/* ---- responsive ------------------------------------------------------------- */
@media (max-width: 960px) {
  /* The two panes stack, so each gets its own height instead of sharing the
     viewport, and the page scrolls normally. Library first: it is what you
     click, and the canvas below it is what you watch fill up. */
  .wz-builder { grid-template-columns: 1fr; height: auto; }
  .wz-lib { height: 320px; }
  .wz-canvas { height: 480px; }
}

@media (max-width: 720px) {
  .wz-style-layout { grid-template-columns: 1fr; }
  .wz-main { padding: 32px 16px; }
  .wz-bar { padding: 0 14px; gap: 12px; }

  /* Back, the skip label and Next do not fit on one line on a phone, and they
     collide rather than wrap because the footer is space-between. Dissolving
     the wrapper makes all three direct flex items, so the skip button can take
     a row of its own underneath the pair that drives the wizard. */
  .wz-foot { padding: 12px 16px; flex-wrap: wrap; row-gap: 10px; }
  .wz-foot__end { display: contents; }
  .wz-foot #wz-back { order: 1; }
  .wz-foot #wz-next { order: 2; }
  .wz-foot__skip { order: 3; width: 100%; font-size: .82rem; }

  /* wireframes get cramped below ~420px of canvas width */
  .wf-grid--3, .wf-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .wf--row { flex-direction: column; align-items: stretch; }
}


/* WB26: the two-column order layout. Applies to a Polish page (the free-website
   campaign page, darmowa-strona/, relies on that) and to any page that opts in
   with data-wz-all on <html> — the order wizard does, in both languages. */
html:is([data-lang="pl"],[data-wz-all]):has(.wz-body){--wb-accent:#ff6a30;--wb-accent-contrast:#141210;--wb-brand-grad:#ff6a30;--wb-brand-1:#ff6a30;--wb-brand-2:#ff9a4d;--wb-bg:#f4f2ed;--wb-surface:#f4f2edf2;--wb-surface-solid:#fffdf8;--wb-surface-2:#f8f7f3;--wb-surface-sunk:#e9e6de;--wb-text:#101012;--wb-text-soft:#444139;--wb-muted:#716c62;--wb-border:#17151120;--wb-border-strong:#17151140;--wb-r:15px;--wb-shadow:0 25px 65px -35px #211c1340}
html:is([data-lang="pl"],[data-wz-all])[data-theme="dark"]:has(.wz-body){--wb-bg:#0b0b0d;--wb-surface:#121214ef;--wb-surface-solid:#19191c;--wb-surface-2:#202023;--wb-surface-sunk:#252529;--wb-text:#f3f1e9;--wb-text-soft:#cfcbc1;--wb-muted:#a5a095;--wb-border:#ffffff20;--wb-border-strong:#ffffff38}
.wz26-rail,.wz26-eyebrow,.wz26-aside,.wz26-help{display:none}
html:is([data-lang="pl"],[data-wz-all]) .wz-body{font-family:'Geist',system-ui,sans-serif;background:var(--wb-bg);overflow-y:auto!important;min-height:100svh}
html:is([data-lang="pl"],[data-wz-all]) .wz-body:before{background:none}
html:is([data-lang="pl"],[data-wz-all]) .wz-bar{height:82px;padding-inline:max(26px,calc((100vw - 1192px)/2));background:var(--wb-bg);border-bottom:1px solid var(--wb-border);gap:28px;backdrop-filter:none}
html:is([data-lang="pl"],[data-wz-all]) .wz-bar__logo img{height:29px;max-width:155px;object-fit:contain}
html:is([data-lang="pl"],[data-wz-all]) .wz-progress{max-width:180px;height:3px;margin-left:auto;margin-right:20px;background:var(--wb-surface-sunk)}
html:is([data-lang="pl"],[data-wz-all]) .wz-body .wb-btn--primary{background:#ff6a30;color:#141210;box-shadow:none;font-weight:600;border-radius:10px}
html:is([data-lang="pl"],[data-wz-all]) .wz-body .wb-btn--primary:hover{background:#ff8552;box-shadow:0 7px 20px #ff6a3020;transform:translateY(-2px)}
html:is([data-lang="pl"],[data-wz-all]) .wz-body .wb-btn--ghost{border-radius:10px}
html:is([data-lang="pl"],[data-wz-all]) .wz26-rail{display:flex;max-width:1192px;width:calc(100% - 80px);margin:0 auto;padding:25px 0;border-bottom:1px solid var(--wb-border);justify-content:space-between;gap:25px;align-items:center}
.wz26-rail>p{font:10px ui-monospace,Consolas,monospace;letter-spacing:.12em;margin:0;color:var(--wb-muted)}.wz26-phases{display:flex;gap:28px}.wz26-phases span{font-size:11px;color:var(--wb-muted);display:flex;gap:8px;align-items:center}.wz26-phases b{font:9px ui-monospace,Consolas,monospace;border:1px solid var(--wb-border-strong);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-weight:400}.wz26-phases .is-current{color:var(--wb-text)}.wz26-phases .is-current b{color:#131210;background:#ff6a30;border-color:#ff6a30}.wz26-phases .is-done b{background:var(--wb-text);color:var(--wb-bg);border-color:var(--wb-text)}
html:is([data-lang="pl"],[data-wz-all]) .wz-main{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:85px;max-width:1192px;width:calc(100% - 80px);padding:55px 0 65px;margin:auto;align-items:center;min-height:calc(100svh - 252px)}
html:is([data-lang="pl"],[data-wz-all]) .wz-step{text-align:left;grid-column:1;grid-row:1;max-width:none;min-width:0}
html:is([data-lang="pl"],[data-wz-all]) .wz-step>h1,html:is([data-lang="pl"],[data-wz-all]) .wz-builder-head h1{font:650 clamp(38px,4.25vw,64px)/1.04 'Bricolage Grotesque',sans-serif;letter-spacing:-.045em;margin:0 0 24px;color:var(--wb-text);text-wrap:balance}
html:is([data-lang="pl"],[data-wz-all]) .wz-sub{margin:0 0 30px;font-size:15px;line-height:1.8;color:var(--wb-muted);max-width:48ch}
html:is([data-lang="pl"],[data-wz-all]) .wz-narrow{max-width:none!important;margin-inline:0}
html:is([data-lang="pl"],[data-wz-all]) .wz-body :is(.wb-input,.wb-select,.wb-textarea){font-family:'Geist',sans-serif;background:var(--wb-surface-solid);border:1px solid var(--wb-border-strong);border-radius:10px;padding:15px 17px;box-shadow:none;color:var(--wb-text);font-size:14px}
html:is([data-lang="pl"],[data-wz-all]) .wz-body .wz-input-lg{text-align:left!important;min-height:63px;font-size:19px}
html:is([data-lang="pl"],[data-wz-all]) .wz-body :is(input,select,textarea):focus{border-color:#d34b18;outline:3px solid #ff6a3020;outline-offset:1px;box-shadow:none}
html:is([data-lang="pl"],[data-wz-all]) .wz-body :is(button,a,input,select,textarea):focus-visible{outline:2px solid #e35925;outline-offset:4px}
html:is([data-lang="pl"],[data-wz-all]) .wz26-eyebrow{display:flex;align-items:center;gap:12px;font:10px ui-monospace,Consolas,monospace;text-transform:uppercase;letter-spacing:.12em;color:var(--wb-muted);margin-bottom:27px}.wz26-eyebrow:before{content:'';width:26px;height:1px;background:#ce5426}
html:is([data-lang="pl"],[data-wz-all]) .wz26-help{display:flex;gap:9px;color:var(--wb-muted);font-size:11px;line-height:1.8;margin:18px 0 0}.wz26-help:before{content:'↳';color:#c74716}
html:is([data-lang="pl"],[data-wz-all]) .wz26-aside{display:block;grid-column:2;grid-row:1;min-width:0}.wz26-studio{position:relative;border-radius:22px;padding:28px;background:#e9e4d9;overflow:hidden;isolation:isolate}.wz26-studio:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#86775912 1px,transparent 1px),linear-gradient(90deg,#86775912 1px,transparent 1px);background-size:32px 32px;z-index:-1}
.wz26-studio-top{display:flex;align-items:center;justify-content:space-between;font:8px ui-monospace,Consolas,monospace;letter-spacing:.08em;color:#756c5c}.wz26-studio-top i{height:6px;width:6px;background:#fa6b32;border-radius:50%;margin-left:auto;margin-right:8px}
.wz26-browser{position:relative;background:#faf8f1;transform:rotate(-3deg);border-radius:10px;margin:30px 7px 28px;box-shadow:0 16px 30px #493c2625;border:1px solid #2a21171f;overflow:hidden}.wz26-browser-top{display:flex;gap:4px;align-items:center;border-bottom:1px solid #26201414;padding:12px 13px}.wz26-browser-top i{width:4px;height:4px;background:#b5ac9b;border-radius:50%}.wz26-domain{font:8px ui-monospace,Consolas,monospace;color:#7c715f;margin-left:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.wz26-browser-canvas{padding:24px 21px;min-height:240px;display:grid;grid-template-columns:1.15fr .85fr;gap:13px;align-items:center}.wz26-business{font:600 30px/1.03 'Bricolage Grotesque',sans-serif;letter-spacing:-.04em;overflow-wrap:anywhere;max-height:155px;overflow:hidden;color:#23231e}.wz26-lines{width:90%;height:17px;background:repeating-linear-gradient(#9a978a 0 1px,transparent 1px 6px);margin-top:15px}.wz26-faux-button{display:block;width:68px;height:21px;border-radius:4px;background:#ff6a30;margin-top:17px}.wz26-sculpture{height:145px;position:relative;isolation:isolate}.wz26-sculpture:before{content:'';position:absolute;width:100%;aspect-ratio:1;top:6px;left:0;border-radius:50% 50% 7% 50%;background:#ff6a30;transform:rotate(-25deg)}.wz26-sculpture:after{content:'';position:absolute;inset:27px 18px 30px;border:1px solid #ffdbc3;border-radius:50% 50% 0 50%;transform:rotate(-25deg)}
.wz26-studio-note{display:flex;align-items:center;gap:10px;font:9px ui-monospace,Consolas,monospace;color:#6d6352}.wz26-studio-note:before{content:'✳';color:#b44219;font-size:20px}.wz26-aside-copy{display:grid;grid-template-columns:35px 1fr;gap:12px;margin:25px 10px 0}.wz26-aside-copy>span{font:28px 'Instrument Serif',serif;color:#bd4319}.wz26-aside-copy h2{font:500 25px/1.1 'Bricolage Grotesque',sans-serif;letter-spacing:-.025em;margin:0 0 9px;color:var(--wb-text)}.wz26-aside-copy h2 em{font-family:'Instrument Serif',serif;font-weight:400;color:#b93a09}.wz26-aside-copy p{font-size:12px;line-height:1.75;color:var(--wb-muted);margin:0}
html:is([data-lang="pl"],[data-wz-all])[data-theme="dark"] .wz26-studio{background:#2c2923}.wz26-foot-note{font:10px ui-monospace,Consolas,monospace;color:var(--wb-muted)}
html:is([data-lang="pl"],[data-wz-all]) .wz-foot{padding:17px max(26px,calc((100vw - 1192px)/2));background:var(--wb-bg);z-index:35;gap:20px;backdrop-filter:none}
html:is([data-lang="pl"],[data-wz-all]) .wz-foot #wz-next{min-width:160px;padding:15px 25px}
html:is([data-lang="pl"],[data-wz-all]) .wz-body :is(.wb-tabs,.wb-seg){background:var(--wb-surface-sunk);border-radius:9px;box-shadow:none}.wz26-aside-copy a{color:inherit}
html:is([data-lang="pl"],[data-wz-all]) .wz-body :is(.wb-tabs__thumb,.wb-seg__thumb){border-radius:7px;background:var(--wb-surface-solid);box-shadow:0 2px 5px #0001}
html:is([data-lang="pl"],[data-wz-all]) .wz-body :is(.wb-seg,.wb-tabs) button[aria-selected="true"]{color:var(--wb-text)}
html:is([data-lang="pl"],[data-wz-all])[data-theme="dark"] :is(.wz26-studio-top,.wz26-studio-note){color:#b6aa96}
html:is([data-lang="pl"],[data-wz-all]) .wz-body[data-wz26-wide="true"] .wz-main{grid-template-columns:1fr;max-width:1192px;gap:0;align-items:start}
html:is([data-lang="pl"],[data-wz-all]) .wz-body[data-wz26-wide="true"] .wz26-aside{display:none}
html:is([data-lang="pl"],[data-wz-all]) .wz-style-split{height:auto;min-height:570px;gap:28px}
html:is([data-lang="pl"],[data-wz-all]) .wz-style-sidebar{width:350px;background:var(--wb-surface-solid);border:1px solid var(--wb-border);box-shadow:none;height:auto;padding:28px}
html:is([data-lang="pl"],[data-wz-all]) .wz-style-demo-wrapper{height:auto;min-height:570px;background:var(--wb-surface-sunk);border:1px solid var(--wb-border);padding:22px}
html:is([data-lang="pl"],[data-wz-all]) .wz-style-sidebar h1{font-family:'Bricolage Grotesque',sans-serif}
html:is([data-lang="pl"],[data-wz-all]) .wz-style-sidebar .wz-sub{font-size:13px!important}
html:is([data-lang="pl"],[data-wz-all]) .wz-style-demo-wrapper>.wz-style-preview{padding:30px;min-height:320px}
html:is([data-lang="pl"],[data-wz-all]) .wz-swatch,html:is([data-lang="pl"],[data-wz-all]) .wz-font-card{border-radius:9px}
html:is([data-lang="pl"],[data-wz-all]) .wz-body :is(.wz-swatch.is-on,.wz-font-card.is-on){border-color:#ff6a30;box-shadow:0 0 0 2px #ff6a3020}
html:is([data-lang="pl"],[data-wz-all]) .wz-builder-head{text-align:left}
html:is([data-lang="pl"],[data-wz-all]) .wz-builder-head h1{font-size:48px}.wz26-label{display:block;font-size:11px;color:var(--wb-muted);margin-bottom:10px}
html:is([data-lang="pl"],[data-wz-all]) .wz-plan-grid{gap:20px;margin-top:36px!important}.wz26-plan-number{font:10px ui-monospace,Consolas,monospace;color:var(--wb-muted);margin-bottom:30px}
html:is([data-lang="pl"],[data-wz-all]) .wz-plan-card{padding:29px;border-radius:17px;box-shadow:none;background:var(--wb-surface-solid);border:1px solid var(--wb-border-strong);text-align:left}
html:is([data-lang="pl"],[data-wz-all]) .wz-plan-card--hi{border-color:#ff6a30;box-shadow:0 10px 40px #ff6a300b}
html:is([data-lang="pl"],[data-wz-all]) .wz-plan-badge{background:#ff6a30;color:#141210;border-radius:5px;font-weight:600}
html:is([data-lang="pl"],[data-wz-all]) .wz-plan-card h3{font:600 29px 'Bricolage Grotesque',sans-serif;letter-spacing:-.04em}
html:is([data-lang="pl"],[data-wz-all]) .wz-plan-price{font:600 45px 'Bricolage Grotesque',sans-serif;letter-spacing:-.04em;padding-block:12px}
html:is([data-lang="pl"],[data-wz-all]) .wz-plan-list{min-height:113px;font-family:'Geist',sans-serif}
html:is([data-lang="pl"],[data-wz-all]) .wz-plan-list li{font-size:12px;line-height:1.7}
html:is([data-lang="pl"],[data-wz-all])[data-theme="dark"] .wz26-aside-copy h2 em{color:#ff8552}
html:not([data-lang="pl"]):not([data-wz-all]) :is(.wz26-foot-note,.wz26-label,.wz26-plan-number){display:none}
@media(max-width:1050px){html:is([data-lang="pl"],[data-wz-all]) .wz-main{gap:45px;width:calc(100% - 60px)}html:is([data-lang="pl"],[data-wz-all]) .wz26-rail{width:calc(100% - 60px)}.wz26-phases{gap:17px}.wz26-browser-canvas{padding:22px 15px}.wz26-business{font-size:25px}.wz26-studio{padding:23px}.wz26-browser{margin-inline:0}.wz26-sculpture{height:120px}.wz26-aside-copy h2{font-size:23px}html:is([data-lang="pl"],[data-wz-all]) .wz-plan-card{padding:23px}html:is([data-lang="pl"],[data-wz-all]) .wz-plan-card h3{font-size:24px}}
@media(max-width:800px){html:is([data-lang="pl"],[data-wz-all]) .wz-bar{height:72px;padding-inline:22px;gap:16px}html:is([data-lang="pl"],[data-wz-all]) .wz-bar__logo img{height:24px}html:is([data-lang="pl"],[data-wz-all]) .wz-progress{margin-right:0;max-width:100px}.wz26-phases{gap:12px}.wz26-phases span{font-size:10px}.wz26-phases b{width:19px;height:19px}.wz26-rail>p{font-size:8px;letter-spacing:.06em}html:is([data-lang="pl"],[data-wz-all]) .wz-main{grid-template-columns:1fr;gap:32px;min-height:0;padding:40px 0;width:calc(100% - 44px);align-content:start}html:is([data-lang="pl"],[data-wz-all]) .wz26-rail{width:calc(100% - 44px);padding-block:19px}html:is([data-lang="pl"],[data-wz-all]) .wz26-aside{grid-column:1;grid-row:2}.wz26-studio{display:none}.wz26-aside-copy{border-top:1px solid var(--wb-border);padding-top:23px;margin:0}.wz26-aside-copy h2{font-size:23px}.wz26-aside-copy p{font-size:12px}html:is([data-lang="pl"],[data-wz-all]) .wz-step>h1{font-size:45px;max-width:650px}.wz26-foot-note{display:none}html:is([data-lang="pl"],[data-wz-all]) .wz-foot{padding:14px 22px}html:is([data-lang="pl"],[data-wz-all]) .wz-foot #wz-next{min-width:145px}html:is([data-lang="pl"],[data-wz-all]) .wz-style-split{flex-direction:column}html:is([data-lang="pl"],[data-wz-all]) .wz-style-sidebar{width:100%}html:is([data-lang="pl"],[data-wz-all]) .wz-style-demo-wrapper{min-height:450px}html:is([data-lang="pl"],[data-wz-all]) .wz-builder-head h1{font-size:36px}html:is([data-lang="pl"],[data-wz-all]) .wz-plan-grid{grid-template-columns:1fr}.wz26-plan-number{margin-bottom:16px}html:is([data-lang="pl"],[data-wz-all]) .wz-plan-list{min-height:0}html:is([data-lang="pl"],[data-wz-all]) .wz-plan-card{padding:27px}html:is([data-lang="pl"],[data-wz-all]) .wz-plan-card h3{font-size:30px}}
@media(max-width:480px){html:is([data-lang="pl"],[data-wz-all]) .wz-bar{padding-inline:16px;gap:10px}html:is([data-lang="pl"],[data-wz-all]) .wz-bar__logo img{height:21px;max-width:105px}html:is([data-lang="pl"],[data-wz-all]) .wz-progress{display:none}html:is([data-lang="pl"],[data-wz-all]) .wz-bar>.wb-bar__group{margin-left:auto;gap:6px}html:is([data-lang="pl"],[data-wz-all]) .wz26-rail{display:block}.wz26-phases{margin-top:16px;justify-content:space-between;gap:10px}.wz26-phases span{font-size:9px;gap:6px}html:is([data-lang="pl"],[data-wz-all]) .wz-step>h1{font-size:40px}html:is([data-lang="pl"],[data-wz-all]) .wz-sub{font-size:14px;line-height:1.7}.wz26-eyebrow{font-size:9px!important;margin-bottom:22px!important}html:is([data-lang="pl"],[data-wz-all]) .wz-main{padding:32px 0}.wz26-aside-copy{grid-template-columns:26px 1fr;gap:10px}html:is([data-lang="pl"],[data-wz-all]) .wz-body .wz-input-lg{font-size:17px;min-height:59px}html:is([data-lang="pl"],[data-wz-all]) .wz-style-sidebar{padding:22px}html:is([data-lang="pl"],[data-wz-all]) .wz-style-demo-wrapper{padding:14px}.wz26-phases b{flex-shrink:0}html:is([data-lang="pl"],[data-wz-all]) .wz-style-preview h1{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){html:is([data-lang="pl"],[data-wz-all]) .wz-body *,html:is([data-lang="pl"],[data-wz-all]) .wz-body *:before,html:is([data-lang="pl"],[data-wz-all]) .wz-body *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Order refinements: let the design work and plan choices occupy the screen. */
html:is([data-lang="pl"],[data-wz-all]) #wz-step-6 .wz-builder-head h1,
html:is([data-lang="pl"],[data-wz-all]) #wz-step-9>h1{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html:is([data-lang="pl"],[data-wz-all]) #wz-step-6 .wz26-eyebrow,
html:is([data-lang="pl"],[data-wz-all]) #wz-step-9 .wz26-eyebrow{margin-bottom:14px}
html:is([data-lang="pl"],[data-wz-all]) #wz-step-6 .wz-builder-head{margin-bottom:18px}
html:is([data-lang="pl"],[data-wz-all]) #wz-step-6 .wz-builder-head .wz-sub,
html:is([data-lang="pl"],[data-wz-all]) #wz-step-9>.wz-sub{max-width:none;font:500 clamp(17px,1.45vw,20px)/1.5 'Geist',sans-serif;color:var(--wb-text);letter-spacing:-.018em}
html:is([data-lang="pl"],[data-wz-all]) #wz-step-6 .wz-builder-head .wz-sub{margin-bottom:0}
html:is([data-lang="pl"],[data-wz-all]) #wz-step-9>.wz-sub{margin-bottom:22px}
html:is([data-lang="pl"],[data-wz-all]) #wz-step-9 .wz-plan-grid{margin-top:23px!important}
@media(min-width:961px){
  html:is([data-lang="pl"],[data-wz-all]) body:has(#wz-step-6.is-active) .wz-main{padding-top:15px;padding-bottom:18px;min-height:0}
  html:is([data-lang="pl"],[data-wz-all]) #wz-step-6.is-active .wz-builder{min-height:300px}
}
@media(max-width:960px){html:is([data-lang="pl"],[data-wz-all]) #wz-step-6 .wz-builder-head .wz-sub{font-size:16px}}

/* Domain lookup: a small orange radar mark, clear status, and stable results. */
.wz26-domain-searching{display:flex;align-items:center;gap:18px;min-height:94px;padding:18px 20px!important;text-align:left!important;background:var(--wb-surface-solid);border:1px solid var(--wb-border-strong);border-radius:13px;color:var(--wb-text)!important;font:500 14px/1.5 'Geist',sans-serif!important}
.wz26-domain-mark{position:relative;display:block;flex:none;width:51px;height:51px;border:1px solid #ff6a304d;border-radius:50%;background:radial-gradient(circle at center,#ff6a3030 0 5px,transparent 6px)}
.wz26-domain-mark:before,.wz26-domain-mark:after{content:'';position:absolute;inset:8px;border:1px solid #ff6a3070;border-radius:50%}
.wz26-domain-mark:after{inset:16px;border-color:#ff6a30}
.wz26-domain-mark i{position:absolute;width:7px;height:7px;background:#ff6a30;border-radius:50%;left:21px;top:-4px;transform-origin:3.5px 29px;animation:wz26-radar 1.35s linear infinite}
.wz26-domain-mark i:nth-child(2){width:5px;height:5px;left:22px;top:0;animation-delay:-.45s;opacity:.55}
.wz26-domain-mark i:nth-child(3){width:4px;height:4px;left:23px;top:2px;animation-delay:-.9s;opacity:.3}
.wz26-domain-searching>span:last-child{overflow-wrap:anywhere}
#wz-domain-go:disabled{opacity:.7;cursor:wait;transform:none}
.wz26-domain-error{padding:16px 18px;color:var(--wb-muted);border:1px solid var(--wb-border);border-radius:10px}
@keyframes wz26-radar{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.wz26-domain-mark i{animation:none}}

/* ---- hosting / migration branch (step h) --------------------------------- */
.wz-mail-note { margin: 4px 0 8px; }
.wz-mail-note--warn p {
  padding: 12px 14px;
  border-radius: var(--wb-r-sm);
  border: 1px solid var(--wb-warn);
  color: var(--wb-text);
}

/* Przeniesienie: connect the old site before paying (assets/order/migrate-early.js). */
.wz-mig { margin: 18px 0 20px; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--wb-border); background: var(--wb-surface, #fff); }
.wz-mig h3 { margin: 6px 0 6px; font-size: 1.15rem; }
.wz-mig p { margin: 0 0 14px; }
.wz-mig__tag { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: color-mix(in srgb, var(--wb-brand-1) 16%, transparent); color: var(--wb-text); }
.wz-mig__skip { background: none; border: 0; padding: 0; font: inherit; font-size: .86rem; color: var(--wb-text-soft); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wz-mig__skip:hover { color: var(--wb-text); }
.wz-mig__steps { margin: 12px 0 14px; padding-left: 22px; display: grid; gap: 12px; }
.wz-mig__steps li { display: grid; gap: 5px; justify-items: start; }
.wz-mig__code { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wz-mig__code code { padding: 8px 12px; border-radius: 10px; background: var(--wb-surface-sunk); font-size: .95rem; font-weight: 700; letter-spacing: .03em; user-select: all; }
.wz-mig__wait { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.wz-mig__spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--wb-brand-1); border-top-color: transparent; animation: wz-mig-spin .8s linear infinite; flex-shrink: 0; }
@keyframes wz-mig-spin { to { transform: rotate(360deg); } }
.wz-mig__ok { font-weight: 700; color: var(--wb-ok); }
.wz-mig__bar { height: 8px; border-radius: 99px; background: var(--wb-surface-sunk); overflow: hidden; margin: 0 0 12px; }
.wz-mig__bar i { display: block; height: 100%; width: 3%; background: var(--wb-brand-1); border-radius: inherit; transition: width .6s ease; }
.wz-mig [hidden] { display: none !important; }
.wz-h-pay[hidden] { display: none !important; }

/* ==========================================================================
   Order wizard — clarity pass
   --------------------------------------------------------------------------
   What a first-time client needs from each screen: what am I choosing, what
   does it cost, what is stopping me, and what happens next. Everything below
   serves one of those. Selectors are scoped to the order page (data-wz-all)
   wherever a rule would otherwise reach the free-website campaign page, which
   shares this stylesheet.
   ========================================================================== */

/* ---- steps slide in from the side you are heading to ---------------------- */
@keyframes wz-fwd  { from { opacity: 0; transform: translateX(22px); } }
@keyframes wz-back { from { opacity: 0; transform: translateX(-22px); } }
html[data-wz-all] .wz-step { animation: wz-fwd .42s var(--wb-ease); }
html[data-wz-all] .wz-main[data-dir="back"] .wz-step { animation-name: wz-back; }

/* ---- step 0: three ways in ------------------------------------------------- */
.wz-kind-list { display: grid; gap: 12px; max-width: 640px; }

.wz-kind {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px 16px;
  width: 100%;
  padding: 18px 20px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--wb-surface-solid);
  border: 1px solid var(--wb-border-strong);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color .22s var(--wb-ease), transform .22s var(--wb-ease), box-shadow .22s var(--wb-ease);
}

.wz-kind:hover,
.wz-kind:focus-visible {
  border-color: var(--wb-brand-1);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -22px rgba(33, 28, 19, .45);
}
.wz-kind:active { transform: scale(.985); transition-duration: .06s; }

.wz-kind__ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--wb-surface-sunk);
  color: var(--wb-text);
  transition: background-color .22s var(--wb-ease), color .22s var(--wb-ease);
}
.wz-kind:hover .wz-kind__ico,
.wz-kind:focus-visible .wz-kind__ico { background: var(--wb-brand-1); color: #141210; }

.wz-kind__txt { min-width: 0; }
.wz-kind__txt strong {
  display: block;
  font: 600 19px/1.2 "Bricolage Grotesque", "Geist", sans-serif;
  letter-spacing: -.025em;
  color: var(--wb-text);
}
.wz-kind__txt > span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--wb-muted); }

.wz-kind__price {
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--wb-surface-sunk);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--wb-text);
  white-space: nowrap;
}

.wz-kind__go { display: grid; color: var(--wb-muted); transition: transform .22s var(--wb-ease), color .22s var(--wb-ease); }
.wz-kind:hover .wz-kind__go,
.wz-kind:focus-visible .wz-kind__go { transform: translateX(4px); color: var(--wb-accent); }

@media (max-width: 560px) {
  .wz-kind { grid-template-columns: auto minmax(0, 1fr) auto; padding: 16px; }
  .wz-kind__ico { width: 40px; height: 40px; align-self: start; }
  .wz-kind__price { grid-column: 2; grid-row: 2; justify-self: start; }
  .wz-kind__go { grid-column: 3; grid-row: 1 / span 2; }
}

/* ---- labels, groups and the "?" beside them -------------------------------- */
.wz-label-row { display: flex; align-items: center; }
.wz-sub .wb-help, .wz-mig h3 .wb-help { margin-left: 8px; vertical-align: 2px; }

.wz-group {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--wb-text);
}

html[data-wz-all] .wz-body .wb-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--wb-text-soft);
}

.wz-box {
  padding: 18px 20px;
  background: var(--wb-surface-solid);
  border: 1px solid var(--wb-border-strong);
  border-radius: 13px;
}

/* ---- what is stopping "Dalej" ---------------------------------------------- */
.wz-error {
  flex: 1;
  min-width: 0;
  margin: 0;
  text-align: right;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--wb-bad);
  animation: wz-in .25s var(--wb-ease);
}
.wz-error[hidden] { display: none; }
.wz-foot:has(.wz-error:not([hidden])) .wz26-foot-note { display: none; }

.wz-inline-error {
  margin: 14px 0 0;
  padding: 11px 14px;
  border: 1px solid var(--wb-bad);
  border-radius: 10px;
  background: var(--wb-bad-bg);
  color: var(--wb-text);
  font-size: 13.5px;
}

html[data-wz-all] .wz-body .is-invalid,
html[data-wz-all] .wz-body .is-invalid:focus {
  border-color: var(--wb-bad);
  outline-color: color-mix(in srgb, var(--wb-bad) 22%, transparent);
  animation: wz-shake .34s var(--wb-ease);
}
@keyframes wz-shake {
  25% { transform: translateX(-5px); }
  50% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

@media (max-width: 720px) {
  .wz-error { order: 0; flex: 1 1 100%; text-align: left; }
}

/* ---- step 2: the domain that was picked ------------------------------------ */
.wz-picked {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 0 0;
  padding: 11px 14px;
  border: 1px solid var(--wb-ok);
  border-radius: 10px;
  background: var(--wb-ok-bg);
  font-size: 13.5px;
  color: var(--wb-text);
  animation: wz-in .3s var(--wb-ease);
}
.wz-picked svg { flex-shrink: 0; color: var(--wb-ok); }
.wz-picked strong { overflow-wrap: anywhere; }

.wz-domain-row { background: var(--wb-surface-solid); animation: wz-in .3s var(--wb-ease) backwards; }
.wz-domain-row:nth-child(2) { animation-delay: .04s; }
.wz-domain-row:nth-child(3) { animation-delay: .08s; }
.wz-domain-row:nth-child(n+4) { animation-delay: .12s; }

/* ---- step 5: colours and fonts ---------------------------------------------
   Was an inline <style> block with literal whites, which stayed white in dark
   mode. Same layout, on the tokens of the theme. */
.wz-style-split {
  display: flex;
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
  min-height: 570px;
  text-align: left;
}
.wz-style-sidebar {
  width: 350px;
  flex-shrink: 0;
  padding: 28px;
  background: var(--wb-surface-solid);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-r, 12px);
  overflow-y: auto;
}
.wz-style-demo-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 22px;
  background: var(--wb-surface-sunk);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-r, 12px);
}
.wz-style-demo-wrapper > .wz-style-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  margin-bottom: 0;
  padding: 30px;
  text-align: center;
  background: var(--wb-surface-solid);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
}
.wz-style-faux {
  padding: 12px 30px;
  border: 2px solid currentColor;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 600;
}
.wz-style-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; flex-shrink: 0; }
.wz-style-cards > div {
  padding: 24px;
  background: var(--wb-surface-solid);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-r, 12px);
}
.wz-style-cards i { display: block; width: 40px; height: 40px; margin-bottom: 16px; border-radius: 10px; background: var(--wb-muted); opacity: .16; }
.wz-style-cards b { display: block; height: 14px; margin-bottom: 10px; border-radius: 4px; background: var(--wb-muted); opacity: .16; }
.wz-style-cards b:last-child { margin-bottom: 0; }

.wz-swatch, .wz-font-card { transition: border-color .18s var(--wb-ease), box-shadow .18s var(--wb-ease), transform .18s var(--wb-ease); }
.wz-swatch:hover, .wz-font-card:hover { transform: translateY(-1px); }
.wz-swatch:active, .wz-font-card:active { transform: scale(.97); }

@media (max-width: 900px) {
  .wz-style-split { flex-direction: column; min-height: 0; }
  .wz-style-sidebar { width: 100%; }
  .wz-style-demo-wrapper { min-height: 420px; }
}

/* ---- step 9: what you are ordering, and how you pay ------------------------ */
.wz-recap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 22px;
  background: var(--wb-surface-solid);
  border: 1px solid var(--wb-border-strong);
  border-radius: 13px;
  text-align: left;
}
.wz-recap__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: center;
  padding: 14px 18px;
  min-width: 0;
}
.wz-recap__item + .wz-recap__item { border-left: 1px solid var(--wb-border); }
.wz-recap__k { grid-column: 1 / -1; font-size: 11.5px; font-weight: 500; color: var(--wb-muted); }
.wz-recap__item strong { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wb-text); }
.wz-recap__edit {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--wb-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.wz-recap__edit:hover { color: var(--wb-text); }

.wz-billing-row { display: flex; align-items: center; gap: 6px; }
.wz-billing-row .wb-tabs { width: min(340px, 100%); margin-bottom: 0; }

html[data-wz-all] .wz-plan-card { transition: border-color .22s var(--wb-ease), transform .22s var(--wb-ease), box-shadow .22s var(--wb-ease); }
html[data-wz-all] .wz-plan-card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -28px rgba(33, 28, 19, .5); }

@media (max-width: 800px) {
  .wz-recap { grid-template-columns: 1fr; }
  .wz-recap__item + .wz-recap__item { border-left: 0; border-top: 1px solid var(--wb-border); }
}

/* ---- "we kept your answers" ------------------------------------------------- */
.wz-notice {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 11px 12px 11px 18px;
  transform: translateX(-50%);
  background: var(--wb-text);
  color: var(--wb-bg);
  border-radius: 99px;
  box-shadow: var(--wb-shadow-lg);
  font-size: 13.5px;
  animation: wb-rise .35s var(--wb-ease);
  transition: opacity .3s var(--wb-ease), transform .3s var(--wb-ease);
}
.wz-notice.is-leaving { opacity: 0; transform: translate(-50%, 10px); }
.wz-notice button {
  padding: 6px 13px;
  border: 0;
  border-radius: 99px;
  background: color-mix(in srgb, currentColor 16%, transparent);
  color: inherit;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.wz-notice button:hover { background: color-mix(in srgb, currentColor 28%, transparent); }

/* ---- small things ------------------------------------------------------------ */
html[data-wz-all] .wz-progress span { transition: width .6s var(--wb-ease); }
.wz26-phases span { transition: color .3s var(--wb-ease); }
.wz26-phases b { transition: background-color .3s var(--wb-ease), color .3s var(--wb-ease), border-color .3s var(--wb-ease); }

/* The plans line up with the recap above them instead of sitting centred under
   it, and the optional referral code stops stretching across the whole page. */
html[data-wz-all] #wz-step-9 .wz-plan-grid { max-width: none; }
html[data-wz-all] .wz-referral { max-width: 520px !important; }

/* A pause, not an error: the second press of "Dalej" goes through. */
.wz-error.is-soft { color: var(--wb-text-soft); }

/* The chooser has no Back and no Next, and on a phone the footer note is hidden
   too — which left an empty bar pinned over the third option. */
@media (max-width: 800px) {
  body[data-wz-step="0"] .wz-foot { display: none; }
}

/* ---- step 7: business e-mail calculator (wizard.js → drawMail) ---------------
   Same prices as Poczta firmowa in the panel; the wizard's quiet look: cream
   surfaces, hairline borders, the orange only where something is chosen. */
.wz-mail-box #wz-email-area { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--wb-border); }
.wz-mail-count { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.wz-mail-count .wb-label { margin: 0; }
.wz-mail-pills { display: flex; gap: 6px; }
.wz-mail-pill { min-width: 40px; height: 34px; padding: 0 10px; border: 1px solid var(--wb-border-strong); border-radius: 99px; background: var(--wb-surface-solid); font: inherit; font-size: 13px; font-weight: 600; color: var(--wb-text-soft); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.wz-mail-pill:hover { border-color: var(--wb-text-soft); color: var(--wb-text); }
.wz-mail-pill.is-on { background: var(--wb-accent); border-color: var(--wb-accent); color: var(--wb-accent-contrast); }

.wz-mail-pack { display: grid; gap: 4px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--wb-accent); border-radius: 11px; background: color-mix(in srgb, var(--wb-accent) 7%, transparent); }
.wz-mail-pack strong { font-size: 14px; }
.wz-mail-pack > span { font-size: 12.5px; color: var(--wb-text-soft); }
.wz-mail-more { display: inline-flex !important; align-items: center; gap: 10px; margin-top: 6px; }
.wz-mail-more b { font-size: 13px; }

.wz-mail-rows { display: grid; gap: 8px; }
.wz-mail-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px 12px; }
.wz-mail-addr { display: flex; align-items: center; min-width: 0; border: 1px solid var(--wb-border-strong); border-radius: 10px; background: var(--wb-surface-solid); overflow: hidden; }
.wz-mail-addr:focus-within { border-color: var(--wb-accent); }
.wz-mail-addr .wb-input { flex: 1 1 0; min-width: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: right; padding-right: 2px; }
.wz-mail-addr .wz-email-suffix { padding: 0 12px 0 0; font-size: 13.5px; color: var(--wb-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.wz-mail-gb, .wz-mail-more { display: flex; align-items: center; gap: 6px; }
.wz-mail-gb b { min-width: 48px; text-align: center; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.wz-mail-gb button, .wz-mail-more button { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--wb-border-strong); border-radius: 50%; background: var(--wb-surface-solid); font: inherit; font-size: 16px; line-height: 1; color: var(--wb-text); cursor: pointer; }
.wz-mail-gb button:hover:not(:disabled), .wz-mail-more button:hover { border-color: var(--wb-accent); }
.wz-mail-gb button:disabled { opacity: .35; cursor: default; }
.wz-mail-cost { min-width: 86px; text-align: right; font-size: 12px; color: var(--wb-muted); white-space: nowrap; }

.wz-mail-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 11px; background: var(--wb-surface-sunk); font-size: 13.5px; }
.wz-mail-sum b { font-size: 15px; white-space: nowrap; }
.wz-mail-nudge { display: grid; gap: 4px; justify-items: start; margin-top: 10px; padding: 12px 14px; border: 1px dashed var(--wb-accent); border-radius: 11px; }
.wz-mail-nudge strong { font-size: 13.5px; line-height: 1.4; }
.wz-mail-nudge span { font-size: 12.5px; color: var(--wb-text-soft); }
.wz-mail-nudge button { margin-top: 6px; padding: 6px 14px; border: 1px solid var(--wb-text); border-radius: 99px; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--wb-text); cursor: pointer; }
.wz-mail-nudge button:hover { background: var(--wb-text); color: var(--wb-bg); }
.wz-mail-note { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--wb-muted); }

@media (max-width: 560px) {
  .wz-mail-row { grid-template-columns: 1fr auto; }
  .wz-mail-addr { grid-column: 1 / -1; }
  .wz-mail-cost { text-align: left; min-width: 0; }
}
/* The wizard styles every .wb-input strongly; inside the address pill the input has no frame of its own. */
.wz-mail-box .wz-mail-addr .wb-input { border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; height: 40px; }

/* A label with its guide button, then the field: room between them. */
.wz-label-row { margin-bottom: 10px; flex-wrap: wrap; gap: 6px 0; }

/* The mailbox address is one box (prefix + @domain): the input's own focus
   ring was clipped to a lone orange line at its right edge, beside the "@".
   The whole box already lights up on focus. */
.wz-mail-addr .wb-input:focus,
.wz-mail-addr .wb-input:focus-visible { outline: none; }

.wz-mail-now-lbl { display: block; margin: 18px 0 8px; }
.wz-mail-now-note { margin: 6px 0 0; }