/* ============================================================
   Main Stylesheet
   Project: Story / Membership Website
   Language: English comments
   Approach: Mobile-first base styles with additional breakpoint
   overrides for common phones, tablets, laptops and desktops.

   Breakpoint overview used at the end of this file:
   - up to 360px: very small phones
   - 361px to 480px: standard phones
   - 481px to 767px: large phones and phone landscape
   - 768px to 1023px: tablets in portrait mode
   - 1024px to 1199px: tablets in landscape mode / small laptops
   - 1200px to 1439px: laptops
   - 1440px to 1919px: desktop screens
   - 1920px and above: large desktops
   - 2560px and above: ultra-wide / high-resolution screens
   - landscape with low height: phone landscape safety rules
   ============================================================ */

/* ==============================
   Global variables
   ============================== */

:root {
  --bg: #0b0c10;
  --bg-soft: #14151b;
  --text: #f4f1ef;
  --muted: #a6a2a0;
  --accent: #e86f63;
  --accent-dark: #9d1f1f;
  --border: rgba(255,255,255,0.12);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: Arial;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ==============================
   Top banner
   ============================== */

.top-banner {
  background-color: var(--accent);
  text-align: center;
  padding: 14px;
  letter-spacing: 1px;
  font-size: 15px;
}

/* ==============================
   Header and navigation
   ============================== */

header {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6%;
  background: #111218;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.logo {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: Georgia, serif;
  font-size: 30px;
  color: var(--accent);
}

.logo img {
  height: 54px;
  width: auto;
}

nav {
  display: flex;
  gap: 36px;
  align-items: center;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--muted);
}

nav a:hover {
  color: var(--accent);
}

.btn-outline {
  border: 1px solid var(--border);
  padding: 14px 26px;
  border-radius: 6px;
  color: var(--text);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.menu-toggle span {
  width: 28px;
  height: 3px;
  background: var(--text);
  border-radius: 2px;
  transition: 0.3s ease;
}

.menu-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==============================
   Mobile slide menu
   ============================== */

.mobile-menu {
  display: none;
  position: fixed;
  top: 24px;
  right: 28px;
  width: min(180px, calc(100% - 36px));
  z-index: 999;
  padding: 18px;
  padding-top: 18px;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(78,18,23,0.96), rgba(16,17,23,0.98));
  border: 1px solid rgba(232,111,99,0.22);
  box-shadow: 0 22px 60px rgba(0,0,0,0.48);
  
}

.mobile-menu.active {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 18px;
}

.mobile-menu a {
  padding: 11px 12px;
  border-radius: 12px;
  color: #fff;
  background: rgba(255,255,255,0.045);
  font-size: 14px;
}

.mobile-menu a:hover {
  background: rgba(232,111,99,0.18);
}

/* ==============================
   Hero section
   ============================== */

.hero {
  min-height: calc(100vh - 90px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: linear-gradient(90deg, #15161c 0%, #0b0c10 100%);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(232,111,99,0.25) 0%, transparent 70%);
  top: 10%;
  left: 20%;
  filter: blur(80px);
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8% 10%;
  text-align: center;
  position: relative;
  z-index: 2;
}

.eyebrow {
  /* color: var(--accent); */
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 14px;
  font-weight: normal; 
  margin-bottom: 34px;
}

.hero h1 {
  font-family: Georgia, serif;
  color: var(--accent);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  margin-bottom: 28px;
  font-weight: normal;
}

.hero h1 span {
  display: block;
  color: var(--accent);
  font-style: italic;
  font-weight: normal;
}

.hero p {
  max-width: 620px;
  margin: 0 auto 48px;
  color: var(--muted);
  font-size: 20px;
}

.hero-image {
  background: url("../hero.png") center/contain no-repeat;
  min-height: 420px;
  background-size: 70%;
}

section {
  padding: 50px 7%;
}

/* ==============================
   Feature cards
   ============================== */

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.feature-card {
  border: 1px solid var(--border);
  padding: 42px 34px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  text-align: center;
}

.feature-card h3 {
  font-family: Georgia, serif;
  font-size: 28px;
  margin-bottom: 16px;
  color: var(--accent);
  font-weight: normal;
}

.feature-card p {
  color: var(--muted);
}

/* ==============================
   Collection section
   ============================== */

.collection {
  background: #0b0c10;
}

.section-title {
  text-align: center;
  margin-bottom: 60px;
}

.section-title h2 {
  font-family: Georgia, serif;
  font-size: clamp(36px, 5vw, 64px);
  color: var(--accent);
  margin-bottom: 18px;
  font-weight: normal;
}

.section-title p {
  color: var(--muted);
  font-size: 19px;
  max-width: 720px;
  margin: 0 auto;
}

/* ==============================
   Book grid and book cards
   ============================== */

.book-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

.book-card {
  background: #15161b;
  border: 1px solid var(--border);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: 0.25s ease;
}

.book-card:hover {
  transform: translateY(-8px);
  border-color: var(--accent);
}

.book-card img {
  width: 100%;
  display: block;
 /* transition: transform 0.5s ease;*/
}

.book-card:hover img {
 /* transform: scale(1.08);*/
}

.book-card-content {
  padding: 28px;
}

.book-card h3 {
  font-family: Georgia, serif;
  font-size: 28px;
  margin-bottom: 12px;
  font-weight: normal;
}

.book-card p {
  color: var(--muted);
  margin-bottom: 24px;
}

.story-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
  padding: 13px 18px;
  background: linear-gradient(135deg, var(--accent), #b83732);
  color: #fff;
  border-radius: 14px;
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(232,111,99,0.22);
  transition: 0.25s ease;
}

.story-button:hover {
  background: linear-gradient(135deg, #ff8175, var(--accent));
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(232,111,99,0.32);
}

/* ==============================
   Custom audio player
   ============================== */

.custom-audio-player {
  margin: 18px 0 22px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,0.045);
}

.audio-player-title {
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.audio-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
}

.audio-play {
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(232,111,99,0.28);
}

.audio-main {
  min-width: 0;
}

.audio-progress {
  position: relative;
  width: 100%;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  overflow: hidden;
  cursor: pointer;
}

.audio-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #ff9b91);
}

.audio-wave-mini {
  display: flex;
  align-items: end;
  gap: 3px;
  height: 22px;
  margin-bottom: 8px;
  overflow: hidden;
}

.audio-wave-mini span {
  width: 3px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.22);
}

.audio-wave-mini span:nth-child(2n) { height: 14px; }
.audio-wave-mini span:nth-child(3n) { height: 20px; }
.audio-wave-mini span:nth-child(4n) { height: 11px; }

.audio-wave-mini span.active {
  background: var(--accent);
}

