/* Уншигч Унага -- Page Templates v2
   Custom branded header/footer (replacing get_header()/get_footer() so the
   design never clashes with the active theme) + a lighter, rounder, more
   playful palette + real motion (floating mascot, scroll reveals, animated
   counters, hover wiggle) -- per direct feedback that the v1 dark-hero
   travelsim-style treatment read as too serious/commercial for a kids' product. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.unaga-body { margin: 0; background: var(--unaga-white); }

.unaga-page { font-family: var(--unaga-font-body); color: var(--unaga-grey-900); overflow-x: hidden; }
.unaga-page h1, .unaga-page h2, .unaga-page h3 { font-family: var(--unaga-font-display); }
.unaga-page .unaga-container { max-width: var(--unaga-max-width); margin: 0 auto; padding: 0 var(--unaga-space-6); }
.unaga-page section { padding: var(--unaga-space-16) 0; position: relative; }

/* ============================================================
   Custom Header
   ============================================================ */
.unaga-site-header {
	background: rgba(255,255,255,0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--unaga-grey-100);
	position: sticky;
	top: 0;
	z-index: 50;
	padding: var(--unaga-space-3) 0;
	width: 100%;   /* span full viewport width so sticky positioning works correctly */
}
.unaga-site-header .unaga-container {
  max-width: var(--unaga-max-width);
  margin: 0 auto;
  padding: 0 var(--unaga-space-6);
}
.unaga-site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--unaga-space-4); }
.unaga-site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--unaga-grey-900); }
.unaga-site-logo img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.unaga-site-logo span { font-family: var(--unaga-font-display); font-weight: 700; font-size: var(--unaga-text-lg); }
.unaga-site-nav { display: flex; gap: var(--unaga-space-6); }
.unaga-site-nav a { color: var(--unaga-grey-600); text-decoration: none; font-weight: 600; font-size: var(--unaga-text-sm); }
.unaga-site-nav a:hover { color: var(--unaga-fuchsia); }
.unaga-site-header-actions { display: flex; align-items: center; gap: var(--unaga-space-4); }
.unaga-site-nav-link { color: var(--unaga-grey-900); font-weight: 700; text-decoration: none; font-size: var(--unaga-text-sm); }
.unaga-btn-sm { padding: 9px 20px; font-size: var(--unaga-text-sm); }

@media (max-width: 700px) {
	.unaga-site-nav { display: none; }
	.unaga-site-logo span { display: none; }
}

/* ============================================================
   Hero -- light, warm, mascot-led (replaces the dark band)
   ============================================================ */
.unaga-hero {
	background: var(--unaga-white);
	color: var(--unaga-grey-900);
	padding: var(--unaga-space-16) 0 var(--unaga-space-10);
	text-align: center;
	overflow: hidden;
}
.unaga-hero-deco {
	position: absolute;
	border-radius: 50%;
	opacity: 0.5;
	z-index: 0;
	animation: unaga-float 7s ease-in-out infinite;
}
.unaga-hero-deco.d1 { width: 70px; height: 70px; background: var(--unaga-fuchsia-tint); top: 18%; left: 8%; animation-delay: 0s; }
.unaga-hero-deco.d2 { width: 40px; height: 40px; background: #FFE9A8; top: 12%; right: 12%; animation-delay: 1.2s; }
.unaga-hero-deco.d3 { width: 90px; height: 90px; background: #E7F6EE; bottom: 8%; left: 14%; animation-delay: 2.1s; }
.unaga-hero-deco.d4 { width: 50px; height: 50px; background: var(--unaga-fuchsia-tint); bottom: 14%; right: 10%; animation-delay: 0.6s; }

.unaga-hero-content { position: relative; z-index: 1; }
.unaga-hero-mascot {
	width: 132px;
	height: 132px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: var(--unaga-shadow-card-hover);
	margin: 0 auto var(--unaga-space-4);
	display: block;
	animation: unaga-bob 4s ease-in-out infinite;
}
.unaga-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--unaga-space-2);
	background: var(--unaga-fuchsia-tint);
	color: var(--unaga-fuchsia-dark);
	border-radius: var(--unaga-radius-pill);
	padding: 6px 16px;
	font-size: var(--unaga-text-sm);
	font-weight: 700;
	margin-bottom: var(--unaga-space-4);
}
.unaga-hero h1 {
	font-size: var(--unaga-text-3xl);
	line-height: 1.15;
	margin: 0 0 var(--unaga-space-4);
}
.unaga-hero h1 .accent { color: var(--unaga-fuchsia); }
.unaga-hero p.lead {
	font-size: var(--unaga-text-lg);
	color: var(--unaga-grey-600);
	max-width: 560px;
	margin: 0 auto var(--unaga-space-8);
}
/* ── Hero CTAs ── */
.unaga-hero-ctas {
	display: flex;
	gap: var(--unaga-space-3);
	justify-content: center;
	flex-wrap: nowrap;   /* keep side-by-side on mobile */
	margin-bottom: var(--unaga-space-8);
}

