/*
Theme Name: AKUUU
Theme URI: https://akuuu.com
Description: AKUUU Child Theme for GeneratePress - Learn to Think, Not Just Memorize
Author: AKUUU
Author URI: https://akuuu.com
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: akuuu
Tags: education, learning, generatepress, child-theme
*/

/* ============================================================
   AKUUU WordPress Child Theme - Base Styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

/* Root Variables */
:root {
  --navy: #1a2744;
  --coral: #F26522;
  --yellow: #FFC107;
  --teal: #4ECDC4;
  --blue: #5B9BD5;
  --light-bg: #F5F6F8;
  --text-dark: #1a2744;
  --text-muted: #5a6a7a;
  --text-body: #3a4a5a;
  --white: #ffffff;
}

/* Base */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Nunito', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-body);
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.site-header {
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 999;
}

.site-header.transparent {
  background: transparent;
  box-shadow: none;
  position: absolute;
  width: 100%;
}

.site-header.transparent .main-navigation a,
.site-header.transparent .site-logo-text {
  color: var(--white);
}

.akuuu-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
}

.akuuu-nav .nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.akuuu-nav .nav-brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.akuuu-nav .nav-brand .brand-text {
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--navy);
}

.site-header.transparent .nav-brand .brand-text {
  color: var(--white);
}

.akuuu-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.akuuu-nav .nav-links a {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--navy);
  text-decoration: none;
  transition: color 0.2s ease;
}

.akuuu-nav .nav-links a:hover {
  color: var(--coral);
}

.akuuu-nav .nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--coral);
  color: var(--white);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.akuuu-nav .nav-cta:hover {
  background: #e05512;
  color: var(--white);
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

@media (max-width: 768px) {
  .akuuu-nav .nav-links,
  .akuuu-nav .nav-cta {
    display: none;
  }
  .mobile-menu-toggle {
    display: block;
  }
  .mobile-menu-toggle svg {
    width: 24px;
    height: 24px;
    color: var(--navy);
  }
  .site-header.transparent .mobile-menu-toggle svg {
    color: var(--white);
  }
}

/* Mobile Drawer */
.mobile-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.mobile-drawer.open {
  display: block;
}

.mobile-drawer .drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
}

.mobile-drawer .drawer-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  background: var(--white);
  padding: 2rem 1.5rem;
  box-shadow: -4px 0 20px rgba(0,0,0,0.1);
}

.mobile-drawer .drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 1.5rem;
}

.mobile-drawer .drawer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mobile-drawer .drawer-links a {
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--navy);
  text-decoration: none;
}

.mobile-drawer .drawer-links a:hover {
  color: var(--coral);
}

.mobile-drawer .drawer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background: var(--coral);
  color: var(--white);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  text-decoration: none;
  margin-top: 1.5rem;
  width: 100%;
}

/* ============================================================
   HERO SECTION
   ============================================================ */

.akuuu-hero {
  background: var(--navy);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 4rem;
  position: relative;
  overflow: hidden;
}

.akuuu-hero .hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

@media (max-width: 1024px) {
  .akuuu-hero .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.hero-mascot {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  margin: 0 auto;
}

.hero-mascot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.hero-mascot img.active {
  opacity: 1;
}

.hero-slider-dots {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.hero-slider-dots button {
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  background: rgba(255,255,255,0.3);
  transition: all 0.3s ease;
  padding: 0;
}

.hero-slider-dots button.active {
  background: var(--coral);
  width: 24px;
}

.hero-content h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.hero-content h1 span {
  color: var(--coral);
}

.hero-content p {
  font-size: 1.125rem;
  color: rgba(255,255,255,0.7);
  max-width: 480px;
  margin-bottom: 2rem;
}

@media (max-width: 1024px) {
  .hero-content p {
    margin-left: auto;
    margin-right: auto;
  }
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .hero-buttons {
    justify-content: center;
  }
}

.hero-buttons .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--coral);
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.875rem 1.5rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: background 0.2s ease;
  border: none;
  cursor: pointer;
}

.hero-buttons .btn-primary:hover {
  background: #e05512;
  color: var(--white);
}

.hero-buttons .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.875rem 1.5rem;
  border-radius: 9999px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.3);
  transition: background 0.2s ease;
  cursor: pointer;
}

.hero-buttons .btn-secondary:hover {
  background: rgba(255,255,255,0.1);
}

.hero-tagline {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
}

/* ============================================================
   SPIRAL + 5 STEPS COMBINED SECTION
   ============================================================ */

/* --- Top: Spiral Visual (dark navy) --- */
.spiral-visual-area {
  background: var(--navy);
  padding: 5rem 1.5rem;
}

.spiral-visual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .spiral-visual-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.spiral-text-col {
  text-align: left;
}

@media (max-width: 1024px) {
  .spiral-text-col {
    text-align: center;
  }
}

.spiral-intro {
  font-size: 1.25rem;
  color: var(--white);
  margin-bottom: 0.25rem;
}

.spiral-word {
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1;
  margin: 0;
}

.spiral-comma {
  color: var(--coral);
}

.spiral-underline {
  width: 140px;
  height: 4px;
  background: var(--coral);
  border-radius: 2px;
  margin: 0.5rem 0 0.75rem;
}

@media (max-width: 1024px) {
  .spiral-underline {
    margin: 0.5rem auto 0.75rem;
  }
}

.spiral-sub {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 900;
  color: var(--white);
  line-height: 1.2;
  margin: 0 0 1.25rem;
}

.spiral-desc {
  font-size: 1rem;
  color: rgba(255,255,255,0.65);
  max-width: 480px;
  line-height: 1.6;
}

/* --- Orbit System --- */
.spiral-orbit-col {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
}

.orbit-system {
  position: relative;
  width: 340px;
  height: 340px;
}

@media (max-width: 640px) {
  .orbit-system {
    width: 280px;
    height: 280px;
  }
}

.orbit-ring {
  position: absolute;
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.orbit-ring.ring-1 {
  width: 65%;
  height: 65%;
}

.orbit-ring.ring-2 {
  width: 85%;
  height: 85%;
}

.orbit-ring.ring-3 {
  width: 100%;
  height: 100%;
  border-color: rgba(255,255,255,0.1);
}

.orbit-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.orbit-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.orbit-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* --- Bottom: Steps Light Area --- */
.steps-light-area {
  background: #f0f2f5;
  padding: 4rem 1.5rem;
}

.steps-light-area .section-header {
  margin-bottom: 2.5rem;
}

.steps-light-area .section-label {
  font-weight: 800;
  font-size: 0.875rem;
  letter-spacing: 2px;
}

.title-underline {
  width: 80px;
  height: 3px;
  background: var(--coral);
  border-radius: 2px;
  margin: 0.75rem auto 0;
}

/* --- Steps Grid V2 --- */
.steps-grid-v2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto 2rem;
}

@media (max-width: 1024px) {
  .steps-grid-v2 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .steps-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

.step-card-v2 {
  background: var(--white);
  border-radius: 0.75rem;
  padding: 1.5rem 1.25rem;
  border-left: 3px solid;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}

.step-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.step-num-badge {
  position: absolute;
  top: -10px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.6875rem;
}

.step-icon-v2 {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.step-title-v2 {
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--navy);
  margin: 0 0 0.375rem;
}

.step-title-line {
  width: 100%;
  height: 1px;
  margin-bottom: 0.875rem;
  opacity: 0.3;
}

.step-desc-v2 p {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 0.25rem;
}

.step-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
  font-size: 0.8125rem;
  text-decoration: none;
  margin-top: 0.75rem;
  transition: gap 0.2s ease;
}

.step-learn-more:hover {
  gap: 0.5rem;
}

/* --- Spiral Arrow --- */
.spiral-arrow-wrap {
  max-width: 900px;
  margin: 0 auto 2.5rem;
  padding: 0 2rem;
}

.spiral-arrow {
  width: 100%;
  height: auto;
}

/* --- Quote Bar with Two Mascots --- */
.quote-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  background: var(--white);
  border-radius: 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

@media (max-width: 768px) {
  .quote-bar {
    grid-template-columns: auto 1fr;
    gap: 1rem;
  }
  .quote-mascot-right {
    display: none;
  }
}

.quote-mascot-left,
.quote-mascot-right {
  width: 80px;
  height: 80px;
  object-fit: contain;
  flex-shrink: 0;
}

