/* K4K top-page visual refresh, June 2026.
   Keeps existing page structure and SEO intact while aligning the high-traffic pages
   with the approved doha-meaning treatment. */

:root {
  --tpr-paper: #FCF7EE;
  --tpr-warm: #F9E9C4;
  --tpr-root: #503016;
  --tpr-earth: #5E3A1E;
  --tpr-soft: #7C644E;
  --tpr-aqua: #9AD0D6;
  --tpr-aqua-deep: #4FA8B0;
  --tpr-bronze: #D47D36;
  --tpr-yellow: #F6C854;
  --tpr-sage: #8DB580;
  --tpr-coral: #DA8571;
  --tpr-peach: #EDB17C;
  --tpr-bluegrey: #D8E4E8;
  --tpr-border: rgba(80,48,22,0.16);
  --tpr-shadow: 0 24px 60px -34px rgba(80,48,22,0.42);
  --tpr-ease: cubic-bezier(.16,1,.3,1);
}

.top-page-refresh {
  color: var(--tpr-root);
}

.top-page-refresh .btn,
.top-page-refresh .d2-btn-pri,
.top-page-refresh .d2-btn-sec,
.top-page-refresh .jump-link,
.top-page-refresh .seo-guide-link,
.top-page-refresh .seo-mobile-toc a,
.top-page-refresh .story-card-link,
.top-page-refresh .starter-card,
.top-page-refresh .video-card,
.top-page-refresh .related-card,
.top-page-refresh .ak-chip {
  transition: background-color .18s var(--tpr-ease), border-color .18s var(--tpr-ease), box-shadow .18s var(--tpr-ease), color .18s var(--tpr-ease), transform .18s var(--tpr-ease);
}

.top-page-refresh .btn,
.top-page-refresh .d2-btn-pri,
.top-page-refresh .d2-btn-sec,
.top-page-refresh .jump-link,
.top-page-refresh .seo-guide-link,
.top-page-refresh .seo-mobile-toc a,
.top-page-refresh .story-card-link,
.top-page-refresh .ak-chip,
.top-page-refresh .ak-submit-btn,
.top-page-refresh .ak-btn {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
}

.top-page-refresh .menu-toggle,
.top-page-refresh .nav-toggle {
  min-height: 44px;
  min-width: 44px;
}

.top-page-refresh .logo-link {
  min-height: 44px;
}

.top-page-refresh .btn:active,
.top-page-refresh .d2-btn-pri:active,
.top-page-refresh .d2-btn-sec:active,
.top-page-refresh .jump-link:active,
.top-page-refresh .seo-guide-link:active,
.top-page-refresh .seo-mobile-toc a:active,
.top-page-refresh .story-card-link:active,
.top-page-refresh .starter-card:active,
.top-page-refresh .video-card:active,
.top-page-refresh .related-card:active,
.top-page-refresh .ak-chip:active {
  transform: scale(.98);
}

@media (hover: hover) {
  .top-page-refresh .story-card:hover,
  .top-page-refresh .why-card:hover,
  .top-page-refresh .teacher-tip:hover,
  .top-page-refresh .top10-item:hover,
  .top-page-refresh .related-card:hover,
  .top-page-refresh .starter-card:hover,
  .top-page-refresh .video-card:hover,
  .top-page-refresh .featured-item:hover,
  .top-page-refresh .faq-item:hover {
    box-shadow: var(--tpr-shadow);
    transform: translateY(-3px);
  }
}

