/* Public page banner (approved banners, Nov 2026): navy serif headline, fuchsia accent or handwritten line, text and buttons on the left; the
   classroom photo fades in on the right. Runs edge to edge under the navigation like the homepage hero. */
body{overflow-x:clip}
.pbn{--pn:#0b2559;--pp:#e6066f;--pa:#00b5c8;position:relative;display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);align-items:center;
  margin:-28px calc(50% - 50vw) 26px;background:#fff;overflow:hidden;min-height:clamp(330px,27vw,540px);border-bottom:1px solid #e8eef5}
.pbn::before{content:"";position:absolute;left:-130px;top:-150px;width:310px;height:310px;border-radius:50%;background:#9be8f3;opacity:.75;z-index:0}
.pbn::after{content:"";position:absolute;left:-100px;bottom:-140px;width:250px;height:250px;border-radius:50%;background:#9be8f3;opacity:.6;z-index:0}
.pbn-copy{position:relative;z-index:2;padding:clamp(26px,3vw,52px) clamp(12px,1.6vw,26px) clamp(26px,3vw,52px) clamp(28px,5.5vw,110px)}
.pbn-eyebrow{display:inline-block;margin:0 0 12px;padding:5px 18px;border-radius:999px;background:#2fd3e6;color:var(--pn);
  font:700 clamp(11px,.9vw,15px)/1.3 "DM Sans",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.pbn h1{margin:0;color:var(--pn);font:700 clamp(32px,4.1vw,80px)/1.03 Fraunces,Georgia,serif;letter-spacing:-.01em}
.pbn-t,.pbn-a{display:block}
.pbn-a{color:var(--pp)}
.pbn-s{display:inline-flex;align-items:center;gap:.12em;margin:.05em 0 0 -.04em;color:var(--pp);font:400 clamp(32px,3.9vw,76px)/1.18 "Kaushan Script","Brush Script MT",cursive;
  transform:rotate(-2deg);transform-origin:left}
.pbn-heart{flex:none;width:.62em;height:.62em;fill:none;stroke:var(--pp);stroke-width:3.2;stroke-linejoin:round}
.pbn-sub{margin:14px 0 0;color:var(--pn);font:700 clamp(17px,1.45vw,27px)/1.3 "DM Sans",Arial,sans-serif}
.pbn-text{max-width:660px;margin:10px 0 0;color:#1d3270;font:400 clamp(15px,1.2vw,21px)/1.5 "DM Sans",Arial,sans-serif}
.pbn-checks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px;color:var(--pn);font:400 clamp(15px,1.15vw,20px)/1.4 "DM Sans",Arial,sans-serif}
.pbn-checks li{position:relative;padding-left:32px}
.pbn-checks li::before{content:"";position:absolute;left:2px;top:.18em;width:16px;height:9px;border-left:4px solid var(--pa);border-bottom:4px solid var(--pa);transform:rotate(-45deg)}
.pbn-buttons{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
.pbn-btn{--pp:#e6066f;--pa:#00b5c8;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:10px 26px;border:2px solid var(--pp);border-radius:12px;background:var(--pp);color:#fff;
  font:700 clamp(15px,1.1vw,19px) "DM Sans",Arial,sans-serif;text-decoration:none;box-shadow:0 8px 20px #e6066f2e}
.pbn-btn:hover{background:#c2055e;border-color:#c2055e;color:#fff;text-decoration:none}
.pbn-btn.alt{background:#fff;color:#1d3fbf;border-color:#1d3fbf;box-shadow:none}
.pbn-btn.alt:hover{background:#eef4ff;color:#1d3fbf}
.pbn-btn:focus-visible{outline:3px solid var(--pa);outline-offset:3px}
.pbn-photo{position:relative;z-index:1;align-self:stretch;min-height:100%}
.pbn-photo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%);mask-image:linear-gradient(to right,transparent 0,#000 16%)}
@media (max-width:860px){
  .pbn{grid-template-columns:minmax(0,1fr);margin-top:-22px;min-height:0}
  .pbn-copy{min-width:0;padding:26px 20px 18px}
  .pbn h1,.pbn-text,.pbn-sub{overflow-wrap:break-word}
  .pbn-photo img{position:static;aspect-ratio:4/3;max-height:320px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%);mask-image:linear-gradient(to bottom,transparent 0,#000 12%)}
  .pbn h1{font-size:clamp(30px,8vw,44px)}.pbn-s{font-size:clamp(30px,8vw,42px)}
}
@media (max-width:520px){.pbn-btn{width:100%;justify-content:center}}
/* The For Educators wrapper clips sideways overflow; the page body already does that, so let the banner reach both edges. */
.edu:has(.pbn){overflow-x:visible}
/* The handwritten line wraps like normal text with the heart kept on the last word's line; long lines (Educator Calendar) are smaller. */
.pbn-s{display:block;transform:rotate(-1.5deg)}
.pbn-heart{display:inline-block;vertical-align:-.04em;margin-left:.12em}
.pbn-long .pbn-s{font-size:clamp(28px,3vw,58px)}
.pbn a.pbn-btn,a.pbn-btn{color:#fff}
.pbn a.pbn-btn.alt,a.pbn-btn.alt{color:#1d3fbf}
.edu-inner:has(.edu-crumbs)+.pbn{margin-top:0}