.momo-hub, .momo-hub * { box-sizing: border-box; }
.momo-hub { background:#fff; color:#111; padding:72px 20px 90px; overflow:hidden; }
.momo-hub-inner { max-width:1280px; margin:0 auto; }
.momo-hero { text-align:center; max-width:820px; margin:0 auto 44px; }
.momo-eyebrow { margin:0 0 14px; color:#e8703a; font-size:13px; line-height:1.2; letter-spacing:4px; font-weight:700; text-transform:uppercase; }
.momo-hero h1 { margin:0; color:#111; font-size:clamp(42px, 5.2vw, 76px); line-height:1.02; letter-spacing:-0.045em; font-weight:700; }
.momo-hero-text { max-width:720px; margin:28px auto 0; color:#707070; font-size:clamp(17px, 1.7vw, 22px); line-height:1.75; font-weight:400; }
.momo-filter-bar { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin:0 auto 62px; }
.momo-filter { appearance:none; border:1px solid #e4e4e4; background:#fff; color:#606060; min-height:50px; padding:0 28px; border-radius:999px; font-size:16px; font-weight:600; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.025); transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.momo-filter:hover { transform:translateY(-1px); border-color:#cfcfcf; color:#111; }
.momo-filter.active { background:#111; color:#fff; border-color:#111; box-shadow:0 16px 34px rgba(0,0,0,.12); }
.momo-exercise-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:24px; align-items:start; }
.momo-exercise-card { background:#fff; border:1px solid #eeeeee; border-radius:18px; overflow:hidden; box-shadow:0 12px 34px rgba(0,0,0,.045); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.momo-exercise-card:hover { transform:translateY(-3px); border-color:#e5e5e5; box-shadow:0 18px 44px rgba(0,0,0,.08); }
.momo-exercise-media { background:#fafafa; border-bottom:1px solid #f0f0f0; }
.momo-exercise-media img { display:block; width:100%; aspect-ratio: 1 / 0.82; object-fit:cover; }
.momo-placeholder { aspect-ratio:1/.82; display:flex; align-items:center; justify-content:center; background:#f5f5f3; color:#999; font-weight:700; letter-spacing:.2em; }
.momo-exercise-body { padding:22px; }
.momo-card-meta { color:#e8703a; font-size:12px; letter-spacing:2.5px; line-height:1.4; font-weight:800; text-transform:uppercase; margin-bottom:10px; }
.momo-exercise-body h3 { margin:0 0 10px; color:#111; font-size:22px; line-height:1.2; font-weight:700; letter-spacing:-.02em; }
.momo-difficulty { margin:0 0 14px; color:#777; font-size:14px; font-weight:600; }
.momo-accordion-toggle { width:100%; margin-top:10px; min-height:46px; border:1px solid #e9e9e9; background:#f9f9f8; color:#222; border-radius:999px; padding:0 16px 0 20px; display:flex; justify-content:space-between; align-items:center; gap:12px; cursor:pointer; font-size:14px; font-weight:700; transition:.18s ease; }
.momo-accordion-toggle:hover { background:#111; color:#fff; border-color:#111; }
.momo-accordion-icon { display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:#fff; color:#111; font-size:17px; line-height:1; transition:transform .18s ease; }
.momo-accordion-toggle.open .momo-accordion-icon { transform:rotate(180deg); }
.momo-instructions { margin-top:18px; padding-top:18px; border-top:1px solid #eee; color:#666; font-size:15px; line-height:1.75; }
.momo-instructions p { margin:0 0 12px; }
.momo-hidden { display:none !important; }
.momo-empty-state { grid-column:1/-1; text-align:center; color:#777; font-size:18px; padding:40px 20px 60px; }
.momo-empty-state strong { display:block; color:#555; margin-bottom:10px; }
.momo-section { margin-top:96px; }
.momo-section-head { text-align:center; max-width:780px; margin:0 auto 38px; }
.momo-section-head h2 { margin:0; color:#111; font-size:clamp(34px,4.2vw,58px); line-height:1.08; letter-spacing:-.04em; font-weight:700; }
.momo-section-head p { margin:18px auto 0; color:#747474; font-size:18px; line-height:1.65; }
.momo-tip-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
.momo-tip-card, .momo-resource-card { background:#fff; border:1px solid #eee; border-radius:20px; padding:26px; box-shadow:0 12px 34px rgba(0,0,0,.04); }
.momo-tip-icon, .momo-resource-icon { width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#f5f5f3; margin-bottom:18px; font-size:22px; }
.momo-tip-card h3, .momo-resource-card h3 { margin:0 0 12px; color:#111; font-size:23px; line-height:1.2; font-weight:700; letter-spacing:-.02em; }
.momo-tip-text, .momo-resource-text { color:#666; font-size:16px; line-height:1.7; }
.momo-tip-text p, .momo-resource-text p { margin:0 0 12px; }
.momo-resource-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
.momo-resource-image { margin:-26px -26px 22px; border-radius:20px 20px 0 0; overflow:hidden; background:#f5f5f3; }
.momo-resource-image img { display:block; width:100%; aspect-ratio: 16/9; object-fit:cover; }
.momo-resource-link { display:inline-flex; margin-top:8px; color:#111; text-decoration:none; font-size:15px; font-weight:800; }
.momo-resource-link:hover { color:#e8703a; }
@media (max-width:1100px) { .momo-exercise-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } .momo-tip-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:768px) { .momo-hub { padding:46px 14px 64px; } .momo-hero { margin-bottom:30px; } .momo-eyebrow { font-size:11px; letter-spacing:2.5px; } .momo-hero h1 { font-size:42px; letter-spacing:-.035em; } .momo-hero-text { margin-top:18px; font-size:16px; line-height:1.65; } .momo-filter-bar { justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; gap:10px; margin-bottom:38px; padding:0 2px 10px; -webkit-overflow-scrolling:touch; } .momo-filter { flex:0 0 auto; min-height:44px; padding:0 22px; font-size:14px; } .momo-exercise-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; } .momo-exercise-body { padding:14px; } .momo-card-meta { font-size:10px; letter-spacing:1.6px; } .momo-exercise-body h3 { font-size:17px; } .momo-accordion-toggle { min-height:42px; font-size:13px; } .momo-instructions { font-size:14px; } .momo-section { margin-top:64px; } .momo-section-head { margin-bottom:26px; } .momo-section-head h2 { font-size:32px; } .momo-section-head p { font-size:16px; } .momo-tip-grid, .momo-resource-grid { grid-template-columns:1fr; gap:14px; } .momo-tip-card, .momo-resource-card { padding:22px; } }