/* Purchase Portal marketing site
   Page sections keep the design's inline styles; this file holds the shared
   components (header, footer, forms, prose) and the responsive overrides. */

@font-face{font-family:"Clash Display";src:url(/assets/fonts/ClashDisplay-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Clash Display";src:url(/assets/fonts/ClashDisplay-Semibold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Clash Display";src:url(/assets/fonts/ClashDisplay-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Euclid Circular A";src:url(/assets/fonts/EuclidCircularA-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Euclid Circular A";src:url(/assets/fonts/EuclidCircularA-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Euclid Circular A";src:url(/assets/fonts/EuclidCircularA-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* Base */
html,body{margin:0;background:#092F4E}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:"Euclid Circular A","Segoe UI","Helvetica Neue",sans-serif;color:#1A1C1E;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;display:block}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
a{color:#0E4A7C}
a:hover{color:#092F4E}
:focus-visible{outline:3px solid #68BAF6;outline-offset:3px}
[hidden]{display:none !important}
.pp-page{background:#FBFBFB;color:#1A1C1E;font-family:"Euclid Circular A","Segoe UI",sans-serif;position:relative;overflow-x:clip}
.pp-visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[id]{scroll-margin-top:96px}

.pp-skip{position:absolute;left:16px;top:-120px;z-index:100;background:#092F4E;color:#FFFFFF;padding:12px 18px;border-radius:12px;font-weight:600;text-decoration:none}
.pp-skip:focus{top:12px;color:#FFFFFF}

/* Buttons, links, cards */
.pp-btn{transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease}
.pp-btn:hover{transform:translateY(-1px)}
.pp-btn-primary:hover{background-color:#092F4E !important;color:#FFFFFF !important;box-shadow:0 14px 28px -14px rgba(9,47,78,.7)}
.pp-btn-light:hover{background-color:#E3F2FD !important;color:#092F4E !important}
.pp-btn-onDark:hover{background-color:#FFFFFF !important;color:#092F4E !important}
.pp-lift{transition:transform .22s ease,box-shadow .22s ease}
.pp-lift:hover{transform:translateY(-4px);box-shadow:0 32px 64px -32px rgba(9,47,78,.5) !important}
.pp-link{text-decoration:none;font-weight:600}
.pp-link:hover{text-decoration:underline;text-underline-offset:4px}
.pp-faq summary{list-style:none;cursor:pointer}
.pp-faq summary::-webkit-details-marker{display:none}
.pp-faq summary::after{content:"+";font-family:"Clash Display",sans-serif;font-size:24px;line-height:1;color:#0E4A7C;flex:none}
.pp-faq details[open] summary::after{content:"\2212"}

/* Header */
.pp-header{position:sticky;top:0;z-index:50;background:rgba(251,251,251,.94);border-bottom:1px solid #E6EAEF;-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
.pp-header-inner{position:relative;max-width:1240px;margin:0 auto;padding:14px clamp(16px,4vw,24px);display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pp-logo{display:flex;align-items:center;flex:none;border-radius:8px}
.pp-logo img{width:150px;height:auto}
.pp-nav{display:flex;flex-wrap:wrap;gap:2px;flex:1 1 auto;justify-content:center}
.pp-nav a{padding:10px 14px;border-radius:999px;color:#1A1C1E;font-size:15px;font-weight:500;text-decoration:none;transition:background-color .15s ease,color .15s ease}
.pp-nav a:hover{background-color:#E3F2FD;color:#092F4E}
.pp-nav a[aria-current="page"]{background-color:#E3F2FD;color:#092F4E}
.pp-header-cta{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border-radius:999px;background:#0E4A7C;color:#FFFFFF;font-weight:600;font-size:15px;text-decoration:none;flex:none}
.pp-header-cta:hover{color:#FFFFFF}
.pp-header-cta[aria-current="page"]{box-shadow:0 0 0 3px #E3F2FD}
.pp-cta-short{display:none}
.pp-menu-btn{display:none;width:44px;height:44px;flex:none;padding:0;border-radius:12px;border:1.5px solid #C9D6E2;background:#FFFFFF;color:#092F4E;align-items:center;justify-content:center;cursor:pointer}
.pp-menu-btn:hover{background:#E3F2FD}
.pp-menu-btn .pp-icon-close{display:none}
.pp-menu-btn[aria-expanded="true"] .pp-icon-open{display:none}
.pp-menu-btn[aria-expanded="true"] .pp-icon-close{display:block}

@media (max-width:1060px){
  .js .pp-header-inner{flex-wrap:nowrap;gap:10px}
  .js .pp-menu-btn{display:inline-flex;order:3}
  .js .pp-header-cta{order:2;margin-left:auto}
  .js .pp-nav{order:4;display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:4px;padding:12px clamp(16px,4vw,24px) 20px;background:#FBFBFB;border-bottom:1px solid #E6EAEF;box-shadow:0 24px 40px -28px rgba(9,47,78,.45);max-height:calc(100vh - 80px);overflow-y:auto}
  .js .pp-header.is-open .pp-nav{display:flex}
  .js .pp-nav a{padding:14px 16px;font-size:17px;border-radius:14px}
}
@media (max-width:480px){
  .pp-logo img{width:128px}
  .pp-header-cta{height:44px;padding:0 16px;font-size:14px}
  .pp-cta-full{display:none}
  .pp-cta-short{display:inline}
  .pp-header-inner{padding-top:10px;padding-bottom:10px}
}

/* Footer */
.pp-footer{background:#092F4E;color:#C9D6E2}
.pp-footer a{color:#C9D6E2;text-decoration:none}
.pp-footer a:hover{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px}
.pp-footer-inner{max-width:1240px;margin:0 auto;padding:72px clamp(16px,4vw,24px) 36px}
.pp-footer-cols{display:flex;flex-wrap:wrap;gap:40px 48px}
.pp-footer-brand{flex:2 1 280px;display:flex;flex-direction:column;gap:16px;max-width:360px}
.pp-footer-brand img{width:160px;height:auto}
.pp-footer-brand p{margin:0;font-size:15px;line-height:1.6;color:#C9D6E2}
.pp-footer address{font-style:normal;font-size:15px;line-height:1.7;color:#C9D6E2}
.pp-footer-nav{flex:1 1 140px;display:flex;flex-direction:column;gap:12px;font-size:15px}
.pp-footer-nav-legal{flex-basis:160px}
.pp-footer-heading{margin:0 0 4px;color:#FFFFFF;font-weight:600}
.pp-footer-bottom{margin-top:56px;padding-top:24px;border-top:1px solid rgba(201,214,226,.22);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font-size:14px;color:#A9C8E0}
@media (max-width:640px){
  .pp-footer-inner{padding:48px 16px 28px}
  .pp-footer-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .pp-footer-brand{grid-column:1 / -1;max-width:none;gap:14px}
  .pp-footer-brand img{width:150px}
  .pp-footer-bottom{margin-top:32px;padding-top:18px;flex-direction:column;gap:6px;font-size:13px}
}

/* Forms */
.pp-field:focus{border-color:#0E4A7C !important;box-shadow:0 0 0 4px #E3F2FD;outline:none}
.pp-field[aria-invalid="true"]{border-color:#B42318 !important}
.pp-form-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.pp-form-field-full{grid-column:1 / -1}
.pp-field-error{margin:0;font-size:14px;line-height:1.4;font-weight:500;color:#B42318}
.pp-field-error:empty{display:none}
.pp-form-error{grid-column:1 / -1;margin:0;font-size:15px;line-height:1.5;color:#7A1A12}
.pp-form-error:not(:empty){padding:12px 16px;border-radius:14px;background:#FDECEA;border:1px solid #F5C2BC}
.pp-hp{display:none !important}
.pp-form button[type="submit"][disabled]{opacity:.7;cursor:progress;transform:none}
.pp-form button[type="submit"] .pp-sending{display:none}
.pp-form[aria-busy="true"] button[type="submit"] .pp-sending{display:inline}
.pp-form[aria-busy="true"] button[type="submit"] .pp-send{display:none}
.pp-radio{cursor:pointer}
.pp-radio input{width:18px;height:18px;margin:0;accent-color:#0E4A7C}
.pp-radio:has(input:checked){border-color:#0E4A7C !important;background:#E3F2FD}
.pp-radio:has(input:focus-visible){outline:3px solid #68BAF6;outline-offset:2px}
.pp-success:focus{outline:none}
.pp-success h2:focus,.pp-success h3:focus{outline:none}

/* Motion */
@keyframes pp-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pp-track{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pp-pop{0%{transform:scale(.55);opacity:0}65%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}}
.pp-rise{animation:pp-rise .7s cubic-bezier(.2,.7,.2,1) both}
.pp-float{animation:pp-float 7s ease-in-out infinite}
.pp-track-fill{transform-origin:left center;animation:pp-track 3.6s cubic-bezier(.65,0,.35,1) .3s both}
.pp-stop{animation:pp-pop .5s ease both}

/* Prose pages (legal, 404) */
.pp-prose{max-width:760px;margin:0 auto;font-size:17px;line-height:1.7;color:#3D4250}
.pp-prose h1{margin:0 0 12px;font-family:"Clash Display","Segoe UI",sans-serif;font-weight:600;font-size:clamp(36px,5vw,56px);line-height:1.05;letter-spacing:-.02em;color:#092F4E}
.pp-prose h2{margin:44px 0 12px;font-family:"Clash Display","Segoe UI",sans-serif;font-weight:600;font-size:clamp(24px,2.6vw,30px);line-height:1.15;color:#092F4E}
.pp-prose h3{margin:28px 0 8px;font-size:18px;font-weight:600;color:#092F4E}
.pp-prose p,.pp-prose ul{margin:0 0 16px}
.pp-prose ul{padding-left:22px}
.pp-prose li{margin-bottom:8px}
.pp-prose strong{color:#092F4E}
.pp-prose .pp-meta{margin:0 0 32px;font-size:15px;color:#5A6070}

/* Responsive overrides for the design's inline layouts */

/* Home hero collage: positions scale with the container, so the layered
   layout keeps its proportions between 961px and the 1192px design width. */
@media (min-width:961px){
  .pp-collage--home{min-height:0 !important;aspect-ratio:1192 / 700}
  .pp-collage--home > .pp-hide-md:first-child{height:62.857% !important}
  .pp-collage--home > .pp-c-main{left:16.443% !important;width:67.114% !important}
  .pp-collage--home > .pp-c-optional{left:3.356% !important;top:3.429% !important;width:16.779% !important}
  .pp-collage--home > .pp-c-funds{top:54.286% !important;width:33.557% !important}
  .pp-collage--home > .pp-c-activity{top:10.857% !important;width:19.799% !important}
  .pp-collage--home .pp-laptop-base{margin:0 -6% !important}
  .pp-steps{grid-template-columns:repeat(6,minmax(0,1fr)) !important}
  /* Keep the main screenshot in flow so the hero grows with it when the
     collage wraps below the text (about 961px to 1240px). */
  .pp-collage--vendors > .pp-c-main{position:relative !important}
  .pp-collage--teachers > .pp-c-main{position:relative !important;inset:auto !important;margin:30px 90px 0 0 !important}
  .pp-collage--processors > .pp-c-main{position:relative !important;inset:auto !important;margin:0 40px 0 0 !important}
}

@media (min-width:961px) and (max-width:1240px){
  .pp-collage--home > .pp-c-activity > figcaption{left:auto !important;right:10px !important}
}

/* Four-item grids: 4 across, then 2 by 2, then 1 column */
@media (max-width:1147px){
  .pp-grid-4{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:580px){
  .pp-grid-4{grid-template-columns:minmax(0,1fr) !important}
}
@media (min-width:641px) and (max-width:960px){
  .pp-steps{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
}
@media (max-width:960px){
  .pp-hide-md{display:none !important}
  .pp-track{display:none !important}
  .pp-lane-grid{display:flex !important;flex-direction:column;gap:12px}
  .pp-lane-label{display:none !important}

  /* Hero collages: the main screenshot goes full width and the inset overlaps
     its lower corner, keeping the layered look of the desktop layout. */
  .pp-collage{min-height:0 !important;display:flex !important;flex-direction:column;gap:0}
  .pp-collage > *{position:relative !important;inset:auto !important;width:100% !important;max-width:none !important;transform:none !important;animation:none !important}
  .pp-collage > .pp-c-inset{align-self:flex-end;z-index:1}
  .pp-collage--teachers > .pp-c-inset{width:34% !important;max-width:240px !important;margin-top:-20% !important;margin-right:-4px !important}
  .pp-collage--processors > .pp-c-inset{width:58% !important;max-width:380px !important;margin-top:-16% !important;margin-right:-4px !important}
  .pp-collage--parents > .pp-c-phone{width:56% !important;max-width:272px !important;align-self:flex-end;margin-right:6% !important}
  .pp-collage--parents > .pp-c-inset{align-self:flex-start;width:80% !important;max-width:440px !important;margin-top:-30% !important}

  /* Home: laptop on top, then the parent and teacher cards side by side on a navy panel */
  .pp-collage--home{display:grid !important;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;align-items:start;padding:0 14px 24px}
  .pp-collage--home::before{content:"";position:absolute;left:0;right:0;top:34%;bottom:0;border-radius:28px;background:#092F4E}
  .pp-collage--home > .pp-c-main{grid-column:1 / -1;margin:0 -14px 6px !important;width:auto !important}
  .pp-collage--home > .pp-c-optional{display:none !important}
  .pp-collage--home > .pp-c-inset{align-self:start}
  .pp-collage--home > .pp-c-activity{height:clamp(200px,32vw,300px);overflow:hidden}
  .pp-collage--home > .pp-c-activity > figcaption{top:8px !important;left:8px !important}
  .pp-laptop-base{margin:0 -14px !important;height:10px !important}
}
@media (max-width:640px){
  .pp-hide-sm{display:none !important}
  .pp-stack-sm{flex-direction:column !important;align-items:stretch !important}
  .pp-collage--home{gap:12px;padding:0 10px 20px}
  .pp-collage--home > .pp-c-main{margin:0 -10px 4px !important}
  .pp-collage--home::before{top:40%;border-radius:22px}

  .pp-collage .pp-cap-extra{display:none}

  /* Request lifecycle as a vertical timeline */
  .pp-steps{display:flex !important;flex-direction:column;gap:0 !important}
  .pp-steps > li{display:grid !important;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:6px !important;align-items:start;padding-bottom:24px;position:relative}
  .pp-steps > li > :first-child{grid-row:1 / span 3;width:44px !important;height:44px !important;font-size:17px !important;box-shadow:none !important}
  .pp-steps > li > :not(:first-child){grid-column:2}
  .pp-steps > li > :last-child{justify-self:start}
  .pp-steps > li > strong{font-size:19px !important;padding-top:9px}
  .pp-steps > li::before{content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:#D3E2EF}
  .pp-steps > li:last-child{padding-bottom:0}
  .pp-steps > li:last-child::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}