.audio-time-wrap {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* ==============================
   Mood / gallery section
   ============================== */

.mood {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 40px 7%;
  background: #0b0c10;
}

.mood h2 {
  font-size: clamp(32px, 4vw, 52px);
  margin-bottom: 14px;
  font-family: Georgia, serif;
  color: var(--accent);
  font-weight: normal;
}

.mood p {
  max-width: 820px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 18px;
}

.gallery-carousel {
  --visible: 9;
  --gap: 18px;
  --img-width: 185px;
  width: calc((var(--img-width) * var(--visible)) + (var(--gap) * (var(--visible) - 1)));
  max-width: 100%;
  margin: 0 auto 0;
  overflow: hidden;
  position: relative;
  z-index: 3;
  padding: 15px 0;
}

.gallery-track {
  display: flex;
  gap: var(--gap);
  transition: transform 0.8s ease;
}

.gallery-track img {
  flex: 0 0 var(--img-width);
  width: var(--img-width);
  height: 300px;
  object-fit: cover;
  object-position: center top;
  border-radius: 16px;
  transition: filter 0.6s ease, transform 0.6s ease;
}

/* ==============================
   Warning section
   ============================== */

.warning {
  background: #15161b;
  text-align: center;
}

.warning-box {
  max-width: 820px;
  margin: 0 auto;
  padding: 46px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255,255,255,0.03);
}

.warning-box h2 {
  color: var(--accent);
  font-family: Georgia, serif;
  font-size: 42px;
  margin-bottom: 20px;
  font-weight: normal;
}

.warning-box p {
  color: var(--muted);
  font-size: 19px;
}

/* ==============================
   Affiliate / call-to-action section
   ============================== */

.affiliate {
  text-align: center;
  padding: 70px 7%;
  background: #0b0c10;
  border-top: 1px solid var(--border);
}

.affiliate h3 {
  font-family: Georgia, serif;
  font-size: clamp(30px, 4vw, 48px);
  color: var(--accent);
  margin-bottom: 16px;
  font-weight: normal;
}

.affiliate h2 {
  font-family: Georgia, serif;
  font-size: clamp(30px, 4vw, 48px);
  margin-bottom: 16px;
  font-weight: normal;
}

.affiliate p {
  max-width: 620px;
  margin: 0 auto 28px;
  color: var(--accent);
  font-size: 18px;
}

.affiliate h4 {
  max-width: 620px;
  margin: 0 auto 28px;
  color: var(--muted);
  font-size: 18px;
  font-weight: normal;
}

.affiliate .btn-primary {
  display: inline-block;
}

.affiliate-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 46px 30px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255,255,255,0.03);
}

.btn-primary,
.btn-secondary {
  padding: 18px 38px;
  border-radius: 6px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: 0.25s ease;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.btn-primary:hover {
  background: #ff8175;
  transform: translateY(-2px);
}

.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: 0.8s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==============================
   Footer
   ============================== */

footer {
  padding: 40px 7%;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--muted);
  background: #090a0d;
  font-size: 14px;
}

/* ==============================
   Hook section
   ============================== */

.hook-section {
  text-align: center;
  padding: 80px 20px;
}

.hook-section h1 {
  color: var(--accent);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: normal;
  font-family: Georgia, serif;
  text-align: center;
  margin-bottom: 10px;
}

.hook-section h2 {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: normal;
  color: var(--text);
  text-align: center;
  margin-bottom: 20px;
}

.hook-text {
  max-width: 720px;
  font-family: Georgia, serif;
  margin: 20px auto;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.6;
}

.hook-highlight {
  margin-top: 20px;
  font-size: 20px;
  color: var(--accent);
  font-weight: normal;
}

.hook-benefits {
  list-style: none;
  margin-top: 30px;
  padding: 0;
}

.hook-benefits li {
  margin: 10px 0;
  font-size: 19px;
  color: var(--text);
  position: relative;
}

.hook-benefits li::before {
  content: "•";
  color: var(--text);
  margin-right: 10px;
}

.circle-image {
  text-align: center;
  margin-top: 30px;
}

.circle-image img {
  width: 375px;         
  height: 375px;
  max-width: 100%;
}

/* ==============================
   Responsive image sizing: Tablet
   ============================== */
@media (max-width: 900px) {
  .circle-image img {
    width: 300px;
    height: 300px;
  }
}

/* ==============================
   Responsive image sizing: Mobile full width
   ============================== */
@media (max-width: 600px) {
  .circle-image img {
    width: 100%;
    height: auto;       
    max-width: 100%;
  }
}

/* ==============================
   Responsive image sizing: Ultra small screens
   ============================== */
@media (max-width: 400px) {
  .circle-image img {
    width: 100%;
    height: auto;
  }
}

/* ==============================
   Legal pages
   ============================== */

.legal-section {
  background: #0b0c10;
  padding-top: 70px;
}

.legal-card {
  max-width: 1100px;
  margin: 0 auto;
}

.legal-content {
  padding: 46px;
}

.legal-content h3 {
  color: var(--accent);
  font-family: Georgia, serif;
  font-size: 28px;
  margin: 34px 0 14px;
}

.legal-content h3:first-child {
  margin-top: 0;
}

.legal-content p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 18px;
}

.legal-content strong {
  color: var(--text);
}

.legal-content ul {
  margin: 10px 0 24px 22px;
  color: var(--muted);
}

.legal-content li {
  margin-bottom: 10px;
  line-height: 1.65;
}

@media (max-width: 700px) {
  .legal-section {
    padding-top: 45px;
  }

  .legal-content {
    padding: 28px 22px;
  }

  .legal-content h3 {
    font-size: 23px;
  }

  .legal-content p,
  .legal-content li {
    font-size: 15.5px;
  }
}

/* ==============================
   Checkout and pricing section
   ============================== */

.checkout-section {
  background: #0b0c10;
}

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

.pricing-card {
  position: relative;
  background: #15161b;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 42px 30px;
  text-align: center;
  transition: 0.25s ease;
}

.pricing-card:hover {
  transform: translateY(-8px);
  border-color: var(--accent);
}

.pricing-card.active {
  border-color: #00c27a;
  box-shadow: 0 0 0 2px rgba(0,194,122,0.25), 0 20px 50px rgba(0,0,0,0.4);
}

.pricing-featured {
  border-color: var(--accent);
  box-shadow: 0 20px 50px rgba(232,111,99,0.18);
}


.pricing-badge {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--accent);
  color: #fff;
  padding: 12px;
  border-radius: 22px 22px 0 0;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 1.5px;
  font-size: 13px;
}

.pricing-value {
  background: #b83732;
}

.pricing-card h3 {
  font-family: Georgia, serif;
  font-size: 34px;
  margin-top: 20px;
  margin-bottom: 6px;
}

.pricing-subtitle {
  color: var(--muted);
  font-size: 18px;
  margin-bottom: 30px;
}

.pricing-price {
  font-family: Georgia, serif;
  color: var(--accent);
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1;
  margin-bottom: 10px;
}

