/* ShuleBox landing page in the logo colours: blue, deep blue and green, with the logo's rounded-square motif. */
.sb-home{
  --sb-blue:#0e76bd; --sb-blue-dark:#0b5f9a; --sb-deep:#0b3f6e; --sb-green:#8ec63f; --sb-green-dark:#6c9f27;
  --sb-sky:#eef6fc; --sb-mint:#f2f8ea; --sb-line:#dfeaf4; --sb-ink:#1f2a37; --sb-muted:#4b5866;
}
.sb-home main h1,.sb-home main h2,.sb-home main h3{color:var(--sb-deep)}
.sb-home main p{color:var(--sb-muted)}

/* buttons */
.sb-home .c-button.v--primary{background:var(--sb-blue)!important;border-color:var(--sb-blue)!important;color:#fff!important}
.sb-home .c-button.v--primary:hover,.sb-home .c-button.v--primary:focus{background:var(--sb-deep)!important;border-color:var(--sb-deep)!important}
.sb-home .c-button.v--secondary{background:#fff!important;border:1px solid var(--sb-blue)!important;color:var(--sb-blue)!important;box-shadow:none!important}
.sb-home .c-button.v--secondary:hover,.sb-home .c-button.v--secondary:focus{background:var(--sb-sky)!important;color:var(--sb-deep)!important}
.sb-home .c-button.v--green{background:var(--sb-green)!important;border:1px solid var(--sb-green)!important;color:#fff!important}
.sb-home .c-button.v--green:hover{background:var(--sb-green-dark)!important;border-color:var(--sb-green-dark)!important}
.sb-home .c-button.v--ghost{background:transparent!important;border:1px solid rgba(255,255,255,.75)!important;color:#fff!important}
.sb-home .c-button.v--ghost:hover{background:rgba(255,255,255,.12)!important}

/* square tiles drawn the way the logo is: rounded corners, the "lifted" one tilted */
.sb-tile{position:absolute;border-radius:22%;pointer-events:none}

/* hero */
.sb-home .sn-home-hero{position:relative;overflow:hidden;background:
  radial-gradient(38rem 26rem at 8% 0%,rgba(14,118,189,.10),transparent 70%),
  radial-gradient(34rem 24rem at 100% 100%,rgba(142,198,63,.14),transparent 70%),#fff}
.sb-home .sn-home-hero h1{color:var(--sb-deep)}
.sb-home .sn-home-hero .c-billboard__media{position:relative}
.sb-home .sn-home-hero .sn-hero-media{position:relative;z-index:2;border-radius:18px!important;box-shadow:0 24px 50px rgba(11,63,110,.16)!important;background:#fff}
.sb-home .sn-home-hero .c-billboard__media .sb-tile:nth-of-type(1){width:96px;height:96px;background:var(--sb-green);top:-26px;right:-22px;transform:rotate(14deg);z-index:3}
.sb-home .sn-home-hero .c-billboard__media .sb-tile:nth-of-type(2){width:150px;height:150px;background:var(--sb-blue);bottom:-34px;left:-34px;z-index:1;opacity:.95}
.sb-home .sn-home-hero .c-billboard__media .sb-tile:nth-of-type(3){width:64px;height:64px;background:var(--sb-deep);bottom:46px;left:-70px;z-index:1}

/* schools showcase */
.sb-home .sb-showcase{background:var(--sb-sky);padding:3.5rem 0!important}
.sb-home .sb-showcase h3{color:var(--sb-deep)}
.sb-home .sb-showcase .o-section--feature-companies__logos > div{background:#fff;border:1px solid var(--sb-line);border-radius:14px;padding:1rem;display:flex;align-items:center;justify-content:center;min-height:104px;transition:transform .15s,box-shadow .15s}
.sb-home .sb-showcase .o-section--feature-companies__logos > div:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,63,110,.10)}

/* modules: icon tiles follow the logo's 3x3 colour pattern */
.sb-home .sn-modules .c-feature-grid__item{background:#fff;border:1px solid var(--sb-line);border-radius:16px;padding:1.75rem 1.5rem;transition:border-color .15s,box-shadow .15s,transform .15s}
.sb-home .sn-modules .c-feature-grid__item:hover{border-color:var(--sb-blue);box-shadow:0 14px 30px rgba(11,63,110,.10);transform:translateY(-2px)}
.sb-home .sn-modules .c-feature-grid__item:before,.sb-home .sn-modules .c-feature-grid__item:after{display:none!important}
.sb-home .sn-modules .sn-icon-tile{width:52px;height:52px;border-radius:12px;display:flex!important;align-items:center;justify-content:center;font-size:1.4rem!important;color:#fff!important;background:var(--sb-blue);margin-bottom:1.1rem}
.sb-home .sn-modules .c-feature-grid__item:nth-child(3) .sn-icon-tile,
.sb-home .sn-modules .c-feature-grid__item:nth-child(5) .sn-icon-tile,
.sb-home .sn-modules .c-feature-grid__item:nth-child(7) .sn-icon-tile{background:var(--sb-green)}
.sb-home .sn-modules .c-feature-grid__item:nth-child(4) .sn-icon-tile,
.sb-home .sn-modules .c-feature-grid__item:nth-child(8) .sn-icon-tile{background:var(--sb-deep)}
.sb-home .sn-modules .c-feature-grid__item:nth-child(3) .sn-icon-tile{transform:rotate(-8deg)}
.sb-home .o-section--feature__link{color:var(--sb-blue)!important;font-weight:700}

/* how it works */
.sb-home .sb-steps-section{background:linear-gradient(120deg,var(--sb-mint) 0%,#f7faf3 45%,var(--sb-sky) 100%)!important}
.sb-home .sn-steps .sn-step{border:1px solid var(--sb-line);border-radius:16px;box-shadow:0 8px 22px rgba(11,63,110,.06)}
.sb-home .sn-steps .sn-step:before{border-radius:10px!important;background:var(--sb-blue)!important}
.sb-home .sn-steps .sn-step:nth-child(2):before{background:var(--sb-green)!important}
.sb-home .sn-steps .sn-step:nth-child(3):before{background:var(--sb-deep)!important}

/* online admission band */
.sb-home .sn-admission{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--sb-deep) 0%,#0a5590 60%,var(--sb-blue) 100%)!important}
.sb-home .sn-admission > :not(.sb-tile){position:relative;z-index:1}
.sb-home .sn-admission h2{color:#fff!important}
.sb-home .sn-admission p{color:rgba(255,255,255,.88)!important}
.sb-home .sn-admission .sb-tile:nth-of-type(1){width:120px;height:120px;background:rgba(142,198,63,.9);right:-48px;top:-64px;transform:rotate(14deg);z-index:0}
.sb-home .sn-admission .sb-tile:nth-of-type(2){width:70px;height:70px;background:rgba(255,255,255,.10);right:110px;bottom:-24px;z-index:0}

/* plans */
.sb-home .sn-plan-teaser .sn-plan{position:relative;border:1px solid var(--sb-line);border-radius:16px;overflow:hidden;padding-top:2.1rem}
.sb-home .sn-plan-teaser .sn-plan:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--sb-green)}
.sb-home .sn-plan-teaser .sn-plan:nth-child(2){border-color:var(--sb-blue);box-shadow:0 16px 34px rgba(14,118,189,.14)}
.sb-home .sn-plan-teaser .sn-plan:nth-child(2):before{background:var(--sb-blue)}
.sb-home .sn-plan-teaser .sn-plan:nth-child(3):before{background:var(--sb-deep)}
.sb-home .sn-plan-teaser .sn-plan .sn-price{color:var(--sb-deep)}
.sb-home .sn-plan-teaser .sn-plan a{display:inline-flex;align-items:center;gap:.35rem;color:var(--sb-blue);font-weight:700;text-decoration:none;margin-top:.5rem}
.sb-home .sn-plan-teaser .sn-plan a:after{content:"\2192"}
.sb-home .sn-plan-teaser .sn-plan a:hover{color:var(--sb-deep)}

/* closing call to action */
.sb-home .sn-band{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--sb-blue) 0%,#0a5590 55%,var(--sb-deep) 100%)!important}
.sb-home .sn-band > :not(.sb-tile){position:relative;z-index:1}
.sb-home .sn-band h2{color:#fff!important}
.sb-home .sn-band p{color:rgba(255,255,255,.88)!important}
.sb-home .sn-band .sb-tile:nth-of-type(1){width:110px;height:110px;background:var(--sb-green);left:-56px;bottom:-72px;transform:rotate(-12deg);z-index:0;opacity:.9}
.sb-home .sn-band .sb-tile:nth-of-type(2){width:56px;height:56px;background:rgba(255,255,255,.12);left:96px;top:-18px;z-index:0}

@media (max-width:1023px){
  .sb-home .sn-home-hero .c-billboard__media .sb-tile{display:none}
}
@media (max-width:1023px){.sb-home .sn-modules{grid-gap:1rem!important}}
.sb-home .sn-home-hero{padding-top:6.5rem!important}
