/* Dakota STEAM Learning: design system
   Brand: orange #EF7125 · teal #1F8E8E · aqua #75D7D6 · cream #FFF1D4 · logo yellow + mint
   Type: Jost (UI) + Caveat Brush (hand-lettered accents), the same pair as their WordPress site. */

:root {
  --orange: #EF7125; --orange-d: #D65A10; --orange-l: #FFE6D4;
  --teal: #1F8E8E; --teal-d: #0F4D4E; --teal-dd: #0A3536; --aqua: #75D7D6; --aqua-l: #DDF5F3;
  --sun: #F6C944; --sun-l: #FFF3C7; --mint: #8FDDA0; --mint-l: #E2F7E6; --coral: #E2604A;
  --cream: #FFF8EC; --cream-2: #FFF1D4; --paper: #FFFDF8;
  --ink: #14302F; --ink-2: #3D5655; --muted: #6A7E7D; --line: #EADFC9; --line-2: #F2EADB;
  --white: #fff;
  --r-sm: 10px; --r: 18px; --r-lg: 28px; --r-xl: 40px;
  --sh-1: 0 1px 2px rgba(20,48,47,.06), 0 2px 8px rgba(20,48,47,.05);
  --sh-2: 0 6px 20px rgba(20,48,47,.08), 0 2px 6px rgba(20,48,47,.05);
  --sh-3: 0 24px 60px -12px rgba(15,77,78,.28), 0 8px 20px rgba(15,77,78,.08);
  --sh-pop: 0 4px 0 var(--orange-d);
  --ease: cubic-bezier(.2,.8,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --font: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --brush: 'Caveat Brush', 'Jost', cursive;
  --wrap: 1240px;
  color-scheme: light;
}

@view-transition { navigation: auto; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.015em; font-weight: 800; }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 999; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.wrap.narrow { --wrap: 820px; }
.center { text-align: center; }
.ic { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.ic.flip { transform: scaleX(-1); }
.brush { font-family: var(--brush); font-weight: 400; color: var(--orange); letter-spacing: 0; display: inline-block; transform: rotate(-2deg); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin: 0 0 12px; }
.eyebrow.light { color: var(--aqua); }
.h2 { font-size: clamp(30px, 4.2vw, 48px); }
.lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-2); max-width: 60ch; }
.section { padding: clamp(64px, 9vw, 112px) 0; position: relative; }
.section.tint { background: var(--cream); }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 36px; flex-wrap: wrap; }
.sec-head.center { justify-content: center; text-align: center; }
.sec-head .h2 { margin: 0; }
.sec-lede { color: var(--ink-2); max-width: 70ch; margin: -16px 0 28px; }
.more { font-weight: 700; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.more:hover .ic { transform: translateX(4px); }
.more .ic { transition: transform .25s var(--ease); }

/* ---------- buttons ---------- */
.btn { --bg: var(--white); --fg: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 24px; border-radius: 999px; border: 2px solid transparent; background: var(--bg); color: var(--fg); font-weight: 700; font-size: 16px; text-decoration: none; line-height: 1; transition: transform .2s var(--spring), box-shadow .2s var(--ease), background .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn-primary { --bg: var(--orange); --fg: #fff; box-shadow: var(--sh-pop), 0 10px 24px -8px rgba(239,113,37,.55); }
.btn-primary:hover { box-shadow: 0 6px 0 var(--orange-d), 0 16px 30px -10px rgba(239,113,37,.6); }
.btn-primary:active { box-shadow: 0 1px 0 var(--orange-d); }
.btn-sun { --bg: var(--sun); --fg: var(--teal-dd); box-shadow: 0 4px 0 #C99A16; }
.btn-ghost { --bg: transparent; --fg: var(--teal-d); border-color: currentColor; }
.btn-ghost:hover { --bg: var(--aqua-l); }
.btn-sm { padding: 10px 16px; font-size: 14.5px; }
.btn-lg { padding: 18px 28px; font-size: 17px; }
.btn-block { width: 100%; }
.btn-icon { width: 58px; height: 58px; padding: 0; border-color: var(--line); background: #fff; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent; color: inherit; position: relative; transition: background .2s; text-decoration: none; }
.icon-btn:hover { background: rgba(31,142,142,.1); }
.icon-btn .ic { width: 22px; height: 22px; }
.link-btn { border: 0; background: none; color: var(--teal); font-weight: 700; padding: 0; display: inline-flex; gap: 6px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.18); font-weight: 700; font-size: 14px; }
.pill-sun { background: var(--sun); color: var(--teal-dd); }
.pill-glass { background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.25); }
.badge { position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; }
.badge.bump { animation: bump .5s var(--spring); }
@keyframes bump { 40% { transform: scale(1.5); } }
kbd { font-family: inherit; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); background: var(--cream); color: var(--muted); }

/* ---------- header ---------- */
.promo { position: relative; overflow: hidden; background: #ED7128; color: #fff; text-align: center; font-size: 15px; padding: 11px 16px; font-weight: 600; text-shadow: 0 1px 2px rgba(120,40,0,.25); isolation: isolate; }
/* The client's own fall leaves (fallbanner from their WP top bar), pinned to each edge. */
.promo::before, .promo::after { content: ''; position: absolute; top: -6px; bottom: -6px; width: 340px; background: no-repeat center / auto 100%; z-index: -1; transform-origin: 50% 0; animation: leafsway 6s ease-in-out infinite; }
.promo::before { left: 0; background-image: url(/img/site/leaves-left.webp); background-position: left center; }
.promo::after { right: 0; background-image: url(/img/site/leaves-right.webp); background-position: right center; animation-delay: -3s; }
@keyframes leafsway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(1.5deg) translateY(1px); } }
.promo .ic { color: #FFE08A; }
.promo-code { border: 1.5px dashed #fff; background: rgba(255,255,255,.14); color: #fff; font-weight: 800; letter-spacing: .06em; padding: 2px 10px; border-radius: 7px; margin: 0 3px; transition: background .2s; }
.promo-code:hover { background: rgba(255,255,255,.28); }
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(255,253,248,.82); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.hdr.scrolled { border-color: var(--line-2); box-shadow: 0 8px 30px -18px rgba(20,48,47,.25); }
.hdr-in { width: min(100% - 32px, 1320px); margin: 0 auto; display: flex; align-items: center; gap: 18px; height: 78px; }
.logo img { height: 58px; width: auto; transition: transform .3s var(--spring); }
.logo:hover img { transform: rotate(-3deg) scale(1.04); }
.nav { flex: 1; }
.nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; justify-content: center; }
.nav-link { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; border-radius: 999px; font-weight: 600; color: var(--ink); text-decoration: none; font-size: 16px; transition: background .2s, color .2s; }
.nav-link .ic { width: 16px; height: 16px; transition: transform .25s; }
.nav-link:hover, .nav-link.is-active { background: var(--aqua-l); color: var(--teal-d); }
.has-mega { position: relative; }
.has-mega:hover .nav-link .ic, .has-mega:focus-within .nav-link .ic { transform: rotate(180deg); }
.mega { position: absolute; top: 100%; left: 50%; translate: -50% 8px; opacity: 0; visibility: hidden; transition: opacity .2s, translate .25s var(--ease), visibility .2s; padding-top: 10px; }
.has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; translate: -50% 0; }
.mega-in { display: flex; gap: 36px; background: #fff; border-radius: var(--r); padding: 26px 30px; box-shadow: var(--sh-3); border: 1px solid var(--line-2); }
.mega-in > div { display: flex; flex-direction: column; min-width: 160px; }
.mega-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--orange); margin: 0 0 8px; }
.mega a { color: var(--ink); text-decoration: none; padding: 6px 0; font-weight: 500; white-space: nowrap; transition: color .15s, transform .15s; }
.mega a:hover { color: var(--teal); transform: translateX(3px); }
.hdr-tools { display: flex; align-items: center; gap: 4px; }
.search-trigger { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 16px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: 15px; transition: border-color .2s, box-shadow .2s; margin-right: 6px; }
.search-trigger:hover { border-color: var(--aqua); box-shadow: 0 0 0 4px var(--aqua-l); }
.search-trigger .ic { color: var(--teal); }
.only-m { display: none !important; }

.mnav { position: fixed; inset: 0; z-index: 90; background: rgba(10,53,54,.45); backdrop-filter: blur(4px); }
.mnav-panel { position: absolute; inset: 0 auto 0 0; width: min(88vw, 380px); background: var(--paper); padding: 16px 20px 24px; overflow-y: auto; animation: slideIn .35s var(--ease); display: flex; flex-direction: column; }
@keyframes slideIn { from { transform: translateX(-100%); } }
.mnav-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mnav-top img { height: 56px; width: auto; }
.mnav details { border-bottom: 1px solid var(--line-2); }
.mnav summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 4px; font-weight: 700; font-size: 19px; cursor: pointer; }
.mnav summary::-webkit-details-marker { display: none; }
.mnav summary a { color: inherit; text-decoration: none; flex: 1; }
.mnav details[open] summary .ic { transform: rotate(180deg); }
.mnav details > a { display: block; padding: 9px 12px; color: var(--ink-2); text-decoration: none; font-weight: 500; }
.mnav details > a:last-child { margin-bottom: 12px; }
.mnav-foot { margin-top: auto; padding-top: 24px; display: grid; gap: 10px; }

/* ---------- graph-paper backdrop (from their product art) ---------- */
.grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 85%); pointer-events: none; }