.pricing-day {
  color: var(--muted);
  font-size: 17px;
  margin-bottom: 30px;
}

.checkout-agreement {
  max-width: 620px;
  margin: 46px auto 0;
  text-align: center;
}

.checkout-agreement label {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  color: var(--muted);
  font-size: 16px;
  margin-bottom: 24px;
}

.checkout-agreement input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.checkout-agreement a {
  color: var(--accent);
  font-weight: normal;
}

.checkout-button {
  width: 100%;
  max-width: 420px;
  padding: 18px 38px;
  border: none;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: 0.25s ease;
}

.checkout-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.checkout-button:not(:disabled):hover {
  background: #ff8175;
  transform: translateY(-2px);
}

.payment-info {
  margin-top: 16px;
  text-align: center;
  opacity: 0.85;
}

.payment-info p {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.payment-info img {
  max-width: 220px;
  width: 100%;
  height: auto;
  filter: brightness(0.95);
}

/* ==============================
   Experience / testimonials section
   ============================== */

.experience-section {
  /* padding: 90px 20px; */
  background: #0f1015;
  text-align: center;
}

.experience-section .section-title {
  max-width: 980px;
  margin: 0 auto 50px auto;
}

.experience-section .section-title h2 {
  color: var(--accent);
  font-size: clamp(1.4rem, 5vw, 3.6rem);
  line-height: 1.05;
  margin-bottom: 24px;
  font-weight: normal;
}

.experience-section .section-title p {
  max-width: 850px;
  margin: 0 auto;
  color: rgba(255,255,255,0.68);
  font-size: 1.25rem;
  line-height: 1.6;
}

/* ==============================
   Testimonial grid
   ============================== */

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

/* ==============================
   Testimonial cards
   ============================== */

.testimonial-card {
  padding: 32px 26px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  transition: 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}

.testimonial-card h3 {
  font-size: 1.3rem;
  margin-bottom: 18px;
  color: var(--accent);
  font-weight: normal;
}

/* ==============================
   Testimonial text
   ============================== */

.testimonial-text {
  color: #fff;
  font-family: Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.65;
  font-weight: normal;
}

.testimonial-author {
  margin-top: 18px;
  color: var(--muted);
  font-weight: normal;
  font-size: 0.95rem;
}

/* ==============================
   Testimonial responsive rules
   ============================== */

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

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

@media (max-width: 900px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
  }

  .pricing-card {
    padding: 40px 24px;
  }

}

@media (max-width: 500px) {
  .checkout-agreement label {
    font-size: 14px;
    text-align: left;
  }

  .pricing-card h3 {
    font-size: 30px;
  }

  .pricing-price {
    font-size: 44px;
  }
}


/* ==============================
   Account form
   ============================== */

.account-form {
  max-width: 860px;
  margin: 0 auto;
}

.account-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.account-field {
  display: flex;
  flex-direction: column;
}

.account-field label {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.account-field input {
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #0b0c10;
  color: var(--text);
  font-size: 16px;
  transition: 0.25s ease;
}

.account-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,111,99,0.16);
}

.account-field small {
  margin-top: 7px;
  font-size: 13px;
  min-height: 18px;
}

.account-captcha {
  grid-column: 1 / -1;
  max-width: 280px;
}

.password-strength {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  margin-top: 10px;
  overflow: hidden;
}

#passwordStrengthBar {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  transition: 0.25s ease;
}

.account-submit {
  margin-top: 32px;
  max-width: 420px;
}

@media (max-width: 700px) {
  .account-form-grid {
    grid-template-columns: 1fr;
  }

  .account-captcha {
    max-width: 100%;
  }

  .account-submit {
    max-width: 100%;
  }
}

    /* ==============================
   Contact modal and contact form
   ============================== */

.contact-modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.78);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      padding: 20px;
    }

    .contact-modal.active {
      display: flex;
    }

    .contact-box {
      background: #15161b;
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 18px;
      max-width: 520px;
      width: 100%;
      padding: 28px;
      text-align: center;
      box-shadow: 0 20px 60px rgba(0,0,0,0.45);
    }

    .contact-box h3 {
      color: var(--accent);
      margin-bottom: 14px;
      font-size: 1.7rem;
    }

    .contact-box p {
      line-height: 1.55;
      margin-bottom: 16px;
    }

    .contact-button {
      display: inline-block;
      margin-top: 8px;
      background: var(--accent);
      color: #fff;
      padding: 11px 18px;
      border-radius: 10px;
      text-decoration: none;
      font-weight: normal;
    }

    .contact-close {
      margin-top: 14px;
      background: transparent;
      color: #fff;
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 10px;
      padding: 9px 16px;
      cursor: pointer;
    }

    .payment-alt {
      margin-top: 14px;
      font-size: 0.9rem;
      opacity: 0.85;
      line-height: 1.45;
      text-align: center;
    }

    .payment-alt a,
    .contact-link {
      color: var(--accent);
      font-weight: normal;
      text-decoration: none;
    }

    .payment-alt a:hover,
    .contact-link:hover {
      text-decoration: underline;
    }
    
    .contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 15px;
}

.contact-form input,
.contact-form textarea {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  background: #fff;
  font-size: 0.9rem;
}

.captcha-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.captcha-row span {
  font-weight: normal;
  color: var(--accent);
}

.payment-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.payment-button {
  min-width: 180px;
}

.password-wrap {
  position: relative;
}

.password-wrap input {
  padding-right: 48px;
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.password-toggle svg {
  width: 20px;
  height: 20px;
  stroke: var(--accent);
  opacity: 0.8;
  transition: 0.2s;
}

.password-toggle:hover svg {
  opacity: 1;
}

/* ==============================
   Rating badges
   ============================== */

.rating-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 6px 12px;
  border-radius: 8px;

  font-size: 14px;      
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;

  background: linear-gradient(135deg, #ffe066, #ffcc00);
  color: #000;

  box-shadow: 
    0 4px 12px rgba(255, 204, 0, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.4);

  border: 1px solid rgba(255, 204, 0, 0.6);
}

.rating-r {
  background: linear-gradient(135deg, #ffe066, #ffcc00);
}

.rating-x {
  background: linear-gradient(135deg, #ffc266, #ff9933);
}

/* ==============================
   Member dashboard
   ============================== */

.member-header {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
  margin-bottom:30px;
}

.member-box {
  background:rgba(255,255,255,0.05);
  padding:20px;
  border-radius:14px;
  flex:1;
  min-width:220px;
}

.member-story-showcase {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 28px;
  align-items: stretch;
  margin-bottom: 46px;
  padding: 0;
}

.story-featured {
  min-width: 0;
}

.story-highlight {
  position: relative;
  width: 100%;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #15161b;
  border: 1px solid var(--border);
}

.story-highlight img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
}

.story-highlight .overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px;
  background: linear-gradient(to top, rgba(0,0,0,0.92), rgba(0,0,0,0.25), transparent);
}

.story-label {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.story-highlight h3 {
  font-family: Georgia, serif;
  color: #fff;
  font-size: 1.7rem;
  margin-bottom: 4px;
  font-weight: normal;
}

.story-side-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 18px;
  align-content: start;
}

.mini-story-card {
  background: #15161b;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  transition: 0.25s ease;
}

.mini-story-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
}

