/* Wizbang Sites sales pages (business, resume, blog, creator): what they add to home.css. */

.eyebrow .from:empty { display: none; }
.eyebrow .from::before { content: "·"; margin: 0 8px 0 2px; color: rgba(255,201,60,.6); }

/* Spotlights alternate sides and backgrounds. */
.sl-spot { background: var(--paper); }
.sl-spot.flip { background: #fff; border-block: 1px solid var(--line); }
.sl-spot .browser img { width: 100%; }
@media (min-width: 980px) {
  .sl-spot.flip .spot-grid { grid-template-columns: 1.15fr 1fr; }
  .sl-spot.flip .spot-copy { order: 2; }
  .sl-spot.flip .spot-media { padding: 0 0 50px 30px; }
}

/* How it works, without pictures: three cards. */
.sl-steps li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 24px 22px; }
.sl-steps p { padding-left: 44px; }

/* Pricing: one or two plans, centered. */
.sl-tiers.n1 { max-width: 460px; }
.sl-tiers.n2 { max-width: 820px; }
@media (min-width: 900px) {
  .sl-tiers.n1 { grid-template-columns: 1fr; }
  .sl-tiers.n2 { grid-template-columns: 1fr 1fr; }
  .sl-tiers.n2 .tier-mid { transform: none; }
}
.tier .amt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.tier .was { font: 600 24px var(--display); color: var(--ink-3); text-decoration-thickness: 2px; }
.tier .was:empty { display: none; }
.tier-mid .was { color: #8F96C2; }

/* The trade + county checker (Local Business). */
.checker select { width: 100%; font: 17px var(--body); padding: 14px 16px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23C9CEEA' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.checker select:focus { outline: none; border-color: var(--sun); }
.checker select option { color: var(--ink); }
.checker .gap { margin-top: 18px; }
.county-result .wl { display: grid; gap: 8px; }

/* Reserve form: the extra question takes the full width. */
@media (min-width: 720px) { #rs-form label.wide { grid-column: 1 / -1; } }

/* "More from Wizbang Sites": four cards. */
@media (min-width: 900px) { .also-grid { grid-template-columns: repeat(4, 1fr); } }