.unaga-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--unaga-space-2);
	border-radius: var(--unaga-radius-pill);
	padding: 14px 30px;
	font-weight: 700;
	font-size: var(--unaga-text-base);
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
.unaga-btn:hover { transform: translateY(-2px) rotate(-1deg) scale(1.03); }
.unaga-btn:active { transform: translateY(0) scale(0.98); }
.unaga-btn-fuchsia { background: var(--unaga-fuchsia); color: var(--unaga-white); box-shadow: 0 6px 16px rgba(232,25,90,0.35); }
.unaga-btn-outline-light { background: var(--unaga-white); color: var(--unaga-grey-900); border-color: var(--unaga-grey-300); }
.unaga-btn-outline-light:hover { border-color: var(--unaga-fuchsia); }
.unaga-btn-outline-dark { background: transparent; color: var(--unaga-grey-900); border-color: var(--unaga-grey-400); }
.unaga-btn-outline-dark:hover { border-color: var(--unaga-fuchsia); color: var(--unaga-fuchsia); }
.unaga-btn-black { background: var(--unaga-black); color: var(--unaga-white); }

/* ── Stat pills — 2×2 grid on mobile, single row on wider screens ── */
.unaga-stat-pills {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	max-width: 360px;
	margin: 0 auto;
}
@media (min-width: 600px) {
	.unaga-stat-pills {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		max-width: none;
		gap: var(--unaga-space-3);
	}
}
.unaga-stat-pill {
	background: var(--unaga-white);
	border: 1px solid var(--unaga-grey-100);
	box-shadow: var(--unaga-shadow-card);
	border-radius: 14px;
	padding: 12px 10px;
	font-size: 11px;
	color: var(--unaga-grey-500);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	text-align: center;
	line-height: 1.2;
}
.unaga-stat-pill strong {
	color: var(--unaga-fuchsia);
	font-size: var(--unaga-text-xl);
	font-family: var(--unaga-font-display);
	line-height: 1;
}
/* Restore pill shape on wider screens */
@media (min-width: 600px) {
	.unaga-stat-pill {
		flex-direction: row;
		border-radius: var(--unaga-radius-pill);
		padding: 10px 22px;
		font-size: var(--unaga-text-sm);
		text-align: left;
		gap: 6px;
	}
	.unaga-stat-pill strong {
		font-size: var(--unaga-text-lg);
	}
}

/* ============================================================
   Scroll-reveal + counters
   ============================================================ */
.unaga-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.unaga-reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---------- Numbered steps ---------- */
.unaga-section-label { text-align: center; color: var(--unaga-fuchsia); font-weight: 700; font-size: var(--unaga-text-sm); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--unaga-space-2); }
.unaga-section-title { text-align: center; font-size: var(--unaga-text-2xl); margin: 0 0 var(--unaga-space-2); }
.unaga-section-sub { text-align: center; color: var(--unaga-grey-600); max-width: 480px; margin: 0 auto var(--unaga-space-12); }

.unaga-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--unaga-space-8); }
.unaga-step-card { position: relative; padding: var(--unaga-space-6); background: var(--unaga-white); border-radius: var(--unaga-radius-lg); box-shadow: var(--unaga-shadow-card); transition: transform .2s ease; }
.unaga-step-card:hover { transform: translateY(-4px) rotate(0.5deg); }
.unaga-step-number {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--unaga-fuchsia-tint); color: var(--unaga-fuchsia-dark);
	font-family: var(--unaga-font-display); font-size: var(--unaga-text-lg); font-weight: 800;
	margin-bottom: var(--unaga-space-3);
}
.unaga-step-card h3 { font-size: var(--unaga-text-lg); margin: 0 0 var(--unaga-space-2); }
.unaga-step-card p { color: var(--unaga-grey-600); margin: 0; }