.mini-story-card img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
}

.mini-story-card div {
  padding: 12px;
}

.mini-story-card strong {
  display: block;
  color: #fff;
  font-size: 0.92rem;
  line-height: 1.3;
  margin-bottom: 4px;
}

.mini-story-card small {
  color: var(--muted);
}

.member-book-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.member-card img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 14px;
}

.member-card .book-card-content {
  padding: 12px;
}

.member-card h3 {
  font-size: 0.95rem;
  line-height: 1.3;
  margin-bottom: 6px;
}

.member-desc {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted);
  display: -webkit-box;
  
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}

.member-card .custom-audio-player {
  margin-top: 8px;
  margin-bottom: 10px;
}

.member-card .audio-row {
  gap: 6px;
}

.member-card .audio-play {
  width: 28px;
  height: 28px;
  font-size: 0.8rem;
}

.member-card .audio-time-wrap {
  font-size: 0.7rem;
}

.member-card .story-button {
  padding: 6px 10px;
  font-size: 0.75rem;
}

.member-player {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 18px;
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(0,0,0,0.46), rgba(86, 18, 24, 0.24));
  border: 1px solid rgba(232,111,99,0.20);
}

.member-player-row {
  display: grid;
  grid-template-columns: 44px 52px 44px 1fr;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.member-play {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 8px 22px rgba(232,111,99,0.24),
    0 0 14px rgba(232,111,99,0.14);
}

.member-skip {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-skip:hover {
  background: rgba(232,111,99,0.2);
  border-color: rgba(232,111,99,0.6);
}

.member-player-main {
  width: 100%;
  min-width: 0;
}

.member-progress {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
}

.member-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #ff9b91);
}

.member-time {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 7px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
}

.member-skip-status {
  margin-top: 10px;
  padding-left: 164px;
  color: #e86f63;
  font-size: 13px;
}

.skip-main-status {
  display: block;
  color: #e86f63;
  font-size: 13px;
}

.skip-next-status {
  display: block;
  margin-top: 2px;
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  letter-spacing: 0.3px;
}

@media (max-width: 768px) {
  .member-player {
    padding: 14px;
  }

  .member-player-row {
    grid-template-columns: 40px 48px 40px 1fr;
    gap: 8px;
  }

  .member-play {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }

  .member-skip {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 15px;
  }

  .member-skip-status {
    padding-left: 0;
    text-align: center;
  }
}
  
.stats-grid {
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:16px;
  margin-top:30px;
}

.stats-box {
  text-align:center;
  background:rgba(255,255,255,0.05);
  padding:18px;
  border-radius:12px;
}

.stats-box strong {
  display:block;
  margin-top:8px;
  font-size:1.7rem;
  color:var(--accent);
}

.account-box {
  margin-top:40px;
  background:rgba(255,255,255,0.04);
  padding:20px;
  border-radius:14px;
}

.account-row {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-bottom:12px;
}

.membership-actions {
  margin-top:20px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.membership-actions a {
  padding:10px 14px;
  border-radius:8px;
  background:var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight:normal;
}

.empty-library {
  max-width: 760px;
  margin: 40px auto;
  padding: 36px;
  text-align: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 18px;
  color: var(--muted);
}

@media (max-width: 1200px) {
  .member-story-showcase {
    grid-template-columns: 360px 1fr;
  }

  .story-side-grid,
  .story-side-slide.active {
    grid-template-columns: repeat(2, 1fr);
  }

  .member-book-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

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

  .story-side-grid,
  .story-side-slide.active {
    grid-template-columns: repeat(1, 1fr);
  }

  .member-book-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .account-row {
    flex-direction: column;
    gap: 2px;
  }
}

.unlocked-select-button {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), #b83732);
  color: #fff;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.locked-story {
  opacity: 0.72;
}

.story-locked-label {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.unlock-info {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.story-side-grid .story-button {
  font-size: 0.7rem;
  padding: 7px 8px;
}

/* ==============================
   Next story slider
   ============================== */

.next-slider-wrap {
  position: relative;
}

.next-slider {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.next-slide {
  display: none;
}

.next-slide.active {
  display: contents;
}

.next-slider-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}

.next-slider-button {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.next-slider-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (max-width: 1200px) {
  .next-slider {
    grid-template-columns: repeat(4, 1fr);
  }
}

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

/* ==============================
   Listening progress section
   ============================== */

.listening-section {
  padding-top: 20px;
}

.listening-progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  overflow: hidden;
  margin: 12px 0 8px;
}

.listening-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #ff9b91);
}

    .wise-summary {
      text-align: center;
      margin-bottom: 26px;
    }

    .wise-summary strong {
      color: var(--accent);
      font-size: 1.4rem;
    }

    .wise-steps {
      max-width: 760px;
      margin: 0 auto 28px auto;
      text-align: left;
      line-height: 1.6;
    }

    .wise-steps li {
      margin-bottom: 10px;
    }

    .wise-actions {
      display: flex;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
      margin: 24px 0;
    }

    .wise-note {
      margin: 18px auto 26px auto;
      max-width: 760px;
      opacity: 0.85;
      text-align: center;
      line-height: 1.55;
    }

    .wise-form textarea {
      resize: vertical;
      min-height: 110px;
    }

    .crypto-summary {
      text-align: center;
      margin-bottom: 24px;
    }

    .crypto-summary strong {
      color: var(--accent);
      font-size: 1.4rem;
    }

    .crypto-actions {
      display: flex;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 24px;
    }

    .crypto-note {
      margin-top: 20px;
      font-size: 0.9rem;
      opacity: 0.8;
      text-align: center;
      line-height: 1.5;
    }

/* ==============================
   Members area dark red theme
   ============================== */

body {
  background:
    radial-gradient(circle at 18% 10%, rgba(120, 20, 28, 0.22), transparent 30%),
    radial-gradient(circle at 82% 46%, rgba(232, 111, 99, 0.10), transparent 34%),
    #08090d;
}

.collection,
.legal-section {
  background: transparent;
}

.member-story-showcase,
.listening-section,
.member-stories,
.account-box {
  position: relative;
  margin-top: 34px;
  margin-bottom: 34px;
  padding: 32px;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(78, 18, 23, 0.34), rgba(16, 17, 23, 0.94) 58%),
    #111218;
  border: 1px solid rgba(232, 111, 99, 0.12);
  box-shadow:
    0 22px 55px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.035);
  overflow: hidden;
}

