/* Homepage hero (approved banner, 31 Oct): navy / aqua / pink-script headline with two buttons beside the classroom-desk photo, soft aqua and
   pink shapes, then six highlights. Text stays real text; only the photo is an image. */
.hh{--hh-navy:#0b2559;--hh-pink:#e6066f;--hh-cyan:#00b5c8;--hh-cyan-bright:#14cde0;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:center;gap:0;max-width:1440px;margin:0 auto;overflow:hidden;background:#f6fbfe}
/* Brand shapes from the banner: an aqua blob behind the photo's left edge and a pink one in the lower right. */
.hh::before{content:"";position:absolute;left:-90px;bottom:-110px;width:280px;height:220px;border-radius:50%;background:#c9f3f9;z-index:0}
.hh::after{content:"";position:absolute;right:-70px;bottom:-90px;width:230px;height:230px;border-radius:50%;background:var(--hh-pink);opacity:.9;z-index:0}
.hh-copy{position:relative;z-index:1;padding:clamp(28px,4vw,56px) clamp(20px,3vw,40px) clamp(28px,4vw,56px) max(20px,calc((100vw - 1320px)/2 + 20px))}
.hh-eyebrow{margin:0 0 14px;color:var(--hh-navy);font:600 clamp(11px,1.1vw,14px)/1.3 "DM Sans",Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase}
.hh h1{margin:0;display:grid;gap:0;color:var(--hh-navy);line-height:.95}
.hh-l1,.hh-l2{font:400 clamp(44px,5.6vw,88px)/.98 "Anton","Impact","Arial Narrow Bold",sans-serif;text-transform:uppercase;letter-spacing:.005em}
.hh-l1{color:var(--hh-navy)}
.hh-l2{color:var(--hh-cyan-bright)}
.hh-l3{display:inline-flex;align-items:flex-start;gap:6px;margin-top:4px;color:var(--hh-pink);font:400 clamp(40px,5vw,78px)/1.15 "Kaushan Script","Brush Script MT",cursive;transform:rotate(-2deg);transform-origin:left}
.hh-heart{width:.62em;height:.62em;margin-top:.05em;fill:none;stroke:var(--hh-pink);stroke-width:3.2;stroke-linejoin:round}
.hh-text{max-width:600px;margin:18px 0 26px;color:var(--hh-navy);font:400 clamp(16px,1.5vw,21px)/1.5 "DM Sans",Arial,sans-serif}
.hh-buttons{display:flex;flex-wrap:wrap;gap:14px}
.hh-btn{display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:12px 26px;border:2px solid var(--hh-pink);border-radius:14px;background:var(--hh-pink);color:#fff;
  font:700 clamp(17px,1.5vw,21px) "DM Sans",Arial,sans-serif;text-decoration:none;box-shadow:0 8px 20px #e6066f33}
.hh-btn:hover{background:#c2055e;border-color:#c2055e;text-decoration:none;color:#fff}
.hh-btn .ico{width:26px;height:26px;stroke-width:2.2}
.hh-chev{font-size:28px;line-height:1;margin-left:4px}
.hh-btn-outline{background:#fff;color:var(--hh-navy);border-color:var(--hh-navy);box-shadow:none}
.hh-btn-outline:hover{background:#eef4f8;color:var(--hh-navy);border-color:var(--hh-navy)}
.hh-btn:focus-visible{outline:3px solid var(--hh-cyan);outline-offset:3px}
.hh-photo{position:relative;z-index:1;display:block;align-self:stretch;min-height:100%}
.hh-photo img{display:block;width:100%;height:100%;min-height:420px;object-fit:cover;object-position:center;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%);mask-image:linear-gradient(to right,transparent 0,#000 12%)}
.hh-photo.hp-pos-top img{object-position:top}.hh-photo.hp-pos-bottom img{object-position:bottom}
.hh-photo.hp-pos-left img{object-position:left}.hh-photo.hp-pos-right img{object-position:right}
/* Six highlights under the hero. */
.hh-highlights{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));max-width:1320px;margin:0 auto;padding:22px 20px 26px;list-style:none;background:#fff}
.hh-highlights li{display:grid;justify-items:center;align-content:start;gap:6px;padding:4px 14px;text-align:center;color:#0b2559}
.hh-highlights li+li{border-left:1px solid #dfe5ee}
.hh-highlights b{font:700 17px/1.25 "DM Sans",Arial,sans-serif}
.hh-highlights li>span:last-child{color:#2f3f5c;font-size:14.5px;line-height:1.4}
.hh-hl-ico{display:grid;place-items:center;width:64px;height:64px;margin-bottom:6px;border-radius:50%;color:#fff}
.hh-hl-ico.pink{background:#f05a99}.hh-hl-ico.cyan{background:#2bc4d6}
.hh-hl-ico .ico{width:32px;height:32px}
@media (max-width:1100px){.hh-highlights{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:18px}.hh-highlights li:nth-child(4){border-left:0}}
@media (max-width:860px){
  .hh{grid-template-columns:1fr}
  .hh-copy{padding:28px 20px 20px}
  .hh-photo img{min-height:0;aspect-ratio:1088/768;-webkit-mask-image:none;mask-image:none}
  .hh::after{width:150px;height:150px;right:-60px;bottom:-60px}
}
@media (max-width:560px){
  .hh-highlights{grid-template-columns:repeat(2,minmax(0,1fr))}.hh-highlights li{border-left:0!important}
  .hh-btn{width:100%;justify-content:center}
}
/* Sizing: each headline line stays on one line and scales with the column, so the hero stays banner-shaped and the photo isn't over-cropped. */
@media (min-width:861px){.hh{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hh-copy{padding-right:20px}.hh-btn{min-height:54px;padding:10px 18px;font-size:17px;gap:10px}.hh-btn .ico{width:22px;height:22px}.hh-buttons{gap:12px}}
.hh-l1,.hh-l2{white-space:nowrap;font-size:clamp(36px,4.6vw,76px)}
.hh-l3{white-space:nowrap;font-size:clamp(32px,3.9vw,64px)}
.hh-eyebrow{letter-spacing:.18em;font-size:clamp(10px,.95vw,13px)}
@media (min-width:861px){.hh-eyebrow{white-space:nowrap}.hh-photo img{min-height:0;aspect-ratio:1088/768}}
@media (max-width:420px){.hh-l1,.hh-l2{font-size:clamp(30px,10vw,44px)}.hh-l3{font-size:clamp(28px,9vw,40px)}}/* Full width (31 Oct): the hero and highlights run edge to edge like the approved design, breaking out of the page's centred content area
   (1320px with side padding) and up against the navigation bar. The text still lines up with the logo above it. */
body[data-page=home]{overflow-x:clip}
.hh,.hh-highlights{max-width:none;margin-inline:calc(50% - 50vw)}
.hh{margin-top:-28px}
.hh-copy{padding-left:max(24px,calc((100vw - 1320px)/2 + 24px))}
.hh-highlights{padding-inline:max(16px,calc((100vw - 1320px)/2 + 16px));border-bottom:1px solid #e8eef5;margin-bottom:28px}
@media (min-width:861px){.hh{min-height:clamp(460px,38vw,640px)}.hh-photo img{aspect-ratio:auto;height:100%;object-fit:cover;object-position:left center}}
@media (max-width:700px){.hh{margin-top:-22px}.hh-copy{padding-left:20px}}/* Left spacing (31 Oct feedback): like the approved banner, the text sits a short distance from the screen's left edge rather than lining up
   with the centred header, so the hero reads as one wide banner. */
@media (min-width:861px){.hh-copy{padding-left:clamp(28px,4.5vw,90px);padding-right:clamp(16px,2vw,32px)}.hh{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}@media (min-width:861px){
  .hh-l1,.hh-l2{font-size:clamp(40px,5.2vw,108px)}
  .hh-l3{font-size:clamp(34px,4.4vw,90px)}
  .hh-eyebrow{font-size:clamp(11px,.95vw,17px)}
  .hh-text{max-width:min(46vw,760px);font-size:clamp(16px,1.3vw,25px)}
  .hh-btn{font-size:clamp(16px,1.15vw,22px);min-height:clamp(50px,3.4vw,66px)}
}
/* Marketplace benefits as six pastel cards (Nov 2026): alternating pink and aqua, rounded, no divider lines. */
.hh-highlights{gap:14px}
.hh-highlights li{border-left:0!important;padding:18px 12px 20px;border-radius:16px;background:#FFF0F6;border:1px solid #FAD2E4}
.hh-highlights li:nth-child(even){background:#ECFBFC;border-color:#BDEBF0}
.hh-hl-ico{width:58px;height:58px}
@media (max-width:640px){.hh-highlights{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
@media (max-width:380px){.hh-highlights{grid-template-columns:1fr}}