/* Build your app — the builder.
   Loaded only on /build-your-app/. The tokens are the site's own, so the tool
   does not read as a different product bolted on. */

/* ── `hidden` has to actually hide ─────────────────────────────────────────
   The browser's own rule is `[hidden] { display: none }` at the very lowest
   specificity, so ANY `display:` declared for a class beats it. Three elements
   here are shown and hidden from JavaScript and all three declared a display —
   so setting `hidden` changed the property, satisfied every check that read
   the property, and left the thing on screen.

   The client found the first one: "Your home screen / Add a section and it
   lands here" stayed visible underneath the sections he had just added. The
   other two were in the logo box, where the "Add your logo" prompt would have
   sat behind the logo somebody had just uploaded.

   My checks read `element.hidden` — correctly true — instead of asking whether
   the element was VISIBLE. Reading the attribute rather than the rendered
   result is the precise mistake this whole test suite exists to prevent, and it
   took a person looking at the screen to catch it. Guarded here for every
   element rather than one at a time, so the next one added is covered before
   anybody notices. */

.bld [hidden],
.gate [hidden] { display: none !important; }

.bld {
  --bld-brand: #1f2a44;
  --bld-accent: #c98b3a;
  --bld-panel: 420px;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 98px);
  background: var(--cream, #f3ece3);
}

/* ── the step rail ─────────────────────────────────────────────────────── */

.bld-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: var(--paper, #fff);
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  position: sticky;
  top: 0;
  z-index: 20;
}

.bld-steps { display: flex; gap: 4px; flex-wrap: wrap; }