.member-story-showcase::before,
.listening-section::before,
.member-stories::before,
.account-box::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 0% 0%, rgba(232,111,99,0.14), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(157,31,31,0.10), transparent 34%);
  opacity: 0.75;
}

.member-story-showcase > *,
.listening-section > *,
.member-stories > *,
.account-box > * {
  position: relative;
  z-index: 1;
}

.member-box,
.book-card,
.mini-story-card,
.story-highlight,
.stats-box,
.empty-library {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.05), rgba(80, 18, 24, 0.14)),
    #15161b;
  border: 1px solid rgba(232, 111, 99, 0.16);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.32),
    0 0 18px rgba(157, 31, 31, 0.08);
}

.book-card:hover,
.mini-story-card:hover,
.story-highlight:hover {
  border-color: rgba(232, 111, 99, 0.52);
  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.42),
    0 0 26px rgba(232, 111, 99, 0.18);
}

.stats-grid {
  margin-top: 34px;
  margin-bottom: 28px;
}

.account-box {
  margin-top: 28px;
}

.section-title {
  margin-bottom: 46px;
}

.section-title h2 {
  text-shadow: 0 0 18px rgba(232, 111, 99, 0.18);
}

header {
  background:
    linear-gradient(90deg, rgba(17,18,24,0.98), rgba(58,14,18,0.28), rgba(17,18,24,0.98));
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}

.member-player,
.custom-audio-player {
  background:
    linear-gradient(145deg, rgba(0,0,0,0.46), rgba(86, 18, 24, 0.24));
  border-color: rgba(232,111,99,0.20);
}

.next-slider-button,
.member-play,
.audio-play {
  box-shadow:
    0 8px 22px rgba(232,111,99,0.24),
    0 0 14px rgba(232,111,99,0.14);
}

.next-unlock-label {
  background: linear-gradient(135deg, #ff8175, var(--accent));
  color: #fff;
  box-shadow: 0 0 18px rgba(232,111,99,0.25);
}

.early-access-button {
  margin-top: 10px;
  background: linear-gradient(135deg, #ff9b91, #b83732);
  position: relative;
  overflow: hidden;
}

.early-access-button::after {
  content: "🔥";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.8;
}

/* ==============================
   Members area side story slider
   ============================== */

.story-side-slider-wrap {
  min-width: 0;
}

.story-side-slider {
  width: 100%;
}

.story-side-slide {
  display: none;
}

.story-side-slide.active {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 18px;
  align-content: start;
}

.story-side-slider-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

.story-side-slider-button {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.story-side-slider-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ==============================
   Continue listening slider
   ============================== */

.listening-slider-wrap {
  position: relative;
}

.listening-slider {
  width: 100%;
}

.listening-slide {
  display: none;
}

.listening-slide.active {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.listening-slider-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}

.listening-slider-button {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.listening-slider-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ==============================
   Member header navigation
   ============================== */

.member-admin-header {
  gap: 24px;
}

.member-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}

.member-nav a {
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: 0.25s ease;
}

.member-nav a:hover {
  color: var(--accent);
}

.member-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.member-logout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(232,111,99,0.22), rgba(184,55,50,0.72));
  border: 1px solid rgba(232,111,99,0.34);
  color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(232,111,99,0.18);
}

.member-logout-button:hover {
  background: linear-gradient(135deg, #ff8175, #b83732);
  transform: translateY(-1px);
}

.member-menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(232,111,99,0.28);
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

.member-menu-toggle span {
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

.member-mobile-menu {
  display: none;
  position: fixed;
  top: 74px;
  right: 18px;
  width: min(280px, calc(100% - 36px));
  z-index: 999;
  padding: 18px;
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(78,18,23,0.96), rgba(16,17,23,0.98));
  border: 1px solid rgba(232,111,99,0.22);
  box-shadow: 0 22px 60px rgba(0,0,0,0.48);
}

.member-mobile-menu.active {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.member-mobile-menu a {
  padding: 11px 12px;
  border-radius: 12px;
  color: #fff;
  background: rgba(255,255,255,0.045);
  font-size: 14px;
}

.member-mobile-menu a:hover {
  background: rgba(232,111,99,0.18);
}

/* ==============================
   Menu toggle → X state
   ============================== */

.member-menu-toggle span {
  transition: 0.3s ease;
}

/* ACTIVE STATE → X */
.member-menu-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.member-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.member-menu-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

html {
  scroll-behavior: smooth;
}

#now-playing,
#continue-listening,
#what-comes-next,
#account {
  scroll-margin-top: 115px;
}

/* ==============================
   Legacy mobile adjustments
   ============================== */

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

@media (max-width: 900px) {
  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .hero-image {
    order: -1;
    min-height: 360px;
    background-size: 72%;
  }

  .features,
  .book-grid {
    grid-template-columns: 1fr;
  }

  .audio-wave-mini span:nth-child(n+18) {
    display: none;
  }

  .gallery-carousel {
    --visible: 3;
    --img-width: 150px;
  }

  .gallery-track img {
    height: 240px;
  }
}

@media (max-width: 600px) {
  header {
    height: 74px;
    padding: 0 20px;
  }

  .logo {
    font-size: 20px;
    gap: 10px;
  }

  .logo img {
    height: 42px;
  }

  section {
    padding: 42px 5%;
  }

  .hero h1 {
    font-size: 34px;
  }

  .hero p {
    font-size: 17px;
  }

  .book-card-content {
    padding: 22px;
  }

  .audio-row {
    grid-template-columns: 38px 1fr;
  }

  .audio-time-wrap {
    grid-column: 2;
    margin-top: -4px;
    font-size: 11px;
  }

  .audio-play {
    width: 38px;
    height: 38px;
  }

  .audio-wave-mini span:nth-child(n+12) {
    display: none;
  }

  .gallery-carousel {
    --visible: 2;
    --gap: 14px;
    --img-width: 145px;
  }

  .gallery-track img {
    height: 225px;
  }

  .warning-box,
  .affiliate-inner {
    padding: 32px 22px;
  }
}

@media (max-width: 400px) {
  .logo {
    font-size: 18px;
  }

  .audio-wave-mini span:nth-child(n+8) {
    display: none;
  }

  .gallery-carousel {
    --visible: 1;
    --img-width: 185px;
  }
}

@media (max-width: 600px) {

  .mood {
    padding-top: 30px;   
    padding-bottom: 30px;
  }

  .gallery-carousel {
    margin-top: 10px;    
    padding: 10px 0;     
  }

  .mood p {
    margin: 15px 0 !important; 
  }

}


/* ==============================
   Members area responsive rules
   ============================== */

@media (max-width: 1200px) {
  .story-side-slide.active {
    grid-template-columns: repeat(2, 1fr);
  }

  .listening-slide.active {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 360px) {
  .story-side-slide.active {
    grid-template-columns: repeat(1, 1fr);
  }

  .listening-slide.active {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 980px) {
  .desktop-member-nav {
    display: none;
  }

  .member-menu-toggle {
    display: flex;
  }

  .member-logout-button {
    display: none;
  }
}

@media (max-width: 768px) {
  .member-story-showcase,
  .listening-section,
  .member-stories,
  .account-box {
    padding: 22px;
    border-radius: 22px;
  }

  .listening-slide.active {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ==============================
   Change plan page
   ============================== */

.change-plan-section {
  min-height: calc(100vh - 90px);
  padding: 70px 7%;
  background:
    radial-gradient(circle at 18% 10%, rgba(120, 20, 28, 0.24), transparent 32%),
    radial-gradient(circle at 82% 42%, rgba(232, 111, 99, 0.10), transparent 34%),
    #08090d;
}

.change-plan-wrap {
  max-width: 1220px;
  margin: 0 auto;
}

.current-plan-box {
  margin-bottom: 42px;
  padding: 28px;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(78, 18, 23, 0.34), rgba(16, 17, 23, 0.94) 58%),
    #111218;
  border: 1px solid rgba(232,111,99,0.14);
  box-shadow:
    0 22px 55px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.035);
}

.current-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.current-plan-item {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(232,111,99,0.14);
}

.current-plan-item span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  margin-bottom: 6px;
}

.current-plan-item strong {
  color: #fff;
  font-size: 1rem;
}

.change-note {
  max-width: 820px;
  margin: -20px auto 38px;
  color: var(--muted);
  text-align: center;
  font-size: 1rem;
  line-height: 1.7;
}

.change-plan-card.active {
  border-color: #00c27a;
  box-shadow:
    0 0 0 2px rgba(232,111,99,0.22),
    0 24px 58px rgba(0,0,0,0.42),
    0 0 34px rgba(232,111,99,0.16);
}

.change-payment-box {
  max-width: 760px;
  margin: 46px auto 0;
  padding: 28px;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(78, 18, 23, 0.28), rgba(16, 17, 23, 0.94) 60%),
    #111218;
  border: 1px solid rgba(232,111,99,0.14);
  text-align: center;
}

.change-payment-box label {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 24px;
}

.change-payment-box input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.change-payment-box a {
  color: var(--accent);
}

.change-back-link {
  display: inline-flex;
  margin-top: 24px;
  color: var(--accent);
}

.plan-hint {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ==============================
   Unlock story page
   ============================== */

.unlock-section {
  min-height: calc(100vh - 90px);
  padding: 70px 7%;
  background:
    radial-gradient(circle at 18% 10%, rgba(120, 20, 28, 0.24), transparent 32%),
    radial-gradient(circle at 82% 42%, rgba(232, 111, 99, 0.10), transparent 34%),
    #08090d;
}

.unlock-wrap {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 34px;
  align-items: start;
}

.unlock-cover {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(232,111,99,0.18);
  background: #15161b;
  box-shadow:
    0 24px 65px rgba(0,0,0,0.42),
    0 0 36px rgba(232,111,99,0.16);
}

.unlock-cover img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  display: block;
}

.unlock-box {
  padding: 34px;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(78, 18, 23, 0.34), rgba(16, 17, 23, 0.94) 58%),
    #111218;
  border: 1px solid rgba(232,111,99,0.14);
  box-shadow:
    0 22px 55px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.035);
}

