html{scroll-behavior:smooth}
body{margin:0;font-family:"Nunito",system-ui,sans-serif;background:#fbf8f1;color:#2b2b2b;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:#2b2b2b}a:hover{color:#2468c9}
:focus-visible{outline:3px solid #2468c9;outline-offset:3px;border-radius:4px}
::selection{background:#ffd23f;color:#2b2b2b}
h1,h2,h3,p{margin:0}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}


/* hover / active states */
.h1:hover{background-size:100% 5px;color:#2b2b2b}
.h2:hover{transform:translate(-1px,-1px);box-shadow:3px 4px 0 #2b2b2b;color:#2b2b2b}
.h3:active{transform:translate(2px,3px);box-shadow:0 0 0 #2b2b2b}
.h4:hover{transform:translate(-2px,-2px);box-shadow:6px 7px 0 #2b2b2b;background:#1c57ab;color:#ffffff}
.h5:active{transform:translate(3px,4px);box-shadow:0 0 0 #2b2b2b}
.h6:hover{transform:rotate(0deg) scale(1.02)}
.h7:hover{transform:rotate(0deg) translateY(-4px)}
.h8:hover{transform:rotate(0deg) translateY(-4px);box-shadow:5px 7px 0 #2b2b2b}
.h9:hover{padding-left:6px;color:#1c57ab}
.h10:hover{transform:rotate(0deg)}

@media (max-width:600px){ body{font-size:16px} }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

.phone-only{display:none}
@media (max-width:640px){ .nav-text{display:none} .phone-only{display:inline} .brand-name{font-size:24px!important} .toc-list{columns:1!important} }
.toc:hover{color:#2468c9;border-bottom-color:#ffd23f}
.feature-trigger:hover{border-bottom-color:#ffd23f}
.feature-robot{height:124px;width:auto;flex-shrink:0;margin-top:22px;animation:bob 3.2s ease-in-out infinite}
@media (max-width:640px){ .feature-robot{height:92px;margin-top:22px} }

/* booking modal: time picker + thank-you robot */
.book-back{align-self:flex-start;min-height:44px;padding:0 4px;border:0;background:none;font-family:Caveat,cursive;font-weight:700;font-size:22px;color:#2468c9;cursor:pointer}
.book-days{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px}
.book-days:empty,.book-times:empty{display:none}
.book-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.book-day,.book-time{min-height:44px;border:2px solid #2b2b2b;border-radius:12px;background:#ffffff;color:#2b2b2b;font-family:Nunito,sans-serif;font-weight:800;font-size:15px;cursor:pointer}
.book-day{flex:0 0 auto;min-width:68px;padding:6px 10px;line-height:1.2}
.book-day:hover,.book-time:hover{background:#fff3a8}
.book-day[aria-pressed="true"],.book-time[aria-pressed="true"]{background:#2468c9;color:#ffffff}
#book-confirm:disabled{background:#d9d4c7;color:#6b6b6b;box-shadow:none;cursor:not-allowed}
.book-robot{height:172px;width:auto;animation:bob 3.2s ease-in-out infinite}

/* workshop: the 5 levels step up like a staircase on wide screens */
.level{display:flex;align-items:center;gap:20px 24px;flex-wrap:wrap;margin-left:calc(var(--step) * 56px)}
.level-badge{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border:2.5px solid #2b2b2b;border-radius:999px;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:30px;flex-shrink:0;box-shadow:2px 3px 0 #2b2b2b}
.level-text{display:flex;flex-direction:column;gap:4px;flex:0 1 480px;min-width:0}
.level-name{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:clamp(21px,2vw,26px);line-height:1.15}
.level-desc{font-size:17px;line-height:1.6;font-weight:600;color:#3d3d3d;font-style:italic}
.level-note{font-family:Caveat,cursive;font-weight:700;font-size:24px;line-height:1.1;color:#2468c9;transform:rotate(-2deg)}
.level-note-hi{color:#2b2b2b;background:#fff3a8;padding:4px 12px}
@media (max-width:900px){ .level{margin-left:calc(var(--step) * 20px)} }
@media (max-width:640px){ .level{margin-left:0;display:grid;grid-template-columns:44px 1fr;align-items:start;gap:6px 18px} .level-badge{width:44px;height:44px;font-size:22px} .level-note{grid-column:2;justify-self:start} .level-arrow{display:inline-block;transform:rotate(90deg)} }
@media (max-width:900px){ .ws-nav{display:none} }