/* One button style across the site — outlined, like “See how it works” */
:root{--tz-btn-bg:#fffdf8;--tz-btn-bg-hover:#ffffff;--tz-btn-ink:#173f2d;--tz-btn-line:#173f2d;--tz-btn-amber:#d5a14b}
#website a.button,#website button.button,#website .gt4-web,#website #bookExplore,
.legal-header .back,.btn{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  min-height:44px!important;height:auto!important;padding:0 20px!important;
  background:var(--tz-btn-bg)!important;color:var(--tz-btn-ink)!important;border:1.5px solid var(--tz-btn-line)!important;border-radius:14px!important;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;font-size:14px!important;font-weight:700!important;letter-spacing:0!important;line-height:1.2!important;text-decoration:none!important;
  box-shadow:3px 3px 0 var(--tz-btn-amber)!important;transform:none;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease!important}
#website a.button:hover,#website button.button:hover,#website .gt4-web:hover,#website #bookExplore:hover,.legal-header .back:hover,.btn:hover{
  background:var(--tz-btn-bg-hover)!important;transform:translate(-1px,-1px)!important;box-shadow:4px 4px 0 var(--tz-btn-amber)!important}
#website a.button:active,#website button.button:active,#website .gt4-web:active,#website #bookExplore:active,.legal-header .back:active,.btn:active{
  transform:translate(2px,2px)!important;box-shadow:1px 1px 0 var(--tz-btn-amber)!important}
#website a.button:focus-visible,#website .gt4-web:focus-visible,#website #bookExplore:focus-visible,.legal-header .back:focus-visible,.btn:focus-visible{outline:3px solid #d5a14b!important;outline-offset:3px!important}
/* Secondary (hero “See how it works”): same shape, outlined */
#website #bookExplore{background:#fffdf8!important;color:#173f2d!important;border:1.5px solid #173f2d!important}
#website #bookExplore:hover{background:#fff!important}
#website #bookExplore::after,#website #bookExplore::before{display:none!important}
/* Get band: web app button matches the others; store badges keep their own look */
#website .gv .gt4-web{min-height:46px!important;font-size:15px!important}
#website .gv .gt4-web::before,#website .gv .gt4-web::after{display:none!important}

/* Bottom brand lines up with the top brand */
@media(min-width:761px){
  #website header,#website section.get4.gv,#website footer{padding-left:max(4%,calc((100vw - 1240px)/2))!important;padding-right:max(4%,calc((100vw - 1240px)/2))!important}
  #website footer::before{left:max(4%,calc((100vw - 1240px)/2))!important;right:max(4%,calc((100vw - 1240px)/2))!important}
  #website .gv .gt4{max-width:none!important;width:100%!important;margin:0!important}
  #website .gv-brand img{width:155px!important;height:62px!important;object-fit:contain!important;object-position:left center!important}
}
html body #website header a.button,html body #website header a.button.small{background:var(--tz-btn-bg)!important;color:var(--tz-btn-ink)!important;border:1.5px solid var(--tz-btn-line)!important;box-shadow:3px 3px 0 var(--tz-btn-amber)!important;border-radius:14px!important;min-height:44px!important;font-size:14px!important}
html body #website header a.button:hover{box-shadow:4px 4px 0 var(--tz-btn-amber)!important;transform:translate(-1px,-1px)!important}
#website a.button span,#website .gt4-web span,.btn span,.legal-header .back span{color:inherit!important;opacity:1!important}

/* Book fits fully on phones */
@media(max-width:760px){#website .book-hero .open-book{left:2%!important;width:96%!important}}

/* Section buttons: filled, picked to stand out from each section's background.
   Top navbar “Start free” and the Get-band “Open the web app” stay outlined. */
html body #website #bookExplore,html body #website a.button.wc-cta,html body #website a.button.pz-cta,.legal-shell .btn,html body main .btn{
  --tz-fill:#173f2d;--tz-fill-hover:#1f5139;--tz-fill-ink:#fff;--tz-fill-shadow:#d5a14b}
html body #website #subjects a.button{--tz-fill:#f2c14e;--tz-fill-hover:#f5cb63;--tz-fill-ink:#173f2d;--tz-fill-shadow:#173f2d}
html body #website #parents a.button{--tz-fill:#c9573a;--tz-fill-hover:#d4664a;--tz-fill-ink:#fff;--tz-fill-shadow:#173f2d}
html body #website #bookExplore,html body #website a.button.wc-cta,html body #website a.button.pz-cta,html body #website #subjects a.button,html body #website #parents a.button,html body main .btn{
  background:var(--tz-fill)!important;color:var(--tz-fill-ink)!important;border:1.5px solid var(--tz-fill)!important;box-shadow:3px 3px 0 var(--tz-fill-shadow)!important}
html body #website #bookExplore:hover,html body #website a.button.wc-cta:hover,html body #website a.button.pz-cta:hover,html body #website #subjects a.button:hover,html body #website #parents a.button:hover,html body main .btn:hover{
  background:var(--tz-fill-hover)!important;border-color:var(--tz-fill-hover)!important;box-shadow:4px 4px 0 var(--tz-fill-shadow)!important}
html body #website #bookExplore:active,html body #website a.button.wc-cta:active,html body #website a.button.pz-cta:active,html body #website #subjects a.button:active,html body #website #parents a.button:active,html body main .btn:active{box-shadow:1px 1px 0 var(--tz-fill-shadow)!important}