.bld-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3, #767676);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.bld-step:hover { background: rgba(0, 0, 0, .04); color: var(--text, #141414); }
.bld-step.is-on { background: var(--black, #000); color: #fff; }

.bld-n {
  width: 21px; height: 21px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .07);
  font-size: 11px; font-weight: 600;
  flex: none;
}
.bld-step.is-on .bld-n { background: rgba(255, 255, 255, .22); }

.bld-save {
  font-size: 12px;
  color: var(--text-3, #767676);
  min-height: 17px;
  white-space: nowrap;
}
.bld-save.is-warn { color: #b4451f; }

/* ── the two columns ───────────────────────────────────────────────────── */

.bld-body {
  display: grid;
  grid-template-columns: var(--bld-panel) 1fr;
  flex: 1;
  min-height: 0;
}

.bld-panel {
  padding: 26px 24px 60px;
  overflow-y: auto;
  max-height: calc(100vh - 98px - 55px);
  border-right: 1px solid rgba(0, 0, 0, .07);
  background: var(--paper, #fff);
}

.bld-pane { display: none; }
.bld-pane.is-on { display: block; animation: bld-in .22s ease both; }

@keyframes bld-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bld-pane.is-on { animation: none; }
}

.bld-h { font-size: 21px; margin: 0 0 6px; letter-spacing: -.01em; }
.bld-lede { font-size: 13.5px; color: var(--text-2, #4a4a4a); margin: 0 0 22px; line-height: 1.55; }
.bld-note { font-size: 11.5px; color: var(--text-3, #767676); margin: 5px 0 18px; }

.bld-lbl {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3, #767676);
  margin: 0 0 7px;
}

.bld-in {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  background: #fff;
  color: var(--text, #141414);
  margin-bottom: 18px;
}
.bld-in:focus { outline: 2px solid var(--brand, #6ebd44); outline-offset: 1px; border-color: transparent; }
.bld-ta { resize: vertical; min-height: 72px; margin-bottom: 14px; }

/* ── logo ──────────────────────────────────────────────────────────────── */

.bld-logo {
  position: relative;
  border: 1.5px dashed rgba(0, 0, 0, .18);
  border-radius: 12px;
  min-height: 108px;
  display: grid;
  place-items: center;
  cursor: pointer;
  margin-bottom: 20px;
  background: #fafafa;
  transition: border-color .15s, background .15s;
  padding: 14px;
}
.bld-logo:hover, .bld-logo.is-over { border-color: var(--brand, #6ebd44); background: #f6fbf3; }

.bld-logo-empty { display: grid; justify-items: center; gap: 3px; color: var(--text-3, #767676); }
.bld-logo-empty strong { font-size: 13px; color: var(--text, #141414); font-weight: 600; }
.bld-logo-empty span { font-size: 11px; }

.bld-logo-has { max-height: 74px; max-width: 88%; width: auto; height: auto; display: block; }

.bld-logo-x {
  position: absolute; top: 7px; right: 7px;
  width: 24px; height: 24px;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 15px; line-height: 1;
  cursor: pointer;
}
.bld-logo-x:hover { background: #c0392b; }

/* ── colour ────────────────────────────────────────────────────────────── */

.bld-colour { display: flex; gap: 9px; align-items: center; }

.bld-colour input[type=color] {
  width: 46px; height: 42px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 10px;
  background: none;
  cursor: pointer;
  flex: none;
}
.bld-colour input[type=color]::-webkit-color-swatch-wrapper { padding: 3px; }
.bld-colour input[type=color]::-webkit-color-swatch { border: 0; border-radius: 7px; }
.bld-hex { margin-bottom: 0; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }

/* ── type ──────────────────────────────────────────────────────────────── */

.bld-radios { display: flex; gap: 7px; margin-bottom: 24px; }

.bld-radio {
  flex: 1;
  padding: 11px 6px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  transition: border-color .15s, background .15s;
}
.bld-radio:hover { border-color: rgba(0, 0, 0, .32); }
.bld-radio.is-on { border-color: var(--black, #000); background: var(--black, #000); color: #fff; }

/* ── the library ───────────────────────────────────────────────────────── */

.bld-lib { margin-bottom: 22px; }

.bld-grp { border-bottom: 1px solid rgba(0, 0, 0, .07); }
.bld-grp summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 2px; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 600;
}
.bld-grp summary::-webkit-details-marker { display: none; }
.bld-grp summary::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  margin-left: auto; margin-right: 4px;
  opacity: .4;
  transition: transform .18s;
}
.bld-grp[open] summary::after { transform: rotate(-135deg); }
.bld-grp-n {
  background: rgba(0, 0, 0, .06);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3, #767676);
  margin-left: auto;
}
.bld-grp-h { font-size: 11.5px; color: var(--text-3, #767676); margin: 0 0 10px; }

.bld-thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  padding-bottom: 15px;
}

.bld-thumb {
  position: relative;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
  cursor: grab;
  display: block;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.bld-thumb:hover {
  border-color: var(--black, #000);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .1);
}
.bld-thumb:active { cursor: grabbing; }
.bld-thumb img { width: 100%; height: auto; display: block; }

.bld-thumb-add {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .58);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transition: opacity .15s;
}
.bld-thumb:hover .bld-thumb-add, .bld-thumb:focus-visible .bld-thumb-add { opacity: 1; }

.bld-thumb.is-added { transform: scale(.94); border-color: var(--brand, #6ebd44); }
.bld-thumb.is-added .bld-thumb-add { opacity: 1; background: rgba(86, 160, 47, .82); }

/* 11px is the floor everywhere on this page. 9.5px was legible on the screen I
   designed it against and is not on a laptop at arm's length — and the name of
   the design a block came from is exactly the label somebody squints at. */
.bld-thumb-from {
  position: absolute;
  left: 5px; bottom: 5px;
  background: rgba(255, 255, 255, .95);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 11px;
  color: var(--text-2, #4a4a4a);
  pointer-events: none;
  max-width: calc(100% - 10px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── whole-screen picks ────────────────────────────────────────────────── */

.bld-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 22px; }

.bld-pick {
  padding: 0;
  border: 2px solid rgba(0, 0, 0, .1);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  display: block;
  transition: border-color .15s, box-shadow .15s;
}
.bld-pick:hover { border-color: rgba(0, 0, 0, .38); }
.bld-pick.is-on { border-color: var(--brand-600, #57a12f); box-shadow: 0 0 0 3px rgba(110, 189, 68, .18); }
.bld-pick img { width: 100%; height: 180px; object-fit: cover; object-position: top; display: block; }
.bld-pick span { display: block; padding: 8px 6px; font-size: 12px; font-weight: 500; }
.bld-pick.is-on span { background: var(--brand-600, #57a12f); color: #fff; }

/* ── buttons ───────────────────────────────────────────────────────────── */

.bld-next, .bld-send {
  width: 100%;
  padding: 13px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--black, #000);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .12s, opacity .15s;
}
.bld-next:hover, .bld-send:hover { transform: translateY(-1px); }
.bld-send { background: var(--brand-600, #57a12f); font-size: 15px; }
.bld-send:disabled { opacity: .6; cursor: default; transform: none; }

.bld-send-wrap { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(0, 0, 0, .08); }
.bld-send-wrap .bld-note { text-align: center; margin: 9px 0 0; }

.bld-standard {
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, .07);
  font-size: 11.5px;
  color: var(--text-3, #767676);
  line-height: 1.5;
}

/* ── the stage ─────────────────────────────────────────────────────────── */

.bld-stage {
  display: grid;
  place-items: start center;
  padding: 32px 24px 48px;
  overflow-y: auto;
  max-height: calc(100vh - 98px - 55px);
}

.bld-phone-wrap { position: sticky; top: 0; }

.bld-phone {
  width: 322px;
  border: 9px solid #14161a;
  border-radius: 42px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
  display: flex;
  flex-direction: column;
  height: min(690px, calc(100vh - 230px));
  position: relative;
}

.bld-notch {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 106px; height: 21px;
  background: #14161a;
  border-radius: 0 0 13px 13px;
  z-index: 4;
}

.bld-app-hdr {
  height: 62px;
  padding: 14px 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bld-brand);
  flex: none;
  transition: background .12s;
}
.bld-app-hdr img { max-height: 27px; max-width: 148px; width: auto; height: auto; display: block; }
.bld-app-hdr span { font-size: 14px; font-weight: 700; letter-spacing: .01em; }

.bld-screen {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  scrollbar-width: thin;
}
.bld-screen::-webkit-scrollbar { width: 4px; }
.bld-screen::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .17); border-radius: 4px; }

/* The empty phone. These greys were picked to look quiet and came out at
   2.03:1 and 3.45:1 against white — under the 4.5:1 a person needs, on the one
   piece of text whose whole job is telling a merchant what to do next. Quiet
   is fine; unreadable is not. */
.bld-empty {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 74px 26px;
  color: #6b6b6b;
  text-align: center;
}
.bld-empty strong { font-size: 14px; color: #454545; font-weight: 600; }
.bld-empty span { font-size: 12px; color: #6b6b6b; }
.bld-empty svg { color: #a8a8a8; }

.bld-placed { position: relative; display: block; }
.bld-placed img { width: 100%; height: auto; display: block; }
.bld-placed.is-dragging { opacity: .4; }
.bld-placed.is-target { outline: 2px solid var(--brand, #6ebd44); outline-offset: -2px; }

.bld-tools {
  position: absolute;
  top: 5px; right: 5px;
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity .13s;
}
.bld-placed:hover .bld-tools, .bld-placed:focus-within .bld-tools { opacity: 1; }

.bld-tools button {
  width: 32px; height: 32px;
  border: 0;
  border-radius: 8px;
  background: rgba(20, 22, 26, .85);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.bld-tools button:hover { background: #14161a; }
.bld-tools button:disabled { opacity: .3; cursor: default; }
.bld-tools button[data-del] { font-size: 15px; }
.bld-tools button[data-del]:hover { background: #c0392b; }

/* On a touch screen there is no hover, so revealing the move and remove
   controls on hover hides them completely — a merchant on a phone could place
   a section and have no way to move or delete it, with nothing on screen
   suggesting the controls exist. Dragging is also not available to them, which
   makes these buttons the ONLY way to reorder. They stay visible.

   The same applies to the library's Add overlay: on touch it never appeared,
   so the thumbnails read as pictures rather than as things you can press. */
@media (hover: none) {
  .bld-tools { opacity: 1; }
  .bld-placed-tag { opacity: 1; }
  .bld-thumb-add {
    opacity: 1;
    inset: auto 0 0 auto;
    background: rgba(20, 22, 26, .8);
    border-radius: 7px 0 0 0;
    padding: 4px 10px;
    display: block;
  }
}

.bld-placed-tag {
  position: absolute;
  left: 5px; bottom: 5px;
  background: rgba(20, 22, 26, .82);
  color: #fff;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 11px;
  opacity: 0;
  transition: opacity .13s;
  pointer-events: none;
  max-width: 78%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bld-placed:hover .bld-placed-tag { opacity: 1; }

.bld-app-tab {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: 7px;
  background: var(--bld-brand);
  flex: none;
  transition: background .12s;
}
.bld-app-tab i {
  width: 19px; height: 19px;
  border-radius: 6px;
  display: block;
  background: var(--bld-accent);
  opacity: .45;
  transition: background .12s;
}
.bld-app-tab i:first-child { opacity: 1; }

.bld-stage-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-2, #4a4a4a);
}
.bld-clear {
  border: 0;
  background: none;
  color: #b4451f;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

/* superseded — see "After it is sent" at the foot of this file */

/* ── narrow ────────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .bld { --bld-panel: 360px; }
  .bld-phone { width: 280px; }
}

@media (max-width: 860px) {
  .bld-body { grid-template-columns: 1fr; }
  .bld-panel { max-height: none; border-right: 0; order: 2; }
  .bld-stage {
    order: 1;
    max-height: none;
    padding: 20px 16px 24px;
    background: var(--cream, #f3ece3);
    position: sticky;
    top: 55px;
    z-index: 10;
  }
  /* Measured on a 390x844 phone: at 400px tall with a 62px header and a 54px
     tab bar, the merchant was looking at 270px of their own app — about two
     thirds of one section. The frame gets taller and the chrome gets shorter,
     which buys 60px of the thing they actually came to see. */
  .bld-phone { height: 430px; width: 232px; border-width: 7px; border-radius: 32px; }
  .bld-app-hdr { height: 52px; padding-top: 10px; }
  .bld-app-hdr img { max-height: 23px; max-width: 120px; }
  .bld-app-tab { height: 46px; padding-bottom: 5px; }
  .bld-app-tab i { width: 17px; height: 17px; }
  .bld-notch { width: 88px; height: 17px; }
  .bld-phone-wrap { position: static; }
  .bld-t { display: none; }
  .bld-step { padding: 7px 9px; }
  .bld-thumbs, .bld-picks { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   The gate — what stands in front of the builder.
   ═══════════════════════════════════════════════════════════════════════════ */

.gate {
  background: var(--cream, #f3ece3);
  padding: 56px 24px 76px;
  min-height: calc(100vh - 98px);
}

.gate-in {
  max-width: var(--w, 1216px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: start;
}

/* ── the reason ────────────────────────────────────────────────────────── */

.gate-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--brand-t, #38701f);
  background: rgba(110, 189, 68, .13);
  border-radius: 999px;
  padding: 5px 13px;
  margin-bottom: 20px;
}

.gate-h {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: -.025em;
  margin: 0 0 18px;
  text-wrap: balance;
  max-width: 15ch;
}

.gate-lede {
  font-size: 16px;
  line-height: 1.62;
  color: var(--text-2, #4a4a4a);
  max-width: 54ch;
  margin: 0 0 30px;
  text-wrap: pretty;
}

.gate-pts { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 16px; }

.gate-pts li {
  font-size: 14px;
  line-height: 1.58;
  color: var(--text-2, #4a4a4a);
  padding-left: 26px;
  position: relative;
  max-width: 56ch;
}
.gate-pts li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand, #6ebd44);
}
.gate-pts strong { color: var(--text, #141414); font-weight: 600; }

.gate-small {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-3, #767676);
  max-width: 48ch;
  margin: 0;
}
.gate-mid { text-align: center; margin: 12px auto 0; }

/* ── the form ──────────────────────────────────────────────────────────── */

.gate-form-wrap { position: sticky; top: 24px; }

.gate-form, .gate-done {
  background: var(--paper, #fff);
  border-radius: var(--r-lg, 24px);
  padding: 30px 28px 26px;
  box-shadow: 0 6px 34px rgba(0, 0, 0, .07);
}

.gate-fh { font-size: 20px; margin: 0 0 22px; letter-spacing: -.015em; }

.gate-lbl {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3, #767676);
  margin: 0 0 7px;
}

.gate-in {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 11px;
  font: inherit;
  font-size: 15px;
  background: #fff;
  color: var(--text, #141414);
}
.gate-in:focus {
  outline: 2px solid var(--brand, #6ebd44);
  outline-offset: 1px;
  border-color: transparent;
}

.gate-hint {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-3, #767676);
  margin: 6px 0 18px;
  min-height: 16px;
}
.gate-hint.is-bad { color: #b4451f; }
.gate-hint.is-good { color: var(--brand-t, #38701f); }

.gate-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.gate-errs { display: none; }
.gate-errs.is-on {
  display: block;
  background: #fdf1ee;
  border-left: 3px solid #b4451f;
  border-radius: 8px;
  padding: 11px 14px;
  margin: 4px 0 16px;
}
.gate-errs p { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: #8a3416; }
.gate-errs p:last-child { margin-bottom: 0; }

.gate-go {
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--black, #000);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 6px;
  transition: transform .12s, opacity .15s;
}
.gate-go:hover { transform: translateY(-1px); }
.gate-go:disabled { opacity: .6; cursor: default; transform: none; }

.gate-alt {
  text-align: center;
  font-size: 13px;
  color: var(--text-3, #767676);
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, .07);
}
.gate-alt a { color: var(--text, #141414); }

/* ── after they submit ─────────────────────────────────────────────────── */

.gate-done { text-align: center; }
.gate-done .gate-lede { margin: 0 auto 14px; font-size: 15px; }
.gate-done .gate-small { margin: 0 auto; }

.gate-tick {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(110, 189, 68, .15);
  color: var(--brand-t, #38701f);
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
}

.gate-msg {
  border-radius: 12px;
  padding: 13px 17px;
  margin-bottom: 16px;
  font-size: 13.5px;
  line-height: 1.5;
}
.gate-msg strong { display: block; margin-bottom: 2px; }
.gate-msg.is-good { background: rgba(110, 189, 68, .14); color: var(--brand-t, #38701f); }
.gate-msg.is-bad { background: #fdf1ee; color: #8a3416; }

@media (max-width: 900px) {
  .gate { padding: 34px 18px 54px; }
  .gate-in { grid-template-columns: 1fr; gap: 34px; }
  .gate-form-wrap { position: static; }
  .gate-h { max-width: none; }
}

/* ── After it is sent ──────────────────────────────────────────────────────
   The four building panes are put away and this takes their place. Measured
   before it existed: a merchant coming back the next day met a faded panel
   they could not click and no way to reach anybody — a dead end on the screen
   they look at while waiting to hear back, which for a tool whose job is
   starting a conversation is the most expensive screen in the build. */

.bld-after { animation: bld-in .28s ease both; }

.bld-after-tick {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(110, 189, 68, .15);
  color: var(--brand-t, #38701f);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.bld-next-list {
  list-style: none;
  counter-reset: step;
  margin: 24px 0 22px;
  padding: 0;
  display: grid;
  gap: 16px;
}
.bld-next-list li {
  counter-increment: step;
  position: relative;
  padding-left: 34px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2, #4a4a4a);
}
.bld-next-list li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 23px; height: 23px;
  border-radius: 50%;
  background: var(--black, #000);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: grid;
  place-items: center;
}
.bld-next-list strong {
  display: block;
  color: var(--text, #141414);
  font-weight: 600;
  margin-bottom: 2px;
}

.bld-after-true {
  background: var(--cream, #f3ece3);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2, #4a4a4a);
  margin: 0 0 22px;
}

.bld-after-cta { display: flex; gap: 9px; flex-wrap: wrap; }

.bld-after-btn {
  flex: 1;
  min-width: 140px;
  text-align: center;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--black, #000);
  color: #fff;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  transition: transform .12s;
}
.bld-after-btn:hover { transform: translateY(-1px); color: #fff; }
.bld-after-btn.is-alt {
  background: #fff;
  color: var(--text, #141414);
  border: 1px solid rgba(0, 0, 0, .16);
}
.bld-after-btn.is-alt:hover { color: var(--text, #141414); }

.bld-after-note { text-align: center; margin: 16px 0 0; }

/* The step rail stops being a control once there is nothing to step through. */
.bld.is-sent .bld-step { cursor: default; opacity: .45; }
.bld.is-sent .bld-step:hover { background: transparent; color: var(--text-3, #767676); }

/* The panel was faded and made unclickable on send. Now it holds the one thing
   the merchant needs, so both of those come off. */
.bld.is-sent .bld-panel { opacity: 1; pointer-events: auto; }

/* Without JavaScript nothing here works, and saying so is the difference
   between a browser setting and a company that looks broken. */
.bld-noscript {
  background: #fdf1ee;
  border-left: 4px solid #b4451f;
  color: #8a3416;
  padding: 14px 18px;
  margin: 16px 24px 0;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.55;
}
.bld-noscript strong { display: block; margin-bottom: 3px; }
.bld-noscript a { color: #8a3416; }

/* ── The whole-screen preview ──────────────────────────────────────────────
   Steps 3 and 4 are choices of a complete screen, not sections to assemble, so
   the phone shows the layout they picked. Before this the phone showed the home
   screen on every step and a merchant choosing a category layout saw nothing
   change — the client's own report. */

.bld-whole {
  flex: 1;
  overflow-y: auto;
  background: #fff;
  scrollbar-width: thin;
}
.bld-whole::-webkit-scrollbar { width: 4px; }
.bld-whole::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .17); border-radius: 4px; }

.bld-whole img { width: 100%; height: auto; display: block; }

.bld-whole-none {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 74px 26px;
  color: #6b6b6b;
  text-align: center;
}
.bld-whole-none strong { font-size: 14px; color: #454545; font-weight: 600; }
.bld-whole-none span { font-size: 12px; }
.bld-whole-none svg { color: #a8a8a8; }

/* Six category layouts now, so the picker gets a third column at full width
   and stays two-up when the panel narrows. */
@media (min-width: 1200px) {
  #bld-cats { grid-template-columns: 1fr 1fr 1fr; }
  #bld-cats .bld-pick img { height: 150px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   The list of designs.
   The client asked for it directly: "as a user I log in and see a list of the
   things I've made, or add a new one if I want". A sent design stays here as a
   record — openable, readable, never editable.
   ═══════════════════════════════════════════════════════════════════════════ */

.blist { background: var(--cream, #f3ece3); padding: 40px 24px 70px; min-height: calc(100vh - 98px); }
.blist-in { max-width: var(--w, 1216px); margin: 0 auto; }

.blist-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 30px;
}
.blist-h { font-size: clamp(24px, 3vw, 32px); margin: 0 0 6px; letter-spacing: -.025em; }
.blist-lede { font-size: 15px; color: var(--text-2, #4a4a4a); margin: 0; max-width: 56ch; }

.blist-new {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border: 0; border-radius: 999px;
  background: var(--black, #000); color: #fff;
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: transform .12s;
  flex: none;
}
.blist-new:hover { transform: translateY(-1px); }
.blist-new:disabled { opacity: .6; cursor: default; transform: none; }

.blist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 18px;
  margin-bottom: 30px;
}

.blist-card {
  background: var(--paper, #fff);
  border-radius: var(--r, 16px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
  border: 1px solid rgba(0, 0, 0, .08);
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.blist-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .1);
  border-color: rgba(0, 0, 0, .18);
  color: inherit;
}

.blist-phone { background: #f6f6f6; }
.blist-hdr {
  height: 38px; display: flex; align-items: center; justify-content: center; padding: 0 12px;
}
.blist-hdr img { max-height: 18px; max-width: 90px; width: auto; display: block; }
.blist-hdr span { font-size: 11px; font-weight: 700; }
.blist-shot { width: 100%; height: 132px; object-fit: cover; object-position: top; display: block; }
.blist-blank {
  height: 132px; display: grid; place-items: center;
  font-size: 11.5px; color: #8a8a8a; background: #fff;
}
.blist-tab { height: 26px; display: flex; align-items: center; justify-content: space-around; }
.blist-tab i { width: 11px; height: 11px; border-radius: 4px; display: block; opacity: .5; }
.blist-tab i:first-child { opacity: 1; }

.blist-meta { padding: 12px 14px 14px; display: grid; gap: 3px; }
.blist-badge {
  display: inline-block; font-size: 10px; font-weight: 600;
  border-radius: 20px; padding: 2px 9px;
  background: rgba(110, 189, 68, .16); color: var(--brand-t, #38701f);
}
.blist-badge.is-sent { background: rgba(0, 0, 0, .07); color: var(--text-2, #4a4a4a); }
.blist-title { font-size: 14px; font-weight: 600; margin-top: 4px; }
.blist-facts { font-size: 11.5px; color: var(--text-2, #4a4a4a); }
.blist-when { font-size: 11px; color: var(--text-3, #767676); }

.blist-note {
  font-size: 12.5px; line-height: 1.6; color: var(--text-3, #767676);
  max-width: 62ch; margin: 0; padding-top: 22px;
  border-top: 1px solid rgba(0, 0, 0, .07);
}

/* ── The way back to the list, in the builder's top bar ─────────────────── */

.bld-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px; border-radius: 999px;
  text-decoration: none; color: var(--text-2, #4a4a4a);
  font-size: 13px; flex: none; max-width: 260px;
  transition: background .15s;
}
.bld-back:hover { background: rgba(0, 0, 0, .05); color: var(--text, #141414); }
.bld-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bld-ro {
  font-style: normal; font-size: 10px; font-weight: 600;
  background: rgba(0, 0, 0, .07); color: var(--text-2, #4a4a4a);
  border-radius: 20px; padding: 2px 8px; flex: none;
}

@media (max-width: 900px) {
  .bld-back span { display: none; }
  .blist { padding: 26px 16px 50px; }
  .blist-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* A note against each screen. The client asked for boxes rather than a box:
   "make the price bigger" filed under the whole app is a sentence somebody has
   to work out the subject of. */
.bld-screen-note {
  margin: 4px 0 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, .07);
}
.bld-note-field { margin-bottom: 0; }
.bld.is-sent .bld-note-field { background: #fafafa; }

/* The line that says it costs nothing. Quieter than the pitch above it — a
   fact rather than a claim, and a fact does not need to shout. */
.gate-free { font-size: 15px; color: var(--muted, #6b7280); margin-top: 10px; }