/* ---------- Story / sample card grid ---------- */
.unaga-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--unaga-space-4); }
.unaga-sample-card {
	background: var(--unaga-white);
	border: 1px solid var(--unaga-grey-100);
	border-radius: var(--unaga-radius-md);
	padding: var(--unaga-space-4);
	box-shadow: var(--unaga-shadow-card);
	transition: box-shadow .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
	text-decoration: none;
	color: inherit;
	display: block;
}
.unaga-sample-card:hover { box-shadow: var(--unaga-shadow-card-hover); transform: translateY(-5px) rotate(-1deg); }
.unaga-sample-card .thumb { width: 100%; height: 120px; object-fit: cover; border-radius: var(--unaga-radius-sm); margin-bottom: var(--unaga-space-3); background: var(--unaga-cream); }
.unaga-sample-card .chip { display: inline-block; font-size: var(--unaga-text-xs); font-weight: 700; padding: 3px 10px; border-radius: var(--unaga-radius-pill); margin-bottom: var(--unaga-space-2); }
.unaga-chip-beginner { background: #E6F7EC; color: var(--unaga-green); }
.unaga-chip-intermediate { background: #FEF3D6; color: #946200; }
.unaga-chip-advanced { background: var(--unaga-fuchsia-tint); color: var(--unaga-fuchsia-dark); }
.unaga-sample-card h4 { font-size: var(--unaga-text-base); margin: 0 0 4px; }
.unaga-sample-card .meta { font-size: var(--unaga-text-xs); color: var(--unaga-grey-600); }
.unaga-sample-card .cta { font-size: var(--unaga-text-sm); font-weight: 700; color: var(--unaga-fuchsia); margin-top: var(--unaga-space-2); display: block; }

/* ============================================================
   Library section -- featured book + horizontal shelves
   (white background throughout; the shelf "spine" cards mirror the
   mobile bookshelf look used on the member library board)
   ============================================================ */
.unaga-library-section { background: var(--unaga-white); padding-top: var(--unaga-space-10); }

.unaga-featured-book {
	display: flex; align-items: center; gap: var(--unaga-space-6);
	background: var(--unaga-cream); border-radius: var(--unaga-radius-lg);
	padding: var(--unaga-space-6); margin-bottom: var(--unaga-space-12);
	text-decoration: none; color: inherit;
	transition: transform .18s ease, box-shadow .18s ease;
}
.unaga-featured-book:hover { box-shadow: var(--unaga-shadow-card-hover); transform: translateY(-2px); }
.unaga-featured-cover {
	width: 120px; height: 164px; flex-shrink: 0; border-radius: var(--unaga-radius-sm);
	display: flex; align-items: center; justify-content: center; font-size: 52px;
	box-shadow: var(--unaga-shadow-card-hover); overflow: hidden;
}
.unaga-featured-cover img { width: 100%; height: 100%; object-fit: cover; }
.unaga-featured-eyebrow {
	display: inline-block; font-size: var(--unaga-text-xs); font-weight: 800; text-transform: uppercase;
	letter-spacing: .03em; color: var(--unaga-fuchsia); margin-bottom: var(--unaga-space-1);
}
.unaga-featured-title { font-size: var(--unaga-text-xl); margin: 0 0 var(--unaga-space-1); line-height: 1.25; }
.unaga-featured-meta { font-size: var(--unaga-text-sm); color: var(--unaga-grey-600); margin-bottom: var(--unaga-space-4); }

/* Age category tabs -- used inside the age-category shelf below */
.unaga-age-tabs {
	display: flex; gap: var(--unaga-space-3); flex-wrap: wrap;
	margin: 0 0 var(--unaga-space-6);
}
.unaga-age-tab {
	font-family: var(--unaga-font-body); font-size: var(--unaga-text-sm); font-weight: 700;
	padding: 11px 22px; border-radius: var(--unaga-radius-pill);
	border: 2px solid var(--unaga-grey-300); background: var(--unaga-white);
	color: var(--unaga-grey-600); cursor: pointer; white-space: nowrap;
	transition: all .15s ease;
}
.unaga-age-tab:hover { border-color: var(--unaga-fuchsia); color: var(--unaga-fuchsia); }
.unaga-age-tab.active { background: var(--unaga-fuchsia); border-color: var(--unaga-fuchsia); color: #fff; box-shadow: 0 4px 12px rgba(232,25,90,.3); }
@media (max-width: 640px) {
	.unaga-age-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--unaga-space-2); margin-bottom: var(--unaga-space-4); }
	.unaga-age-tab { padding: 10px 18px; }
}

/* Age-category shelf -- distinct, roomy cream card so it reads as its own
   section, set apart from the two plain-white language shelves above it. */
.unaga-age-shelf-section {
	background: var(--unaga-cream); border-radius: var(--unaga-radius-lg);
	box-shadow: var(--unaga-shadow-card);
	padding: var(--unaga-space-8);
}
.unaga-age-shelf-section .unaga-shelf-header { margin-bottom: var(--unaga-space-2); }
.unaga-age-shelf-section .unaga-shelf-sub { margin-bottom: var(--unaga-space-6); }
.unaga-age-shelf-section .unaga-shelf-ledge { background: var(--unaga-cream-deep); }
@media (max-width: 640px) {
	.unaga-age-shelf-section { padding: var(--unaga-space-6) var(--unaga-space-4); }
}

.unaga-shelf-section { margin-bottom: var(--unaga-space-12); }
.unaga-shelf-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--unaga-space-3); margin-bottom: var(--unaga-space-1); }
.unaga-shelf-title { font-size: var(--unaga-text-lg); margin: 0; }
.unaga-shelf-see-all { font-size: var(--unaga-text-sm); font-weight: 700; color: var(--unaga-fuchsia); text-decoration: none; white-space: nowrap; }
.unaga-shelf-see-all:hover { text-decoration: underline; }
.unaga-shelf-sub { color: var(--unaga-grey-600); font-size: var(--unaga-text-sm); margin: 0 0 var(--unaga-space-4); }
.unaga-shelf-empty { color: var(--unaga-grey-600); font-size: var(--unaga-text-sm); padding: var(--unaga-space-4) 0; }

