/* Website Builder landing page extras. Builds on site.css (warm dark marketing look). */
.wb .ticks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; color: var(--muted); }
.wb .ticks li { display: flex; gap: 10px; align-items: flex-start; } .wb .ticks li::before { content: "✓"; color: var(--c); font-weight: 800; }
.wb .demo-bar { align-items: center; } .wb .demo-bar .url { margin-left: 8px; flex: 1; text-align: center; font: 12.5px ui-monospace, Consolas, monospace; color: var(--muted); background: rgba(255,255,255,.05); border-radius: 999px; padding: 3px 12px; }
.wbmock-wrap { padding: 18px; }
.wbmock { --p: #2f7d4f; --a: #e9b44c; background: #fff; color: #1b1b1d; border-radius: 12px; overflow: hidden; transition: --p .4s; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.mk-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #eee; } .mk-head b { color: var(--p); letter-spacing: -.01em; transition: color .4s; }
.mk-nav { display: flex; gap: 12px; font-size: 12px; color: #666; } .mk-nav i { font-style: normal; }
.mk-hero { padding: 28px 18px 24px; background: radial-gradient(260px 120px at 85% 0, color-mix(in srgb, var(--p) 22%, transparent), transparent), #fff; }
.mk-hero h3 { font-size: 22px; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 8px; color: #1b1b1d; } .mk-hero p { margin: 0 0 16px; color: #666; font-size: 13.5px; }
.mk-btn { display: inline-block; background: var(--p); color: #fff; font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: 8px; transition: background .4s; }
.mk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 16px 18px; } .mk-tiles div { border: 1px solid #eee; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 2px; border-top: 3px solid var(--a); transition: border-color .4s; } .mk-tiles b { font-size: 12px; } .mk-tiles span { font-size: 11px; color: #777; }
.domdemo { display: grid; gap: 12px; }
.dstep { display: flex; gap: 12px; align-items: center; } .dstep > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(251,143,85,.18); color: var(--a); font-weight: 800; flex: none; } .dstep b { display: block; } .dstep small { color: var(--muted); } .dstep.ok > span { background: rgba(52,211,153,.18); color: #34d399; }
.drec { display: grid; grid-template-columns: 34px 54px 1fr; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.03); margin-left: 40px; } .drec i { font-style: normal; font-weight: 800; color: var(--a); } .drec code { font: 13px ui-monospace, Consolas, monospace; color: #fff; }
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; align-items: stretch; }
.pcard { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 30px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); } .pcard.feat { border-color: color-mix(in srgb, var(--c) 70%, transparent); background: radial-gradient(400px 200px at 50% 0, var(--glow), transparent), var(--card); }
.pcard h3 { margin: 0; font-size: 20px; } .pcard .badge { top: 22px; right: 22px; background: rgba(246,115,92,.18); color: var(--b); }
.pp { display: flex; align-items: baseline; gap: 6px; margin: 4px 0; } .pp b { font-size: 46px; letter-spacing: -.04em; line-height: 1; } .pp span { color: var(--muted); }
.pcard ul { list-style: none; padding: 0; margin: 10px 0 22px; display: grid; gap: 8px; flex: 1; } .pcard li { display: flex; gap: 10px; color: var(--muted); font-size: 15px; } .pcard li::before { content: "✓"; color: var(--c); font-weight: 800; }
.pcard .pill { align-self: flex-start; }
.trust { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
@media (max-width: 760px) { .wb .two { grid-template-columns: 1fr; gap: 36px; } .wb .hero { padding-top: 100px !important; } }

@media (max-width: 480px) { .snav .brand small { display: none; } }