/*
  Seamside Studio - plan cards (_plans.cfm), used on the welcome page and on the account page.
  Self-contained colors so it works beside site.css (public pages) and studio.css (the app).
  Pillar Software Developers, LLC. Keep this file ASCII-only.
*/
.wl-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 920px; margin: 0 auto; }
.wl-plan { display: flex; flex-direction: column; padding: 28px 26px 26px; border: 1px solid #e7e2da; border-radius: 16px; background: #ffffff; }
.wl-plan--featured { border-color: #a25a3f; box-shadow: 0 0 0 1px #a25a3f, 0 1px 2px rgba(2, 34, 38, .05), 0 10px 30px rgba(2, 34, 38, .08); }
.wl-plan__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wl-plan__name { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.01em; color: #022226; }
.wl-plan__tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: #f6ece6; font-size: 12.5px; font-weight: 700; color: #8c4a2f; }
.wl-plan__for { margin: 4px 0 0; font-size: 15px; color: #5b6e71; }
.wl-plan__price { display: flex; align-items: baseline; gap: 6px; margin: 20px 0 0; color: #022226; }
.wl-plan__price strong { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.wl-plan__price span { font-size: 15px; color: #5b6e71; }
.wl-plan__year { margin: 6px 0 0; font-size: 14px; color: #5b6e71; }
.wl-plan__list { display: grid; gap: 10px; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid #e7e2da; list-style: none; }
.wl-plan__list li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; color: #1b3a3d; }
.wl-plan__list .i { width: 18px; height: 18px; flex: none; margin-top: 2px; color: #1d7a52; }
.wl-plan__cta { margin-top: auto; padding-top: 24px; }
.wl-plan__note { margin: 0; font-size: 14px; color: #5b6e71; }
.wl-plans__more { max-width: 920px; margin: 20px auto 0; font-size: 14.5px; text-align: center; color: #5b6e71; }
@media (max-width: 640px) {
  .wl-plans { grid-template-columns: minmax(0, 1fr); }
}