.unaga-shelf-row {
	display: flex; gap: var(--unaga-space-4); overflow-x: auto; padding-bottom: var(--unaga-space-3);
	scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.unaga-shelf-book { flex-shrink: 0; width: 130px; text-decoration: none; color: inherit; scroll-snap-align: start; }
.unaga-shelf-spine {
	width: 130px; height: 176px; border-radius: var(--unaga-radius-sm);
	display: flex; align-items: center; justify-content: center; font-size: 44px; position: relative;
	box-shadow: inset -6px 0 12px rgba(0,0,0,.15), var(--unaga-shadow-card);
	transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
	overflow: hidden;
}
.unaga-shelf-book:hover .unaga-shelf-spine { transform: translateY(-4px); box-shadow: inset -6px 0 12px rgba(0,0,0,.15), var(--unaga-shadow-card-hover); }
.unaga-shelf-spine img { width: 100%; height: 100%; object-fit: cover; }
.unaga-shelf-badge {
	position: absolute; top: 8px; left: 8px; background: rgba(255,255,255,.92);
	font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; color: var(--unaga-black);
}
.unaga-shelf-book-title {
	font-size: var(--unaga-text-sm); font-weight: 700; margin-top: var(--unaga-space-2); line-height: 1.3;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.unaga-shelf-book-meta { font-size: var(--unaga-text-xs); color: var(--unaga-grey-600); margin-top: 2px; }
.unaga-shelf-ledge { height: 8px; background: var(--unaga-grey-100); border-radius: 4px; margin-top: -2px; }

@media (max-width: 640px) {
	.unaga-featured-book { flex-direction: column; align-items: flex-start; gap: var(--unaga-space-4); }
	.unaga-featured-cover { width: 96px; height: 130px; font-size: 40px; }
	.unaga-shelf-book, .unaga-shelf-spine { width: 104px; }
	.unaga-shelf-spine { height: 140px; font-size: 36px; }
}

/* ---------- Gamification preview band ---------- */
.unaga-gamify-band { background: var(--unaga-cream); border-radius: var(--unaga-radius-lg); margin: 0 var(--unaga-space-6); }
.unaga-gamify-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--unaga-space-6); text-align: center; }
.unaga-gamify-item .emoji { font-size: 40px; display: block; margin-bottom: var(--unaga-space-2); animation: unaga-float 5s ease-in-out infinite; }
.unaga-gamify-item:nth-child(2) .emoji { animation-delay: .4s; }
.unaga-gamify-item:nth-child(3) .emoji { animation-delay: .8s; }
.unaga-gamify-item:nth-child(4) .emoji { animation-delay: 1.2s; }
.unaga-gamify-item h4 { margin: 0 0 4px; font-size: var(--unaga-text-base); }
.unaga-gamify-item p { margin: 0; color: var(--unaga-grey-600); font-size: var(--unaga-text-sm); }