.quote-content {
  text-align: left;
}

.quote-ornament {
  font-size: 1.75rem;
  color: var(--coral);
  line-height: 1;
  letter-spacing: -2px;
  margin-bottom: 0.25rem;
}

.quote-content blockquote {
  margin: 0;
  padding: 0;
  border: none;
}

.quote-content blockquote p {
  font-size: 1rem;
  color: var(--text-body);
  font-style: italic;
  font-weight: 600;
  line-height: 1.6;
  margin: 0 0 0.5rem;
}

.quote-content blockquote cite {
  display: block;
  color: var(--coral);
  font-size: 0.875rem;
  font-weight: 700;
  font-style: normal;
}

.steps-footer {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8125rem;
  margin-top: 1.25rem;
}

.steps-footer a {
  color: #9B6DD5;
  font-weight: 700;
  text-decoration: none;
}

.steps-footer a:hover {
  color: #b88de8;
}

/* ============================================================
   BLOG SECTION - Homepage
   ============================================================ */

.akuuu-blog {
  background: var(--light-bg);
  padding: 5rem 1.5rem;
}

.blog-section-container {
  max-width: 1200px;
  margin: 0 auto;
}

.blog-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 1024px) {
  .blog-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .blog-cards-grid {
    grid-template-columns: 1fr;
  }
}

.blog-card {
  background: var(--white);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

.blog-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.blog-card-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.blog-card:hover .blog-thumb {
  transform: scale(1.05);
}

.blog-card-placeholder {
  background: var(--navy);
}

.blog-placeholder-mascot {
  width: 60px;
  height: 60px;
  object-fit: contain;
  opacity: 0.6;
}

.blog-card-body {
  padding: 1.25rem;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-date {
  color: var(--coral);
}

.blog-card-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 0.5rem;
  line-height: 1.3;
  transition: color 0.2s ease;
}

.blog-card:hover .blog-card-title {
  color: var(--coral);
}

.blog-card-excerpt {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 0.875rem;
}

.blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--coral);
  transition: gap 0.2s ease;
}

.blog-card:hover .blog-read-more {
  gap: 0.5rem;
}

/* ============================================================
   SINGLE BLOG POST (Enhanced)
   ============================================================ */

/* ============================================================
   5 STEPS SECTION
   ============================================================ */

.akuuu-steps {
  background: var(--light-bg);
  padding: 6rem 1.5rem;
}

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.section-label {
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--coral);
  margin-bottom: 0.75rem;
}

.section-title {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--navy);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }
}

.step-card {
  background: var(--white);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.step-icon {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.step-card h3 {
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.step-card p {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.step-card .learn-more {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--coral);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* ============================================================
   METHOD IN ACTION SECTION
   ============================================================ */

.akuuu-action {
  background: var(--navy);
  padding: 6rem 1.5rem;
}

.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .action-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.action-content p {
  font-size: 1.25rem;
  color: var(--white);
}

.action-content h2 {
  font-size: clamp(2.5rem, 5vw, 3rem);
  font-weight: 900;
  color: var(--coral);
  margin-bottom: 1.5rem;
}

.action-content .desc {
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  max-width: 480px;
  margin-bottom: 2rem;
}

.timeline {
  position: relative;
  padding-left: 2rem;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: rgba(255,255,255,0.2);
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  position: relative;
}

.timeline-icon {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.125rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.timeline-item h4 {
  font-weight: 700;
  color: var(--white);
  font-size: 1.125rem;
  margin-bottom: 0.25rem;
}

.timeline-item p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
}

/* ============================================================
   RESOURCES SECTION
   ============================================================ */

.akuuu-resources {
  background: var(--light-bg);
  padding: 6rem 1.5rem;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1280px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .resources-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .resources-grid {
    grid-template-columns: 1fr;
  }
}

.resource-card {
  background: var(--white);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.resource-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.resource-card-link:hover h3 {
  color: var(--coral);
}

.resource-bar {
  height: 4px;
}

.resource-card .card-body {
  padding: 1.5rem;
}

.resource-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  margin-bottom: 0.75rem;
}

.resource-card h3 {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.resource-card p {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ============================================================
   SCIENCE SECTION
   ============================================================ */

.akuuu-science {
  background: var(--navy);
  padding: 6rem 1.5rem;
}

.science-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto 2.5rem;
}

@media (max-width: 640px) {
  .science-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

.science-card {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1rem;
  padding: 1.25rem 1rem 1rem;
  text-align: center;
  transition: border-color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.science-card:hover {
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}

.science-dash {
  width: 32px;
  height: 3px;
  border-radius: 2px;
  margin: 0 auto 0.875rem;
}

.science-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
}

.science-icon-wrap svg {
  display: block;
}

.science-card-title {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--white);
  margin: 0 0 0.5rem;
}

.science-card-line {
  width: 100%;
  height: 1px;
  margin: 0 auto 0.75rem;
  opacity: 0.35;
}

.science-card-desc {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  margin: 0 0 1rem;
  flex: 1;
}

.science-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8125rem;
  margin: 0 auto;
}

/* Highlight */
.highlight-blue {
  color: var(--blue);
  font-weight: 700;
}

.science-note {
  text-align: center;
  color: rgba(255,255,255,0.6);
  font-size: 0.9375rem;
  margin-bottom: 2rem;
}

/* Science Quote Block with Mascot */
.science-quote-block {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.25rem;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 1.75rem 2rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.25rem;
  background: rgba(255,255,255,0.02);
}

@media (max-width: 768px) {
  .science-quote-block {
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1.5rem;
  }
  .science-quote-block .quote-mascot {
    display: none;
  }
}

.quote-marks {
  font-size: 2.5rem;
  color: var(--coral);
  line-height: 1;
  letter-spacing: -2px;
  align-self: flex-start;
  padding-top: 0.25rem;
}

.science-quote-block blockquote {
  margin: 0;
  padding: 0;
  border: none;
  text-align: left;
}

.science-quote-block blockquote p {
  color: rgba(255,255,255,0.9);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.6;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.science-quote-block blockquote cite {
  display: block;
  color: var(--coral);
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 700;
}

.quote-mascot {
  width: 110px;
  height: 110px;
  object-fit: contain;
  flex-shrink: 0;
}

.science-footer {
  text-align: center;
  color: rgba(255,255,255,0.5);
  font-size: 0.875rem;
  margin-top: 1.5rem;
}

.science-footer a {
  color: #9B6DD5;
  font-weight: 700;
  text-decoration: none;
}

.science-footer a:hover {
  color: #b88de8;
}

/* ============================================================
   10 LEVELS SECTION
   ============================================================ */

.akuuu-levels {
  background: var(--light-bg);
  padding: 6rem 1.5rem;
}

.akuuu-levels .section-subtitle {
  max-width: 640px;
  margin: 0.75rem auto 0;
  color: var(--text-muted);
  font-size: 1.0625rem;
  text-align: center;
}

.levels-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.level-card {
  background: var(--white);
  border-radius: 1rem;
  padding: 1.5rem 1rem;
  text-align: center;
  border-top: 4px solid var(--level-color, var(--coral));
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.level-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.level-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.875rem;
  color: #fff;
  margin: 0 auto 0.75rem;
}

.level-name {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 0.375rem;
  line-height: 1.2;
}

.level-type {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: #f0f0f0;
  padding: 0.25rem 0.5rem;
  border-radius: 1rem;
  margin-bottom: 0.5rem;
}

.level-skill {
  font-size: 0.8125rem;
  color: var(--text-dark);
  margin: 0 0 0.5rem;
  line-height: 1.4;
}

.level-age {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

.levels-cta {
  text-align: center;
  margin-top: 2rem;
  color: var(--text-muted);
  font-size: 1rem;
}

.levels-cta a {
  color: var(--coral);
  font-weight: 700;
  text-decoration: none;
}

.levels-cta a:hover {
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .levels-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .akuuu-levels {
    padding: 3rem 1rem;
  }

  .levels-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .level-card {
    padding: 1.25rem 0.75rem;
  }

  .level-name {
    font-size: 0.875rem;
  }

  .level-skill {
    font-size: 0.75rem;
  }
}

/* ============================================================
   CONTENT TYPES SECTION
   ============================================================ */

.akuuu-content-types {
  background: var(--white);
  padding: 6rem 1.5rem;
}

.akuuu-content-types .section-subtitle {
  max-width: 640px;
  margin: 0.75rem auto 0;
  color: var(--text-muted);
  font-size: 1.0625rem;
  text-align: center;
}

.content-types-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.content-type-card {
  background: var(--white);
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  border: 2px solid #f0f0f0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: all 0.25s ease;
}

.content-type-card:hover {
  border-color: var(--ct-color, var(--coral));
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}

.content-type-emoji {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.75rem;
}

.content-type-stage {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.25rem 0.625rem;
  border-radius: 2rem;
  margin-bottom: 0.75rem;
}

.content-type-card h4 {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 0.5rem;
}

.content-type-card p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .content-types-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .akuuu-content-types {
    padding: 3rem 1rem;
  }

  .content-types-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .content-type-card {
    padding: 1.25rem 1rem;
  }

  .content-type-emoji {
    font-size: 2rem;
  }

  .content-type-card h4 {
    font-size: 0.9375rem;
  }
}

/* ============================================================
   COMMUNITY SECTION
   ============================================================ */

.akuuu-community {
  background: var(--light-bg);
  padding: 6rem 1.5rem;
  text-align: center;
}

.community-content {
  max-width: 672px;
  margin: 0 auto;
}

.community-content p {
  font-size: 1.25rem;
  color: var(--navy);
}

.community-content h2 {
  font-size: clamp(2.5rem, 5vw, 3rem);
  font-weight: 900;
  color: var(--coral);
  margin-bottom: 1rem;
}

.community-content .desc {
  font-size: 1rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.rating-card {
  background: var(--white);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  margin-bottom: 2rem;
}

.rating-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.rating-row .rating-text {
  font-weight: 700;
  color: var(--navy);
  font-size: 1rem;
}

.star-rating {
  display: flex;
  gap: 0.25rem;
}

.star-rating svg {
  width: 20px;
  height: 20px;
  color: var(--yellow);
  fill: var(--yellow);
}

.rating-row .rating-score {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.rating-count {
  font-size: 0.875rem;
  color: var(--text-muted);
}

.community-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--coral);
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.875rem 2rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: background 0.2s ease;
  border: none;
  cursor: pointer;
  margin-bottom: 0.5rem;
}

.community-cta:hover {
  background: #e05512;
  color: var(--white);
}

.community-note {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ============================================================
   TESTIMONIALS SECTION
   ============================================================ */

.akuuu-testimonials {
  background: var(--navy);
  padding: 6rem 1.5rem;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 1024px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}

.testimonial-card {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 1rem;
  padding: 2rem;
}

.testimonial-card p {
  font-size: 1.125rem;
  color: rgba(255,255,255,0.9);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.testimonial-card .name {
  font-weight: 700;
  color: var(--white);
  font-size: 1rem;
}

.testimonial-card .age {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
}

/* ============================================================
   NEWSLETTER / CTA SECTION
   ============================================================ */

.akuuu-newsletter {
  padding: 6rem 1.5rem;
  text-align: center;
}

.newsletter-content {
  max-width: 672px;
  margin: 0 auto;
}

.newsletter-content .label {
  font-weight: 800;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--white);
  margin-bottom: 1rem;
  display: block;
}

.newsletter-content h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--white);
  margin-bottom: 1.5rem;
}

.newsletter-content h2 span {
  font-weight: 900;
}

.newsletter-content p {
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
  margin-bottom: 2rem;
}

.newsletter-form {
  display: flex;
  gap: 0.75rem;
  max-width: 512px;
  margin: 0 auto 0.75rem;
}

@media (max-width: 640px) {
  .newsletter-form {
    flex-direction: column;
  }
}

.newsletter-form input[type="email"] {
  flex: 1;
  height: 48px;
  padding: 0 1.25rem;
  border-radius: 9999px;
  border: none;
  background: var(--white);
  color: var(--navy);
  font-size: 1rem;
  font-family: 'Nunito', sans-serif;
}

.newsletter-form input[type="email"]::placeholder {
  color: var(--text-muted);
}

.newsletter-form button {
  height: 48px;
  padding: 0 1.5rem;
  border-radius: 9999px;
  border: none;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  font-family: 'Nunito', sans-serif;
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.newsletter-form button:hover {
  background: #0f1a2e;
}

.newsletter-note {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
}

/* ============================================================
   FOOTER
   ============================================================ */

.akuuu-footer {
  background: var(--navy);
  color: var(--white);
  padding: 4rem 1.5rem 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  max-width: 1280px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  margin-bottom: 1rem;
}

.footer-brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.footer-brand span {
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--white);
}

.footer-col p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.footer-col a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: var(--white);
}

@media (max-width: 768px) {
  .footer-col a {
    justify-content: center;
  }
}

.footer-col h4 {
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.8);
  margin-bottom: 1rem;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 0.5rem;
}

.footer-col ul li a {
  display: inline-flex;
}

.social-links {
  display: flex;
  gap: 0.75rem;
}

@media (max-width: 768px) {
  .social-links {
    justify-content: center;
  }
}

.social-links a {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.social-links a:hover {
  background: rgba(255,255,255,0.2);
}

.social-links a svg {
  width: 20px;
  height: 20px;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 3rem;
  padding-top: 2rem;
  text-align: center;
}

.footer-bottom p {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.4);
}

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ============================================================
   BLOG POST STYLES
   ============================================================ */

.blog-header {
  padding-top: 7rem;
  padding-bottom: 2rem;
}

.blog-header .back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--navy);
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: color 0.2s ease;
}

