/* WA_MARK Integration — pricing + contact. Brand: #1fa855 / #128c7e, Outfit (matches wamark.in). */
.wamark-pricing, .wamark-contact {
  --wamark-brand: #1fa855;
  --wamark-brand-dark: #128c7e;
  --wamark-fg: #0f172a;
  --wamark-muted: #64748b;
  --wamark-border: #e6e8eb;
  --wamark-radius: 14px;
  font-family: 'Outfit', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--wamark-fg);
  max-width: 100%;
  margin: 0 auto;
}

/* ---- Pricing ---- */
.wamark-toggle { display: inline-flex; gap: 4px; padding: 4px; margin: 0 auto 28px; background: #f1f5f9; border-radius: 999px; }
.wamark-pricing { text-align: center; }
.wamark-toggle-btn { border: 0; background: transparent; padding: 9px 22px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--wamark-muted); cursor: pointer; transition: all .15s ease; }
.wamark-toggle-btn[aria-pressed="true"] { background: #fff; color: var(--wamark-brand-dark); box-shadow: 0 1px 3px rgba(15,23,42,.12); }

.wamark-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; text-align: left; }
.wamark-card { position: relative; background: #fff; border: 0; border-radius: 15px; padding: 16px 28px 30px; display: flex; flex-direction: column; box-shadow: 0 0 30px 0 rgba(10, 10, 16, .04); transition: box-shadow .18s ease, transform .18s ease; }
.wamark-card:hover { box-shadow: 0 16px 40px -20px rgba(16,24,40,.35); transform: translateY(-3px); }
.wamark-featured { border: 1px solid var(--wamark-brand); box-shadow: 0 0 30px 0 rgba(31, 168, 85, .10); }
.wamark-badge { position: absolute; top: -12px; left: 22px; background: var(--wamark-brand); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; }
.wamark-plan-name { margin: 20px 0 6px; font-size: 19px; font-weight: 700; }
.wamark-price { display: flex; align-items: baseline; gap: 4px; margin: 8px 0 2px; }
.wamark-amount { font-size: 38px; font-weight: 800; letter-spacing: -1px; }
.wamark-unit { color: var(--wamark-muted); font-size: 15px; font-weight: 600; }
.wamark-save { display: inline-block; background: #ecfdf5; color: #047857; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin: 4px 0 0; }
.wamark-desc { color: var(--wamark-muted); font-size: 18px; margin: 10px 0 0; }
.wamark-features { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 9px; }
.wamark-features li { position: relative; padding-left: 26px; font-size: 18px; line-height: 1.45; }
.wamark-features li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #ecfdf5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23128c7e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; }
.wamark-cta { display: inline-block; margin-top: 18px; text-align: center; background: var(--wamark-brand); color: #fff !important; text-decoration: none; padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 18px; border: 0; cursor: pointer; transition: filter .15s ease, transform .1s ease; }
.wamark-card .wamark-cta { margin-top: auto; }
.wamark-cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
.wamark-featured .wamark-cta { background: var(--wamark-brand-dark); }
.wamark-enterprise { text-align: center; color: var(--wamark-muted); font-size: 18px; margin-top: 26px; }
.wamark-enterprise a { color: var(--wamark-brand-dark); font-weight: 600; }
.wamark-empty { text-align: center; color: var(--wamark-muted); }

/* ---- Contact ---- */
.wamark-contact { max-width: 620px; display: grid; gap: 14px; }
.wamark-contact .wamark-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wamark-contact label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.wamark-contact .wamark-opt { color: var(--wamark-muted); font-weight: 400; }
.wamark-contact input, .wamark-contact textarea { font: inherit; padding: 11px 13px; border: 1px solid var(--wamark-border); border-radius: 10px; background: #fff; color: var(--wamark-fg); width: 100%; }
.wamark-contact input:focus, .wamark-contact textarea:focus { outline: none; border-color: var(--wamark-brand); box-shadow: 0 0 0 3px rgba(31,168,85,.18); }
.wamark-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; }
.wamark-submit { justify-self: start; }
.wamark-form-msg { margin: 4px 0 0; font-size: 14px; font-weight: 600; }
.wamark-form-msg.ok { color: #047857; }
.wamark-form-msg.err { color: #dc2626; }

@media (max-width: 600px) {
  .wamark-contact .wamark-row { grid-template-columns: 1fr; }
}
