/* "Join the playroom" (see pricing-e.js) */
.sec-calm section.pricing.pe { background: #F6F2EC !important; margin-inline: 0 !important; border-radius: 0 !important; }
.pe .wrap { width: var(--colw) !important; max-width: none !important; padding-inline: 0 !important; }
.pe-card { max-width: 900px; margin: 0 auto; background: #fff; border-radius: 32px; padding: 52px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; box-shadow: 0 34px 70px -40px rgba(31,42,43,.35); }
.pe-l { display: grid; gap: 14px; align-content: start; }
.pe-sw { display: inline-flex; background: #F6F2EC; border-radius: 99px; padding: 5px; justify-self: start; margin-bottom: 10px; }
.pe-sw button { border: 0; background: none; font: 500 15px/1 "Outfit", sans-serif; padding: 11px 18px; border-radius: 99px; cursor: pointer; color: #4A5656; display: flex; gap: 8px; align-items: center; }
.pe-sw button.on { background: var(--teal); color: #fff; }
.pe-sw button i { font-style: normal; font-size: 11px; font-weight: 600; background: #F0B429; color: #5A3A00; padding: 3px 7px; border-radius: 99px; }
.pe-kind { font: 500 12px/1 "Outfit", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #4A5656; margin: 0; }
.pe-pr { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.pe-pr b { font: 400 96px/1 citrus-gothic-rough, "Bebas Neue", Impact, sans-serif; color: var(--rust); }
.pe-pr small { font-size: 16px; color: #4A5656; }
.pe-note { font-size: 15px; color: #4A5656; margin: 0; }
.pe-r { display: grid; gap: 22px; align-content: center; }
.pe-ck { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pe-ck li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 16px; color: #2F3B3B; }
.pe-ck li::before { content: ""; width: 16px; height: 9px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg) translate(2px, 4px); }
.pe-btn { display: flex; justify-content: center; align-items: center; height: 56px; border-radius: 10px; background: var(--rust); color: #fff; font: 500 17px/1 "Outfit", sans-serif; text-decoration: none; }
.pe-fine { font-size: 14px; line-height: 1.5; color: #4A5656; margin: 0; }
.pe-inst { max-width: 900px; margin: 40px auto 0; padding: 22px 0; border-top: 1px solid rgba(31,42,43,.12); border-bottom: 1px solid rgba(31,42,43,.12); display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.pe-inst p { font: 400 19px/1.4 p22-mackinac-pro, "Fraunces", Georgia, serif; color: var(--teal); margin: 0; }
.pe-inst a { font: 600 15px/1 "Outfit", sans-serif; color: var(--rust); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; white-space: nowrap; }
@media (max-width: 900px) { .pe-card { grid-template-columns: 1fr; padding: 34px 26px; } .pe-pr b { font-size: 76px; } .pe-inst { flex-direction: column; align-items: flex-start; } }
/* the institutions card, in the soft warm white of the annual plan in option C */
.sec-calm .pe .inst.pe-inst-card { max-width: 900px; margin: 28px auto 0 !important; background: #FFFBF6 !important; border: 1px solid rgba(31,42,43,.12) !important; border-radius: 28px !important; box-shadow: none !important; padding: 40px 56px !important; display: grid !important; grid-template-columns: 1fr auto; gap: 40px; align-items: center; color: #2F3B3B !important; }
.pe .inst.pe-inst-card::after, .pe .inst.pe-inst-card::before { display: none !important; }
.pe .inst-copy { display: grid; gap: 10px; }
.pe .inst .plan-kind { font: 500 12px/1 "Outfit", sans-serif !important; letter-spacing: .16em; text-transform: uppercase; color: #4A5656 !important; margin: 0 !important; }
.pe .inst h3 { font: 400 28px/1.2 p22-mackinac-pro, "Fraunces", Georgia, serif !important; color: var(--teal) !important; margin: 0 !important; }
.pe .inst p:not(.plan-kind) { font-size: 16px !important; line-height: 1.6 !important; color: #4A5656 !important; margin: 0 !important; max-width: 34em; }
.pe .inst .btn { background: var(--rust) !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; height: 54px; min-height: 54px; padding: 0 28px !important; font: 500 16px/1 "Outfit", sans-serif !important; box-shadow: none !important; outline: 0 !important; display: inline-flex; align-items: center; white-space: nowrap; }
@media (max-width: 900px) { .sec-calm .pe .inst.pe-inst-card { grid-template-columns: 1fr; padding: 32px 26px !important; } }
.pe .inst .btn { background: var(--teal) !important; }
.pe-lang { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin: 26px auto 0 !important; }
.pe-lk { font: 500 12px/1 "Outfit", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #4A5656; margin-right: 4px; }
.pe-pill { font: 400 16px/1 p22-mackinac-pro, "Fraunces", Georgia, serif; color: var(--teal); border: 1px solid rgba(35,103,106,.35); border-radius: 99px; padding: 9px 15px; display: inline-flex; align-items: center; gap: 8px; }
.pe-pill.soon { color: #6B7777; border-style: dashed; }
.pe-pill i { font: 600 10px/1 "Outfit", sans-serif; font-style: normal; letter-spacing: .1em; text-transform: uppercase; background: #F0B429; color: #5A3A00; padding: 4px 7px; border-radius: 99px; }
.pe-lang { gap: 28px; }
.pe-grp { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pe-sep { width: 1px; height: 26px; background: rgba(31,42,43,.18); }
.pe-dev { display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 "Outfit", sans-serif; color: var(--teal); margin-right: 8px; }
.pe-dev svg { width: 24px; height: 24px; }
@media (max-width: 700px) { .pe-sep { display: none; } .pe-lang { gap: 14px; } }
.sec-calm .pe .inst.pe-inst-card { margin-top: 64px !important; }
/* institutions card: "See how it works" to the schools page, the email as a quiet link under it */
.pe-inst-card .inst-act { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pe-inst-card .inst-mail { font: 500 14px/1 "Outfit", sans-serif; color: #4A5656; text-decoration: none; border-bottom: 1px solid rgba(74,86,86,.35); padding-bottom: 2px; }
@media (max-width: 900px) { .pe-inst-card .inst-act { align-items: flex-start; } }