/* ---------- hero ---------- */
.hero { position: relative; background: radial-gradient(1200px 600px at 75% 30%, #1A7576 0%, var(--teal-d) 45%, var(--teal-dd) 100%); color: #fff; overflow: hidden; padding: clamp(40px, 6vw, 72px) 0 clamp(90px, 9vw, 130px); isolation: isolate; }
.hero-glow { position: absolute; width: 640px; height: 640px; right: 4%; top: -10%; background: radial-gradient(circle, rgba(117,215,214,.35), transparent 60%); filter: blur(10px); z-index: -1; animation: breathe 8s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .7; } }
.hero-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; position: relative; z-index: 2; }
.hero h1 { font-size: clamp(42px, 6.4vw, 82px); line-height: 1.02; letter-spacing: -.03em; margin-bottom: 22px; }
.hero h1 .brush { color: var(--sun); font-size: 1.12em; line-height: .8; position: relative; }
.hero h1 .brush::after { content: ''; position: absolute; left: 2%; right: 0; bottom: -.04em; height: .16em; background: var(--orange); border-radius: 99px; transform: scaleX(0); transform-origin: left; animation: underline .9s .6s var(--ease) forwards; z-index: -1; opacity: .9; }
@keyframes underline { to { transform: scaleX(1); } }
.hero .lede { color: #CDEDEC; margin-bottom: 30px; }
.hero-search { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 7px 7px 7px 22px; box-shadow: 0 20px 50px -15px rgba(0,0,0,.45), 0 0 0 6px rgba(255,255,255,.08); max-width: 600px; color: var(--ink); transition: box-shadow .3s; }
.hero-search:focus-within { box-shadow: 0 20px 50px -15px rgba(0,0,0,.45), 0 0 0 6px rgba(246,201,68,.5); }
.hero-search > .ic { color: var(--teal); width: 24px; height: 24px; }
.hero-search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 18px; min-width: 0; padding: 10px 0; }
.grade-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; }
.grade-chips a { color: #fff; text-decoration: none; font-weight: 600; font-size: 14.5px; padding: 7px 15px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); transition: background .2s, transform .2s var(--spring); }
.grade-chips a:hover { background: var(--sun); color: var(--teal-dd); transform: translateY(-2px); border-color: var(--sun); }
.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 0; color: #BFE6E5; font-size: 15px; font-weight: 500; }
.hero-trust .ic { color: var(--sun); margin-right: 4px; }
.hero-wave { position: absolute; bottom: -1px; left: 0; right: 0; height: 70px; color: var(--paper); z-index: 3; }
.hero-wave svg { width: 100%; height: 100%; display: block; }

.hero-stage { position: relative; height: 560px; perspective: 1400px; }
.orbit { position: absolute; left: 50%; top: 46%; width: 0; height: 0; transform-style: preserve-3d; animation: orbit 46s linear infinite; transform: rotateX(-8deg); }
@keyframes orbit { from { transform: rotateX(-8deg) rotateY(0); } to { transform: rotateX(-8deg) rotateY(360deg); } }
.orbit-card { position: absolute; width: 168px; height: 168px; left: -84px; top: -84px; border-radius: 22px; overflow: hidden; box-shadow: 0 20px 40px -10px rgba(0,0,0,.5); transform: rotateY(calc(360deg / var(--n) * var(--i))) translateZ(300px); border: 4px solid #fff; background: #fff; backface-visibility: hidden; }
.orbit-card img { width: 100%; height: 100%; object-fit: cover; }
.scout-hero { position: absolute; left: 50%; bottom: -10px; translate: -50% 0; width: 300px; z-index: 5; transform-origin: bottom center; animation: bob 4.5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-12px) rotate(1deg); } }
/* Hero Scout puppet: the client's art cut into layers (tools/make-scout-rig.py), animated in public/js/scout-rig.js. */
.scout-hero:has(.rig) { animation: none; }
.rig { position: relative; aspect-ratio: 586 / 1000; filter: drop-shadow(0 24px 30px rgba(0,0,0,.35)); cursor: pointer; transform-origin: 50% 100%; animation: breathe-rig 3.6s ease-in-out infinite; }
@keyframes breathe-rig { 50% { transform: scale(1.012, .992); } }
.rig img, .rig .part { position: absolute; inset: 0; width: 100%; height: 100%; }
.rig .part > img, .rig .p-head-in { transform-origin: inherit; }
.p-tail { transform-origin: 66% 79%; animation: tail-sway 3.4s ease-in-out infinite alternate; }
.p-tail img { transform-origin: 66% 79%; }
@keyframes tail-sway { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
.p-arm, .p-arm img { transform-origin: 20.5% 54%; }
.p-arm { animation: arm-idle 4s ease-in-out infinite alternate; }
@keyframes arm-idle { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
.p-head, .p-head-in { transform-origin: 44% 40%; }
.p-head { animation: head-idle 5s ease-in-out infinite alternate; }
@keyframes head-idle { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg) translateY(-2px); } }
.p-head-in { position: absolute; inset: 0; }
.p-ear-l, .p-ear-l img { transform-origin: 27.5% 17%; }
.p-ear-r, .p-ear-r img { transform-origin: 67.5% 17%; }
.lid { opacity: 0; }
.rig.blinking .lid-blink { opacity: 1; }
.rig.is-happy .lid-happy { opacity: 1; }
.rig.is-happy .lid-blink { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .rig, .rig .part { animation: none !important; } }
.bubble { position: absolute; right: -150px; top: 30px; background: #fff; color: var(--ink); border: 0; padding: 14px 18px; border-radius: 22px 22px 22px 6px; font-size: 15.5px; line-height: 1.3; text-align: left; box-shadow: var(--sh-3); animation: pop .6s 1.2s var(--spring) both; transition: transform .25s var(--spring); }
.bubble b { color: var(--orange); font-size: 19px; }
.bubble .ic { color: var(--teal); margin-left: 4px; }
.bubble:hover { transform: scale(1.06) rotate(-2deg); }
@keyframes pop { from { opacity: 0; transform: scale(.3) translateY(20px); } }
.floats { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.float { position: absolute; width: 70px; opacity: .9; transition: transform .6s var(--ease); filter: drop-shadow(0 10px 18px rgba(0,0,0,.25)); }
.float svg { width: 100%; height: auto; animation: drift 9s ease-in-out infinite; }
.f-atom { left: 3%; top: 14%; width: 64px; } .f-atom svg { animation-delay: -2s; }
.f-rocket { right: 6%; top: 8%; width: 76px; } .f-rocket svg { animation-duration: 7s; }
.f-gear { left: 44%; top: 6%; width: 54px; } .f-gear svg { animation: spin 18s linear infinite; }
.f-palette { right: 2%; bottom: 22%; width: 80px; } .f-palette svg { animation-delay: -4s; }
.f-compass { left: 46%; bottom: 14%; width: 56px; } .f-compass svg { animation-delay: -6s; }
.f-ruler { left: 6%; bottom: 12%; width: 84px; } .f-ruler svg { animation-delay: -3s; }
@keyframes drift { 50% { transform: translateY(-16px) rotate(8deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- stats ---------- */
.stats { padding: 18px 0 0; }
.stats-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); padding: 20px 22px; box-shadow: var(--sh-1); display: flex; flex-direction: column; }
.stat b { font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; color: var(--teal-d); line-height: 1; letter-spacing: -.03em; }
.stat:nth-child(2) b { color: var(--orange); } .stat:nth-child(3) b { color: #C99A16; } .stat:nth-child(4) b { color: #3FA35D; }
.stat span { color: var(--muted); font-weight: 500; font-size: 15px; margin-top: 6px; }

/* ---------- grade tiles ---------- */
.grades { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.grade-tile { --c: var(--teal); position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1 / 1.08; padding: 18px; border-radius: var(--r-lg); background: var(--c); color: #fff; text-decoration: none; overflow: hidden; border: 0; text-align: left; isolation: isolate; transition: transform .35s var(--spring), box-shadow .3s; box-shadow: 0 10px 24px -12px var(--c); }
.grade-tile::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 18px 18px; z-index: -1; opacity: .7; }
.grade-tile:hover { transform: translateY(-6px) rotate(-1.5deg); box-shadow: 0 22px 40px -14px var(--c); }
.grade-big { font-family: var(--brush); font-size: clamp(64px, 7vw, 96px); line-height: .9; text-shadow: 0 4px 0 rgba(0,0,0,.12); }
.grade-name { font-weight: 800; font-size: 18px; }
.grade-n { font-size: 14px; opacity: .9; display: flex; align-items: center; gap: 6px; }
.grade-tile:hover .grade-n .ic { transform: translateX(4px); }
.grade-n .ic { transition: transform .25s; }
.grades-sm { margin-bottom: 30px; }
.grades-sm .grade-tile { aspect-ratio: auto; padding: 14px 16px; flex-direction: row; align-items: center; gap: 12px; justify-content: flex-start; }
.grades-sm .grade-big { font-size: 46px; }
.grades-sm .grade-tile.is-on { outline: 4px solid var(--ink); outline-offset: 3px; }

/* ---------- cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 22px; }
.card { position: relative; background: #fff; border-radius: var(--r); border: 1px solid var(--line-2); overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--spring), box-shadow .3s var(--ease), border-color .3s; }
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: transparent; }
.card-media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--cream); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .4s; }
.card-alt { position: absolute; inset: 0; opacity: 0; }
.card:hover .card-media img { transform: scale(1.05); }
.card:hover .card-alt { opacity: 1; }
.ribbon { position: absolute; left: 12px; top: 12px; background: var(--mint); color: var(--teal-dd); font-size: 12px; font-weight: 800; padding: 5px 11px; border-radius: 99px; letter-spacing: .02em; box-shadow: var(--sh-1); }
.ribbon-hot { background: var(--orange); color: #fff; }
.heart { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--ink-2); box-shadow: var(--sh-1); transition: transform .3s var(--spring), color .2s; z-index: 2; }
.heart .ic { width: 20px; height: 20px; }
.heart:hover { transform: scale(1.12); color: var(--coral); }
.heart[aria-pressed="true"], .heart-lg[aria-pressed="true"] { color: var(--coral); }
.heart[aria-pressed="true"] .ic, .heart-lg[aria-pressed="true"] .ic { fill: currentColor; }
.heart.pulse, .heart-lg.pulse { animation: heartpop .5s var(--spring); }
@keyframes heartpop { 40% { transform: scale(1.4); } }
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.card-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 600; }
.subj { font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 99px; text-transform: uppercase; letter-spacing: .05em; }
.subj-engineering { background: var(--sun-l); color: #8A6400; }
.subj-art { background: var(--mint-l); color: #24733E; }
.subj-science { background: var(--aqua-l); color: var(--teal-d); }
.subj-math { background: var(--orange-l); color: #A3460B; }
.subj-steam { background: var(--orange-l); color: #A3460B; }
.card-title { font-size: 18.5px; margin: 10px 0 6px; font-weight: 700; line-height: 1.22; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card-rating { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }
.card-fmts { display: flex; gap: 5px; margin: 4px 0 12px; flex-wrap: wrap; }
.fd { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--cream); color: var(--ink-2); border: 1px solid var(--line-2); }
.fd.soon { opacity: .45; text-decoration: line-through; }
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.price { font-weight: 800; font-size: 20px; color: var(--ink); }
.price small { font-size: 12px; font-weight: 600; color: var(--muted); }
.price em { font-style: normal; font-size: 14px; color: var(--muted); font-weight: 600; }
.quick-add { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px 8px 10px; border-radius: 99px; border: 0; background: var(--teal); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; transition: background .2s, transform .25s var(--spring); }
.quick-add:hover { background: var(--orange); transform: scale(1.06); }
.quick-add.ghost { background: var(--cream); color: var(--ink-2); padding: 8px 14px; }
.quick-add.added { background: #3FA35D; }

.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 22px; margin: -6px -4px 0; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 1100px) { .rail { grid-auto-columns: calc((100% - 60px) / 4); } }
.rail-ctrl { display: flex; gap: 8px; }
.rail-ctrl .icon-btn { border: 1.5px solid var(--line); background: #fff; }
.rail-ctrl .icon-btn:hover { border-color: var(--teal); }

/* ---------- stars ---------- */
.stars { display: inline-flex; gap: 1px; color: #D9CFBD; }
.st .ic { width: 16px; height: 16px; }
.st.on { color: #F2A516; } .st.on .ic { fill: currentColor; }
.st.half { color: #F2A516; } .st.half .ic { fill: currentColor; opacity: .55; }
.stars.lg .ic { width: 24px; height: 24px; }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 18px; }
.bento-tile { position: relative; border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: #fff; isolation: isolate; transition: transform .4s var(--spring), box-shadow .3s; }
.bento-tile:hover { transform: translateY(-5px); box-shadow: var(--sh-3); }
.bento-tile.big { grid-column: span 2; grid-row: span 2; padding: 34px; display: flex; flex-direction: column; justify-content: space-between; }
.subj-eng-bg { background: linear-gradient(145deg, #F6C944, #EF9A25); color: var(--teal-dd); }
.subj-art-bg { background: linear-gradient(145deg, #1F8E8E, #0F4D4E); }
.subj-eng-bg .eyebrow { color: var(--teal-dd); opacity: .7; }
.bento-copy { position: relative; z-index: 2; max-width: 330px; }
.bento-copy h3 { font-size: clamp(26px, 2.6vw, 34px); }
.bento-copy .pill { background: rgba(255,255,255,.25); margin-top: 6px; }
.subj-eng-bg .pill { background: var(--teal-dd); color: #fff; }
.bento-stack { position: absolute; right: -20px; bottom: -30px; width: 58%; height: 70%; }
.bento-stack img { position: absolute; width: 62%; border-radius: 18px; box-shadow: 0 18px 30px -10px rgba(0,0,0,.4); border: 4px solid #fff; transition: transform .6s var(--spring); }
.bento-stack img:nth-child(1) { right: 40%; bottom: 10%; transform: rotate(-12deg); }
.bento-stack img:nth-child(2) { right: 16%; bottom: 24%; transform: rotate(4deg); z-index: 2; }
.bento-stack img:nth-child(3) { right: -4%; bottom: 4%; transform: rotate(14deg); }
.bento-tile:hover .bento-stack img:nth-child(1) { transform: rotate(-18deg) translate(-12px, -6px); }
.bento-tile:hover .bento-stack img:nth-child(3) { transform: rotate(20deg) translate(10px, -4px); }
.bento-tile.theme { background: var(--c); display: flex; flex-direction: column; }
.theme-pics { flex: 1; position: relative; }
.theme-pics img { position: absolute; width: 58%; border-radius: 14px; border: 3px solid #fff; box-shadow: 0 12px 24px -8px rgba(0,0,0,.35); transition: transform .5s var(--spring); }
.theme-pics img:nth-child(1) { left: 8%; top: 14px; transform: rotate(-7deg); }
.theme-pics img:nth-child(2) { right: 6%; top: 26px; transform: rotate(6deg); }
.bento-tile.theme:hover .theme-pics img:nth-child(1) { transform: rotate(-12deg) translate(-6px, -6px); }
.bento-tile.theme:hover .theme-pics img:nth-child(2) { transform: rotate(11deg) translate(6px, -6px); }
.bento-label { position: relative; z-index: 2; background: #fff; color: var(--ink); padding: 14px 18px; margin: 0 10px 10px; border-radius: 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bento-label h3 { font-size: 17px; margin: 0; line-height: 1.2; }
.bento-label span { font-size: 13px; font-weight: 700; color: var(--teal); display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }

/* ---------- formats ---------- */
.formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.format-card { background: #fff; border-radius: var(--r-lg); padding: 32px 28px; border: 1px solid var(--line-2); position: relative; overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--spring), box-shadow .3s; }
.format-card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
.format-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--accent); }
.fc-digital { --accent: var(--teal); --soft: var(--aqua-l); }
.fc-mini { --accent: var(--orange); --soft: var(--orange-l); }
.fc-kit { --accent: #3FA35D; --soft: var(--mint-l); }
.format-ic { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: var(--soft); color: var(--accent); margin-bottom: 18px; }
.format-ic .ic { width: 28px; height: 28px; }
.format-card h3 { font-size: 24px; margin-bottom: 4px; }
.format-price { font-size: 26px; font-weight: 800; color: var(--accent); margin-bottom: 12px; }
.format-price span { font-size: 15px; color: var(--muted); font-weight: 600; }
.format-card ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.format-card li { display: flex; gap: 10px; font-size: 15.5px; color: var(--ink-2); }
.format-card li .ic { color: var(--accent); margin-top: 3px; }
.format-card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- membership band ---------- */
.member-sec { background: linear-gradient(135deg, var(--teal-dd), #145E5F); color: #fff; overflow: hidden; }
.member-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; position: relative; }
.member-copy p { color: #CDEDEC; font-size: 18px; max-width: 46ch; }
.member-copy .brush { color: var(--sun); display: block; margin-top: 6px; }
.member-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: center; }
.mini-plan { position: relative; display: flex; flex-direction: column; gap: 4px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-lg); padding: 26px 20px; color: #fff; text-decoration: none; backdrop-filter: blur(8px); transition: transform .35s var(--spring), background .3s; }
.mini-plan:hover { transform: translateY(-6px); background: rgba(255,255,255,.14); }
.mini-plan.pop { background: #fff; color: var(--ink); transform: scale(1.06); box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); }
.mini-plan.pop:hover { transform: scale(1.06) translateY(-6px); }
.mini-plan b { font-size: 20px; }
.mp-price { font-size: 36px; font-weight: 800; letter-spacing: -.03em; }
.mp-price small { font-size: 15px; font-weight: 600; opacity: .7; }
.mp-picks { font-weight: 600; }
.mp-save { font-size: 13px; color: var(--sun); font-weight: 700; margin-top: 6px; }
.mini-plan.pop .mp-save { color: var(--orange-d); }
.tag { position: absolute; top: -12px; left: 50%; translate: -50% 0; background: var(--orange); color: #fff; font-size: 12px; font-weight: 800; padding: 5px 12px; border-radius: 99px; white-space: nowrap; letter-spacing: .03em; }

/* ---------- bundles ---------- */
.bundles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bundle-card { background: #fff; border-radius: var(--r); border: 1px solid var(--line-2); overflow: hidden; display: flex; flex-direction: column; transition: transform .35s var(--spring), box-shadow .3s; }
.bundle-card:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.bundle-media img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.bundle-body { padding: 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.bundle-body .eyebrow { margin: 0; font-size: 11.5px; }
.bundle-body h3 { font-size: 16px; margin: 0; } .bundle-body h3 a { color: var(--ink); text-decoration: none; }
.bundle-price { font-weight: 800; font-size: 20px; margin: 4px 0 10px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.bundle-price s { color: var(--muted); font-weight: 500; font-size: 15px; }
.bundle-price.lg { font-size: 34px; }
.save { font-size: 12px; background: var(--mint-l); color: #24733E; padding: 3px 9px; border-radius: 99px; font-weight: 800; }
.bundle-body .btn { margin-top: auto; }
.bundles-lg { grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ---------- free lessons ---------- */
.free-sec { background: linear-gradient(180deg, var(--paper), var(--sun-l)); }
.free-in { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.free-art { position: relative; height: 440px; }
.free-art img { position: absolute; width: 56%; border-radius: 22px; border: 5px solid #fff; box-shadow: var(--sh-3); transition: transform .6s var(--spring); }
.fa0 { left: 0; top: 10%; transform: rotate(-9deg); }
.fa1 { left: 24%; top: 0; transform: rotate(3deg); z-index: 2; }
.fa2 { left: 44%; top: 22%; transform: rotate(11deg); }
.free-art:hover .fa0 { transform: rotate(-14deg) translateX(-16px); }
.free-art:hover .fa2 { transform: rotate(16deg) translateX(16px); }
.free-art .fa-scout { width: 34%; left: auto; right: 0; top: auto; bottom: -30px; border: 0; box-shadow: none; z-index: 3; filter: drop-shadow(0 18px 20px rgba(0,0,0,.2)); }
.inline-form { display: flex; gap: 10px; background: #fff; border-radius: 999px; padding: 6px; border: 1.5px solid var(--line); box-shadow: var(--sh-2); max-width: 520px; }
.inline-form input { flex: 1; border: 0; outline: 0; padding: 0 16px; min-width: 0; background: transparent; }
.fine { font-size: 14px; color: var(--muted); margin-top: 12px; display: flex; align-items: center; gap: 6px; }
.fine.center { justify-content: center; }
.unlock { display: grid; gap: 10px; margin-top: 20px; }
.dl { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--r); background: #fff; border: 1.5px solid var(--mint); text-decoration: none; color: var(--ink); animation: pop .5s var(--spring) both; }
.dl:nth-child(2) { animation-delay: .1s; } .dl:nth-child(3) { animation-delay: .2s; }
.dl .ic { color: #3FA35D; width: 26px; height: 26px; }
.dl span { display: flex; flex-direction: column; font-size: 14px; color: var(--muted); } .dl b { color: var(--ink); font-size: 16px; }

/* ---------- team ---------- */
.team-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.team-photo { position: relative; }
.team-photo img { border-radius: var(--r-xl); aspect-ratio: 4/5; object-fit: cover; width: 100%; box-shadow: var(--sh-3); }
.team-photo::before { content: ''; position: absolute; inset: 24px -24px -24px 24px; border-radius: var(--r-xl); background: var(--aqua); z-index: -1; }
.team-badge { position: absolute; right: -20px; bottom: 40px; background: #fff; border-radius: var(--r); padding: 14px 18px; display: flex; gap: 12px; align-items: center; box-shadow: var(--sh-3); font-size: 14px; color: var(--muted); animation: bob 5s ease-in-out infinite; }
.team-badge .ic { width: 32px; height: 32px; color: var(--orange); }
.team-badge b { display: block; color: var(--ink); font-size: 18px; }
.team-copy p { color: var(--ink-2); font-size: 18px; }
.team-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0; }
.team-mini img { border-radius: var(--r); aspect-ratio: 1; object-fit: cover; width: 100%; transition: transform .4s var(--spring); }
.team-mini img:hover { transform: scale(1.05) rotate(-2deg); }

/* ---------- SD ---------- */
.sd-grid { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 20px; }
.sd-card { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: 440px; color: #fff; text-decoration: none; display: flex; align-items: flex-end; isolation: isolate; }
.sd-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.sd-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,53,54,.95) 10%, rgba(10,53,54,.2) 60%, transparent); z-index: -1; }
.sd-card:hover img { transform: scale(1.06); }
.sd-copy { padding: 26px; }
.sd-copy h3 { font-size: 26px; margin: 14px 0 6px; }
.sd-copy p { color: #D3EFEE; font-size: 15.5px; }
.link { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; color: var(--sun); }
.sd-card:hover .link .ic { transform: translateX(4px); } .link .ic { transition: transform .25s; }
.sd-map { background: #fff; border-radius: var(--r-lg); border: 1px solid var(--line-2); padding: 26px; display: flex; flex-direction: column; justify-content: center; }
.sdsvg { width: 100%; height: auto; }
.sdsvg text { font-family: var(--font); }
.sd-towns { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.sd-towns span { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; background: var(--cream); padding: 5px 11px; border-radius: 99px; }
.sd-towns .ic { color: var(--orange); width: 15px; }
.sd-wide { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }

/* ---------- quotes ---------- */
.feature-quote { margin: 0 auto 40px; max-width: 900px; background: var(--teal-d); color: #fff; border-radius: var(--r-xl); padding: clamp(30px, 5vw, 54px); position: relative; overflow: hidden; }
.feature-quote::before { content: '“'; position: absolute; right: 30px; top: -40px; font-family: var(--brush); font-size: 260px; color: rgba(117,215,214,.18); line-height: 1; }
.feature-quote blockquote { margin: 0 0 18px; font-size: clamp(19px, 2vw, 24px); line-height: 1.5; font-weight: 500; position: relative; }
.feature-quote figcaption { color: var(--aqua); }
.feature-quote b { color: #fff; }
.wall { columns: 4 250px; column-gap: 18px; }
.quote { break-inside: avoid; margin: 0 0 18px; background: #fff; border-radius: var(--r); padding: 24px 22px 20px; border: 1px solid var(--line-2); position: relative; transition: transform .3s var(--spring); }
.quote:hover { transform: rotate(-1deg) scale(1.02); }
.q1 { background: var(--sun-l); border-color: #F7E3A3; } .q2 { background: var(--aqua-l); border-color: #C3ECE9; } .q3 { background: var(--mint-l); border-color: #C7EED0; }
.quote-mark { font-family: var(--brush); font-size: 54px; line-height: .6; color: var(--orange); display: block; height: 22px; }
.quote blockquote { margin: 0 0 12px; font-size: 16.5px; color: var(--ink-2); }
.quote figcaption { font-weight: 700; font-size: 15px; }
.quote figcaption span { display: block; font-weight: 500; color: var(--muted); font-size: 13px; }

/* ---------- newsletter + footer ---------- */
.news { background: var(--orange); color: #fff; position: relative; z-index: 2; }
.news::before { overflow: hidden; }
.news::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.18) 1.5px, transparent 1.5px); background-size: 22px 22px; }
.news-in { position: relative; display: grid; grid-template-columns: auto 1fr 1fr; gap: 36px; align-items: center; padding: 40px 0; }
.news-scout { width: 116px; align-self: center; margin: 0; filter: drop-shadow(0 12px 18px rgba(0,0,0,.25)); }
.news h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 6px; }
.news p { margin: 0; color: #FFE7D6; }
.news .eyebrow { color: var(--sun-l); }
.news-form { display: flex; flex-wrap: wrap; gap: 10px; background: #fff; border-radius: 999px; padding: 6px; }
.news-form input[type=email] { flex: 1; border: 0; outline: 0; padding: 0 18px; color: var(--ink); min-width: 0; }
.news-form .btn-primary { --bg: var(--teal-d); box-shadow: none; }
.news-form .form-ok { flex-basis: 100%; color: var(--teal-d); padding: 6px 18px; margin: 0; font-weight: 600; }
.ftr { background: var(--teal-dd); color: #BFDDDC; padding: 70px 0 30px; font-size: 15.5px; }
.ftr-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.ftr-brand img { width: 150px; background: #fff; border-radius: 20px; padding: 10px; margin-bottom: 16px; }
.ftr-h { color: #fff; font-weight: 800; margin-bottom: 14px; font-size: 16px; }
.ftr-grid a { display: block; color: #BFDDDC; text-decoration: none; padding: 4px 0; transition: color .2s; }
.ftr-grid a:hover { color: var(--sun); }
.social { display: flex; gap: 8px; }
.social a { display: grid !important; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.08); padding: 0 !important; transition: background .2s, transform .25s var(--spring); }
.social a:hover { background: var(--orange); color: #fff; transform: translateY(-3px); }
.ftr-base { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.1); margin-top: 50px; padding-top: 24px; font-size: 14px; }
.ftr-base p { margin: 0; } .ftr-base a { color: #BFDDDC; }

/* ---------- page hero ---------- */
.phero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(900px 500px at 80% 20%, #1A7576, var(--teal-d) 50%, var(--teal-dd)); padding: 36px 0 60px; isolation: isolate; }
.phero-orange { background: radial-gradient(900px 500px at 80% 20%, #F59A55, var(--orange) 50%, #C9520D); }
.phero-in { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; position: relative; }
.phero h1 { font-size: clamp(36px, 5vw, 62px); max-width: 16ch; letter-spacing: -.025em; }
.phero h1 .brush { color: var(--sun); }
.phero-orange h1 .brush { color: var(--teal-dd); }
.phero .lede { color: #D3EFEE; } .phero-orange .lede { color: #FFF0E4; }
.phero .lede a { color: var(--sun); }
.phero-art img { max-height: 300px; width: auto; filter: drop-shadow(0 20px 30px rgba(0,0,0,.3)); animation: bob 5s ease-in-out infinite; }
.phero-art .phero-photo { max-height: 340px; border-radius: var(--r-xl); border: 6px solid rgba(255,255,255,.9); transform: rotate(3deg); animation: none; aspect-ratio: 4/5; object-fit: cover; }
.cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.cta-row.center { justify-content: center; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.crumbs a { color: inherit; text-decoration: none; opacity: .8; } .crumbs a:hover { opacity: 1; text-decoration: underline; }
.crumbs .ic { width: 14px; opacity: .6; }
.phero .eyebrow { color: #D3EFEE; }
.pdp .crumbs, .checkout .crumbs { color: var(--muted); margin-bottom: 20px; }

/* ---------- shop ---------- */
.shop-sec { padding-top: 40px; }
.shop { display: grid; grid-template-columns: 250px 1fr; gap: 36px; align-items: start; }
.filters { position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.filters-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.filters-top h2 { font-size: 20px; margin: 0; }
.facet { border: 0; border-top: 1px solid var(--line-2); padding: 16px 0; margin: 0; }
.facet legend { font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding: 0; margin-bottom: 8px; float: left; width: 100%; }
.chk { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; font-size: 15.5px; clear: both; }
.chk input { position: absolute; opacity: 0; }
.chk .box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid #CBBFA8; display: grid; place-items: center; transition: background .15s, border-color .15s, transform .2s var(--spring); flex: none; }
.chk .box .ic { width: 14px; height: 14px; color: #fff; stroke-width: 3; opacity: 0; transform: scale(.4); transition: .2s var(--spring); }
.chk input:checked + .box { background: var(--teal); border-color: var(--teal); }
.chk input:checked + .box .ic { opacity: 1; transform: scale(1); }
.chk input:focus-visible + .box { outline: 3px solid var(--orange); outline-offset: 2px; }
.chk em { margin-left: auto; font-style: normal; font-size: 13px; color: var(--muted); background: var(--cream); padding: 1px 8px; border-radius: 99px; }
.chk.inline { align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.tb-search { flex: 1; display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 0 18px; height: 52px; transition: border-color .2s, box-shadow .2s; }
.tb-search:focus-within { border-color: var(--aqua); box-shadow: 0 0 0 4px var(--aqua-l); }
.tb-search .ic { color: var(--teal); }
.tb-search input { border: 0; outline: 0; flex: 1; background: transparent; min-width: 0; font-size: 16px; }
.sort select { height: 52px; border: 1.5px solid var(--line); border-radius: 999px; padding: 0 40px 0 18px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F8E8E' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; appearance: none; font-weight: 600; cursor: pointer; }
.active-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.active-chips button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--aqua-l); color: var(--teal-d); font-weight: 600; font-size: 14px; padding: 6px 10px 6px 14px; border-radius: 99px; animation: pop .3s var(--spring); }
.active-chips button .ic { width: 15px; height: 15px; }
.count { color: var(--muted); font-size: 15px; margin: 6px 0 16px; }
.count b { color: var(--ink); }
.card.is-hidden { display: none; }
.empty { text-align: center; padding: 50px 20px; }
.empty img { margin: 0 auto 10px; }
.note { display: flex; gap: 14px; align-items: flex-start; background: var(--sun-l); border: 1px solid #F3DE94; border-radius: var(--r); padding: 16px 18px; margin-bottom: 26px; }
.note .ic { color: #B38300; width: 24px; height: 24px; margin-top: 2px; }
.note p { margin: 0; font-size: 15.5px; }

/* ---------- product ---------- */
.pdp { padding: 28px 0 60px; }
.pdp-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.gallery { position: sticky; top: 100px; }
.g-main { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--cream); aspect-ratio: 1; box-shadow: var(--sh-2); }
.g-main img { width: 100%; height: 100%; object-fit: contain; transition: opacity .25s; }
.g-zoom { position: absolute; right: 14px; bottom: 14px; background: #fff; box-shadow: var(--sh-2); }
.g-thumbs { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; padding: 4px; scrollbar-width: none; }
.g-thumb { flex: none; width: 78px; height: 78px; border-radius: 14px; overflow: hidden; border: 3px solid transparent; padding: 0; background: var(--cream); transition: border-color .2s, transform .2s var(--spring); }
.g-thumb img { width: 100%; height: 100%; object-fit: cover; }
.g-thumb:hover { transform: translateY(-2px); }
.g-thumb.is-on { border-color: var(--orange); }
.buy h1 { font-size: clamp(32px, 3.8vw, 48px); margin: 12px 0 10px; letter-spacing: -.025em; }
.buy-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tagl { font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--cream); padding: 4px 11px; border-radius: 99px; text-decoration: none; }
.tagl:hover { background: var(--aqua-l); }
.buy-rating { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); text-decoration: none; font-size: 15px; margin-bottom: 14px; }
.buy-rating:hover span { text-decoration: underline; }
.buy-sum { color: var(--ink-2); font-size: 17.5px; }
.facts { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.facts li { display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 12px; }
.facts .ic { color: var(--teal); width: 26px; height: 26px; }
.facts span { display: flex; flex-direction: column; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.facts b { color: var(--ink); font-size: 15px; }
.fmts { border: 0; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.fmts legend { font-weight: 800; margin-bottom: 10px; font-size: 15px; }
.fmt { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 2px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s var(--spring); position: relative; }
.fmt:hover { border-color: var(--aqua); }
.fmt input { position: absolute; opacity: 0; }
.fmt:has(input:checked) { border-color: var(--teal); box-shadow: 0 0 0 4px var(--aqua-l); }
.fmt:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 2px; }
.fmt.is-soon { opacity: .55; cursor: not-allowed; }
.fmt-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--cream); color: var(--teal); flex: none; transition: background .2s, color .2s; }
.fmt:has(input:checked) .fmt-ic { background: var(--teal); color: #fff; }
.fmt-txt { display: flex; flex-direction: column; flex: 1; line-height: 1.3; }
.fmt-txt small { color: var(--muted); font-size: 13.5px; }
.fmt-price { font-weight: 800; font-size: 20px; }
.fmt-price em { font-style: normal; font-size: 14px; color: var(--muted); }
.amts { grid-template-columns: repeat(4, 1fr); }
.amts .fmt { justify-content: center; }
.buy-actions { display: flex; gap: 12px; margin-bottom: 16px; }
.buy-actions .btn-lg { flex: 1; }
.heart-lg .ic { width: 24px; height: 24px; }
.member-nudge { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: linear-gradient(120deg, var(--aqua-l), var(--sun-l)); color: var(--ink); text-decoration: none; font-size: 15px; transition: transform .25s var(--spring); }
.member-nudge:hover { transform: translateX(4px); }
.member-nudge > .ic:first-child { color: var(--orange); width: 26px; height: 26px; }
.member-nudge span { flex: 1; }
.assure { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 8px; font-size: 15px; color: var(--ink-2); }
.assure .ic { color: #3FA35D; margin-right: 8px; }
.pdp-details { padding-top: 20px; }
.pdp-cols { display: grid; grid-template-columns: 1fr 340px; gap: 50px; align-items: start; }
.pdp-tabs { display: flex; gap: 6px; position: sticky; top: 80px; background: rgba(255,253,248,.92); backdrop-filter: blur(10px); z-index: 5; padding: 10px 0; margin-bottom: 20px; border-bottom: 1px solid var(--line-2); }
.pdp-tabs a { padding: 9px 16px; border-radius: 99px; text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: 15px; }
.pdp-tabs a:hover, .pdp-tabs a.is-on { background: var(--teal); color: #fff; }
.prose { font-size: 17.5px; color: var(--ink-2); }
.prose h2 { color: var(--ink); font-size: 28px; margin-top: 1em; }
.prose.big { font-size: 19px; }
.how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 28px 0 40px; counter-reset: s; }
.how-step { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); padding: 18px 14px; text-align: center; position: relative; }
.how-step span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 800; margin: 0 auto 8px; font-size: 18px; }
.how-step:nth-child(2) span { background: var(--teal); } .how-step:nth-child(3) span { background: #E8B92F; } .how-step:nth-child(4) span { background: #3FA35D; }
.how-step p { margin: 0; font-weight: 700; color: var(--ink); font-size: 15px; }
.how-step:not(:last-child)::after { content: ''; position: absolute; right: -10px; top: 50%; width: 8px; height: 8px; border-top: 2.5px solid var(--line); border-right: 2.5px solid var(--line); transform: translateY(-50%) rotate(45deg); }
.included { background: var(--cream); border-radius: var(--r-lg); padding: 28px; margin-bottom: 40px; }
.inc h3 { display: flex; gap: 10px; align-items: center; font-size: 21px; }
.inc h3 .ic { color: var(--orange); }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; }
.checks .ic { color: #3FA35D; margin-top: 4px; stroke-width: 2.6; }
.inc .checks { grid-template-columns: 1fr 1fr; }
.checks.big li { font-size: 18px; }
.reviews { scroll-margin-top: 140px; }
.rev-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.rev-head h2 { margin: 0; font-size: 28px; }
.rev-sum { display: flex; align-items: center; gap: 10px; }
.rev-sum b { font-size: 26px; }
.rev-sum span { color: var(--muted); font-size: 14px; }
.rev-head .btn { margin-left: auto; }
.rev { border-top: 1px solid var(--line-2); padding: 20px 0; }
.rev-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.verified { font-size: 13px; color: #3FA35D; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.rev-meta { color: var(--muted); font-size: 14px; margin: 4px 0; }
.rev-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.rev-tags span { font-size: 13px; background: var(--aqua-l); color: var(--teal-d); padding: 3px 10px; border-radius: 99px; font-weight: 600; }
.rev-empty { display: flex; gap: 24px; align-items: center; background: #fff; border: 2px dashed var(--line); border-radius: var(--r-lg); padding: 26px; }
.rev-empty h3 { font-size: 21px; margin-bottom: 6px; }
.rev-empty p { color: var(--ink-2); font-size: 15.5px; }
.pdp-side { position: sticky; top: 100px; display: grid; gap: 16px; }
.side-card { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 22px; text-align: left; color: var(--ink); text-decoration: none; }
.side-card h3 { font-size: 18px; }
.glance { margin: 0; display: grid; gap: 10px; }
.glance div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; font-size: 14.5px; }
.glance dt { color: var(--muted); font-weight: 600; } .glance dd { margin: 0; font-weight: 500; }
.bundle-up { display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, var(--sun-l), #fff); transition: transform .3s var(--spring); }
.bundle-up:hover { transform: translateY(-3px); }
.bundle-up img { width: 84px; border-radius: 12px; }
.bundle-up .eyebrow { margin: 0 0 2px; font-size: 11px; color: var(--orange-d); }
.bundle-up b { display: block; font-size: 16px; line-height: 1.25; }
.bundle-up span { font-size: 14px; color: var(--ink-2); } .bundle-up s { color: var(--muted); }
.ask { display: flex; gap: 14px; align-items: center; border: 2px solid var(--aqua); background: var(--aqua-l); cursor: pointer; font: inherit; width: 100%; transition: transform .3s var(--spring); }
.ask:hover { transform: translateY(-3px) rotate(-.5deg); }
.ask img { width: 66px; height: auto; flex: none; filter: drop-shadow(0 4px 8px rgba(15,77,78,.18)); }
.ask b { display: block; } .ask span { font-size: 14px; color: var(--ink-2); }
.sticky-buy { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: none; align-items: center; gap: 12px; background: #fff; border-radius: var(--r); padding: 10px 10px 10px 12px; box-shadow: 0 16px 40px -10px rgba(0,0,0,.35); transform: translateY(140%); transition: transform .4s var(--ease); }
.sticky-buy.show { transform: none; }
.sticky-buy img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; }
.sticky-buy div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sticky-buy b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.sticky-buy span { font-size: 13.5px; color: var(--muted); }

/* gift card */
.gift-card-art { display: grid; place-items: center; padding: 40px 0; }
.gc { position: relative; width: min(100%, 460px); aspect-ratio: 1.6; border-radius: 28px; background: linear-gradient(135deg, var(--teal), var(--teal-dd)); box-shadow: var(--sh-3); padding: 26px; overflow: hidden; transform: rotate(-4deg); transition: transform .5s var(--spring); }
.gc:hover { transform: rotate(0) scale(1.03); }
.gc::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 22px 22px; }
.gc img:first-child { width: 120px; background: #fff; border-radius: 14px; padding: 6px; position: relative; }
.gc-amt { position: absolute; left: 26px; bottom: 20px; font-size: 64px; font-weight: 800; color: var(--sun); letter-spacing: -.03em; }
.gc-scout { position: absolute; right: 10px; bottom: -40px; width: 130px; }

/* ---------- membership page ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: center; margin-bottom: 80px; }
.plan { position: relative; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: 38px 32px; box-shadow: var(--sh-1); transition: transform .35s var(--spring), box-shadow .3s; }
.plan:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
.plan.pop { border: 3px solid var(--orange); box-shadow: var(--sh-3); padding: 46px 32px; }
.plan h2 { font-size: 28px; margin-bottom: 4px; }
.plan-blurb { color: var(--muted); font-size: 15.5px; min-height: 48px; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin: 10px 0 6px; }
.plan-price b { font-size: 54px; letter-spacing: -.04em; line-height: 1; }
.plan-price span { color: var(--muted); font-weight: 600; }
.plan-picks { font-weight: 700; display: flex; align-items: center; gap: 10px; }
.pk { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--aqua-l); color: var(--teal-d); font-size: 20px; font-weight: 800; }
.plan.pop .pk { background: var(--orange); color: #fff; }
.plan-value { font-size: 14.5px; color: var(--ink-2); background: var(--cream); border-radius: 12px; padding: 10px 12px; }
.plan-value b { color: #2E8A4C; }
.plan .checks { margin: 18px 0 26px; font-size: 15.5px; }
.how-it { background: var(--cream); border-radius: var(--r-xl); padding: clamp(30px, 5vw, 56px); }
.steps { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.steps span { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: #fff; color: var(--orange); font-family: var(--brush); font-size: 36px; box-shadow: var(--sh-2); }
.steps b { font-size: 20px; display: block; margin-bottom: 4px; }
.steps p { color: var(--ink-2); font-size: 15.5px; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trio-card { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 30px 26px; text-decoration: none; color: var(--ink); transition: transform .35s var(--spring), box-shadow .3s; display: flex; flex-direction: column; align-items: flex-start; }
.trio-card:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.trio-card > .ic { width: 44px; height: 44px; padding: 10px; border-radius: 14px; background: var(--orange-l); color: var(--orange); margin-bottom: 14px; box-sizing: content-box; }
.trio-card h3 { font-size: 21px; }
.trio-card p { color: var(--ink-2); font-size: 15.5px; flex: 1; }
.trio-card .link { color: var(--teal); }

/* ---------- about ---------- */
.approach { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.founders { display: grid; gap: 80px; }
.founder { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.founder.flip { grid-template-columns: 1.2fr .8fr; }
.founder.flip img { order: 2; }
.founder img { border-radius: var(--r-xl); aspect-ratio: 4/5; object-fit: cover; box-shadow: var(--sh-3); }
.founder p { color: var(--ink-2); font-size: 17.5px; }
.founder .checks { font-size: 15.5px; }
.scout-sec { background: linear-gradient(135deg, var(--orange), #E55A12); color: #fff; overflow: hidden; }
.scout-meet { display: grid; grid-template-columns: .6fr 1.4fr; gap: 50px; align-items: center; }
.scout-meet img { max-height: 460px; width: auto; margin: 0 auto -40px; filter: drop-shadow(0 20px 30px rgba(0,0,0,.25)); animation: bob 5s ease-in-out infinite; }
.scout-meet p { color: #FFF0E4; font-size: 18px; }
.scout-meet .eyebrow.light { color: var(--sun-l); }
.photo-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.photo-strip img { border-radius: var(--r); aspect-ratio: 3/4; object-fit: cover; transition: transform .4s var(--spring); }
.photo-strip img:nth-child(odd) { transform: translateY(20px); }
.photo-strip img:hover { transform: scale(1.04) rotate(-2deg); }

/* ---------- schools / camps ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feat { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 26px; transition: transform .3s var(--spring); }
.feat:hover { transform: translateY(-4px); }
.feat > .ic { width: 30px; height: 30px; color: var(--orange); margin-bottom: 12px; }
.feat h3 { font-size: 19px; margin-bottom: 4px; }
.feat p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.innovate { background: var(--teal-dd); color: #fff; overflow: hidden; }
.innovate-in { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; position: relative; }
.innovate p { color: #CDEDEC; font-size: 18px; }
.innovate p b { color: var(--sun); }
.schedule { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); border-radius: var(--r-xl); padding: 28px; backdrop-filter: blur(8px); }
.sched-h { font-family: var(--brush); font-size: 30px; color: var(--sun); margin-bottom: 14px; }
.slot { display: grid; grid-template-columns: 120px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; background: rgba(255,255,255,.08); border-radius: var(--r); margin-bottom: 10px; }
.slot b { font-size: 17px; } .slot span { color: #CDEDEC; }
.slot i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--teal-dd); background: var(--mint); padding: 4px 10px; border-radius: 99px; display: inline-flex; gap: 4px; align-items: center; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.steam-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.steam-letter { border-radius: var(--r-lg); padding: 26px 22px; color: var(--teal-dd); transition: transform .35s var(--spring); }
.steam-letter:hover { transform: translateY(-6px) rotate(-1.5deg); }
.steam-letter span { font-family: var(--brush); font-size: 72px; line-height: .9; display: block; color: #fff; text-shadow: 0 4px 0 rgba(0,0,0,.12); }
.steam-letter h3 { font-size: 21px; margin: 8px 0 6px; }
.steam-letter p { font-size: 15px; margin: 0; }
.sl0 { background: var(--teal); color: #fff; } .sl1 { background: var(--orange); color: #fff; } .sl2 { background: var(--sun); } .sl3 { background: var(--mint); } .sl4 { background: var(--aqua); }
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.photo-pair img { border-radius: var(--r-lg); aspect-ratio: 3/4; object-fit: cover; }
.photo-pair img:last-child { margin-top: 40px; }

/* ---------- resources ---------- */
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.res { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.res img, .res-ph { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.res-ph { display: grid; place-items: center; background: linear-gradient(135deg, var(--aqua-l), var(--sun-l)); }
.res-ph .ic { width: 54px; height: 54px; color: var(--teal); }
.res > div { padding: 20px; }
.res h3 { font-size: 19px; }
.res p { color: var(--ink-2); font-size: 15px; }
.sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.sizes a { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; padding: 7px 12px; border-radius: 99px; background: var(--aqua-l); color: var(--teal-d); text-decoration: none; transition: background .2s; }
.sizes a:hover { background: var(--teal); color: #fff; }
.guide-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.guide { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); padding: 16px 18px; }
.guide b { display: flex; gap: 10px; align-items: center; } .guide b .ic { color: var(--orange); }

/* ---------- forms ---------- */
.card-form { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 40px); box-shadow: var(--sh-2); display: grid; gap: 16px; }
.card-form h2 { font-size: 22px; display: flex; gap: 10px; align-items: center; margin: 0; }
label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
input:not([type=checkbox]):not([type=radio]), select, textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 14px; padding: 13px 15px; background: var(--paper); font-weight: 400; transition: border-color .2s, box-shadow .2s; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--teal); box-shadow: 0 0 0 4px var(--aqua-l); }
.inline-form input, .news-form input, .hero-search input, .tb-search input, .palette-in input, .scout-form input { border: 0 !important; box-shadow: none !important; background: transparent !important; padding-left: 0; }
.inline-form input { padding-left: 16px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-ok { color: #2E8A4C; font-weight: 600; display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.contact-side { display: grid; gap: 16px; }
.contact-side > img { width: 180px; margin: 0 auto -30px; position: relative; z-index: 1; }
.contact-side a { color: var(--teal-d); }
.contact-side .social a { color: var(--teal-d); background: var(--aqua-l); }

/* ---------- faq ---------- */
.faq { display: grid; gap: 12px; margin-top: 30px; }
.faq details { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); transition: box-shadow .3s; }
.faq details[open] { box-shadow: var(--sh-2); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 22px; font-weight: 700; font-size: 17.5px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq-x { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--aqua-l); color: var(--teal); display: grid; place-items: center; transition: transform .3s var(--spring), background .2s; }
.faq details[open] .faq-x { transform: rotate(45deg); background: var(--orange); color: #fff; }
.faq details > div { padding: 0 22px 18px; color: var(--ink-2); }
.faq details > div p { margin: 0; }

/* ---------- checkout / account ---------- */
.co-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: start; }
.co-summary { background: var(--cream); border-radius: var(--r-xl); padding: 28px; position: sticky; top: 100px; }
.co-summary h2 { font-size: 22px; }
.co-line { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.co-line img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; }
.co-line div { flex: 1; line-height: 1.3; } .co-line small { color: var(--muted); display: block; }
.co-totals { padding-top: 14px; display: grid; gap: 6px; }
.co-totals div { display: flex; justify-content: space-between; }
.co-totals .total { font-size: 22px; font-weight: 800; padding-top: 8px; border-top: 2px solid var(--line); margin-top: 6px; }
.co-totals .disc { color: #2E8A4C; font-weight: 600; }
.paybox { display: grid; gap: 12px; }
.express { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay { height: 52px; border-radius: 12px; border: 0; font-weight: 700; font-size: 18px; color: #fff; background: #000; }
.pay.gpay { background: #fff; color: #3c4043; border: 1.5px solid #dadce0; }
.stripe-note { display: flex; gap: 12px; align-items: center; background: var(--paper); border: 1.5px dashed var(--line); border-radius: 14px; padding: 14px 16px; font-size: 14.5px; color: var(--ink-2); }
.stripe-note .ic { color: var(--teal); }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; margin: 4px 0; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.promo-in { display: flex; gap: 8px; }
.promo-msg { margin: 0; font-size: 14px; font-weight: 600; }
.promo-msg.ok { color: #2E8A4C; } .promo-msg.bad { color: var(--coral); }
.acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.acct-card { background: #fff; border-radius: var(--r-xl); padding: 40px; box-shadow: var(--sh-3); border: 1px solid var(--line-2); display: grid; gap: 14px; }
.acct-card .acct-av { width: 84px; height: auto; }
.acct-card h1 { font-size: 34px; margin: 0; }
.acct-card form { display: grid; gap: 12px; }
.acct-preview { display: grid; gap: 14px; }
.ap-row { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); padding: 18px; }
.ap-row .ic { width: 26px; height: 26px; color: var(--orange); margin-top: 2px; }
.ap-row b { display: block; } .ap-row span { color: var(--ink-2); font-size: 15px; }
.nf img { margin: 0 auto 10px; }

/* ---------- drawer / palette / modal / toast ---------- */
.drawer, .palette, .modal, .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(10,53,54,.45); backdrop-filter: blur(5px); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 440px); background: var(--paper); display: flex; flex-direction: column; animation: slideR .4s var(--ease); box-shadow: -20px 0 60px rgba(0,0,0,.2); }
@keyframes slideR { from { transform: translateX(100%); } }
.drawer-top { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line-2); }
.drawer-top h2 { margin: 0; font-size: 22px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 22px; }
.drawer-foot { padding: 18px 22px 22px; border-top: 1px solid var(--line-2); display: grid; gap: 10px; background: #fff; }
.ci { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-2); animation: pop .35s var(--spring); }
.ci img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; }
.ci-main { flex: 1; min-width: 0; }
.ci-main a { color: var(--ink); text-decoration: none; font-weight: 700; line-height: 1.25; display: block; }
.ci-main small { color: var(--muted); }
.ci-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 99px; }
.qty button { width: 32px; height: 32px; border: 0; background: none; display: grid; place-items: center; color: var(--teal); }
.qty .ic { width: 16px; height: 16px; }
.qty span { min-width: 22px; text-align: center; font-weight: 700; font-size: 15px; }
.ci-rm { border: 0; background: none; color: var(--muted); padding: 4px; }
.ci-rm:hover { color: var(--coral); }
.cart-empty { text-align: center; padding: 50px 10px; }
.cart-empty img { margin: 0 auto 6px; }
.subtotal { display: flex; justify-content: space-between; font-size: 18px; font-weight: 800; }
.upsell { background: linear-gradient(120deg, var(--aqua-l), var(--sun-l)); border-radius: var(--r); padding: 12px 14px; font-size: 14px; display: flex; gap: 10px; align-items: center; }
.upsell .ic { color: var(--orange); }
.upsell.pickup { background: var(--orange-l); margin: 12px 0 0; }
.upsell.pickup .ic { color: var(--orange-d); flex: none; }
.progress { height: 8px; background: var(--line-2); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--teal), var(--mint)); border-radius: 99px; transition: width .6s var(--ease); }
.palette { display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.palette-box { width: min(100%, 680px); background: #fff; border-radius: var(--r-lg); box-shadow: 0 40px 80px -20px rgba(0,0,0,.45); overflow: hidden; animation: drop .3s var(--spring); }
@keyframes drop { from { opacity: 0; transform: translateY(-20px) scale(.97); } }
.palette-in { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line-2); }
.palette-in > .ic { color: var(--teal); width: 24px; height: 24px; }
.palette-in input { flex: 1; font-size: 19px; outline: 0; }
.palette-results { max-height: 52vh; overflow-y: auto; padding: 8px; }
.pr { display: flex; gap: 14px; align-items: center; padding: 10px 12px; border-radius: 14px; color: var(--ink); text-decoration: none; }
.pr.is-on, .pr:hover { background: var(--aqua-l); }
.pr img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.pr div { flex: 1; min-width: 0; line-height: 1.3; }
.pr b { display: block; } .pr small { color: var(--muted); }
.pr mark { background: var(--sun-l); color: inherit; border-radius: 3px; }
.pr .price { font-size: 16px; }
.pr-h { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 10px 12px 4px; }
.palette-foot { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: var(--cream); font-size: 14px; color: var(--muted); }
.modal { display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.modal-box { position: relative; width: min(100%, 560px); background: #fff; border-radius: var(--r-xl); padding: 34px; display: grid; gap: 14px; animation: drop .35s var(--spring); }
.modal-box.center { text-align: center; justify-items: center; }
.modal-box h2 { margin: 0; font-size: 26px; }
.modal-x { position: absolute; right: 14px; top: 14px; }
.rate { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rate input { position: absolute; opacity: 0; }
.rate label { cursor: pointer; color: #D9CFBD; transition: transform .2s var(--spring), color .15s; }
.rate label .ic { width: 38px; height: 38px; }
.rate label:hover, .rate label:hover ~ label, .rate input:checked ~ label { color: #F2A516; }
.rate label:hover .ic, .rate label:hover ~ label .ic, .rate input:checked ~ label .ic { fill: currentColor; }
.rate label:hover { transform: scale(1.15); }
.lbl { font-weight: 600; font-size: 15px; margin: 0; }
.tagpick { display: flex; flex-wrap: wrap; gap: 8px; }
.tagpick label { display: block; }
.tagpick input { position: absolute; opacity: 0; }
.tagpick span { display: inline-block; padding: 7px 13px; border-radius: 99px; border: 1.5px solid var(--line); font-size: 14px; font-weight: 600; cursor: pointer; transition: .2s; }
.tagpick input:checked + span { background: var(--teal); color: #fff; border-color: var(--teal); }
.lightbox { display: grid; place-items: center; padding: 20px; cursor: zoom-out; }
.lightbox img { max-height: 90vh; width: auto; border-radius: var(--r); animation: drop .3s var(--spring); }
.lightbox .icon-btn { position: absolute; right: 16px; top: 16px; background: #fff; }
.toast { position: fixed; left: 50%; bottom: 26px; translate: -50% 0; z-index: 120; background: var(--ink); color: #fff; padding: 13px 20px; border-radius: 99px; font-weight: 600; display: flex; gap: 10px; align-items: center; box-shadow: var(--sh-3); animation: toast .4s var(--spring); font-size: 15px; }
.toast .ic { color: var(--mint); }
.toast a { color: var(--sun); }
@keyframes toast { from { opacity: 0; transform: translateY(20px); } }
.confetti { position: fixed; pointer-events: none; z-index: 130; width: 9px; height: 13px; border-radius: 2px; }

/* ---------- Scout chat ---------- */
.scout { position: fixed; right: 22px; bottom: 22px; z-index: 80; }
.scout-fab { width: 96px; aspect-ratio: 246 / 256; border: 0; padding: 0; background: none; position: relative; display: block; filter: drop-shadow(0 12px 16px rgba(15,77,78,.35)); transition: transform .3s var(--spring); animation: fabin .8s 1s var(--spring) both; }
@keyframes fabin { from { transform: scale(0) rotate(-30deg); } }
.scout-fab:hover { transform: scale(1.07); }
.scout-fab.hop { animation: hop .9s var(--spring); }
@keyframes hop { 30% { transform: translateY(-18px) rotate(-6deg); } 60% { transform: translateY(0) rotate(3deg); } }
.sav-bob { display: block; width: 100%; height: 100%; transform-origin: 50% 90%; animation: sway 6s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-3deg) translateY(-2px); } 50% { transform: rotate(0) translateY(0); } 75% { transform: rotate(2.5deg) translateY(-1px); } }
.sav { position: relative; display: block; width: 100%; height: 100%; transform: translate(var(--lx, 0), var(--ly, 0)) rotate(var(--lr, 0deg)); transition: transform .5s var(--ease); }
.sav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sav .sav-blink, .sav .sav-happy { opacity: 0; }
.sav.blinking .sav-blink { opacity: 1; }
.sav.is-happy .sav-happy, .scout-fab:hover .sav-happy { opacity: 1; }
.sav.is-happy .sav-blink, .scout-fab:hover .sav-blink { opacity: 0; }
.sav.is-talking { animation: talk .28s ease-in-out infinite alternate; }
@keyframes talk { to { transform: translate(var(--lx, 0), calc(var(--ly, 0px) - 2px)) scale(1.03); } }
.sav-face { width: 48px; height: 48px; border-radius: 50%; background: var(--aqua); border: 2px solid #fff; overflow: hidden; flex: none; }
.sav-face img { object-fit: cover; object-position: 50% 20%; }
.scout-dot { position: absolute; top: 34%; right: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--orange); border: 3px solid #fff; animation: bump 1.4s ease-in-out infinite; }
.scout-teaser { position: absolute; right: 8px; bottom: 116px; width: 250px; background: #fff; color: var(--ink); border-radius: 20px 20px 6px 20px; padding: 14px 34px 14px 16px; box-shadow: var(--sh-3); font-size: 15px; font-weight: 500; animation: pop .5s var(--spring); cursor: pointer; }
.scout-teaser-x { position: absolute; right: 6px; top: 6px; border: 0; background: none; color: var(--muted); padding: 4px; }
.scout-teaser-x .ic { width: 15px; height: 15px; }
.scout-panel { position: absolute; right: 0; bottom: 118px; width: min(400px, calc(100vw - 28px)); height: min(620px, calc(100vh - 130px)); background: var(--paper); border-radius: 26px; box-shadow: 0 40px 80px -20px rgba(0,0,0,.4), 0 0 0 1px rgba(20,48,47,.06); display: flex; flex-direction: column; overflow: hidden; transform-origin: bottom right; animation: panel .4s var(--spring); }
@keyframes panel { from { opacity: 0; transform: scale(.6) translateY(30px); } }
.scout-head { display: flex; align-items: center; gap: 12px; padding: 14px 10px 14px 16px; background: linear-gradient(135deg, var(--teal), var(--teal-d)); color: #fff; }
.scout-head div { flex: 1; line-height: 1.25; }
.scout-head b { display: block; font-size: 17px; }
.scout-head span { font-size: 12.5px; color: #BFE6E5; }
.scout-head .icon-btn { width: 38px; height: 38px; color: #fff; }
.scout-head .icon-btn:hover { background: rgba(255,255,255,.15); }
.scout-head .is-muted { opacity: .5; }
.scout-log { flex: 1; overflow-y: auto; padding: 18px 14px 6px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.msg { max-width: 86%; padding: 11px 15px; border-radius: 20px; font-size: 15.5px; line-height: 1.45; animation: msgin .35s var(--spring); white-space: pre-line; }
@keyframes msgin { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.msg.bot { background: #fff; border: 1px solid var(--line-2); border-bottom-left-radius: 6px; align-self: flex-start; box-shadow: var(--sh-1); }
.msg.me { background: var(--teal); color: #fff; border-bottom-right-radius: 6px; align-self: flex-end; }
.msg a { color: var(--orange-d); font-weight: 700; }
.typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--aqua); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
.recs { display: grid; gap: 8px; align-self: stretch; animation: msgin .4s var(--spring); }
.rec { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line-2); border-radius: 16px; padding: 8px; text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s var(--spring); }
.rec:hover { border-color: var(--aqua); transform: translateX(3px); }
.rec img { width: 58px; height: 58px; border-radius: 11px; object-fit: cover; }
.rec div { flex: 1; min-width: 0; line-height: 1.25; }
.rec b { display: block; font-size: 15px; } .rec small { color: var(--muted); font-size: 12.5px; }
.rec .quick-add { padding: 6px 10px 6px 8px; font-size: 13px; }
.chips-wrap { position: relative; }
.scout-chips { display: flex; gap: 6px; overflow-x: auto; padding: 6px 14px; scrollbar-width: none; scroll-behavior: smooth; }
.scout-chips::-webkit-scrollbar { display: none; }
.chips-arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--teal); color: #fff; box-shadow: 0 4px 12px -2px rgba(15,77,78,.4); transition: transform .2s var(--spring), background .2s; }
.chips-arrow:hover { background: var(--orange); transform: scale(1.1); }
.chips-arrow .ic { width: 18px; height: 18px; stroke-width: 2.6; }
.chips-arrow.prev { left: 6px; } .chips-arrow.next { right: 6px; }
.chips-wrap::before, .chips-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 56px; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .2s; }
.chips-wrap::before { left: 0; background: linear-gradient(90deg, var(--paper) 30%, transparent); }
.chips-wrap::after { right: 0; background: linear-gradient(270deg, var(--paper) 30%, transparent); }
.chips-wrap.can-prev::before, .chips-wrap.can-next::after { opacity: 1; }
.scout-chips button { flex: none; border: 1.5px solid var(--aqua); background: #fff; color: var(--teal-d); border-radius: 99px; padding: 6px 12px; font-size: 13.5px; font-weight: 600; transition: background .2s; }
.scout-chips button:hover { background: var(--aqua-l); }
.scout-form { display: flex; gap: 8px; padding: 10px 12px 14px; }
.scout-form input { flex: 1; border: 1.5px solid var(--line) !important; border-radius: 99px; padding: 12px 16px !important; background: #fff !important; outline: 0; font-size: 15.5px; }
.scout-form input:focus { border-color: var(--teal) !important; }
.scout-form button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--orange); color: #fff; display: grid; place-items: center; transition: transform .2s var(--spring); flex: none; }
.scout-form button:hover { transform: scale(1.08) rotate(-8deg); }

/* ---------- reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }
.js .card.reveal.in:hover { transform: translateY(-6px); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav-link { padding: 10px 10px; font-size: 15.5px; }
  .search-trigger span, .search-trigger kbd { display: none; }
  .search-trigger { padding: 0 12px; }
  .bundles { grid-template-columns: repeat(3, 1fr); }
  .sd-grid { grid-template-columns: 1fr 1fr; } .sd-map { grid-column: span 2; }
  .wall { columns: 3 230px; }
}
@media (max-width: 980px) {
  .nav, .hide-s { display: none; }
  .only-m { display: inline-grid !important; }
  .btn.only-m { display: inline-flex !important; }
  .hdr-in { height: 68px; gap: 8px; }
  .logo { margin-right: auto; } .logo img { height: 52px; }
  .hero-in { grid-template-columns: 1fr; }
  .hero-stage { height: 380px; margin-top: -10px; }
  .orbit-card { width: 120px; height: 120px; left: -60px; top: -60px; transform: rotateY(calc(360deg / var(--n) * var(--i))) translateZ(220px); }
  .scout-hero { width: 210px; }
  .bubble { right: -120px; top: 10px; font-size: 14px; }
  .stats-in { grid-template-columns: repeat(2, 1fr); }
  .grades { grid-template-columns: repeat(3, 1fr); }
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; }
  .formats, .trio, .feature-grid, .res-grid { grid-template-columns: 1fr; }
  .member-in, .free-in, .team-in, .approach, .innovate-in, .two, .sd-wide, .contact-grid, .co-grid, .acct-grid, .scout-meet { grid-template-columns: 1fr; }
  .founder, .founder.flip { grid-template-columns: 1fr; gap: 26px; } .founder.flip img { order: 0; }
  .founder img { max-height: 480px; width: 100%; }
  .scout-meet img { max-height: 320px; margin-bottom: -20px; }
  .news-in { grid-template-columns: 1fr; text-align: center; gap: 18px; }
  .news-scout { margin: 0 auto; width: 96px; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .ftr-brand { grid-column: span 2; }
  .shop { grid-template-columns: 1fr; }
  .filters { position: fixed; inset: auto 0 0 0; top: auto; max-height: 85vh; z-index: 95; background: var(--paper); border-radius: 26px 26px 0 0; padding: 20px 20px 24px; box-shadow: 0 -20px 60px rgba(0,0,0,.25); transform: translateY(105%); transition: transform .4s var(--ease); }
  .filters.open { transform: none; }
  .pdp-grid, .pdp-cols { grid-template-columns: 1fr; }
  .gallery, .pdp-side { position: static; }
  .sticky-buy { display: flex; }
  .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .steps { grid-template-columns: 1fr; }
  .steam-row { grid-template-columns: 1fr 1fr; }
  .photo-strip { grid-template-columns: repeat(3, 1fr); }
  .phero-in { grid-template-columns: 1fr; }
  .phero-art { display: none; }
  .member-cards { grid-template-columns: 1fr; max-width: 360px; }
  .mini-plan.pop { transform: none; } .mini-plan.pop:hover { transform: translateY(-6px); }
  .co-summary { position: static; order: -1; }
  .guide-list { grid-template-columns: 1fr; }
  .is-pdp .scout { bottom: 96px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .promo { font-size: 13px; }
  .promo::before, .promo::after { width: 120px; opacity: .6; }
  .promo-tail { display: none; }
  .hero-search { padding-left: 16px; }
  .hero-search .btn { padding: 12px 16px; font-size: 15px; }
  .hero-search input { font-size: 16px; }
  .hero-stage { height: 320px; }
  .orbit-card { width: 96px; height: 96px; left: -48px; top: -48px; border-width: 3px; border-radius: 16px; transform: rotateY(calc(360deg / var(--n) * var(--i))) translateZ(165px); }
  .scout-hero { width: 170px; }
  .bubble { right: -96px; top: 0; padding: 10px 12px; font-size: 13px; }
  .bubble b { font-size: 16px; }
  .float { width: 40px !important; opacity: .55; }
  .f-gear, .f-atom, .f-compass { display: none; }
  .grades { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .grade-tile { aspect-ratio: 1.3; }
  .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card-body { padding: 10px 12px 12px; }
  .card-title { font-size: 16px; }
  .card-meta .card-grade { display: none; }
  .quick-add span { display: none; }
  .quick-add { padding: 8px; }
  .price { font-size: 17px; }
  .heart { width: 34px; height: 34px; top: 8px; right: 8px; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: 170px; }
  .bento-tile.big { grid-column: auto; grid-row: span 2; padding: 24px; }
  .bento-tile.theme { grid-row: span 1; min-height: 230px; }
  .theme-pics img { width: 46%; }
  .bundles, .bundles-lg { grid-template-columns: 1fr 1fr; }
  .free-art { height: 300px; }
  .facts { grid-template-columns: 1fr; }
  .how { grid-template-columns: 1fr 1fr; }
  .how-step::after { display: none; }
  .inc .checks { grid-template-columns: 1fr; }
  .rev-empty { flex-direction: column; text-align: center; }
  .row2 { grid-template-columns: 1fr; }
  .inline-form { flex-direction: column; border-radius: var(--r); }
  .inline-form input { padding: 12px 14px; }
  .news-form { border-radius: var(--r); flex-direction: column; }
  .news-form input[type=email] { padding: 12px 14px; }
  .steam-row { grid-template-columns: 1fr; }
  .wall { columns: 1; }
  .ftr-grid { grid-template-columns: 1fr; } .ftr-brand { grid-column: auto; }
  .slot { grid-template-columns: 1fr; gap: 4px; }
  .toolbar { flex-wrap: wrap; } .tb-search { flex-basis: 100%; }
  .sort { flex: 1; } .sort select { width: 100%; }
  .amts { grid-template-columns: 1fr 1fr; }
  .scout { right: 14px; bottom: 14px; }
  .scout-fab { width: 80px; }
  .scout-panel { position: fixed; right: 8px; left: 8px; bottom: 104px; width: auto; height: calc(100dvh - 124px); }
  .is-pdp .scout { bottom: 92px; }
  .photo-strip { grid-template-columns: repeat(2, 1fr); }
  .photo-strip img:nth-child(odd) { transform: none; }
  .pdp-tabs { top: 68px; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .orbit { animation: none; }
}

/* Account: sign-in code + library */
.code-in { font-size: 28px; letter-spacing: 10px; text-align: center; font-weight: 700; }
.linkish { background: none; border: 0; padding: 0; color: var(--teal-d); font: inherit; text-decoration: underline; cursor: pointer; }
.form-err { color: #B42318; font-weight: 600; margin: 0; }
.btn.is-busy { opacity: .6; pointer-events: none; }
.lib-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.lib-head h1 { margin: 0; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.lib-item { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px; }
.lib-item img, .lib-ph { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; flex: none; background: var(--aqua-l); }
.lib-item > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lib-item a { color: inherit; text-decoration: none; } .lib-item a:hover b { text-decoration: underline; }
.lib-kind { font-size: 13px; color: var(--muted); }
.lib-files { display: grid; gap: 6px; }
@media (max-width: 420px) { .lib-grid { grid-template-columns: 1fr; } .lib-item { flex-wrap: wrap; } }
.pick-link { display: block; font-size: 14.5px; color: var(--teal-d); margin: -4px 0 10px 4px; }
.acct-banner { display: flex; gap: 10px; align-items: center; background: #E7F6EC; color: #1E6B3A; border-radius: var(--r); padding: 14px 18px; font-weight: 600; margin-bottom: 18px; }
.acct-banner.warn { background: var(--orange-l); color: var(--orange-d); }
.member-box { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); padding: 16px 18px; margin-bottom: 18px; }
.member-box b { font-size: 18px; } .member-box span { color: var(--ink-2); }
.gift-list { margin-top: 28px; } .gift-list code { font-size: 17px; font-weight: 700; letter-spacing: 1px; }

/* Product page videos */
.pdp-videos { margin: 0 0 40px; }
.pdp-videos h2 { margin-bottom: 16px; }
.vid-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.vid { margin: 0; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; }
.vid[hidden] { display: none; }
.vid video { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: var(--aqua-l); }
.vid figcaption { display: grid; gap: 2px; padding: 12px 16px; }
.vid figcaption span { color: var(--ink-2); font-size: 14.5px; }
.pw-box { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); padding: 16px 18px; }
.pw-box > div { display: grid; gap: 2px; } .pw-box span { color: var(--ink-2); font-size: 15px; } .pw-box .muted { color: var(--muted); font-weight: 500; }
.pw-form { display: flex; gap: 8px; flex-wrap: wrap; } .pw-form input { min-width: 240px; }
.pw-msg { flex-basis: 100%; margin: 0; color: #1E6B3A; font-weight: 600; } .pw-msg.bad { color: #B42318; }

/* Phone widths: let grid columns shrink below their widest content (long emails, the lesson tabs) */
.co-grid > *, .pdp-main, .pdp-main > *, .acct-grid > * { min-width: 0; }
.promo-in input { min-width: 0; flex: 1; }
.lib-head .eyebrow { display: block; overflow-wrap: anywhere; }
.card-form { grid-template-columns: minmax(0, 1fr); }
.vid-one { max-width: 520px; margin: 0 auto; grid-template-columns: 1fr; }
.gsi-slot { display: flex; justify-content: center; min-height: 0; } .gsi-slot:empty { display: none; }
.co-line .plan-tile { border-radius: 10px; object-fit: cover; }
.co-line .scout-tile { object-fit: contain; background: none; }
.req { color: #B42318; margin-left: 2px; }
.req-note { margin: -4px 0 0; }

/* ---------- proposal round 1 (2026-10-29) ---------- */
/* Lighter teal hero, no graph-paper grid (Jamie & Deanna) */
.hero { background: radial-gradient(1200px 640px at 72% 28%, #33A3A3 0%, var(--teal) 42%, #166F70 100%); }
.hero .lede { color: #E6F7F6; }
.nw { white-space: nowrap; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: -8px 0 24px; }
.btn-glass { --bg: rgba(255,255,255,.12); --fg: #fff; border-color: rgba(255,255,255,.45); }
.btn-glass:hover { --bg: #fff; --fg: var(--teal-d); }
.grade-chips { flex-wrap: nowrap; align-items: center; gap: 6px; }
.grade-chips > span { color: #E6F7F6; font-size: 14px; font-weight: 600; margin-right: 4px; white-space: nowrap; }
.grade-chips a { padding: 7px 12px; min-width: 40px; text-align: center; }
.rail-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -10px 0 18px; padding-bottom: 2px; }
.rail-tabs button { flex: none; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font: inherit; font-size: 14.5px; font-weight: 600; padding: 7px 15px; border-radius: 999px; cursor: pointer; }
.rail-tabs button.is-on { background: var(--teal-d); border-color: var(--teal-d); color: #fff; }
.rail-more { margin: 14px 0 0; text-align: right; }
/* Footer teal like the "S" in the logo */
.ftr { background: #1C7D7F; color: #E3F4F3; }
.ftr-grid a, .ftr-base a { color: #E3F4F3; }
.ftr-base { border-top-color: rgba(255,255,255,.22); }
.social-h { color: #fff; font-weight: 700; font-size: 14px; margin: 0 0 8px; }
.social a { background: rgba(255,255,255,.14); }
.social-sd { flex-direction: column; gap: 2px; margin-top: 8px; }
.social-sd a { display: flex !important; width: auto; height: auto; border-radius: 0; background: none; gap: 8px; padding: 4px 0 !important; justify-content: flex-start; }
.social-sd a:hover { background: none; color: var(--sun); transform: none; }
.social-sd .ic { width: 18px; height: 18px; }
.fd.free { background: var(--sun-l); border-color: var(--sun); color: var(--teal-dd); }
.free-pick { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: var(--sun-l); color: var(--ink); text-decoration: none; margin: 12px 0; border: 1px dashed var(--sun); }
.free-pick > .ic:first-child { color: var(--orange); width: 26px; height: 26px; flex: none; }
.free-pick span { flex: 1; }
.glance-sec { margin: 36px 0; padding: 26px 28px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); }
.glance-sec h2 { font-size: 24px; margin-bottom: 16px; }
.glance-sec .glance div { grid-template-columns: 110px 1fr; font-size: 15.5px; }
/* hero CTAs: one row on desktop */
.hero-ctas .btn { padding: 12px 18px; font-size: 15px; }
/* STEAM Services, Parents */
.svc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.svc-cols .eyebrow .ic { width: 16px; height: 16px; }
.svc-list { display: grid; gap: 14px; margin-top: 18px; }
.svc-card { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 22px 24px; color: var(--ink); text-decoration: none; transition: transform .3s var(--spring), box-shadow .3s; }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.svc-card > .ic { grid-row: span 3; width: 28px; height: 28px; padding: 10px; border-radius: 14px; background: var(--orange-l); color: var(--orange); box-sizing: content-box; }
.svc-card h3 { font-size: 20px; margin: 0 0 4px; }
.svc-card p { color: var(--ink-2); font-size: 15.5px; margin: 0 0 8px; }
.svc-card .link { color: var(--teal); font-weight: 700; font-size: 15px; display: inline-flex; gap: 6px; align-items: center; }
.parent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.kit-band { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.kit-band p { max-width: 60ch; color: var(--ink-2); }
.hs-opt { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r); padding: 18px 20px; margin-top: 14px; }
.hs-opt h3 { display: flex; gap: 8px; align-items: center; font-size: 19px; margin-bottom: 4px; } .hs-opt h3 .ic { color: var(--orange); }
.hs-opt p { color: var(--ink-2); font-size: 15.5px; margin: 0 0 10px; }
/* STEAM Kits */
.steps-4 { grid-template-columns: repeat(4, 1fr); }
.kit-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; }
.kit-types.two-up { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin: 0 auto; }
.kit-type { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 26px; }
.kit-type .pill { background: var(--aqua-l); color: var(--teal-d); }
.kit-type h3 { font-size: 22px; margin: 12px 0 2px; }
.kt-price { font-size: 26px; font-weight: 800; color: var(--orange); margin: 0 0 10px; }
.kt-price span { font-size: 15px; font-weight: 500; color: var(--muted); }
.kit-type p { color: var(--ink-2); font-size: 15.5px; }
.kit-search { max-width: 320px; }
.kit-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); }
.kit-table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.kit-table th { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 14px 16px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.kit-table td { padding: 10px 16px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.kit-table td:first-child { display: flex; align-items: center; gap: 12px; font-weight: 600; white-space: normal; }
.kit-table td:first-child img { width: 40px; height: 40px; border-radius: 8px; flex: none; }
.kit-table td:nth-child(n+3) { font-variant-numeric: tabular-nums; font-weight: 600; }
.kit-table tr:last-child td { border-bottom: 0; }
.kit-table a { color: var(--ink); text-decoration: none; } .kit-table a:hover { color: var(--teal); text-decoration: underline; }
.muted { color: var(--muted); font-weight: 400; }
/* Professional Development */
.feature-grid.four { grid-template-columns: repeat(4, 1fr); }
.kit-pd { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 28px; }
.kit-pd h3 { font-size: 22px; }
.phero-sub { color: #E6F7F6; max-width: 60ch; font-size: 16.5px; }
.chk-row { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.chk-row legend { font-weight: 600; font-size: 15px; margin-bottom: 4px; padding: 0; }
.contact-side .h2 { font-size: clamp(26px, 3vw, 34px); }
/* Blog */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.post-card { background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); overflow: hidden; color: var(--ink); text-decoration: none; transition: transform .3s var(--spring), box-shadow .3s; }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.post-card img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.post-card > div { padding: 20px 22px; } .post-card h2 { font-size: 21px; } .post-card p { color: var(--ink-2); font-size: 15.5px; }
.post-card .link { color: var(--teal); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.post h1 { margin: 6px 0 20px; }
.post-hero { width: 100%; height: auto; border-radius: var(--r-lg); margin-bottom: 24px; aspect-ratio: 3/2; object-fit: cover; }
.post .prose img { max-width: 100%; height: auto; border-radius: var(--r); }
.post .prose blockquote { border-left: 4px solid var(--orange); margin: 24px 0; padding: 6px 0 6px 20px; font-size: 1.1em; color: var(--ink-2); }
.post-cta { display: flex; gap: 20px; align-items: center; background: var(--cream); border-radius: var(--r-lg); padding: 22px 26px; margin-top: 40px; }
.post-cta img { width: 70px; height: auto; flex: none; } .post-cta p { margin: 4px 0 10px; color: var(--ink-2); }
@media (max-width: 960px) {
  .svc-cols, .kit-types, .kit-types.two-up { grid-template-columns: 1fr; }
  .steps-4, .feature-grid.four { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .steps-4, .feature-grid.four { grid-template-columns: 1fr; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .grade-chips { flex-wrap: wrap; }
  .kit-table td, .kit-table th { padding: 10px 10px; }
  .post-cta { flex-direction: column; text-align: center; }
}
.sec-head .sec-lede { margin: 12px auto 0; }
.kit-type .kt-price { font-size: 26px; font-weight: 800; color: var(--orange); margin: 0 0 10px; }
.kit-type .kt-price span { font-size: 15px; font-weight: 500; color: var(--muted); }
.bundle-list-h { font-weight: 700; margin: 6px 0 6px; }
.bundle-list { list-style: none; padding: 0; margin: 0 0 18px; columns: 2; column-gap: 20px; font-size: 15.5px; }
.bundle-list li { display: flex; gap: 6px; align-items: baseline; break-inside: avoid; padding: 3px 0; }
.bundle-list .ic { width: 15px; height: 15px; color: var(--teal); flex: none; transform: translateY(2px); }
.bundle-list a { color: var(--ink); } .bundle-list a:hover { color: var(--teal); }
@media (max-width: 640px) { .bundle-list { columns: 1; } }
.gift-ideas { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 6px; font-size: 15.5px; }
.gift-ideas li { display: flex; gap: 8px; align-items: baseline; } .gift-ideas .ic { color: var(--orange); width: 16px; height: 16px; flex: none; transform: translateY(2px); }
.pdp-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.wrap.pdp-videos { margin: 0 auto; }
@media (max-width: 640px) {
  .grade-chips { flex-wrap: nowrap; gap: 5px; }
  .grade-chips > span { display: none; }
  .grade-chips a { padding: 7px 0; min-width: 0; flex: 1; }
}
/* Page headers match the homepage hero: lighter teal, soft glow, wave, no graph-paper grid */
.grid-bg { display: none; }
.phero { background: radial-gradient(1000px 520px at 78% 25%, #33A3A3 0%, var(--teal) 42%, #166F70 100%); padding: 36px 0 86px; }
.phero-orange { background: radial-gradient(1000px 520px at 78% 25%, #F7A464 0%, var(--orange) 45%, #CF5A12 100%); }
.phero .lede, .phero-sub { color: #E6F7F6; }
.phero .hero-glow { width: 520px; height: 520px; right: 2%; top: -25%; }
.phero-orange .hero-glow { background: radial-gradient(circle, rgba(255,214,170,.35), transparent 60%); }
.phero .hero-wave { height: 54px; }
/* Membership band + Innovate section: same lighter teal as the heroes */
.member-sec, .innovate { background: radial-gradient(1100px 560px at 75% 30%, #33A3A3 0%, var(--teal) 45%, #166F70 100%); }
.innovate p, .slot span { color: #E6F7F6; }
.mini-plan, .slot { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
.mini-plan:hover { background: rgba(255,255,255,.22); }
.schedule { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); }
/* Remaining dark-teal surfaces -> the lighter theme teal */
.feature-quote { background: radial-gradient(900px 400px at 85% 15%, #33A3A3 0%, var(--teal) 50%, #166F70 100%); }
.feature-quote::before { color: rgba(255,255,255,.18); }
.feature-quote figcaption { color: #E6F7F6; }
.sd-card::after { background: linear-gradient(to top, rgba(17,92,93,.95) 10%, rgba(22,111,112,.25) 60%, transparent); }
.sd-copy p { color: #E6F7F6; }
.subj-art-bg { background: linear-gradient(145deg, #33A3A3, #166F70); }
.gc { background: linear-gradient(135deg, #33A3A3, #166F70); }
.scout-head { background: linear-gradient(135deg, #33A3A3, var(--teal)); }
.news-form .btn-primary { --bg: var(--teal); }