.unlock-label {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff8175, var(--accent));
  color: #fff;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.unlock-box h1 {
  font-family: Georgia, serif;
  color: var(--accent);
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05;
  margin-bottom: 18px;
  font-weight: normal;
}

.unlock-box p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 22px;
}

.unlock-price {
  margin: 26px 0;
  padding: 22px;
  border-radius: 18px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(232,111,99,0.16);
}

.unlock-price strong {
  display: block;
  color: #fff;
  font-size: 1rem;
  margin-bottom: 6px;
}

.unlock-price span {
  display: block;
  color: var(--accent);
  font-family: Georgia, serif;
  font-size: 2.4rem;
}

.unlock-agreement {
  margin-top: 24px;
}

.unlock-agreement label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.unlock-agreement input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.unlock-box .payment-button {
  flex: 1;
}

.payment-button {
  border: none;
}

.payment-button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.unlock-note {
  margin-top: 20px;
  font-size: 0.88rem;
  color: var(--muted);
}

.back-link {
  display: inline-flex;
  margin-top: 22px;
  color: var(--accent);
}

/* ==============================
   Unlock story page: responsive
   ============================== */

/* Tablet / narrow laptop */
@media (max-width: 1100px) {
  .unlock-wrap {
    grid-template-columns: 320px 1fr;
    gap: 28px;
  }
}

/* Tablet portrait and small screens */
@media (max-width: 900px) {
  .unlock-section {
    min-height: auto;
    padding: 42px 5%;
  }

  .unlock-wrap {
    grid-template-columns: 1fr;
    max-width: 560px;
    gap: 28px;
  }

  .unlock-cover {
    max-width: 360px;
    margin: 0 auto;
  }

  .unlock-box {
    padding: 28px;
    border-radius: 24px;
  }
}

/* Portrait phones */
@media (max-width: 600px) and (orientation: portrait) {
  .unlock-section {
    padding: 34px 5%;
  }

  .unlock-wrap {
    max-width: 100%;
    gap: 22px;
  }

  .unlock-cover {
    max-width: 280px;
    border-radius: 20px;
  }

  .unlock-box {
    padding: 24px 20px;
    border-radius: 22px;
  }

  .unlock-label {
    font-size: 0.68rem;
    padding: 7px 11px;
    letter-spacing: 0.8px;
  }

  .unlock-box h1 {
    font-size: 32px;
  }

  .unlock-box p {
    font-size: 15.5px;
    line-height: 1.65;
  }

  .unlock-price {
    padding: 18px;
  }

  .unlock-price span {
    font-size: 2rem;
  }

  .unlock-agreement label {
    font-size: 14px;
  }

  .unlock-box .payment-buttons {
    flex-direction: column;
  }

  .unlock-box .payment-button {
    width: 100%;
    min-width: 0;
  }
}

/* Very small portrait phones */
@media (max-width: 360px) and (orientation: portrait) {
  .unlock-cover {
    max-width: 240px;
  }

  .unlock-box {
    padding: 22px 16px;
  }

  .unlock-box h1 {
    font-size: 28px;
  }

  .unlock-box p {
    font-size: 14.5px;
  }
}

/* Phone landscape safety */
@media (orientation: landscape) and (max-height: 500px) {
  .unlock-section {
    min-height: auto;
    padding: 28px 5%;
  }

  .unlock-wrap {
    grid-template-columns: 220px 1fr;
    gap: 22px;
    max-width: 900px;
  }

  .unlock-box {
    padding: 22px;
  }

  .unlock-box h1 {
    font-size: 30px;
  }

  .unlock-box p {
    font-size: 14.5px;
    line-height: 1.5;
    margin-bottom: 14px;
  }

  .unlock-price {
    margin: 18px 0;
    padding: 16px;
  }
}

