/* ============================================================
   Small-business solutions page — all rules scoped under .sb
   so nothing leaks onto other pages. Unlayered on purpose: the
   tint / pop card modifiers carry their own bg + border + ring,
   so there is no reliance on cascade-layer ordering.
   ============================================================ */

/* ---- type / eyebrow ---- */
.sb .eyebrow { color:#0f766e; font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.sb .hero-reassure { font-size:13.5px; color:#57534e; font-weight:500; display:flex; align-items:center; gap:8px; }
.sb .hero-tick { color:#16a34a; flex:0 0 auto; }
.sb .hero-hint { font-size:12.5px; color:#a8a29e; font-weight:500; display:flex; align-items:center; gap:7px; line-height:1.4; }

/* ---- hero surface ---- */
.sb .hero-surface {
  background:
    radial-gradient(110% 110% at 100% 0%, #d6f0ea 0%, rgba(214,240,234,0) 50%),
    radial-gradient(90% 90% at 0% 100%, #e7f6f1 0%, rgba(231,246,241,0) 55%),
    linear-gradient(180deg, #fbfefd 0%, #f1faf7 100%);
}
.sb .grid-mask::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(15,118,110,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,118,110,.06) 1px, transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image: radial-gradient(110% 90% at 30% 0%, #000 25%, transparent 72%);
          mask-image: radial-gradient(110% 90% at 30% 0%, #000 25%, transparent 72%);
}

/* ---- buttons ---- */
.sb .btn-launch {
  display:inline-flex; align-items:center; justify-content:center; gap:9px; background:#0d9488; color:#fff;
  font-weight:600; border-radius:13px; padding:13px 24px; transition:.2s; white-space:nowrap;
  box-shadow:0 12px 24px -10px rgba(13,148,136,.55); border:none; cursor:pointer; text-decoration:none;
}
.sb .btn-launch:hover { background:#0f766e; transform:translateY(-1px); color:#fff; }
.sb .btn-ghost {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; color:#44403c; font-weight:600;
  border:1px solid #e0d8cd; border-radius:13px; padding:13px 22px; transition:.2s; background:#fff; text-decoration:none;
}
.sb .btn-ghost:hover { border-color:#a7d3c8; background:#f1faf7; }

.sb .hero-chip {
  font-size:13px; font-weight:500; color:#2c6b60; background:#fff;
  border:1px solid #d6ece5; border-radius:999px; padding:7px 14px; cursor:pointer; transition:.15s;
  display:inline-flex; align-items:center; gap:6px; line-height:1.2; white-space:nowrap;
}
.sb .hero-chip:hover { border-color:#5cc2ad; background:#f0faf7; color:#0f766e; }
.sb .hero-chip.sel { border-color:#0d9488; background:#e9f7f3; color:#0f766e; box-shadow:0 0 0 1px #0d9488; }

/* ---- section helpers ---- */
.sb .card { background:#fff; border:1px solid #e9f1ee; border-radius:18px; box-shadow:0 1px 2px rgba(20,80,70,.04); }
.sb .card.tint { background:#f1faf7; }
.sb .card.pop  { border-color:#14b8a6; box-shadow:0 0 0 2px #14b8a6, 0 18px 40px -24px rgba(13,148,136,.45); }
.sb .step-num { width:44px; height:44px; border-radius:13px; flex:0 0 auto; display:grid; place-items:center; font-weight:800; font-size:16px; background:#fff; color:#0d9488; border:1px solid #c2e7dd; box-shadow:0 8px 18px -10px rgba(13,148,136,.5); }
.sb .feat-ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto; background:#d9f3ec; color:#0d9488; }
.sb .cream { background:#f3faf8; }
.sb .tick-li { display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:#44403c; }

/* ---- type picker ---- */
.sb .picker { background:#fff; border:1px solid #e6efec; border-radius:22px; box-shadow:0 34px 80px -46px rgba(20,80,70,.45); }
.sb .step-label { font-size:12px; font-weight:700; letter-spacing:.02em; color:#0f766e; text-transform:uppercase; display:flex; align-items:center; gap:9px; }
.sb .step-label .n { width:20px; height:20px; border-radius:999px; background:#d9f3ec; color:#0f766e; display:grid; place-items:center; font-size:11px; }
.sb .type-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.sb .type-tile { cursor:pointer; border:1px solid #e6efec; border-radius:14px; background:#fff; overflow:hidden; padding:0; text-align:left; transition:transform .18s, box-shadow .18s, border-color .18s; opacity:1; }
.sb .type-tile:hover { border-color:#9bd5c8; transform:translateY(-3px); box-shadow:0 16px 30px -18px rgba(20,80,70,.45); }
.sb .type-tile.sel { border-color:#0d9488; box-shadow:0 0 0 2px #0d9488, 0 16px 30px -18px rgba(13,148,136,.5); }
.sb .type-thumb { height:54px; position:relative; display:flex; align-items:center; justify-content:center; font-size:21px; }
.sb .type-tile .sel-check { position:absolute; top:6px; right:6px; width:20px; height:20px; border-radius:999px; background:#0d9488; color:#fff; display:none; place-items:center; box-shadow:0 2px 6px rgba(13,148,136,.5); }
.sb .type-tile.sel .sel-check { display:grid; }
.sb .type-name { padding:8px 10px 10px; font-size:12px; font-weight:600; color:#334155; line-height:1.25; }

.sb .launch-panel { max-height:0; opacity:0; overflow:hidden; transition:max-height .38s ease, opacity .26s ease, margin-top .38s ease; }
.sb .launch-panel.show { max-height:260px; opacity:1; margin-top:18px; }
.sb .launch-bar { display:flex; flex-direction:column; gap:10px; }
.sb .email-pill { flex:1; display:flex; align-items:center; gap:9px; background:#eff8f5; border:1px solid #d8ece6; border-radius:13px; padding:12px 15px; transition:border-color .15s, background .15s; }
.sb .email-pill:focus-within { border-color:#5cc2ad; background:#fafffe; }
.sb .email-pill.invalid { border-color:#f3a4a4; background:#fef4f3; }
.sb .email-pill input { flex:1; border:none; outline:none; background:transparent; font-size:15px; color:#1c1917; }
.sb .email-pill input::placeholder { color:#9aa29e; }
.sb .email-icon { color:#0d9488; flex:0 0 auto; }
.sb .composer-err { font-size:12px; color:#dc2626; margin-top:7px; padding-left:2px; display:none; }
.sb .composer-err.show { display:block; }

/* ---- marquee wall ---- */
.sb .marquee-mask { -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.sb .marquee-row { display:flex; gap:16px; width:max-content; }
.sb .marquee-row.left { animation:sbScrollL 52s linear infinite; }
.sb .marquee-row.right { animation:sbScrollR 58s linear infinite; }
.sb .marquee-wrap:hover .marquee-row { animation-play-state:paused; }
.sb .site-card { width:228px; flex:0 0 auto; border:1px solid #e9f1ee; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 8px 20px -14px rgba(20,80,70,.32); }
.sb .site-top { display:flex; align-items:center; gap:5px; padding:7px 10px; background:#f3f7f5; border-bottom:1px solid #eaf1ee; }
.sb .site-dot { width:6px; height:6px; border-radius:999px; background:#cdd9d4; }
.sb .site-hero { height:78px; position:relative; display:flex; align-items:flex-end; background:var(--g,#cdd9d4) center/cover no-repeat; }
.sb .site-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(20,40,36,.34),transparent 58%); }
.sb .site-hero-tag { position:absolute; top:7px; left:8px; z-index:1; font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; font-size:8px; letter-spacing:.04em; text-transform:lowercase; color:#fff; background:rgba(20,40,36,.28); backdrop-filter:blur(2px); padding:2px 6px; border-radius:5px; }
.sb .site-hero-title { position:relative; z-index:1; flex:1; min-width:0; padding:8px 10px; color:#fff; font-weight:800; font-size:12px; letter-spacing:-.01em; text-shadow:0 1px 3px rgba(0,0,0,.28); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- responsive ---- */
@media (min-width:560px){
  .sb .type-grid { grid-template-columns:repeat(5,1fr); }
  .sb .launch-bar { flex-direction:row; align-items:center; }
}

/* ---- motion ---- */
@keyframes sbScrollL { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes sbScrollR { from { transform:translateX(-50%); } to { transform:translateX(0); } }
@media (prefers-reduced-motion: reduce){
  .sb .marquee-row.left, .sb .marquee-row.right { animation:none; }
}