.blog-header .back-link:hover {
  color: var(--coral);
}

.blog-header-card {
  background: var(--navy);
  border-radius: 1.5rem;
  padding: 3rem 2rem;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.blog-header-card h1 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 1.5rem;
}

.blog-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  color: rgba(255,255,255,0.6);
  font-size: 0.875rem;
}

.blog-meta span {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

/* ============================================================
   DEFAULT PAGE TEMPLATE
   ============================================================ */

.default-page {
  padding-top: 6rem;
  padding-bottom: 4rem;
}

.page-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.page-breadcrumbs {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.page-breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.page-breadcrumbs a:hover {
  color: var(--coral);
}

.page-breadcrumbs .breadcrumb-sep {
  margin: 0 0.5rem;
  opacity: 0.5;
}

.page-breadcrumbs .breadcrumb-current {
  color: var(--text-dark);
  font-weight: 600;
}

.page-header {
  margin-bottom: 2.5rem;
  text-align: center;
}

.page-header h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
  margin: 0;
}

.page-content {
  font-size: 1.0625rem;
  color: var(--text-body);
  line-height: 1.7;
}

.page-content > *:first-child {
  margin-top: 0;
}

.page-content > *:last-child {
  margin-bottom: 0;
}

.page-content h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  margin: 2rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border);
}

.page-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  margin: 1.5rem 0 0.75rem;
}

.page-content h4 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
  margin: 1.25rem 0 0.5rem;
}

.page-content p {
  margin-bottom: 1.25rem;
}

.page-content ul,
.page-content ol {
  margin: 0 0 1.25rem 1.25rem;
  padding: 0;
}

.page-content li {
  margin-bottom: 0.5rem;
}

.page-content a {
  color: var(--coral);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.page-content a:hover {
  border-bottom-color: var(--coral);
}

.page-content blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--coral);
  background: var(--light-bg);
  font-style: italic;
}

.page-content blockquote p {
  margin: 0;
}

.page-content blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  font-style: normal;
  color: var(--text-muted);
}

.page-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

.page-content figure {
  margin: 1.5rem 0;
}

.page-content figcaption {
  font-size: 0.875rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 0.5rem;
}

/* Wide layout when page has custom hero */
.page-content-wide {
  max-width: 100%;
}

/* Mobile */
@media (max-width: 640px) {
  .default-page {
    padding-top: 5rem;
    padding-bottom: 3rem;
  }

  .page-container {
    padding: 0 1rem;
  }

  .page-header {
    margin-bottom: 1.75rem;
  }

  .page-content {
    font-size: 1rem;
    line-height: 1.6;
  }

  .page-content h2 {
    font-size: 1.25rem;
  }
}