/* ---------- FAQ accordion ---------- */
.unaga-faq { max-width: 700px; margin: 0 auto; }
.unaga-faq details { border-bottom: 1px solid var(--unaga-grey-100); padding: var(--unaga-space-4) 0; }
.unaga-faq summary { font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.unaga-faq summary::-webkit-details-marker { display: none; }
.unaga-faq summary::after { content: '+'; font-size: 20px; color: var(--unaga-fuchsia); transition: transform .2s ease; }
.unaga-faq details[open] summary::after { content: '+'; transform: rotate(45deg); }
.unaga-faq p { color: var(--unaga-grey-600); margin: var(--unaga-space-2) 0 0; }

/* ---------- Closing CTA -- soft rounded gradient card, not a dark band ---------- */
.unaga-closing-cta {
	background: linear-gradient(135deg, var(--unaga-fuchsia) 0%, var(--unaga-fuchsia-dark) 100%);
	color: var(--unaga-white);
	text-align: center;
	border-radius: var(--unaga-radius-lg);
	margin: 0 var(--unaga-space-6);
	padding: var(--unaga-space-12) var(--unaga-space-6);
}
.unaga-closing-cta h2 { font-size: var(--unaga-text-2xl); margin-bottom: var(--unaga-space-2); }
.unaga-closing-cta p { color: rgba(255,255,255,0.85); margin-bottom: var(--unaga-space-6); }
.unaga-closing-cta .unaga-btn-fuchsia { background: var(--unaga-white); color: var(--unaga-fuchsia-dark); }

/* ============================================================
   Custom Footer
   ============================================================ */
.unaga-site-footer { background: var(--unaga-grey-100); margin-top: var(--unaga-space-16); padding-top: var(--unaga-space-12); }
.unaga-site-footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--unaga-space-8); flex-wrap: wrap; padding-bottom: var(--unaga-space-8); }
.unaga-footer-brand { display: flex; gap: var(--unaga-space-3); align-items: flex-start; max-width: 320px; }
.unaga-footer-brand img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.unaga-footer-brand strong { font-family: var(--unaga-font-display); font-size: var(--unaga-text-lg); }
.unaga-footer-brand p { margin: 4px 0 0; color: var(--unaga-grey-600); font-size: var(--unaga-text-sm); }
.unaga-footer-links { display: flex; gap: var(--unaga-space-6); }
.unaga-footer-links a { color: var(--unaga-grey-600); text-decoration: none; font-weight: 600; font-size: var(--unaga-text-sm); }
.unaga-footer-links a:hover { color: var(--unaga-fuchsia); }
.unaga-site-footer-bottom { border-top: 1px solid var(--unaga-grey-300); padding: var(--unaga-space-4) 0; font-size: var(--unaga-text-xs); color: var(--unaga-grey-600); }

/* ============================================================
   Animations
   ============================================================ */
@keyframes unaga-float {
	0%, 100% { transform: translateY(0) translateX(0); }
	50% { transform: translateY(-14px) translateX(6px); }
}
@keyframes unaga-bob {
	0%, 100% { transform: translateY(0) rotate(-2deg); }
	50% { transform: translateY(-10px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
	.unaga-hero-mascot, .unaga-hero-deco, .unaga-gamify-item .emoji { animation: none; }
	.unaga-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Member Page -- app-bar header + tab navigation
   ============================================================ */
.unaga-member-topbar {
	background: var(--unaga-white);
	border-bottom: 1px solid var(--unaga-grey-100);
	padding: var(--unaga-space-4) 0;
	position: sticky;
	top: 0;
	z-index: 5;
}
.unaga-member-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--unaga-space-4);
  flex-wrap: wrap;
  max-width: var(--unaga-max-width);
  margin: 0 auto;
  padding: 0 var(--unaga-space-6);
}
.unaga-member-identity { display: flex; align-items: center; gap: var(--unaga-space-3); }
.unaga-member-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--unaga-cream); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.unaga-member-identity .name { font-weight: 700; font-size: var(--unaga-text-base); }
.unaga-member-identity .sub { font-size: var(--unaga-text-xs); color: var(--unaga-grey-600); }
.unaga-member-quickstats { display: flex; gap: var(--unaga-space-3); }
.unaga-member-quickstats span { font-size: var(--unaga-text-sm); font-weight: 700; background: var(--unaga-cream); border-radius: var(--unaga-radius-pill); padding: 6px 14px; }

