/* Website builder pages (/website-builder/...). Sits on top of industry.css. */
.wb-hero h1 { max-width: 16ch; }
.soon { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #333; margin: 0 0 18px; font-size: 15px; }
.soon span { background: var(--zo); color: #111; border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.wl label { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.wl .row { display: flex; gap: 8px; max-width: 560px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px; }
.wl input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 17px; padding: 8px 14px; outline: none; color: var(--ink); }
.wl-msg { min-height: 1.4em; margin: 10px 4px 0; font-size: 14px; color: var(--muted); }
.wl-msg.ok { color: #1a7f37; }
.wl.dark label { color: rgba(255,255,255,.6); }
.shot { margin: 40px 0 0; }
.shot img { width: 100%; height: auto; border-radius: 22px; }
.shot figcaption { color: var(--muted); font-size: 13px; margin-top: 10px; text-align: center; }
.secs .sub { color: var(--muted); margin: -8px 0 22px; max-width: 62ch; }
.secs ul, .why ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.secs li, .why li { display: flex; gap: 14px; background: var(--surface); border-radius: 18px; padding: 20px 22px; }
.secs li svg, .why li svg { flex: none; width: 26px; height: 26px; padding: 5px; box-sizing: border-box; border-radius: 50%; background: var(--zo); fill: none; stroke: #111; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.secs p, .why p { margin: 0; color: #444; }
.steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.steps li { background: var(--surface); border-radius: 18px; padding: 24px; }
.steps b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #111; color: #fff; font-weight: 400; margin-bottom: 14px; }
.steps p { margin: 0; color: #444; }
.vs p { max-width: 70ch; color: #333; }
.vs a { white-space: nowrap; }
.grps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grp { background: var(--surface); border-radius: 20px; padding: 14px 14px 20px; }
.grp img { width: 100%; height: auto; border-radius: 14px; margin-bottom: 14px; }
.grp h3, .grp p { padding: 0 8px; }
.grp p { margin: 0; color: #444; line-height: 1.9; }
.grp a { text-decoration: none; border-bottom: 1px solid var(--line); }
.grp a:hover { border-color: #111; }
.cta-band { margin-top: 56px; background: #111; color: #fff; border-radius: 22px; padding: 32px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cta-band h2 { margin: 0 0 6px; }
.cta-band p { margin: 0; color: rgba(255,255,255,.7); }
.cta-band .btn { background: var(--zo); border-color: var(--zo); color: #111; }
.cta-band .wl { flex: 1 1 360px; max-width: 520px; }
.tbl { overflow-x: auto; background: var(--surface); border-radius: 18px; }
.cmp table { width: 100%; border-collapse: collapse; min-width: 560px; }
.cmp th, .cmp td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; font-weight: 400; }
.cmp thead th { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cmp tbody th { color: var(--muted); width: 26%; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td:nth-child(2) { background: #FFF8E6; }
.pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pick > div { background: var(--surface); border-radius: 18px; padding: 24px; }
.pick p { margin: 0; color: #444; }
@media (max-width: 760px) {
  .secs ul, .why ul, .steps ol, .grps, .pick { grid-template-columns: minmax(0, 1fr); }
  .shot img { border-radius: 14px; }
  .cta-band { padding: 24px; }
}