/* Print */
@media print {
  .default-page {
    padding-top: 0;
    padding-bottom: 0;
  }

  .page-breadcrumbs {
    display: none;
  }

  .page-header h1 {
    font-size: 1.5rem;
    text-align: left;
    margin-bottom: 1rem;
  }

  .page-content {
    font-size: 12pt;
    line-height: 1.5;
  }

  .page-content a {
    color: #000;
    border-bottom: none;
  }

  .page-content a[href]::after {
    content: none;
  }
}

.blog-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  background: var(--white);
  border-radius: 1.5rem 1.5rem 0 0;
  margin-top: -1rem;
}

.blog-content h2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.blog-content h2::before {
  content: '';
  width: 20px;
  height: 20px;
  background: var(--yellow);
  border-radius: 4px;
  flex-shrink: 0;
}

.blog-content p {
  font-size: 1rem;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.blog-content em {
  font-style: italic;
  color: var(--navy);
}

.blog-highlight {
  background: var(--light-bg);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--coral);
  margin: 1.5rem 0;
}

.blog-highlight p {
  font-weight: 600;
  color: var(--coral);
  margin: 0;
}

.blog-content a {
  color: var(--coral);
  font-weight: 600;
  text-decoration: none;
}

.blog-content ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.blog-content ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--text-body);
  margin-bottom: 0.5rem;
}

.blog-content ul li::before {
  content: '\2713';
  color: var(--coral);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.vocab-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}

@media (max-width: 640px) {
  .vocab-grid {
    grid-template-columns: 1fr;
  }
}

.vocab-card {
  background: var(--white);
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid #f0f0f0;
}

.vocab-card .vocab-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.vocab-card .vocab-icon {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--white);
  font-size: 0.875rem;
}

.vocab-card h4 {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--navy);
  margin: 0;
}

.vocab-card p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
}

.blog-cta-box {
  text-align: center;
  background: var(--navy);
  border-radius: 1rem;
  padding: 2rem;
  margin-top: 2rem;
}

.blog-cta-box h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 0.75rem;
}

.blog-cta-box p {
  color: rgba(255,255,255,0.7);
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
}

.blog-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .blog-nav {
    flex-direction: row;
    justify-content: space-between;
  }
}

.blog-nav a {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--navy);
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-nav a:hover {
  color: var(--coral);
}

/* ============================================================
   MISSION TEMPLATE STYLES
   ============================================================ */

.mission-page {
  background: var(--light-bg);
  min-height: 100vh;
  padding-top: 7rem;
  padding-bottom: 4rem;
}

.mission-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.mission-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--navy);
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: color 0.2s ease;
}

.mission-back:hover {
  color: var(--coral);
}

.mission-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--navy);
  text-align: center;
  margin-bottom: 0.5rem;
}

.mission-stage {
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.mission-progress {
  width: 100%;
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  margin-bottom: 2rem;
  overflow: hidden;
}

.mission-progress-bar {
  height: 100%;
  background: #4CAF50;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.mission-card {
  background: var(--white);
  border-radius: 1rem;
  padding: 2rem;
  border-left: 4px solid var(--coral);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.mission-step-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.mission-step-header h2 {
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--coral);
}

.mission-mascot-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.mission-mascot-row img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}

.mission-ask {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.mission-ask .ask-circle {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--white);
  font-size: 0.875rem;
}

.mission-ask h3 {
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--navy);
  margin: 0;
}

.mission-thinking {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.mission-quote {
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 1.25rem;
}

.mission-problem {
  background: var(--light-bg);
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.mission-problem p {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

.mission-problem .q-mark {
  color: var(--coral);
}

.mission-options {
  margin-bottom: 1.5rem;
}

.mission-options p {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--navy);
  margin-bottom: 0.75rem;
}

.mission-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 0.75rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mission-option:hover {
  border-color: #c0c0c0;
}

.mission-option.selected {
  border-color: var(--coral);
  background: rgba(242, 101, 34, 0.05);
}

.mission-option input {
  display: none;
}

.mission-option .radio-circle {
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  border: 2px solid #c0c0c0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.mission-option.selected .radio-circle {
  border-color: var(--coral);
}

.mission-option .radio-circle .radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: var(--coral);
  display: none;
}

.mission-option.selected .radio-circle .radio-dot {
  display: block;
}

.mission-option .option-label {
  font-weight: 600;
  color: var(--navy);
}

.mission-textarea {
  margin-bottom: 1.5rem;
}

.mission-textarea p {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--navy);
  margin-bottom: 0.75rem;
}

.mission-textarea textarea {
  width: 100%;
  height: 120px;
  padding: 0.75rem 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 0.75rem;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  color: var(--navy);
  resize: none;
  outline: none;
  transition: border-color 0.2s ease;
}

.mission-textarea textarea:focus {
  border-color: var(--coral);
}

.mission-textarea textarea::placeholder {
  color: #aaa;
}

.mission-continue {
  width: 100%;
  height: 52px;
  background: var(--coral);
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  font-family: 'Nunito', sans-serif;
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background 0.2s ease;
}

.mission-continue:hover {
  background: #e05512;
}

/* ============================================================
   RESOURCES PAGE STYLES
   ============================================================ */

.resources-page {
  background: var(--light-bg);
  min-height: 100vh;
  padding-top: 7rem;
  padding-bottom: 4rem;
}

