:root{
    --navy:#336699;
    --navy-deep:#152c45;
    --blue:#4a7fa8;
    --blue-soft:#7fa8c9;
    --blue-tint:#e7f1f8;
    --paper:#fbf6ec;
    --paper-dark:#f3ead9;
    --gold:#e0a84a;
    --gold-deep:#c98a2c;
    --coral:#ff8b6b;
    --coral-deep:#f16a46;
    --ink:#2a3542;
    --ink-soft:#5c6b7a;
    --white:#ffffff;
    --radius-lg:28px;
    --radius-md:18px;
    --shadow-soft:0 14px 30px rgba(36,71,107,0.12);
    --shadow-card:0 10px 24px rgba(36,71,107,0.10);
  }



/* --- 1. Define Caveat Local Font --- */
@font-face {
  font-family: 'Caveat';
  src: url('../fonts/Caveat/static/Caveat-Regular.woff2') format('woff2'),
       url('../fonts/Caveat/static/Caveat-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Caveat';
  src: url('../fonts/Caveat/static/Caveat-Bold.woff2') format('woff2'),
       url('../fonts/Caveat/static/Caveat-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- 2. Define Baloo 2 Local Font --- */
@font-face {
  font-family: 'Baloo 2';
  src: url('../fonts/Baloo_2/static/Baloo2-Regular.woff2') format('woff2'),
       url('../fonts/Baloo_2/static/Baloo2-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Baloo 2';
  src: url('../fonts/Baloo_2/static/Baloo2-Bold.woff2') format('woff2'),
       url('../fonts/Baloo_2/static/Baloo2-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}



  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Nunito', Arial, sans-serif;
    background:var(--paper);
    color:var(--ink);
    overflow-x:hidden;
    line-height:1.55;
  }
  img{max-width:100%; display:block;}
  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}
  h1,h2,h3,h4{font-family:'Baloo 2', sans-serif; color:var(--navy); font-weight:700; line-height:1.15;}
  .eyebrow{
    font-family:'Caveat', cursive;
    font-size:1.4rem;
    font-weight:700;
    color:var(--coral-deep);
    display:inline-block;
    transform:rotate(-3deg);
    margin-bottom:2px;
  }
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Baloo 2', sans-serif; font-weight:700; font-size:1.02rem;
    padding:14px 30px; border-radius:100px; border:none; cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .btn:hover{transform:translateY(-3px);}
  .btn:focus-visible{outline:3px solid var(--gold); outline-offset:3px;}
  .btn-primary{background:var(--coral); color:var(--white); box-shadow:0 10px 22px rgba(255,139,107,0.4);}
  .btn-primary:hover{box-shadow:0 14px 26px rgba(255,139,107,0.5);}
  .btn-outline{background:transparent; color:var(--navy); border:2.5px solid var(--navy);}
  .btn-outline:hover{background:var(--navy); color:var(--white);}
  .btn-sm{padding:10px 22px; font-size:0.92rem;}

  section{position:relative;}

  /* ===== HEADER / NAV ===== */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(251,246,236,0.92);
    backdrop-filter:blur(8px);
    border-bottom:2px dashed rgba(36,71,107,0.15);
  }
  .nav-inner{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 28px; max-width:1180px; margin:0 auto;
  }
  .logo img{height:42px; width:auto;}
  nav.main-menu ul{display:flex; gap:34px;}
  nav.main-menu a{
    font-family:'Baloo 2', sans-serif; font-weight:600; font-size:1.02rem;
    color:var(--navy); position:relative; padding:6px 2px;
  }
  nav.main-menu a::after{
    content:""; position:absolute; left:0; bottom:-2px; width:0; height:3px;
    background:var(--coral); border-radius:3px; transition:width .2s ease;
  }
  nav.main-menu a:hover::after{width:100%;}
  .nav-cta{display:flex; align-items:center; gap:18px;}
  .menu-toggle{display:none; background:none; border:none; cursor:pointer; padding:6px;}
  .menu-toggle span{display:block; width:26px; height:3px; background:var(--navy); margin:5px 0; border-radius:2px;}

  /* ===== HERO ===== */
  .hero{
    padding:64px 0 40px;
    background:
      radial-gradient(ellipse at 85% 15%, var(--blue-tint) 0%, transparent 55%),
      radial-gradient(ellipse at 10% 90%, #fff2e2 0%, transparent 50%);
    overflow:hidden;
  }
  .hero-grid{
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center;
  }
  .hero h1{font-size:3.1rem; margin:8px 0 18px;}
  .hero h1 span{color:var(--coral-deep);}
  .hero p.lead{font-size:1.15rem; color:var(--ink-soft); max-width:480px; margin-bottom:28px;}
  .hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:30px;}

  .coupon{
    display:flex; align-items:center; gap:14px;
    background:var(--white); border:2.5px dashed var(--gold-deep);
    border-radius:16px; padding:14px 18px; max-width:430px;
    box-shadow:var(--shadow-card);
  }
  .coupon .stamp{
    background:var(--gold); color:var(--white); font-family:'Baloo 2';
    font-weight:800; font-size:0.85rem; border-radius:50%;
    width:56px; height:56px; display:flex; align-items:center; justify-content:center;
    text-align:center; flex-shrink:0; transform:rotate(-8deg); line-height:1.05;
  }
  .coupon p{font-size:0.92rem; color:var(--ink-soft);}
  .coupon strong{color:var(--navy); font-family:'Baloo 2';}

  .hero-visual{position:relative; display:flex; justify-content:center; align-items:flex-end; min-height:440px;}
  .hero-cloud{
    position:absolute; inset:0; margin:auto; width:105%; height:105%;
    background:radial-gradient(circle, var(--blue-tint) 0%, transparent 68%);
    z-index:0;
  }
  .issue-card{
    position:relative; z-index:2;
    background:var(--white); border-radius:16px; padding:14px 14px 20px;
    box-shadow:0 20px 40px rgba(36,71,107,0.22);
    width:200px; transform:rotate(-7deg);
    position:absolute; left:2%; top:6%;
  }
  .issue-card .cover{
    aspect-ratio:3/4; border-radius:10px;
    background:linear-gradient(160deg, var(--blue) 0%, var(--navy) 100%);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:var(--white); text-align:center; padding:14px; position:relative; overflow:hidden;
  }
  .issue-card .cover .tag{font-family:'Caveat'; font-size:1.1rem; background:var(--coral); padding:3px 12px; border-radius:100px; margin-bottom:8px;}
  .issue-card .cover h4{color:var(--white); font-size:1.3rem;}
  .issue-card .cover .num{font-family:'Baloo 2'; font-size:2.6rem; opacity:0.35; position:absolute; bottom:6px; right:10px;}
  .issue-card p.cap{font-family:'Baloo 2'; font-size:0.85rem; text-align:center; margin-top:10px; color:var(--navy);}

  .mofu-hero{ transform: rotateY(180deg); position:relative; z-index:1; width:340px; margin-top:60px; filter:drop-shadow(0 18px 20px rgba(36,71,107,0.18));}

  .star{position:absolute; color:var(--gold); z-index:1;}

  /* ===== SECTION HEADINGS ===== */
  .section-head{text-align:center; max-width:620px; margin:0 auto 46px;}
  .section-head h2{font-size:2.3rem; margin-top:6px;}
  .section-head p{color:var(--ink-soft); font-size:1.05rem; margin-top:10px;}

  .divider{width:100%; height:60px; display:block;}

  /* ===== ABOUT ===== */
  .about{background:var(--white); padding:90px 0 80px;}
  .about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center;}
  .about-visual{position:relative; display:flex; justify-content:center;}
  .about-visual img{width:300px;}
  .about-badge{
    position:absolute; top:-6px; right:8%;
    background:var(--blue-tint); border-radius:50%; width:120px; height:120px;
    display:flex; align-items:center; justify-content:center; text-align:center;
    font-family:'Caveat'; font-weight:700; color:var(--navy); font-size:1.15rem;
    transform:rotate(8deg); border:2px dashed var(--blue-soft);
  }
  .feature-list{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:30px;}
  .feature{
    background:var(--paper); border-radius:var(--radius-md); padding:20px 20px;
    border:2px solid var(--paper-dark);
  }
  .feature .ico{font-size:1.6rem; margin-bottom:8px; display:inline-block;}
  .feature h4{font-size:1.08rem; margin-bottom:4px;}
  .feature p{font-size:0.92rem; color:var(--ink-soft);}

  /* ===== FRIENDS OF THE MAGAZINE ===== */
  .friends{background:var(--blue-tint); padding:90px 0 90px; position:relative;}
  .friends-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:26px;
  }
  .polaroid{
    background:var(--white); padding:12px 12px 18px; border-radius:6px;
    box-shadow:var(--shadow-card); position:relative;
    transition:transform .2s ease;
  }
  .polaroid:nth-child(odd){transform:rotate(-3deg);}
  .polaroid:nth-child(even){transform:rotate(2.5deg);}
  .polaroid:hover{transform:rotate(0deg) translateY(-6px);}
  .tape{
    position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-2deg);
    width:64px; height:24px; background:rgba(224,168,74,0.55);
    border:1px solid rgba(224,168,74,0.7);
  }
  .crown {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  width: 100px;
}
  .polaroid .photo{
    aspect-ratio:1/1; border-radius:3px; overflow:hidden;
    background:linear-gradient(160deg, var(--blue-soft), var(--navy));
    display:flex; align-items:center; justify-content:center;
  }
  .polaroid .photo span{font-size:2.6rem;}
  .polaroid .cap{font-family:'Caveat'; font-weight:700; font-size:1.15rem; text-align:center; margin-top:10px; color:var(--navy);}
  .polaroid .cap small{display:block; font-family:'Nunito', Arial; font-weight:600; font-size:0.78rem; color:var(--ink-soft);}
  .friends-cta{text-align:center; margin-top:44px;}
  .friends-cta p{font-size:0.98rem; color:var(--ink-soft); margin-top:10px;}

  /* ===== TESTIMONIALS ===== */
  .testimonials{padding:90px 0 90px; background:var(--white);}
  .test-grid{display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:26px; align-items:start;}
  .bubble{
    background:var(--paper); border-radius:var(--radius-md); padding:26px 24px;
    position:relative; border:2px solid var(--paper-dark);
  }
  .bubble::after{
    content:""; position:absolute; bottom:-14px; left:36px;
    width:26px; height:26px; background:var(--paper);
    border-right:2px solid var(--paper-dark); border-bottom:2px solid var(--paper-dark);
    transform:rotate(45deg);
  }
  .bubble p{font-size:0.98rem; color:var(--ink); margin-bottom:16px;}
  .bubble .stars{color:var(--gold); margin-bottom:10px; font-size:0.95rem;}
  .reviewer{display:flex; align-items:center; gap:10px; margin-top:18px;}
  .reviewer .avatar{
    width:38px; height:38px; border-radius:50%; background:var(--blue-tint);
    display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--navy); font-family:'Baloo 2';
  }
  .reviewer .name{font-family:'Baloo 2'; font-weight:600; font-size:0.92rem; color:var(--navy);}
  .reviewer .role{font-size:0.8rem; color:var(--ink-soft);}
  .test-mofu{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-top:10px;}
  .test-mofu img{width:170px; margin-bottom:14px;}
  .test-mofu p{font-family:'Caveat'; font-size:1.3rem; color:var(--coral-deep); font-weight:700;}

  /* ===== NEWSLETTER ===== */
  #subscribe{padding:90px 20px 0 20px; }
  .newsletter{
    background:linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
    border-radius:32px; padding:56px 48px; margin:0 auto 100px;
    max-width:1120px; display:flex; align-items:center; justify-content:space-between; gap:40px;
    flex-wrap:wrap; position:relative; overflow:hidden;
  }
  .newsletter::before{
    content:""; position:absolute; width:280px; height:280px; border-radius:50%;
    background:rgba(255,255,255,0.06); top:-100px; right:-60px;
  }
  .newsletter-text{position:relative; z-index:1; max-width:480px;}
  .newsletter-text h3{color:var(--white); font-size:1.9rem; margin-bottom:10px;}
  .newsletter-text p{color:#dce8f2; font-size:0.98rem;}
  .newsletter-form{display:flex; gap:10px; position:relative; z-index:1; flex-wrap:wrap;}
  .newsletter-form input{
    padding:14px 18px; border-radius:100px; border:none; font-family:'Nunito', Arial; font-size:0.95rem;
    width:260px; max-width:100%;
  }
  .newsletter-form input:focus-visible{outline:3px solid var(--gold);}

  /* ===== FOOTER ===== */
  footer{background:var(--navy-deep); color:#c9d7e4; padding:64px 0 26px; position:relative;}
  .footer-grid{
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding-bottom:40px;
    border-bottom:1px solid rgba(255,255,255,0.12);
  }
  .footer-logo img{height:36px; filter:brightness(0) invert(1); margin-bottom:14px;}
  .footer-grid p{font-size:0.92rem; line-height:1.6; color:#a9bccc; max-width:280px;}
  .footer-col h5{font-family:'Baloo 2'; color:var(--white); font-size:1.02rem; margin-bottom:16px;}
  .footer-col ul li{margin-bottom:10px;}
  .footer-col ul a{font-size:0.92rem; color:#a9bccc; transition:color .15s ease;}
  .footer-col ul a:hover{color:var(--gold);}
  .social-row{display:flex; gap:12px; margin-top:16px;}
  .social-row a{
    width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,0.08);
    display:flex; align-items:center; justify-content:center; font-size:0.95rem;
    transition:background .15s ease;
  }
  .social-row a:hover{background:var(--coral);}
  .social-icon-img { width: 30px; height: 30px; object-fit: contain; }
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center; padding-top:24px;
    font-size:0.85rem; color:#7f93a6; flex-wrap:wrap; gap:12px;
  }
.footer-mofu {
  position: absolute;
  right: 24px;
  bottom: 100%;
  width: 200px;
  margin-bottom: -20px;
}

  /* ===== ANIMATION ===== */
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none;}
    html{scroll-behavior:auto;}
  }

  /* ===== AUTH MODAL ===== */
  .auth-modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(21, 44, 69, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .auth-modal-overlay.show {
    opacity: 1; visibility: visible;
  }
  .auth-modal {
    background: var(--white);
    width: 100%; max-width: 420px;
    border-radius: var(--radius-lg);
    padding: 34px 34px;
    position: relative;
    box-shadow: 0 24px 50px rgba(36,71,107,0.25);
    transform: translateY(20px);
    transition: transform .3s ease;
    border: 2px solid var(--paper-dark);
  }
  .auth-modal-overlay.show .auth-modal {
    transform: translateY(0);
  }
  .auth-modal-close {
    position: absolute; top: 16px; right: 16px;
    background: var(--paper); border: none;
    width: 34px; height: 34px; border-radius: 50%;
    font-size: 1.4rem; color: var(--navy);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s ease;
  }
  .auth-modal-close:hover {
    background: var(--blue-tint);
  }
  .auth-tabs {
    display: flex; gap: 10px; margin-bottom: 26px;
    border-bottom: 2px solid var(--blue-tint);
    padding-bottom: 12px;
  }
  .auth-tab {
    background: none; border: none; font-family: 'Baloo 2', sans-serif;
    font-size: 1.15rem; font-weight: 700; color: var(--ink-soft);
    cursor: pointer; padding: 4px 12px; position: relative;
  }
  .auth-tab.active {
    color: var(--navy);
  }
  .auth-tab.active::after {
    content: ""; position: absolute; left: 0; bottom: -14px;
    width: 100%; height: 3px; background: var(--coral); border-radius: 3px;
  }
  .auth-content {
    display: none;
  }
  .auth-content.active {
    display: block; animation: fadeIn .4s ease;
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .auth-content h3 {
    font-size: 1.6rem; margin-bottom: 18px; text-align: center;
  }
  .auth-input {
    width: 100%; padding: 14px 18px; margin-bottom: 14px;
    border-radius: 12px; border: 2px solid var(--blue-tint);
    font-family: 'Nunito', Arial; font-size: 1rem;
    background: var(--paper);
  }
  .auth-input:focus-visible {
    outline: none; border-color: var(--blue-soft); background: var(--white);
  }
  .btn-block {
    width: 100%; justify-content: center; margin-top: 10px;
  }

  /* ===== UTILITIES ===== */
  .ltr-text { direction: ltr; text-align: left; }
  .home-intro-text { color: var(--ink-soft); margin-top: 14px; max-width: 520px; }
  .d-none { display: none !important; }
  .dot-5 { width: 5px; height: 5px; }
  .dot-10 { width: 10px; height: 10px; }
  .dot-20 { width: 20px; height: 20px; }
  .dot-30 { width: 30px; height: 30px; }
  .dot-40 { width: 40px; height: 40px; }
  .alert-close-btn { cursor: pointer; padding-left: 10px; }
  .position-relative { position: relative; }
  .book-view-section { padding-top: 100px; padding-bottom: 50px; }
  .book-cover-img { border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 100%; max-width: 400px; margin: 0 auto; display: block; }
  .book-emoji-icon { font-size: 150px; text-align: center; }
  .book-info-text { color: var(--ink-soft); margin-top: 14px; }
  .book-description { font-size: 1.1rem; line-height: 1.6; margin-top: 20px; }
  .book-stats-container { margin-top: 30px; display: flex; gap: 20px; }
  .book-stat-item { color: var(--ink-soft); }
  .book-pages-section { padding-top: 50px; padding-bottom: 100px; background-color: var(--paper); }
  .book-page-thumb { width: 100%; height: 100%; object-fit: contain; }
  .book-pdf-link { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-decoration: none; }
  .book-pdf-icon { font-size: 3rem; color: #d9534f; }
  .book-page-caption { display: flex; flex-direction: column; align-items: center; }
  .book-page-desc { color: var(--ink-soft); margin-top: 5px; text-align: center; }
  .books-gallery-section { padding-top: 100px; padding-bottom: 100px; }
  .empty-gallery-msg { text-align: center; padding: 50px; }
  .book-card-link { text-decoration: none; color: inherit; }
  .arts-winners-section { background-color: var(--pink-light); padding-top: 100px; }
  .art-thumb-img { width: 100%; height: 100%; object-fit: cover; }
  .art-caption { display: flex; flex-direction: column; align-items: center; }
  .art-user-info { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
  .art-user-avatar { 
      width: 90px;
      height: 90px;
      border-radius: 50%;
      object-fit: cover;
      position: absolute;
      right: -14px;
      border: 2px dashed var(--navy);
      padding: 4px;
   }
  .art-stat-item { color: var(--ink-soft); }
  .pt-60 { padding-top: 60px; }
  .pt-100 { padding-top: 100px; }
  .pb-100 { padding-bottom: 100px; }
  .mt-30 { margin-top: 30px; }
  .mb-20 { margin-bottom: 20px; }
  .d-flex-center { display: flex; align-items: center; justify-content: center; }
  .authors-section { padding-top: 80px; padding-bottom: 80px; background: var(--paper-dark); }
  .form-label { display: block; margin-bottom: 8px; font-family: 'Baloo 2', sans-serif; font-weight: 700; color: var(--navy); }
  .form-control { width: 100%; padding: 12px; border-radius: 12px; border: 2px solid var(--blue-tint); font-family: 'Nunito', sans-serif; outline: none; transition: border 0.2s; }
  .form-control:focus { border-color: var(--coral); }
  textarea.form-control { resize: vertical; }
  .pagination-flex { display: flex; justify-content: center; gap: 10px; }

  /* ===== PAGINATION ===== */
  .pagination { display: flex; padding-left: 0; list-style: none; border-radius: 100px; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 0; }
  .pagination li { display: inline-block; }
  .pagination li a, .pagination li span { display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 100px; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--navy); background-color: var(--paper); text-decoration: none; transition: all 0.3s ease; border: 2px solid var(--paper-dark); box-shadow: 0 4px 10px rgba(0,0,0,0.03); }
  .pagination li a:hover { background-color: var(--blue-tint); color: var(--coral); border-color: var(--blue-soft); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.08); }
  .pagination li.active a, .pagination li.active span { background-color: var(--coral); color: var(--white); border-color: var(--coral); box-shadow: 0 6px 15px rgba(255, 139, 107, 0.3); }
  .pagination li.disabled a, .pagination li.disabled span { background-color: transparent; color: var(--ink-soft); border-color: transparent; box-shadow: none; cursor: not-allowed; opacity: 0.5; }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 980px){
    .hero-grid{grid-template-columns:1fr; text-align:center;}
    .hero p.lead{margin-left:auto; margin-right:auto;}
    .hero-actions{justify-content:center;}
    .coupon{margin:0 auto;}
    .hero-visual{margin-top:20px;}
    .about-grid{grid-template-columns:1fr;}
    .about-visual{order:-1;}
    .friends-grid{grid-template-columns:repeat(2,1fr);}
    .test-grid{grid-template-columns:1fr; }
    .test-mofu{order:-1;}
    .footer-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width: 720px){
    nav.main-menu{
      position:fixed; top:74px; left:0; right:0; background:var(--paper);
      flex-direction:column; padding:20px 28px; border-bottom:2px dashed rgba(36,71,107,0.15);
      transform:translateY(-140%); transition:transform .25s ease; z-index:99;
    }
    nav.main-menu.open{transform:translateY(0);}
    nav.main-menu ul{flex-direction:column; gap:18px;}
    .menu-toggle{display:block;}
    .nav-cta .btn-sm{padding:9px 16px; font-size:0.85rem;}
    .hero h1{font-size:2.2rem;}
    .issue-card{position:relative; left:auto; top:auto; margin:0 auto 20px;}
    .mofu-hero{width:240px; margin:0 auto;}
    .hero-visual{flex-direction:column;}
    .friends-grid{grid-template-columns:1fr 1fr; gap:16px;}
    .newsletter{padding:40px 26px; flex-direction:column; text-align:center;}
    .newsletter-form{justify-content:center;}
    .footer-grid{grid-template-columns:1fr;}
  }

  .hideIt {
    display: none;
  }