/* ==============================
   Member settings page
   ============================== */

.settings-section {
  max-width: 1100px;
  margin: 0 auto;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.settings-card {
  padding: 30px;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(78,18,23,0.34), rgba(16,17,23,0.94) 58%),
    #111218;
  border: 1px solid rgba(232,111,99,0.14);
  box-shadow: 0 22px 55px rgba(0,0,0,0.38);
}

.settings-card h3 {
  color: var(--accent);
  font-family: Georgia, serif;
  font-size: 1.8rem;
  margin-bottom: 20px;
  font-weight: normal;
}

.settings-form {
  display: grid;
  gap: 16px;
}

.settings-field label {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 7px;
}

.settings-field input {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: #0b0c10;
  color: #fff;
}

.settings-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232,111,99,0.16);
}

.settings-message-success {
  color: #00c27a;
  text-align: center;
  margin-bottom: 15px;
}

.settings-message-error {
  color: var(--accent);
  text-align: center;
  margin-bottom: 15px;
}

.settings-back {
  margin-top: 30px;
  text-align: center;
}

.password-help {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ==============================
   Member settings page: Portrait phones
   ============================== */

@media (max-width: 768px) and (orientation: portrait) {
  .settings-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .settings-card {
    padding: 24px 20px;
  }

  .settings-card h3 {
    font-size: 1.45rem;
  }
}

/* ==============================
   Archive story slider
   ============================== */

.archive-section {
  margin-top: 70px;
}

.archive-slider-wrap {
  position: relative;
  margin-top: 30px;
}

.archive-slider {
  width: 100%;
}

.archive-slide {
  display: none;
}

.archive-slide.active {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}

.archive-card {
  max-width: none;
}

.archive-card img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 14px;
}

.archive-slider-nav {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}