.resources-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.resources-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.resources-header h1 {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.resources-header p {
  font-size: 1rem;
  color: var(--text-muted);
}

.resources-grid-page {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 1024px) {
  .resources-grid-page {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .resources-grid-page {
    grid-template-columns: 1fr;
  }
}

.resource-page-card {
  background: var(--white);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}

.resource-page-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.resource-page-bar {
  height: 6px;
}

.resource-page-card .card-inner {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.resource-page-card .icon-box {
  width: 48px;
  height: 48px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.resource-page-card .icon-box svg {
  width: 24px;
  height: 24px;
}

.resource-page-card h3 {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.resource-page-card p {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
}

.resource-page-card .coming-soon-badge {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  background: rgba(242, 101, 34, 0.1);
  color: var(--coral);
  align-self: flex-start;
}

.resources-cta {
  text-align: center;
  margin-top: 4rem;
}

.resources-cta p {
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.resources-cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--coral);
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.875rem 2rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.resources-cta a:hover {
  background: #e05512;
  color: var(--white);
}

/* ============================================================
   RESOURCE ARCHIVE PAGE
   ============================================================ */

.resources-archive-page {
  background: var(--light-bg);
  min-height: 100vh;
  padding-top: 6rem;
  padding-bottom: 4rem;
}

.resources-archive-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.archive-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.archive-header h1 {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
}

.resources-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.resource-list-item {
  background: var(--white);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.resource-list-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.resource-list-content {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: 1.25rem;
}

.resource-list-content p {
  margin-bottom: 0.75rem;
}

.resource-list-content h2,
.resource-list-content h3,
.resource-list-content h4 {
  color: var(--navy);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.resource-list-content ul,
.resource-list-content ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.resource-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--coral);
  text-decoration: none;
  transition: gap 0.2s ease;
}

.resource-read-more:hover {
  gap: 0.625rem;
  color: #e05512;
}

.archive-pagination {
  margin-top: 3rem;
  text-align: center;
}

.archive-pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.archive-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--navy);
  background: var(--white);
  text-decoration: none;
  border: 1px solid #e0e0e0;
  transition: all 0.2s ease;
}

.archive-pagination .page-numbers:hover {
  background: var(--coral);
  color: var(--white);
  border-color: var(--coral);
}

.archive-pagination .page-numbers.current {
  background: var(--coral);
  color: var(--white);
  border-color: var(--coral);
}

.no-resources {
  text-align: center;
  color: var(--text-muted);
  font-size: 1.125rem;
  padding: 3rem;
}

/* ============================================================
   UTILITY
   ============================================================ */

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* GeneratePress overrides */
.site-content {
  padding: 0;
}

.inside-article {
  padding: 0;
}

.entry-content {
  margin: 0;
}

.entry-header {
  display: none;
}

/* Ensure full-width sections */
.separate-containers .inside-article {
  padding: 0;
}

/* Hide default GP titles on custom pages */
body.page-template-template-home .entry-header,
body.page-template-template-mission .entry-header,
body.page-template-template-resources .entry-header,
body.single-resource .entry-header {
  display: none;
}

/* Hide default content area on resource pages */
body.single-resource .site-content {
  padding: 0;
}

body.single-resource .inside-article {
  padding: 0;
}

/* ============================================================
   SINGLE RESOURCE / MISSION PAGE
   ============================================================ */

/* Top Progress Bar */
.mission-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
}

.mission-progress-track {
  width: 100%;
  height: 4px;
  background: #f0f0f0;
}

.mission-progress-fill {
  height: 100%;
  background: var(--coral);
  transition: width 0.5s ease;
}

.mission-stage-text {
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.5rem 1rem;
  margin: 0;
}

/* Single Resource Page */
.single-resource-page {
  background: var(--light-bg);
  min-height: 100vh;
  padding-top: 3.5rem;
  padding-bottom: 4rem;
}

.resource-container {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Breadcrumbs */
.resource-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.resource-breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.resource-breadcrumbs a:hover {
  color: var(--coral);
}

.breadcrumb-sep {
  color: #ccc;
  font-weight: 300;
}

.breadcrumb-current {
  color: var(--navy);
  font-weight: 600;
}

/* Title Area */
.resource-title-area {
  margin-bottom: 1.5rem;
}

.resource-type-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.375rem 0.875rem;
  background: var(--yellow);
  color: var(--navy);
  border-radius: 9999px;
  margin-bottom: 0.75rem;
}

.resource-title-area h1 {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 900;
  color: var(--navy);
  margin: 0;
  line-height: 1.2;
}

/* Mission Card */
.mission-card {
  background: var(--white);
  border-radius: 1.25rem;
  padding: 1.75rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

@media (min-width: 640px) {
  .mission-card {
    padding: 2rem 2.5rem;
  }
}

/* Step Header */
.mission-step-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #f0f0f0;
}

.step-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-letter {
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
}

.step-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.step-name {
  font-weight: 800;
  font-size: 0.9375rem;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.step-subtitle {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* Hint Row with Mascot */
.mission-hint-row {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  margin-bottom: 1.75rem;
}

.hint-mascot {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.hint-bubble {
  background: #f8f9fb;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  flex: 1;
  position: relative;
}

.hint-bubble::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 18px;
  width: 12px;
  height: 12px;
  background: #f8f9fb;
  transform: rotate(45deg);
}

.hint-bubble p {
  font-size: 0.9375rem;
  color: var(--navy);
  margin: 0;
  line-height: 1.5;
}

.hint-bubble strong {
  font-weight: 800;
}

/* Mission Question */
.mission-question {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 1.25rem;
}

/* Mission Options */
.mission-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.mission-option {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border: 1.5px solid #e8e8e8;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--white);
}

.mission-option:hover {
  border-color: #d0d0d0;
  background: #fafbfc;
}

.mission-option input[type="radio"] {
  display: none;
}

.option-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #c0c4cc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.option-radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--coral);
  display: none;
}

.mission-option input[type="radio"]:checked ~ .option-radio {
  border-color: var(--coral);
}

.mission-option input[type="radio"]:checked ~ .option-radio .option-radio-dot {
  display: block;
}

.mission-option input[type="radio"]:checked ~ .option-text {
  font-weight: 700;
  color: var(--navy);
}

.option-text {
  font-size: 0.9375rem;
  color: var(--navy);
  line-height: 1.4;
}

/* Confidence Section */
.mission-confidence {
  margin-bottom: 2rem;
}

.confidence-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.875rem;
}

.confidence-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.confidence-pill {
  cursor: pointer;
}

.confidence-pill input[type="radio"] {
  display: none;
}

.confidence-pill span {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1.5px solid #e0e0e0;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--white);
  transition: all 0.2s ease;
}

.confidence-pill:hover span {
  border-color: #ccc;
  background: #f9f9f9;
}

.confidence-pill input[type="radio"]:checked + span {
  background: var(--coral);
  color: var(--white);
  border-color: var(--coral);
  font-weight: 700;
}

/* Mission Actions */
.mission-actions {
  display: flex;
  justify-content: flex-end;
}

.mission-continue-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--coral);
  color: var(--white);
  font-weight: 700;
  font-size: 0.9375rem;
  font-family: 'Nunito', sans-serif;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.mission-continue-btn:hover {
  background: #e05512;
}

.mission-continue-btn:active {
  transform: scale(0.98);
}

.continue-arrow {
  font-size: 1.125rem;
  line-height: 1;
}

/* Mission Feedback */
.mission-feedback {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  display: none;
}

.mission-feedback.success {
  background: #d4edda;
  color: #155724;
  display: block;
}

.mission-feedback.error {
  background: #f8d7da;
  color: #721c24;
  display: block;
}

/* ============================================================
   WORKSHEET / MISSION PAGE — Full Scrollable View
   Mobile-first + Print-friendly
   ============================================================ */

/* --- Print Utilities --- */
.print-only {
  display: none !important;
}

/* --- Worksheet Toolbar --- */
.worksheet-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.print-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--white);
  color: var(--navy);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.625rem 1.125rem;
  border: 2px solid var(--navy);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.print-btn:hover {
  background: var(--navy);
  color: var(--white);
}

/* --- Mission Metadata Bar --- */
.mission-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--white);
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0.375rem 0.75rem;
  background: #f5f5f5;
  border-radius: 2rem;
  white-space: nowrap;
}

.meta-badge svg {
  flex-shrink: 0;
}

/* --- Worksheet Title Card --- */
.worksheet-title-card {
  background: linear-gradient(135deg, var(--stage-color, #F26522) 0%, #FF8C5A 100%);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.worksheet-title-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.worksheet-mascot {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}

.worksheet-title-content {
  color: #fff;
}

.worksheet-title-content .worksheet-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 0.25rem;
}

.worksheet-title-content h1 {
  font-size: clamp(1.25rem, 4vw, 1.875rem);
  font-weight: 900;
  color: #fff;
  margin: 0;
  line-height: 1.25;
}

/* --- Stage Nav Row --- */
.stage-nav-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}

.stage-nav-row::-webkit-scrollbar {
  display: none;
}

.stage-nav-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
  flex-shrink: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  transition: background 0.2s ease;
}

.stage-nav-dot:hover {
  background: rgba(0,0,0,0.04);
}

.stage-nav-letter {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--dot-color, var(--coral));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.875rem;
  color: #fff;
}