.unaga-member-tabs {
	display: flex;
	gap: var(--unaga-space-2);
	background: var(--unaga-cream);
	padding: var(--unaga-space-2);
	border-radius: var(--unaga-radius-pill);
	max-width: 480px;
	margin: var(--unaga-space-6) auto;
}
/* NOTE: .unaga-member-tab and .unaga-member-panel are defined in frontend.css
   for the member dashboard panels. These were removed from page-templates.css
   to prevent a class-name collision that caused the entire active tab panel
   to inherit fuchsia background + white text (hiding story card titles). */
.unaga-home-tab {
	flex: 1;
	text-align: center;
	padding: 10px 16px;
	border-radius: var(--unaga-radius-pill);
	font-weight: 700;
	font-size: var(--unaga-text-sm);
	cursor: pointer;
	border: none;
	background: transparent;
	color: var(--unaga-grey-600);
	transition: transform .15s ease;
}
.unaga-home-tab.active { background: var(--unaga-fuchsia); color: var(--unaga-white); }
.unaga-home-tab:hover { transform: translateY(-1px); }
.unaga-home-panel { display: none; }
.unaga-home-panel.active { display: block; animation: unaga-fade-in .3s ease; }
@keyframes unaga-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
	.unaga-steps-grid, .unaga-gamify-grid { grid-template-columns: repeat(2, 1fr); }
	.unaga-card-grid { grid-template-columns: repeat(2, 1fr); }
	.unaga-hero h1 { font-size: 30px; }
}
@media (max-width: 540px) {
	.unaga-steps-grid, .unaga-gamify-grid, .unaga-card-grid { grid-template-columns: 1fr; }
	.unaga-page section { padding: var(--unaga-space-12) 0; }
	.unaga-member-topbar-inner { flex-direction: column; align-items: flex-start; }
	.unaga-site-footer-inner { flex-direction: column; }

	/* Scale buttons down so they fit side-by-side on narrow phones */
	.unaga-hero-ctas .unaga-btn {
		padding: 12px 18px;
		font-size: 14px;
	}
	/* Give stat grid a little more breathing room at the bottom */
	.unaga-stat-pills {
		margin-bottom: var(--unaga-space-2);
	}
}

/* ---------- Homepage: per-category sections (v5) ---------- */
.unaga-cat-section {
	margin-bottom: var(--unaga-space-12);
}
.unaga-cat-section-header {
	display: flex;
	align-items: baseline;
	gap: var(--unaga-space-3);
	margin-bottom: var(--unaga-space-5);
	border-bottom: 2px solid var(--unaga-navy-light, #1e3a5f22);
	padding-bottom: var(--unaga-space-3);
}
.unaga-cat-section-title {
	font-size: var(--unaga-text-xl);
	font-weight: 800;
	color: var(--unaga-navy);
	margin: 0;
}
.unaga-cat-count {
	font-size: var(--unaga-text-sm);
	color: var(--unaga-grey-600);
	font-weight: 600;
}
.unaga-cat-extra {
	margin-top: var(--unaga-space-4) !important;
}
.unaga-cat-more-row {
	text-align: center;
	margin-top: var(--unaga-space-5);
}
.unaga-btn-outline {
	background: transparent;
	border: 2px solid var(--unaga-fuchsia);
	color: var(--unaga-fuchsia);
	border-radius: var(--unaga-radius-pill);
	padding: 10px 28px;
	font-size: var(--unaga-text-sm);
	font-weight: 700;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.unaga-btn-outline:hover {
	background: var(--unaga-fuchsia);
	color: #fff;
}