/* Shared readable card system */
.doha-guide-refresh .why-card,
.doha-guide-refresh .teacher-tip,
.doha-guide-refresh .top10-item,
.doha-guide-refresh .related-card,
.story-refresh .story-card,
.watch-refresh .starter-card,
.watch-refresh .featured-item,
.dohas-refresh .ak-chip,
.life-refresh .faq-item {
  background: rgba(252,247,238,0.94) !important;
  border: 1px solid var(--tpr-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 44px -34px rgba(80,48,22,0.42);
  color: var(--tpr-root) !important;
  position: relative;
}

.doha-guide-refresh .why-card::before,
.doha-guide-refresh .teacher-tip::before,
.doha-guide-refresh .top10-item::before,
.doha-guide-refresh .related-card::before,
.story-refresh .story-card::before,
.watch-refresh .starter-card::before,
.watch-refresh .featured-item::before {
  background: var(--card-accent, var(--tpr-aqua-deep));
  border-radius: 20px 20px 0 0;
  content: "";
  height: 7px;
  left: -1px;
  position: absolute;
  right: -1px;
  top: -1px;
}

.top-page-refresh .section-head h2,
.top-page-refresh .starter-head h2,
.top-page-refresh .featured-head h2,
.top-page-refresh .d2-ask-head h2,
.top-page-refresh .cat-hero-title {
  color: var(--tpr-root) !important;
  text-wrap: balance;
}

.top-page-refresh .section-head p,
.top-page-refresh .starter-head .lead,
.top-page-refresh .featured-head .lead,
.top-page-refresh .d2-ask-lede,
.top-page-refresh .cat-hero-copy > p {
  color: rgba(80,48,22,0.78) !important;
}

/* Top 10 dohas page */
.doha-guide-refresh .flagship-hero {
  background:
    linear-gradient(112deg, rgba(154,208,214,0.92) 0%, rgba(154,208,214,0.78) 34%, rgba(249,233,196,0.88) 70%, rgba(252,247,238,0.96) 100%) !important;
  border-bottom: 1px solid var(--tpr-border);
}

.doha-guide-refresh .music-card {
  background: rgba(252,247,238,0.96) !important;
  border: 1px solid rgba(80,48,22,0.18) !important;
  border-radius: 24px !important;
  box-shadow: 0 30px 70px -36px rgba(80,48,22,0.5), 0 0 0 8px rgba(246,200,84,0.12) !important;
  overflow: hidden;
}

.doha-guide-refresh .doha-entry {
  background: rgba(252,247,238,0.94) !important;
  border: 1px solid rgba(80,48,22,0.16) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 50px -38px rgba(80,48,22,0.44);
}

.doha-guide-refresh .doha-entry-header {
  background: linear-gradient(135deg, var(--tpr-warm) 0%, rgba(246,200,84,0.32) 100%) !important;
  border-bottom: 1px solid rgba(80,48,22,0.12);
}

.doha-guide-refresh .doha-entry:nth-of-type(2n) .doha-entry-header {
  background: linear-gradient(135deg, rgba(154,208,214,0.42) 0%, rgba(252,247,238,0.88) 100%) !important;
}

.doha-guide-refresh .doha-entry:nth-of-type(3n) .doha-entry-header {
  background: linear-gradient(135deg, rgba(237,177,124,0.42) 0%, rgba(252,247,238,0.88) 100%) !important;
}

.doha-guide-refresh .doha-hindi {
  color: var(--tpr-root) !important;
}

.doha-guide-refresh .doha-col-text,
.doha-guide-refresh .why-card p,
.doha-guide-refresh .teacher-tip p,
.doha-guide-refresh .related-card p {
  color: rgba(80,48,22,0.82) !important;
}

.doha-guide-refresh .why-card:nth-child(1),
.doha-guide-refresh .top10-item:nth-child(3n + 1),
.doha-guide-refresh .related-card:nth-child(1) { --card-accent: var(--tpr-aqua-deep); }
.doha-guide-refresh .why-card:nth-child(2),
.doha-guide-refresh .top10-item:nth-child(3n + 2),
.doha-guide-refresh .related-card:nth-child(2) { --card-accent: var(--tpr-yellow); }
.doha-guide-refresh .why-card:nth-child(3),
.doha-guide-refresh .top10-item:nth-child(3n),
.doha-guide-refresh .related-card:nth-child(3) { --card-accent: var(--tpr-peach); }
.doha-guide-refresh .why-card:nth-child(4),
.doha-guide-refresh .related-card:nth-child(4) { --card-accent: var(--tpr-sage); }

.doha-guide-refresh .hero-actions .btn {
  min-height: 48px;
  padding-inline: 24px !important;
}

.doha-guide-refresh .jump-links {
  gap: 12px !important;
}

/* Story page */
.story-refresh .lp-hero {
  background:
    linear-gradient(112deg, rgba(154,208,214,0.92) 0%, rgba(154,208,214,0.76) 34%, rgba(249,233,196,0.82) 70%, rgba(252,247,238,0.96) 100%) !important;
  border-bottom: 1px solid var(--tpr-border);
}

.story-refresh .lp-hero-art {
  border-radius: 24px !important;
  box-shadow: 0 30px 70px -36px rgba(80,48,22,0.5), 0 0 0 8px rgba(154,208,214,0.18) !important;
}

.story-refresh .stories-section {
  background: linear-gradient(180deg, var(--tpr-aqua) 0%, var(--tpr-bluegrey) 100%) !important;
}

.story-refresh .story-card {
  padding: 28px 30px !important;
}

.story-refresh .story-card:nth-child(1),
.story-refresh .story-card:nth-child(4) { --card-accent: var(--tpr-aqua-deep); }
.story-refresh .story-card:nth-child(2),
.story-refresh .story-card:nth-child(5) { --card-accent: var(--tpr-yellow); }
.story-refresh .story-card:nth-child(3),
.story-refresh .story-card:nth-child(6) { --card-accent: var(--tpr-coral); }

.story-refresh .story-num {
  background: color-mix(in srgb, var(--card-accent, var(--tpr-aqua-deep)) 22%, var(--tpr-paper));
  border: 1px solid color-mix(in srgb, var(--card-accent, var(--tpr-aqua-deep)) 52%, transparent);
  border-radius: 999px;
  color: var(--tpr-earth) !important;
  display: inline-flex;
  font-size: 13px !important;
  font-weight: 800;
  letter-spacing: 0 !important;
  margin-bottom: 18px !important;
  padding: 8px 12px;
  text-transform: none !important;
}

.story-refresh .story-card h3 {
  font-size: clamp(26px, 2.5vw, 34px) !important;
  line-height: 1.08 !important;
}

.story-refresh .story-card p {
  color: rgba(80,48,22,0.84) !important;
  font-size: 16px !important;
}

.story-refresh .story-doha {
  background: rgba(154,208,214,0.22) !important;
  color: var(--tpr-root) !important;
  font-size: 16px !important;
}

.story-refresh .story-links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.story-refresh .story-links-row a {
  background: rgba(252,247,238,0.94);
  border: 1px solid rgba(80,48,22,0.16);
  border-radius: 999px;
  color: var(--tpr-earth);
  font-size: 13px;
  font-weight: 800;
  min-height: 42px;
  padding: 10px 14px;
  text-decoration: none;
}

.story-refresh .why-point {
  gap: 14px !important;
}

.story-refresh .why-point-icon,
.hindi-refresh .cultural-item-icon {
  align-items: center;
  background: rgba(154,208,214,0.28);
  border: 1px solid rgba(80,48,22,0.14);
  border-radius: 999px;
  color: var(--tpr-earth);
  display: inline-flex;
  flex: 0 0 auto;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px !important;
  font-weight: 900;
  justify-content: center;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  margin-top: 0 !important;
  min-height: 34px;
  padding: 8px 11px;
  white-space: nowrap;
}

.story-refresh .why-point:nth-child(2) .why-point-icon,
.hindi-refresh .cultural-item:nth-child(2) .cultural-item-icon {
  background: rgba(246,200,84,0.28);
}

.story-refresh .why-point:nth-child(3) .why-point-icon,
.hindi-refresh .cultural-item:nth-child(3) .cultural-item-icon {
  background: rgba(237,177,124,0.30);
}

.story-refresh .why-point:nth-child(4) .why-point-icon {
  background: rgba(141,181,128,0.28);
}

/* Hindi stories page */
.hindi-refresh .story-start-card,
.hindi-refresh .use-path-box {
  background: rgba(252,247,238,0.94) !important;
  border: 1px solid var(--tpr-border) !important;
  box-shadow: 0 14px 38px -32px rgba(80,48,22,0.34);
}

.hindi-refresh .story-start-card h3,
.hindi-refresh .cultural-item-text strong {
  color: var(--tpr-root) !important;
}

.hindi-refresh .story-start-card a,
.hindi-refresh .use-path-kicker {
  color: var(--tpr-bronze) !important;
}

/* Watch page */
.watch-refresh .hero-spread {
  background:
    linear-gradient(112deg, rgba(154,208,214,0.90) 0%, rgba(249,233,196,0.78) 58%, rgba(252,247,238,0.96) 100%) !important;
}

.watch-refresh .starter-spread,
.watch-refresh .featured-spread {
  background: var(--tpr-paper) !important;
}

.watch-refresh .starter-card {
  min-height: 174px;
  padding: 28px 30px !important;
}

.watch-refresh .starter-card:nth-child(1),
.watch-refresh .featured-item:nth-child(1) { --card-accent: var(--tpr-aqua-deep); }
.watch-refresh .starter-card:nth-child(2),
.watch-refresh .featured-item:nth-child(2) { --card-accent: var(--tpr-yellow); }
.watch-refresh .starter-card:nth-child(3),
.watch-refresh .featured-item:nth-child(3) { --card-accent: var(--tpr-coral); }

.watch-refresh .starter-card h3,
.watch-refresh .featured-item h3 {
  color: var(--tpr-root) !important;
  font-size: clamp(25px, 2.2vw, 34px) !important;
  line-height: 1.1 !important;
}

.watch-refresh .starter-card p,
.watch-refresh .featured-item p {
  color: rgba(80,48,22,0.82) !important;
}

.watch-refresh .video-card {
  background: rgba(252,247,238,0.94) !important;
  border: 1px solid var(--tpr-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 42px -34px rgba(80,48,22,0.38);
  overflow: hidden;
}

.watch-refresh .video-card .video-title {
  color: var(--tpr-root) !important;
}

.watch-refresh .format-row span {
  min-height: 42px;
}

/* Doha library */
.dohas-refresh .d2-hero {
  background:
    linear-gradient(112deg, rgba(154,208,214,0.92) 0%, rgba(249,233,196,0.76) 64%, rgba(252,247,238,0.96) 100%) !important;
}

.dohas-refresh .watch-path-section {
  background: var(--tpr-paper);
  border-bottom: 1px solid var(--tpr-border);
  padding: 58px 0 64px;
}

.dohas-refresh .watch-path-shell {
  align-items: start;
  display: grid;
  gap: 26px;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
}

.dohas-refresh .watch-path-copy h2 {
  color: var(--tpr-root);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.12;
  margin: 0 0 14px;
  text-wrap: balance;
}

.dohas-refresh .watch-path-copy p {
  color: rgba(80,48,22,0.76);
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  max-width: 54ch;
}

.dohas-refresh .watch-path-links {
  display: grid;
  gap: 12px;
}

.dohas-refresh .watch-path-links a {
  background: rgba(249,233,196,0.56);
  border: 1px solid rgba(80,48,22,0.14);
  border-radius: 18px;
  color: inherit;
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  text-decoration: none;
}

.dohas-refresh .watch-path-links a:nth-child(2) {
  background: rgba(154,208,214,0.24);
}

.dohas-refresh .watch-path-links a:nth-child(3) {
  background: rgba(237,177,124,0.26);
}

.dohas-refresh .watch-path-links span {
  color: var(--tpr-bronze);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dohas-refresh .watch-path-links strong {
  color: var(--tpr-root);
  font-family: 'Lora', Georgia, serif;
  font-size: 22px;
  line-height: 1.15;
}

.dohas-refresh .watch-path-links em {
  color: rgba(80,48,22,0.72);
  font-size: 14px;
  font-style: normal;
  line-height: 1.55;
}

.dohas-refresh .d2-ask {
  background: linear-gradient(180deg, var(--tpr-paper) 0%, rgba(154,208,214,0.22) 100%) !important;
}

.dohas-refresh .d2-ask-shell,
.dohas-refresh .cat-hero {
  background: rgba(252,247,238,0.94) !important;
  border: 1px solid var(--tpr-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--tpr-shadow);
}

.dohas-refresh .ak-chip {
  background: rgba(252,247,238,0.92) !important;
  color: var(--tpr-root) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  padding: 10px 14px !important;
}

.dohas-refresh .ak-chip:nth-child(3n + 1) { border-color: var(--tpr-aqua-deep) !important; }
.dohas-refresh .ak-chip:nth-child(3n + 2) { border-color: var(--tpr-yellow) !important; }
.dohas-refresh .ak-chip:nth-child(3n) { border-color: var(--tpr-coral) !important; }

.dohas-refresh .ak-submit-btn,
.dohas-refresh .ak-btn,
.dohas-refresh .back-btn {
  min-height: 52px !important;
}

.dohas-refresh .ak-input-card {
  box-shadow: 0 22px 60px -42px rgba(80,48,22,0.5) !important;
}

/* Life of Kabir */
.life-refresh .hero {
  background:
    radial-gradient(ellipse at center, rgba(80,48,22,0.38) 0%, rgba(80,48,22,0.22) 36%, rgba(80,48,22,0.06) 66%, transparent 84%),
    linear-gradient(112deg, rgba(80,48,22,0.48) 0%, rgba(80,48,22,0.14) 50%, rgba(154,208,214,0.46) 100%),
    url("../../images/life-of-kabir/hero-varanasi-dawn.webp") center/cover !important;
}

.life-refresh .hero::before {
  background:
    radial-gradient(ellipse at center, rgba(246,200,84,0.22), transparent 58%),
    linear-gradient(180deg, rgba(80,48,22,0.12) 0%, rgba(80,48,22,0.48) 100%) !important;
}

.life-refresh .hero-pre,
.life-refresh .hero-scroll-hint {
  color: var(--tpr-yellow) !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  text-shadow: 0 2px 12px rgba(80,48,22,0.72);
}

.life-refresh .hero-title {
  color: var(--tpr-paper) !important;
  text-shadow: 0 5px 18px rgba(80,48,22,0.70), 0 22px 60px rgba(80,48,22,0.34) !important;
}

.life-refresh .hero-subtitle {
  color: rgba(252,247,238,0.96) !important;
  text-shadow: 0 3px 16px rgba(80,48,22,0.76);
}

.life-refresh .faq-section {
  background: linear-gradient(180deg, var(--tpr-paper) 0%, rgba(154,208,214,0.22) 100%) !important;
}

.life-refresh .faq-item p {
  color: rgba(80,48,22,0.82) !important;
}

.life-refresh .scroll-card {
  background: rgba(252,247,238,0.96) !important;
  border: 1px solid rgba(80,48,22,0.16) !important;
  box-shadow: 0 20px 56px -40px rgba(80,48,22,0.42) !important;
}

.life-refresh .flip-card-icon,
.life-refresh .flower-shower,
.life-refresh .flower-particle {
  display: none !important;
}

.life-refresh .flip-card-front {
  background:
    linear-gradient(135deg, rgba(154,208,214,0.28) 0%, rgba(237,177,124,0.36) 100%),
    var(--tpr-paper) !important;
  color: var(--tpr-root) !important;
  font-family: Lora, Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}

@media (max-width: 980px) {
  .story-refresh .stories-grid,
  .doha-guide-refresh .why-grid,
  .doha-guide-refresh .top10-grid,
  .dohas-refresh .watch-path-shell {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .top-page-refresh .seo-guide-nav-inner,
  .top-page-refresh .seo-guide-links,
  .top-page-refresh .jump-nav,
  .top-page-refresh .jump-links {
    gap: 10px !important;
  }

  .top-page-refresh .seo-guide-link,
  .top-page-refresh .jump-link {
    min-height: 44px;
    padding: 10px 16px !important;
  }

  .doha-guide-refresh .flagship-hero {
    padding-bottom: 56px !important;
  }

  .doha-guide-refresh .hero-actions {
    align-items: stretch !important;
  }

  .doha-guide-refresh .hero-actions .btn {
    width: 100%;
  }

  .story-refresh .story-card,
  .watch-refresh .starter-card,
  .doha-guide-refresh .why-card,
  .doha-guide-refresh .teacher-tip {
    padding: 24px 26px !important;
  }

  .story-refresh .story-card h3,
  .watch-refresh .starter-card h3,
  .watch-refresh .featured-item h3 {
    font-size: 27px !important;
  }

  .watch-refresh .hero-spread .hero-text {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .watch-refresh .hero-spread .hero-text .lead {
    text-align: left !important;
  }

  .watch-refresh .hero-spread .format-row {
    justify-content: flex-start !important;
  }

  .dohas-refresh .d2-hero-copy,
  .dohas-refresh .d2-ask-head {
    text-align: left !important;
  }

  .dohas-refresh .d2-hero-actions {
    align-items: stretch !important;
  }

  .dohas-refresh .d2-hero-actions .d2-btn-pri,
  .dohas-refresh .d2-hero-actions .d2-btn-sec {
    width: 100%;
  }

  .dohas-refresh .ak-action-row {
    align-items: stretch !important;
  }

  .dohas-refresh .ak-btn {
    width: 100%;
  }

  .life-refresh .hero {
    background:
      linear-gradient(180deg, rgba(252,247,238,0.86) 0%, rgba(249,233,196,0.9) 54%, rgba(252,247,238,1) 100%),
      url("../../images/life-of-kabir/hero-varanasi-dawn.webp") center bottom / cover no-repeat !important;
    color: var(--tpr-root) !important;
    min-height: 74svh !important;
    padding-bottom: 52px !important;
  }

  .life-refresh .hero-content {
    text-align: left !important;
  }

  .life-refresh .hero-pre,
  .life-refresh .hero-scroll-hint {
    color: var(--tpr-coral) !important;
    text-shadow: none !important;
  }

  .life-refresh .hero-title {
    color: var(--tpr-root) !important;
    text-shadow: none !important;
  }

  .life-refresh .hero-subtitle {
    color: rgba(80,48,22,0.78) !important;
    text-shadow: none !important;
  }

  .life-refresh .horizontal-scroll {
    overflow: visible !important;
    padding: 24px 20px 8px !important;
  }

  .life-refresh .scroll-track {
    display: grid !important;
    gap: 20px !important;
    padding: 0 !important;
    transform: none !important;
    width: auto !important;
  }

  .life-refresh .scroll-card {
    flex: none !important;
    max-width: none !important;
    padding: 24px 20px !important;
    width: 100% !important;
  }

  .life-refresh .scroll-card-title {
    font-size: 28px !important;
    line-height: 1.12 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top-page-refresh * {
    transition: none !important;
  }
}