/* wizodd.us additions on top of the template */
.wz-brands li{font-size:1rem;font-weight:500;color:var(--bs-title-color,#fff);opacity:.6;letter-spacing:.02em}
.wz-brands-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1.5rem;text-align:center}
@media(min-width:992px){.wz-brands-grid{grid-template-columns:repeat(5,auto);justify-content:space-between;row-gap:1.5rem;white-space:nowrap}}
.wz-mascot{max-width:360px;display:block;margin:0 auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,.45))}
.wz-mascot-sm{width:180px;height:180px;object-fit:contain}
/* "Text only, no voice" switch: the template keeps Bootstrap's light-theme OFF knob (25% black) on the navy page, so it was invisible */
.form-switch #wz-mute{width:2.25rem;height:1.25rem;margin-top:0;background-color:#1b2538;border-color:rgba(148,163,184,.55);cursor:pointer;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23aab6c8'/%3e%3c/svg%3e")}
.form-switch #wz-mute:checked{background-color:var(--bs-primary,#3b82f6);border-color:var(--bs-primary,#3b82f6);
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e")}
.form-switch #wz-mute:focus{box-shadow:0 0 0 .2rem rgba(59,130,246,.3)}
.form-switch:has(#wz-mute){display:flex;align-items:center;gap:.6rem;padding-left:0}
.form-switch:has(#wz-mute) .form-check-input{float:none;margin-left:0}
.form-switch:has(#wz-mute) .form-check-label{cursor:pointer}
/* the label above each page's first heading sits 40px under the header on every page (owner, 2026-10-15) */
.wz-page-hero.section{padding-top:2.5rem}
@media(min-width:992px){.nk-hero > .nk-hero-content{padding-top:40px !important}
  .nk-hero > .nk-hero-content .row.align-items-center > .col-lg-6:not(.order-lg-last){align-self:flex-start}}   /* home: text anchored to the top, so the label is 40px under the menu at every desktop width (centring against the picture made it 30px on laptops) */
.wz-hero-label{margin-bottom:2.5rem}   /* home label centred on the page above text and picture, like the other pages' labels (owner, 2026-10-15) */
@media(max-width:991.98px){.nk-hero > .nk-hero-content{padding-top:40px !important}}   /* phones/tablets: label first, 40px under the menu, then the picture */
#contact-hero.section,#about-hero.section{padding-bottom:0}   /* page header on the Contact page: was 90px above the label and ~166px under the text */
#contact-hero .section-heading{margin-bottom:1.5rem}
#about-hero .section-heading{margin-bottom:2.5rem}   /* About: page header text to the video ~40px (was 167px), same as Contact's gap to its cards */
#contact-hero .section-heading p,#about-hero .section-heading p{margin-bottom:0}
#about-controls.section{padding-top:4.5rem}   /* video -> this heading was 140px; 72px matches the gap down to The mission */
#about-controls .section-heading{margin-bottom:0}   /* About: the three boxes under this heading were removed; the gap to The mission was ~250px */
#about-mission.section{padding-top:3.5rem}
#about-people.section{padding-bottom:4rem}   /* last section on About now (closing panel removed): ~120px before the footer like the other pages */
#contact-main.section{padding-top:1rem;padding-bottom:4rem}   /* was 120px each (section-xl) under a page hero that already has 90px: too much empty space */
#wizodd.section{padding-top:0;margin-top:3rem;padding-bottom:3rem}
#community.section{padding-top:4rem;padding-bottom:4rem}   /* last section on the home page now: ~120px before the footer, like the other pages */   /* Ask Wizodd -> Community was 140 + 140px of empty space (section-xxl twice); now about 110px */   /* was 140px padding (section-xxl). The Ask Wizodd button lands on the section's top edge, so
   "Meet the mascot" sits right under the header; the gap above it is a MARGIN, outside that edge, so it separates the sections when scrolling but stays out of view on landing */
.has-fixed.is-shrinks .nk-menubar-warper{width:85%}   /* the template shrinks the scrolled header to 70%; five links + Store + Ask Wizodd do not fit in that */
.btn-line-animated.active{--bs-btn-active-color:var(--bs-title)}   /* the template marks links to the current page active (Ask Wizodd on the home page), which turned the text dark navy */
.wz-founder-photo{width:112px;height:112px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.wz-gfx-pad img{padding:1.25rem 1.25rem 0}
.wz-step{max-height:170px;object-fit:contain}
.nk-hero-image img{filter:drop-shadow(0 30px 50px rgba(0,0,0,.5))}
/* Ask the Wizard */
.wz-stage{position:relative;max-width:380px;margin:0 auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,.45))}
.wz-stage svg{width:100%;height:auto;display:block}
.wz-log{min-height:200px;max-height:320px;overflow:auto;display:flex;flex-direction:column;gap:.75rem;padding-right:.25rem}
.wz-msg{max-width:88%;padding:.75rem 1rem;border-radius:1rem;line-height:1.5;white-space:pre-wrap;font-size:.95rem}
.wz-user{align-self:flex-end;background:rgba(255,255,255,.08);color:#fff;border-bottom-right-radius:.25rem}
.wz-wiz{align-self:flex-start;background:#245894;color:#fff;border-bottom-left-radius:.25rem}
.wz-err{align-self:flex-start;background:#5a2020;color:#fff}
.wz-mic{flex-shrink:0;width:3.25rem;height:3.25rem}
.wz-mic.is-on{background:#e03a3a;color:#fff;animation:wz-pulse 1s infinite}
@keyframes wz-pulse{50%{opacity:.6}}
#wz-form .form-control{border-radius:999px}
/* contact form: the field people never see (spam trap) and the line that says what happened */
.wz-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wz-contact-status:empty{display:none}
.wz-contact-status.is-ok{color:#4ade80}
.wz-contact-status.is-err{color:#fca5a5}
/* legal pages */
.nk-entry h5{margin-top:2.5rem}
.nk-entry a{text-decoration:underline}