.archive-slider-button {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.archive-slider-button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Tablet / small laptop */
@media (max-width: 1200px) {
  .archive-slide.active {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Tablet portrait */
@media (max-width: 900px) {
  .archive-slide.active {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Smartphone */
@media (max-width: 768px) {
  .archive-slide.active {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .archive-card {
    width: 100%;
    min-width: 0;
  }
}

/* Very small smartphone */
@media (max-width: 360px) {
  .archive-slide.active {
    gap: 12px;
  }

  .archive-card .book-card-content {
    padding: 12px;
  }

  .archive-card h3 {
    font-size: 0.85rem;
    line-height: 1.25;
  }

  .archive-card .story-button {
    font-size: 0.68rem;
    padding: 8px 6px;
  }
}

/* ============================================================
   Complete responsive breakpoint system
   These rules are placed at the end intentionally so they can
   override older component-specific responsive rules above.
   ============================================================ */

/* ------------------------------
   Large desktops and full HD screens: 1920px and above
   Common examples: 1920x1080, 2560x1440, 3840x2160
   ------------------------------ */
@media (min-width: 1920px) {
  header {
    padding-left: 8%;
    padding-right: 8%;
  }

  section {
    padding-left: 9%;
    padding-right: 9%;
  }

  .hero-content {
    padding-left: 12%;
    padding-right: 12%;
  }

  .book-grid,
  .features,
  .pricing-grid,
  .testimonial-grid {
    
    margin-left: auto;
    margin-right: auto;
  }

  .member-book-grid,
  .next-slider,
  .listening-slide.active {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ------------------------------
   Ultra-wide and very large screens: 2560px and above
   Common examples: QHD, ultra-wide and 4K displays
   ------------------------------ */
@media (min-width: 2560px) {
  body {
    font-size: 18px;
  }

  .hero,
  section,
  footer {
    max-width: 2200px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-image {
    background-size: 58%;
  }
}

/* ------------------------------
   Desktop screens: 1440px to 1919px
   Common examples: 1440x900, 1536x864, 1600x900
   ------------------------------ */
@media (min-width: 1440px) and (max-width: 1919px) {
  .book-grid,
  .pricing-grid,
  .testimonial-grid {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
  }

  .member-book-grid,
  .next-slider,
  .listening-slide.active {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ------------------------------
   Laptops and smaller desktops: 1200px to 1439px
   Common examples: 1280x720, 1366x768, 1440x900
   ------------------------------ */
@media (min-width: 1200px) and (max-width: 1439px) {
  header {
    padding-left: 5%;
    padding-right: 5%;
  }

  nav {
    gap: 26px;
  }

  .hero-content {
    padding-left: 7%;
    padding-right: 7%;
  }

  .gallery-carousel {
    --visible: 7;
    --img-width: 170px;
  }

  .member-story-showcase {
    grid-template-columns: 360px 1fr;
  }

  .member-book-grid,
  .next-slider,
  .listening-slide.active {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ------------------------------
   Tablets in landscape mode and small laptops: 1024px to 1199px
   Common examples: 1024x768, 1180x820, 1194x834
   ------------------------------ */
@media (min-width: 1024px) and (max-width: 1199px) {
  header {
    padding-left: 4%;
    padding-right: 4%;
  }

  nav {
    gap: 20px;
    font-size: 13px;
  }

  .hero {
    grid-template-columns: 1fr 1fr;
  }

  .hero-image {
    background-size: 78%;
  }

  .features,
  .book-grid,
  .pricing-grid,
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-carousel {
    --visible: 5;
    --img-width: 155px;
  }

  .member-story-showcase {
    grid-template-columns: 340px 1fr;
  }

  .story-side-grid,
  .story-side-slide.active {
    grid-template-columns: repeat(2, 1fr);
  }

  .member-book-grid,
  .next-slider,
  .listening-slide.active {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ------------------------------
   Tablets in portrait mode: 768px to 1023px
   Common examples: 768x1024, 800x1280, 834x1194
   ------------------------------ */
@media (min-width: 768px) and (max-width: 1023px) {
  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  header {
    height: 82px;
    padding-left: 32px;
    padding-right: 32px;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .hero-image {
    order: -1;
    min-height: 430px;
    background-size: 58%;
  }

  .hero-content {
    padding: 6% 8%;
  }

  .features,
  .book-grid,
  .pricing-grid,
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-carousel {
    --visible: 4;
    --img-width: 150px;
  }

  .member-story-showcase {
    grid-template-columns: 1fr;
  }

  .story-side-grid,
  .member-book-grid,
  .next-slider,
  .listening-slide.active {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ------------------------------
   Large phones and phone landscape: 481px to 767px
   Common examples: 667x375, 740x360, 812x375, 896x414
   ------------------------------ */
@media (min-width: 481px) and (max-width: 767px) {
  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  header {
    height: 76px;
    padding-left: 22px;
    padding-right: 22px;
  }

  .logo {
    font-size: 22px;
    gap: 10px;
  }

  .logo img {
    height: 44px;
  }

  section {
    padding: 44px 5%;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-image {
    order: -1;
    min-height: 330px;
    background-size: 58%;
  }

  .hero-content {
    padding: 42px 6%;
  }

  .features,
  .book-grid,
  .pricing-grid,
  .testimonial-grid,
  .member-story-showcase,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .story-side-grid,
  .member-book-grid,
  .next-slider,
  .listening-slide.active {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-carousel {
    --visible: 3;
    --gap: 14px;
    --img-width: 140px;
  }

  .gallery-track img {
    height: 220px;
  }

  .account-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------
   Standard phones: 361px to 480px
   Common examples: 375x667, 390x844, 414x896, 430x932
   ------------------------------ */
@media (min-width: 361px) and (max-width: 480px) {
  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .top-banner {
    padding: 11px 12px;
    font-size: 13px;
  }

  header {
    height: 72px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .logo {
    font-size: 19px;
    gap: 9px;
  }

  .logo img {
    height: 40px;
  }

  .mobile-menu {
    width: min(82vw, 300px);
    padding: 92px 24px 36px;
  }

  section {
    padding: 38px 5%;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-image {
    order: -1;
    min-height: 280px;
    background-size: 70%;
  }

  .hero-content {
    padding: 36px 6%;
  }

  .eyebrow {
    letter-spacing: 3px;
    font-size: 12px;
    margin-bottom: 22px;
  }

  .hero h1 {
    font-size: 34px;
  }

  .hero p,
  .section-title p,
  .mood p,
  .warning-box p {
    font-size: 16px;
  }

  .features,
  .book-grid,
  .pricing-grid,
  .testimonial-grid,
  .member-story-showcase,
  .stats-grid,
  .account-form-grid {
    grid-template-columns: 1fr;
  }

  .story-side-grid,
  .member-book-grid,
  .next-slider,
  .listening-slide.active {
    grid-template-columns: repeat(1, 1fr);
    gap: 14px;
  }

   .story-side-slide.active {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .gallery-carousel {
    --visible: 2;
    --gap: 12px;
    --img-width: 138px;
  }

  .gallery-track img {
    height: 215px;
  }

  .audio-row {
    grid-template-columns: 38px 1fr;
  }

  .audio-time-wrap {
    grid-column: 2;
    font-size: 11px;
  }

  .warning-box,
  .affiliate-inner,
  .legal-content,
  .contact-box {
    padding: 28px 20px;
  }

  .account-row {
    flex-direction: column;
    gap: 2px;
  }

  .current-plan-grid {
    grid-template-columns: 1fr;
  }

  .current-plan-box {
    padding: 22px;
  }    
}



/* ------------------------------
   Very small phones: up to 360px
   Common examples: 320x568, 360x640, 360x800
   ------------------------------ */
@media (max-width: 360px) {
  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .top-banner {
    padding: 10px 8px;
    font-size: 12px;
    letter-spacing: 0.4px;
  }

  header {
    height: 68px;
    padding-left: 14px;
    padding-right: 14px;
  }

  .logo {
    font-size: 17px;
    gap: 8px;
  }

  .logo img {
    height: 36px;
  }

  .mobile-menu {
    width: 86vw;
    padding: 86px 20px 32px;
  }

  section {
    padding: 34px 5%;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-image {
    order: -1;
    min-height: 240px;
    background-size: 76%;
  }

  .hero-content {
    padding: 32px 5%;
  }

  .hero h1 {
    font-size: 30px;
  }

  .hero p,
  .section-title p,
  .mood p,
  .warning-box p {
    font-size: 15px;
  }

  .features,
  .book-grid,
  .pricing-grid,
  .testimonial-grid,
  .member-story-showcase,
  .story-side-grid,
  .member-book-grid,
  .next-slider,
  .stats-grid,
  .account-form-grid {
    grid-template-columns: 1fr;
  }

  .gallery-carousel {
    --visible: 1;
    --gap: 10px;
    --img-width: 180px;
  }

  .gallery-track img {
    height: 270px;
  }

  .audio-wave-mini span:nth-child(n+8) {
    display: none;
  }

  .warning-box,
  .affiliate-inner,
  .legal-content,
  .contact-box,
  .empty-library {
    padding: 24px 18px;
  }

  .payment-buttons,
  .membership-actions,
  .wise-actions,
  .crypto-actions {
    flex-direction: column;
  }

  .payment-button,
  .checkout-button,
  .account-submit {
    width: 100%;
    max-width: 100%;
  }
  
  .current-plan-grid {
    grid-template-columns: 1fr;
  }

  .current-plan-box {
    padding: 22px;
  }
}

/* ------------------------------
   Phone landscape safety rules
   Used when height is limited, for example 667x375 or 896x414
   ------------------------------ */
@media (orientation: landscape) and (max-height: 500px) {
  header {
    position: relative;
    height: 64px;
  }

  .top-banner {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .hero {
    min-height: auto;
  }

  .hero-image {
    min-height: 220px;
    background-size: contain;
  }

  .hero-content {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .mobile-menu {
    padding-top: 76px;
  }

  section {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

/* ------------------------------
   Touch device improvements
   Larger tap targets for phones and tablets
   ------------------------------ */
@media (hover: none) and (pointer: coarse) {
  a,
  button,
  .story-button,
  .checkout-button,
  .next-slider-button,
  .story-side-slider-button,
  .listening-slider-button,
  .audio-play,
  .member-play,
  .password-toggle {
    min-height: 44px;
  }

  .book-card:hover,
  .mini-story-card:hover,
  .pricing-card:hover,
  .testimonial-card:hover {
    transform: none;
  }
}

.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  z-index: 9999;
  display: none;
  animation: cookieFade 0.4s ease;
}

.cookie-banner.show {
  display: block;
}

.cookie-banner-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 22px;
  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(28, 29, 36, 0.96),
      rgba(12, 13, 18, 0.98)
    );

  border: 1px solid rgba(255,255,255,0.08);

  box-shadow:
    0 18px 45px rgba(0,0,0,0.45);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  backdrop-filter: blur(14px);
}

.cookie-banner-text strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  color: #fff;
}

.cookie-banner-text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
}

.cookie-banner-text a {
  color: var(--accent);
  text-decoration: none;
}

.cookie-banner-text a:hover {
  text-decoration: underline;
}

.cookie-accept {
  border: none;
  cursor: pointer;

  padding: 12px 20px;
  border-radius: 12px;

  background: var(--accent);
  color: #fff;

  font-size: 14px;
  font-weight: 600;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.cookie-accept:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}

@keyframes cookieFade {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {

  .cookie-banner {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }

  .cookie-banner-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .cookie-accept {
    width: 100%;
  }

}