.stage-nav-name {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stage-nav-dot.active {
  background: rgba(0,0,0,0.06);
}

.stage-nav-dot.active .stage-nav-letter {
  box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
}

/* --- Worksheet Content --- */
.worksheet-content {
  background: var(--white);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  margin-bottom: 1.5rem;
}

.worksheet-content > *:first-child {
  margin-top: 0;
}

.worksheet-content > *:last-child {
  margin-bottom: 0;
}

/* Style Gutenberg blocks inside worksheet as stage cards */
.worksheet-content .wp-block-group.is-style-ask-stage,
.worksheet-content .wp-block-group.is-style-know-stage,
.worksheet-content .wp-block-group.is-style-understand-stage,
.worksheet-content .wp-block-group.is-style-use-stage,
.worksheet-content .wp-block-group.is-style-upgrade-stage {
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

.worksheet-content .wp-block-group.is-style-ask-stage {
  background: #FFF9E6;
  border-left: 4px solid #FFC107;
}

.worksheet-content .wp-block-group.is-style-know-stage {
  background: #E6F9F7;
  border-left: 4px solid #4ECDC4;
}

.worksheet-content .wp-block-group.is-style-understand-stage {
  background: #FFF0EA;
  border-left: 4px solid #F26522;
}

.worksheet-content .wp-block-group.is-style-use-stage {
  background: #E8F1FA;
  border-left: 4px solid #5B9BD5;
}

.worksheet-content .wp-block-group.is-style-upgrade-stage {
  background: #F3EDFC;
  border-left: 4px solid #9B6DD5;
}

/* Headings inside stage cards */
.worksheet-content .wp-block-group.is-style-ask-stage h2,
.worksheet-content .wp-block-group.is-style-ask-stage h3,
.worksheet-content .wp-block-group.is-style-know-stage h2,
.worksheet-content .wp-block-group.is-style-know-stage h3,
.worksheet-content .wp-block-group.is-style-understand-stage h2,
.worksheet-content .wp-block-group.is-style-understand-stage h3,
.worksheet-content .wp-block-group.is-style-use-stage h2,
.worksheet-content .wp-block-group.is-style-use-stage h3,
.worksheet-content .wp-block-group.is-style-upgrade-stage h2,
.worksheet-content .wp-block-group.is-style-upgrade-stage h3 {
  font-weight: 800;
  color: var(--navy);
  margin-top: 0;
}

/* --- Print Footer --- */
.print-footer {
  text-align: center;
  padding: 2rem 0 1rem;
  border-top: 2px solid #e0e0e0;
  margin-top: 2rem;
}

.print-footer p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

.print-footer .print-url {
  font-weight: 700;
  color: var(--navy);
  font-size: 1rem;
}

/* ============================================================
   MOBILE: Worksheet Page Optimizations
   ============================================================ */

@media (max-width: 640px) {
  .single-resource-page {
    padding-top: 2.75rem;
    padding-bottom: 2rem;
  }

  .resource-container {
    padding: 0 1rem;
  }

  .worksheet-title-card {
    padding: 1.25rem 1rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
  }

  .worksheet-title-inner {
    gap: 0.75rem;
  }

  .worksheet-mascot {
    width: 44px;
    height: 44px;
  }

  .worksheet-title-content h1 {
    font-size: 1.125rem;
  }

  .stage-nav-row {
    gap: 0.375rem;
    margin-bottom: 1rem;
  }

  .stage-nav-letter {
    width: 28px;
    height: 28px;
    font-size: 0.8125rem;
  }

  .stage-nav-name {
    font-size: 0.625rem;
  }

  .mission-meta-bar {
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
  }

  .meta-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }

  .worksheet-content {
    padding: 1.25rem 1rem;
    border-radius: 1rem;
  }

  /* Larger text for kids */
  .worksheet-content p,
  .worksheet-content li {
    font-size: 1.0625rem;
    line-height: 1.7;
  }

  .worksheet-content h2 {
    font-size: 1.25rem;
  }

  .worksheet-content h3 {
    font-size: 1.125rem;
  }

  .worksheet-content .wp-block-group.is-style-ask-stage,
  .worksheet-content .wp-block-group.is-style-know-stage,
  .worksheet-content .wp-block-group.is-style-understand-stage,
  .worksheet-content .wp-block-group.is-style-use-stage,
  .worksheet-content .wp-block-group.is-style-upgrade-stage {
    padding: 1.25rem 1rem;
    border-radius: 0.875rem;
  }
}

/* ============================================================
   AKUUU WORKSHEET BLOCK STYLES (.akuuu-*-clean classes)
   Overrides inline post CSS to match brand colors
   ============================================================ */

/* Hero Banner */
.worksheet-content .akuuu-hero-clean {
  background: linear-gradient(135deg, #F26522 0%, #FF8C5A 100%) !important;
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 0 0 1rem 0 !important;
  text-align: center;
  color: #fff;
}

.worksheet-content .akuuu-hero-emoji-clean {
  font-size: 2.5rem;
  margin: 0 0 0.25rem;
  line-height: 1;
}

.worksheet-content .akuuu-hero-title-clean {
  margin: 0 0 0.25rem;
  color: #fff !important;
  font-size: 1.4rem;
  font-weight: 800;
}

.worksheet-content .akuuu-hero-mission-clean {
  font-size: 1rem;
  margin: 0;
  color: rgba(255,255,255,0.95);
}

/* Step wrappers — override colors to AKUUU brand */
.worksheet-content .akuuu-step-clean {
  margin: 0 0 0.75rem 0 !important;
  border-radius: 1rem;
  padding: 1.25rem;
}

.worksheet-content .akuuu-ask-clean {
  background: #FFF9E6 !important;
  border-left: 4px solid #FFC107 !important;
}

.worksheet-content .akuuu-know-clean {
  background: #E6F9F7 !important;
  border-left: 4px solid #4ECDC4 !important;
}

.worksheet-content .akuuu-understand-clean {
  background: #FFF0EA !important;
  border-left: 4px solid #F26522 !important;
}

.worksheet-content .akuuu-use-clean {
  background: #E8F1FA !important;
  border-left: 4px solid #5B9BD5 !important;
}

.worksheet-content .akuuu-upgrade-clean {
  background: #F3EDFC !important;
  border-left: 4px solid #9B6DD5 !important;
}

/* Badge / Step Header */
.worksheet-content .akuuu-badge-clean {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.worksheet-content .akuuu-badge-img-clean {
  width: 40px;
  height: 40px;
  border-radius: 0.625rem;
  background: #fff;
  padding: 3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  margin: 0;
  flex-shrink: 0;
}

.worksheet-content .akuuu-badge-img-clean img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.worksheet-content .akuuu-badge-text-clean {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.worksheet-content .akuuu-badge-letter-clean {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}

.worksheet-content .akuuu-badge-sub-clean {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Content Card */
.worksheet-content .akuuu-card-clean {
  background: rgba(255,255,255,0.85);
  border-radius: 0.75rem;
  padding: 1rem;
  margin: 0;
}

.worksheet-content .akuuu-confidence-wrap-clean {
  margin-top: 0.625rem;
}

/* Text */
.worksheet-content .akuuu-scenario-clean {
  font-size: 1rem;
  margin: 0 0 0.625rem 0;
  color: #333;
  line-height: 1.4;
}

.worksheet-content .akuuu-prompt-clean {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  line-height: 1.4;
  color: #222;
}

.worksheet-content .akuuu-question-clean {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  color: #444;
  line-height: 1.4;
}

/* Option Buttons */
.worksheet-content .akuuu-options-clean {
  gap: 0.5rem;
  margin: 0;
}

.worksheet-content .akuuu-option-btn-clean .wp-block-button__link {
  background: #fff;
  color: #333;
  border: 2px solid #e0e0e0;
  border-radius: 0.625rem;
  padding: 0.75rem 0.875rem;
  font-size: 1rem;
  text-align: left;
  width: 100%;
  line-height: 1.3;
  white-space: normal;
  word-break: keep-all;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Confidence Buttons */
.worksheet-content .akuuu-confidence-label-clean {
  margin: 0 0 0.625rem 0;
  font-weight: 700;
  font-size: 1rem;
  color: #555;
}

.worksheet-content .akuuu-confidence-btns-clean {
  gap: 0.5rem;
}

.worksheet-content .akuuu-conf-btn-clean .wp-block-button__link {
  background: #fff;
  color: #555;
  border: 2px solid #ddd;
  border-radius: 1.25rem;
  padding: 0.625rem 1rem;
  font-size: 0.95rem;
  line-height: 1.3;
  white-space: nowrap;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Tips */
.worksheet-content .akuuu-tip-label-clean {
  margin: 0 0 0.5rem 0;
  font-weight: 700;
  font-size: 1rem;
  color: #444;
}

.worksheet-content .akuuu-tips-clean {
  margin: 0 0 0.75rem 0;
  padding-left: 1.125rem;
}

.worksheet-content .akuuu-tips-clean li {
  margin: 0.375rem 0;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Fact Box */
.worksheet-content .akuuu-fact-clean {
  background: #fff;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  margin-top: 0.625rem;
}

.worksheet-content .akuuu-fact-clean p {
  margin: 0;
  font-size: 0.95rem;
  color: #555;
  line-height: 1.4;
}

/* Answer Area */
.worksheet-content .akuuu-answer-clean {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.5rem 0;
  padding: 0.5rem 0.625rem;
  background: rgba(255,255,255,0.7);
  border-radius: 0.375rem;
  flex-wrap: wrap;
}

.worksheet-content .akuuu-answer-label-clean {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: #444;
  white-space: nowrap;
}

.worksheet-content .akuuu-answer-line-clean {
  margin: 0;
  font-size: 1.1rem;
  color: #bbb;
  letter-spacing: 2px;
  flex: 1;
  min-width: 100px;
  width: 100%;
}

/* Mobile answer line: make it full-width block */
@media (max-width: 640px) {
  .worksheet-content .akuuu-answer-clean {
    flex-direction: column;
    align-items: stretch;
    gap: 0.375rem;
  }

  .worksheet-content .akuuu-answer-line-clean {
    min-width: auto;
    width: 100%;
    font-size: 1.25rem;
    padding: 0.25rem 0;
    border-bottom: 2px solid #ddd;
    text-align: center;
  }

  .worksheet-content .akuuu-answer-label-clean {
    white-space: normal;
  }
}

/* Draw Areas */
.worksheet-content .akuuu-draw-label-clean {
  margin: 0.625rem 0 0.375rem 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: #444;
}

.worksheet-content .akuuu-draw-box-clean {
  border: 2px dashed #ccc;
  min-height: 80px;
  border-radius: 0.625rem;
  background: rgba(255,255,255,0.6);
}

.worksheet-content .akuuu-draw-box-small-clean {
  border: 2px dashed #ccc;
  min-height: 50px;
  border-radius: 0.625rem;
  background: rgba(255,255,255,0.6);
}

/* Self Check — override to AKUUU coral */
.worksheet-content .akuuu-self-check-clean {
  background: #F26522 !important;
  color: #fff;
  padding: 1.25rem 1rem;
  border-radius: 1rem;
  text-align: center;
  margin-top: 1rem;
}

.worksheet-content .akuuu-check-title-clean {
  margin: 0 0 0.875rem 0;
  color: #fff !important;
  font-size: 1.2rem;
  font-weight: 700;
}

.worksheet-content .akuuu-check-btns-clean {
  gap: 0.5rem;
  margin: 0;
}

.worksheet-content .akuuu-check-btn-clean .wp-block-button__link {
  background: rgba(255,255,255,0.2);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 0.625rem;
  padding: 0.75rem;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
  width: 100%;
  white-space: normal;
  word-break: keep-all;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   KEEP EXPLORING — Related Resources Section
   ============================================================ */

.keep-exploring {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--white);
  border-radius: 1.25rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.keep-exploring-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.keep-exploring-mascot {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: contain;
}

.keep-exploring-header h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
  line-height: 1.2;
}

.keep-exploring-header p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0.125rem 0 0;
}

.keep-exploring-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.keep-exploring-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 1rem;
  background: #fff;
  border: 2px solid #e5e5e5;
  text-decoration: none;
  transition: all 0.2s ease;
}

.keep-exploring-card:hover {
  border-color: var(--card-color, var(--coral));
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

.keep-exploring-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 0.25rem 0.75rem;
  border-radius: 2rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.keep-exploring-card h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  line-height: 1.3;
}

.keep-exploring-thumb {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 0.625rem;
  margin-top: auto;
}

.keep-exploring-thumb-fallback {
  width: 100%;
  height: 100px;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
}

.keep-exploring-thumb-fallback span {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
}

/* Mobile */
@media (max-width: 640px) {
  .keep-exploring {
    padding: 1.25rem 1rem;
    border-radius: 1rem;
    margin: 1.5rem 0;
  }

  .keep-exploring-mascot {
    width: 36px;
    height: 36px;
  }

  .keep-exploring-header h3 {
    font-size: 1.125rem;
  }

  .keep-exploring-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .keep-exploring-card {
    flex-direction: row;
    align-items: center;
    padding: 0.875rem;
    gap: 0.625rem;
  }

  .keep-exploring-card h4 {
    flex: 1;
    font-size: 0.9375rem;
  }

  .keep-exploring-thumb,
  .keep-exploring-thumb-fallback {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    margin-top: 0;
  }
}

/* ============================================================
   PRINT STYLES — Clean Paper / PDF Output
   ============================================================ */

@media print {
  @page {
    margin: 1.5cm 1.2cm;
    size: auto;
  }

  /* Hide interactive / web-only elements */
  .no-print,
  .site-header,
  .akuuu-nav,
  .mobile-menu-toggle,
  .mobile-drawer,
  .mission-top-bar,
  .mission-meta-bar,
  .worksheet-toolbar,
  .stage-nav-row,
  .resource-breadcrumbs,
  .keep-exploring,
  .akuuu-footer,
  .drawer-overlay,
  .drawer-panel,
  .drawer-close,
  .blog-cta-box,
  .blog-nav,
  .back-link,
  .print-btn,
  nav[role="navigation"] {
    display: none !important;
  }

  /* Show print-only elements */
  .print-only {
    display: block !important;
  }

  /* Reset page backgrounds for ink saving */
  body,
  .single-resource-page,
  .single-post,
  .blog-header,
  .blog-content,
  .resources-archive-page,
  .akuuu-science,
  .akuuu-community,
  .akuuu-testimonials,
  .akuuu-newsletter,
  .akuuu-hero,
  .akuuu-spiral-steps,
  .akuuu-action,
  .akuuu-blog,
  .akuuu-resources {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }

  /* Worksheet print layout */
  .single-resource-page {
    padding: 0 !important;
    min-height: auto !important;
  }

  .resource-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .worksheet-title-card {
    background: #fff !important;
    border: 3px solid var(--stage-color, #F26522) !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    margin-bottom: 1rem !important;
  }

  .worksheet-title-content,
  .worksheet-title-content h1 {
    color: #000 !important;
  }

  .worksheet-title-content .worksheet-label {
    color: var(--stage-color, #F26522) !important;
    opacity: 1 !important;
  }

  .worksheet-content {
    background: #fff !important;
    box-shadow: none !important;
    border: 1px solid #ddd;
    padding: 1.5rem !important;
    page-break-inside: avoid;
  }

  /* Stage cards in print */
  .worksheet-content .wp-block-group.is-style-ask-stage,
  .worksheet-content .wp-block-group.is-style-know-stage,
  .worksheet-content .wp-block-group.is-style-understand-stage,
  .worksheet-content .wp-block-group.is-style-use-stage,
  .worksheet-content .wp-block-group.is-style-upgrade-stage {
    background: #fff !important;
    border: 2px solid #ccc !important;
    border-left-width: 6px !important;
    page-break-inside: avoid;
  }

  .worksheet-content .wp-block-group.is-style-ask-stage {
    border-left-color: #b89b00 !important;
  }

  .worksheet-content .wp-block-group.is-style-know-stage {
    border-left-color: #2a9d8f !important;
  }

  .worksheet-content .wp-block-group.is-style-understand-stage {
    border-left-color: #c44d1a !important;
  }

  .worksheet-content .wp-block-group.is-style-use-stage {
    border-left-color: #3d7ab8 !important;
  }

  .worksheet-content .wp-block-group.is-style-upgrade-stage {
    border-left-color: #7a4fb0 !important;
  }

  /* Typography for print */
  .worksheet-content p,
  .worksheet-content li {
    font-size: 12pt !important;
    line-height: 1.6 !important;
    color: #000 !important;
  }

  .worksheet-content h2 {
    font-size: 16pt !important;
    color: #000 !important;
    page-break-after: avoid;
  }

  .worksheet-content h3 {
    font-size: 14pt !important;
    color: #000 !important;
    page-break-after: avoid;
  }

  /* Links */
  a {
    color: #000 !important;
    text-decoration: none !important;
  }

  a[href]::after {
    content: none !important;
  }

  /* Images */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  /* Page breaks */
  .worksheet-content .wp-block-group {
    page-break-inside: avoid;
  }

  h1, h2, h3, h4 {
    page-break-after: avoid;
  }

  /* AKUUU Worksheet blocks in print */
  .worksheet-content .akuuu-hero-clean {
    background: #fff !important;
    border: 2px solid #333 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }

  .worksheet-content .akuuu-hero-clean *,
  .worksheet-content .akuuu-hero-title-clean,
  .worksheet-content .akuuu-hero-mission-clean {
    color: #000 !important;
  }

  .worksheet-content .akuuu-step-clean {
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-left-width: 6px !important;
    page-break-inside: avoid;
  }

  .worksheet-content .akuuu-ask-clean   { border-left-color: #b89b00 !important; }
  .worksheet-content .akuuu-know-clean { border-left-color: #2a9d8f !important; }
  .worksheet-content .akuuu-understand-clean { border-left-color: #c44d1a !important; }
  .worksheet-content .akuuu-use-clean  { border-left-color: #3d7ab8 !important; }
  .worksheet-content .akuuu-upgrade-clean { border-left-color: #7a4fb0 !important; }

  .worksheet-content .akuuu-card-clean {
    border: 1px solid #ddd;
    background: #fff !important;
  }

  .worksheet-content .akuuu-option-btn-clean .wp-block-button__link,
  .worksheet-content .akuuu-conf-btn-clean .wp-block-button__link,
  .worksheet-content .akuuu-check-btn-clean .wp-block-button__link {
    background: #fff !important;
    border: 2px solid #333 !important;
    color: #000 !important;
  }

  .worksheet-content .akuuu-self-check-clean {
    background: #fff !important;
    border: 2px solid #333 !important;
    page-break-inside: avoid;
  }

  .worksheet-content .akuuu-self-check-clean *,
  .worksheet-content .akuuu-check-title-clean {
    color: #000 !important;
  }

  .worksheet-content .akuuu-draw-box-clean,
  .worksheet-content .akuuu-draw-box-small-clean {
    border: 2px solid #999 !important;
    background: #fff !important;
  }

  .worksheet-content .akuuu-fact-clean {
    border: 1px solid #ddd;
    background: #fff !important;
  }

  .worksheet-content .akuuu-answer-clean {
    background: #fff !important;
    border: 1px solid #ddd;
  }

  /* Force white background on everything */
  * {
    -webkit-print-color-adjust: economy;
    print-color-adjust: economy;
  }
}

/* ============================================================
   RESOURCES ARCHIVE PAGE - Card Grid with Filters
   ============================================================ */

.resources-archive-page {
  background: var(--light-bg);
  min-height: 100vh;
  padding-top: 80px;
  padding-bottom: 4rem;
}

.resources-archive-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Archive Hero */
.archive-hero {
  padding: 3rem 0 2rem;
  text-align: center;
}

.archive-hero h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.archive-subtitle {
  font-size: 1.125rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

/* Search Form */
.archive-search-form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 600px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 9999px;
  padding: 0.375rem 0.375rem 0.375rem 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border: 1px solid #e8e8e8;
}

.archive-search-form .search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.archive-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  color: var(--navy);
  background: transparent;
  min-height: 44px;
}

.archive-search-input::placeholder {
  color: #aaa;
}

.archive-search-btn {
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  font-size: 0.875rem;
  font-family: 'Nunito', sans-serif;
  padding: 0.625rem 1.5rem;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.archive-search-btn:hover {
  background: #0f1a2e;
}

/* Filter Bar */
.filter-bar {
  margin-bottom: 0.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.filter-bar::-webkit-scrollbar {
  display: none;
}

.filter-scroll {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.filter-label {
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
  margin-right: 0.5rem;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-muted);
  background: var(--white);
  border: 1.5px solid #e0e0e0;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.filter-pill:hover {
  border-color: var(--coral);
  color: var(--coral);
}

.filter-pill.active {
  background: var(--coral);
  color: var(--white);
  border-color: var(--coral);
}

.level-pill.active {
  background: var(--navy);
  border-color: var(--navy);
}

/* Results Count */
.results-count {
  padding: 1rem 0;
}

.results-count p {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
}

/* Resource Cards Grid */
.resources-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 1024px) {
  .resources-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .resources-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* Resource Card V2 */
.resource-card-v2 {
  background: var(--white);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.resource-card-v2:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

.resource-card-bar {
  height: 4px;
}

.resource-card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.resource-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.resource-card-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
}

.resource-card-soon {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--coral);
}

.resource-card-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.resource-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.resource-card-title a:hover {
  color: var(--coral);
}

.resource-card-excerpt {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 0.875rem;
  flex: 1;
}

/* Tags */
.resource-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}

.tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.tag-level {
  background: #e8f0fe;
  color: var(--blue);
}

.tag-skill {
  background: #fef3e8;
  color: var(--coral);
}

/* Step Dots */
.resource-card-steps {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1rem;
}

.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e0e0e0;
  transition: background 0.2s ease;
}

.step-dot.active {
  background: var(--dot-color);
}

/* CTA Button */
.resource-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--white);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.625rem;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.15s ease;
  margin-top: auto;
}

.resource-card-cta:hover {
  opacity: 0.9;
  color: var(--white);
}

.resource-card-cta:active {
  transform: scale(0.98);
}

/* Pagination V2 */
.archive-pagination-v2 {
  margin-top: 2rem;
  text-align: center;
}

.archive-pagination-v2 .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--navy);
  background: var(--white);
  text-decoration: none;
  border: 1px solid #e0e0e0;
  margin: 0 0.125rem;
  transition: all 0.2s ease;
}

.archive-pagination-v2 .page-numbers:hover {
  background: var(--coral);
  color: var(--white);
  border-color: var(--coral);
}

.archive-pagination-v2 .page-numbers.current {
  background: var(--coral);
  color: var(--white);
  border-color: var(--coral);
}

/* Empty State */
.resources-empty {
  text-align: center;
  padding: 4rem 2rem;
}

.empty-mascot {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 1.5rem;
}

.resources-empty h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.resources-empty p {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

/* ============================================================
   BLOG ARCHIVE PAGE (/blog)
   ============================================================ */

.blog-archive-page {
  background: var(--light-bg);
  min-height: 100vh;
  padding-top: 80px;
  padding-bottom: 4rem;
}

.blog-archive-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Blog Hero */
.blog-archive-hero {
  padding: 3rem 0 2rem;
  text-align: center;
}

.blog-hero-content h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.blog-hero-subtitle {
  font-size: 1.125rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

/* Blog Search */
.blog-search-form {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 600px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 9999px;
  padding: 0.375rem 0.375rem 0.375rem 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border: 1px solid #e8e8e8;
}

.blog-search-form .search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.blog-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  color: var(--navy);
  background: transparent;
  min-height: 44px;
}

.blog-search-input::placeholder {
  color: #aaa;
}

.blog-search-btn {
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  font-size: 0.875rem;
  font-family: 'Nunito', sans-serif;
  padding: 0.625rem 1.5rem;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.blog-search-btn:hover {
  background: #0f1a2e;
}

/* Blog Cards - Archive specific overrides */
.blog-archive-page .blog-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 1024px) {
  .blog-archive-page .blog-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .blog-archive-page .blog-cards-grid {
    grid-template-columns: 1fr;
  }
}

.blog-archive-page .blog-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
}

.blog-card-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
}

.blog-read-time {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f0f0f0;
}

.blog-card-date {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.blog-card-read {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--coral);
  transition: gap 0.2s ease;
}

.blog-card:hover .blog-card-read {
  gap: 0.5rem;
}

/* Blog Empty State */
.blog-empty {
  text-align: center;
  padding: 4rem 2rem;
}

.blog-empty .empty-mascot {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 1.5rem;
}

.blog-empty h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.blog-empty p {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

/* ============================================================
   SINGLE BLOG POST STYLES
   ============================================================ */

.blog-header {
  padding-top: 7rem;
  padding-bottom: 2rem;
}

.blog-header .back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--navy);
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: color 0.2s ease;
}

.blog-header .back-link:hover {
  color: var(--coral);
}

.blog-header-card {
  background: var(--navy);
  border-radius: 1.5rem;
  padding: 3rem 2rem;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.blog-header-card h1 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 1.5rem;
}

.blog-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  color: rgba(255,255,255,0.6);
  font-size: 0.875rem;
}

.blog-meta span {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.blog-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  background: var(--white);
  border-radius: 1.5rem 1.5rem 0 0;
  margin-top: -1rem;
}

.blog-content h2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.blog-content h2::before {
  content: '';
  width: 20px;
  height: 20px;
  background: var(--yellow);
  border-radius: 4px;
  flex-shrink: 0;
}

.blog-content p {
  font-size: 1rem;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.blog-content em {
  font-style: italic;
  color: var(--navy);
}

.blog-content a {
  color: var(--coral);
  font-weight: 600;
  text-decoration: none;
}

.blog-content a:hover {
  text-decoration: underline;
}

.blog-content ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

.blog-content ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--text-body);
  margin-bottom: 0.5rem;
}

.blog-content ul li::before {
  content: '\2713';
  color: var(--coral);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Blog CTA Box */
.blog-cta-box {
  text-align: center;
  background: var(--navy);
  border-radius: 1rem;
  padding: 2.5rem 2rem;
  margin-top: 2.5rem;
}

.blog-cta-box h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 0.75rem;
}

.blog-cta-box p {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.875rem !important;
  margin-bottom: 1.25rem !important;
}

.blog-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--coral);
  color: var(--white);
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.blog-cta-btn:hover {
  background: #e05512;
  color: var(--white);
}

/* Blog Navigation */
.blog-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #f0f0f0;
}

.blog-nav a {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--navy);
  text-decoration: none;
  transition: color 0.2s ease;
  max-width: 45%;
}

.blog-nav a:hover {
  color: var(--coral);
}