/* Webnovel Starter 0.3 - Wattpad-inspired motion + discovery UI */
:root, [data-theme="light"] {
  --wn-bg: #f6f3ee;
  --wn-surface: #ffffff;
  --wn-text: #1c1917;
  --wn-muted: #78716c;
  --wn-accent: #e11d48;
  --wn-border: #e7e5e4;
  --wn-card-shadow: 0 10px 30px rgba(28,25,23,.08);
  --wn-reader-size: 1.125rem;
  --wn-reader-line: 1.75;
  --wn-radius: 16px;
  --wn-header-h: 68px;
  --wn-ease: cubic-bezier(.22,1,.36,1);
}
[data-theme="dark"] {
  --wn-bg: #0c0a09;
  --wn-surface: #1c1917;
  --wn-text: #fafaf9;
  --wn-muted: #a8a29e;
  --wn-accent: #fb7185;
  --wn-border: #292524;
  --wn-card-shadow: 0 14px 40px rgba(0,0,0,.5);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.wns-body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  background: var(--wn-bg);
  color: var(--wn-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: var(--wn-accent); }
.wns-container { width: min(1200px, 92vw); margin: 0 auto; }

/* Scroll reveal */
.wns-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--wn-ease), transform .7s var(--wn-ease);
}
.wns-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .wns-reveal { opacity: 1; transform: none; transition: none; }
  .wns-float-cover, .wns-hero-glow, .wns-pulse-dot, .wns-card-shine, .wns-btn-glow::after { animation: none !important; }
}

/* -- Header -- */
.wns-header {
  background: color-mix(in srgb, var(--wn-surface) 88%, transparent);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid transparent;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow .25s, border-color .25s, background .25s;
}
.wns-header.is-scrolled {
  border-bottom-color: var(--wn-border);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--wn-text) 8%, transparent);
}
.wns-header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--wn-header-h);
  padding: .5rem 0;
}
.wns-brand { flex: 0 0 auto; }
.wns-logo {
  font-weight: 800;
  text-decoration: none;
  color: var(--wn-text);
  font-size: 1.25rem;
  letter-spacing: -.03em;
  background: linear-gradient(120deg, var(--wn-text), var(--wn-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wns-logo-img img { max-height: 42px; width: auto; }
.wns-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.wns-menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: .2rem; flex-wrap: wrap; align-items: center; justify-content: center;
}
.wns-menu a {
  text-decoration: none; color: var(--wn-muted); font-weight: 650; font-size: .92rem;
  padding: .5rem .95rem; border-radius: 999px; display: block;
  transition: background .2s, color .2s, transform .2s;
}
.wns-menu a:hover,
.wns-menu .current-menu-item > a,
.wns-menu .current_page_item > a {
  color: var(--wn-text);
  background: color-mix(in srgb, var(--wn-accent) 14%, transparent);
  transform: translateY(-1px);
}
.wns-header-actions { display: flex; align-items: center; gap: .5rem; }
.wns-theme-toggle {
  border: 1px solid var(--wn-border); background: var(--wn-surface); color: var(--wn-text);
  border-radius: 999px; width: 2.35rem; height: 2.35rem; cursor: pointer; font-size: 1rem;
  transition: transform .2s, border-color .2s;
}
.wns-theme-toggle:hover { transform: rotate(20deg) scale(1.05); border-color: var(--wn-accent); }
.wns-nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.5rem; height: 2.5rem; border: 1px solid var(--wn-border); border-radius: 12px;
  background: var(--wn-surface); cursor: pointer; padding: 0; margin-left: auto;
}
.wns-nav-toggle-bar { display: block; width: 1.1rem; height: 2px; background: var(--wn-text); margin: 0 auto; border-radius: 2px; }

/* Buttons */
.wns-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .72rem 1.25rem; border-radius: 999px; font-weight: 750; font-size: .93rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; line-height: 1.2;
  transition: transform .2s var(--wn-ease), box-shadow .2s, filter .2s, background .2s;
}
.wns-btn:hover { transform: translateY(-2px); }
.wns-btn:active { transform: translateY(0); }
.wns-btn-primary {
  background: linear-gradient(135deg, var(--wn-accent), color-mix(in srgb, var(--wn-accent) 70%, #7c3aed));
  color: #fff;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--wn-accent) 40%, transparent);
}
.wns-btn-primary:hover { color: #fff; filter: brightness(1.06); }
.wns-btn-secondary {
  background: var(--wn-surface); color: var(--wn-text); border-color: var(--wn-border);
}
.wns-btn-secondary:hover { border-color: var(--wn-accent); color: var(--wn-text); }
.wns-btn-ghost {
  background: transparent; color: var(--wn-muted); border-color: var(--wn-border);
  padding: .42rem .9rem; font-size: .85rem;
}
.wns-btn-glow { position: relative; overflow: hidden; }
.wns-btn-glow::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform: translateX(-120%);
  animation: wns-shimmer 3.2s ease-in-out infinite;
}
@keyframes wns-shimmer {
  0%, 55% { transform: translateX(-120%); }
  75%, 100% { transform: translateX(120%); }
}

.wns-main { padding: 0 0 3.5rem; min-height: 62vh; }

/* -- Hero (Wattpad energy) -- */
.wns-hero-wattpad {
  position: relative;
  padding: 3rem 0 2.5rem;
  overflow: hidden;
  border-bottom: 1px solid var(--wn-border);
}
.wns-hero-glow {
  position: absolute; inset: -20% -10% auto -10%; height: 120%;
  background:
    radial-gradient(ellipse 50% 60% at 15% 30%, color-mix(in srgb, var(--wn-accent) 28%, transparent), transparent 70%),
    radial-gradient(ellipse 45% 50% at 85% 20%, color-mix(in srgb, #7c3aed 22%, transparent), transparent 65%),
    radial-gradient(ellipse 40% 40% at 50% 100%, color-mix(in srgb, var(--wn-accent) 10%, transparent), transparent 60%);
  animation: wns-glow-drift 12s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes wns-glow-drift {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to { transform: translate3d(3%, 2%, 0) scale(1.05); }
}
.wns-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 2rem;
  align-items: center;
  z-index: 1;
}
.wns-hero-kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 800;
  color: var(--wn-accent); margin: 0 0 .65rem;
}
.wns-pulse-dot {
  width: .55rem; height: .55rem; border-radius: 50%; background: var(--wn-accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--wn-accent) 55%, transparent);
  animation: wns-pulse 1.8s ease-out infinite;
}
@keyframes wns-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wn-accent) 50%, transparent); }
  70% { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.wns-hero-title {
  font-size: clamp(2rem, 5vw, 3.15rem);
  line-height: 1.08; margin: 0 0 .85rem; letter-spacing: -.04em; font-weight: 850;
}
.wns-hero-title-line {
  background: linear-gradient(120deg, var(--wn-text) 0%, var(--wn-text) 40%, var(--wn-accent) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wns-hero-tagline {
  color: var(--wn-muted); font-size: 1.08rem; margin: 0 0 1.2rem; max-width: 34rem; line-height: 1.55;
}
.wns-hero-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.2rem; }
.wns-chip {
  display: inline-flex; align-items: center; padding: .4rem .9rem; border-radius: 999px;
  font-size: .82rem; font-weight: 700; text-decoration: none; color: var(--wn-text);
  background: var(--wn-surface); border: 1px solid var(--wn-border);
  transition: transform .2s, border-color .2s, background .2s, box-shadow .2s;
}
.wns-chip:hover { transform: translateY(-2px); border-color: var(--wn-accent); box-shadow: 0 6px 16px color-mix(in srgb, var(--wn-accent) 15%, transparent); color: var(--wn-text); }
.wns-chip.is-active, .wns-chip-accent {
  background: color-mix(in srgb, var(--wn-accent) 14%, var(--wn-surface));
  border-color: color-mix(in srgb, var(--wn-accent) 45%, var(--wn-border));
  color: var(--wn-accent);
}
.wns-hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.wns-hero-actions-justify {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  gap: .75rem;
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.wns-showcase-hero .wns-hero-actions-justify {
  max-width: 440px;
}
.wns-hero-actions-justify .wns-btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  text-align: center;
}

/* Floating cover stack */
.wns-hero-stage { min-height: 320px; position: relative; }
.wns-float-covers {
  position: relative; height: 360px; max-width: 420px; margin: 0 auto;
  perspective: 900px;
}
.wns-float-cover {
  position: absolute; width: 42%; aspect-ratio: 2/3; border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.28); border: 2px solid color-mix(in srgb, #fff 40%, transparent);
  animation: wns-float 5.5s ease-in-out infinite;
  background: #1a1a1a;
}
.wns-float-cover .stn-thumb-badge-wrap {
  position: absolute !important; inset: 0 !important; display: block !important;
  width: 100% !important; height: 100% !important; max-width: none !important;
}
.wns-float-cover img,
.wns-float-cover .wns-float-img,
.wns-float-cover .wns-card-thumb-placeholder {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: cover !important; object-position: center top !important;
  display: block !important;
}
.wns-float-cover .stn-premium-badge { display: none !important; }
.wns-float-cover-1 { left: 8%; top: 8%; z-index: 3; animation-delay: 0s; transform: rotate(-8deg); }
.wns-float-cover-2 { right: 6%; top: 0; z-index: 4; animation-delay: .4s; transform: rotate(6deg); }
.wns-float-cover-3 { left: 22%; bottom: 4%; z-index: 2; animation-delay: .8s; transform: rotate(3deg); width: 38%; }
.wns-float-cover-4 { right: 18%; bottom: 10%; z-index: 5; animation-delay: 1.1s; transform: rotate(-4deg); width: 36%; }
.wns-float-cover-5 { left: 0; top: 36%; z-index: 1; animation-delay: 1.4s; transform: rotate(10deg); width: 32%; opacity: .9; }
.wns-float-cover-6 { right: 0; top: 40%; z-index: 1; animation-delay: 1.7s; transform: rotate(-11deg); width: 30%; opacity: .88; }
@keyframes wns-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

/* Featured banner */
.wns-featured { padding: 1.75rem 0 .5rem; }
.wns-featured-banner {
  position: relative; border-radius: 22px; overflow: hidden; min-height: 280px;
  display: grid; align-items: end;
  box-shadow: var(--wn-card-shadow);
  border: 1px solid var(--wn-border);
}
.wns-featured-bg {
  position: absolute; inset: 0;
}
.wns-featured-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.04); transition: transform 8s var(--wn-ease);
}
.wns-featured-banner:hover .wns-featured-bg img { transform: scale(1.1); }
.wns-featured-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,8,8,.88) 0%, rgba(10,8,8,.55) 48%, rgba(10,8,8,.15) 100%);
}
.wns-featured-content {
  position: relative; z-index: 1; padding: 1.75rem 1.75rem 1.85rem; max-width: 36rem; color: #fff;
}
.wns-featured-label {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #fda4af; margin-bottom: .5rem;
}
.wns-featured-title { margin: 0 0 .5rem; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.02em; color: #fff; }
.wns-featured-excerpt { margin: 0 0 .85rem; color: rgba(255,255,255,.82); line-height: 1.5; }
.wns-featured-meta {
  display: flex; flex-wrap: wrap; gap: .5rem .85rem; margin-bottom: 1rem;
  font-size: .85rem; font-weight: 650; color: rgba(255,255,255,.75);
}
.wns-featured-meta span::before {
  content: "★ "; color: #fbbf24;
}

/* Shelves + rails */
.wns-shelf-animated { padding: 1.6rem 0 1.1rem; }
.wns-shelf-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem;
}
.wns-shelf-title {
  margin: 0; font-size: 1.4rem; letter-spacing: -.02em; display: flex; align-items: center; gap: .45rem;
}
.wns-shelf-icon { font-size: 1.15rem; }
.wns-shelf-sub { margin: .25rem 0 0; color: var(--wn-muted); font-size: .92rem; }
.wns-shelf-more {
  font-weight: 750; font-size: .9rem; text-decoration: none; color: var(--wn-accent); white-space: nowrap;
  transition: transform .2s, gap .2s;
}
.wns-shelf-more:hover { transform: translateX(3px); }

.wns-rail-wrap { position: relative; margin: 0 -.25rem; }
.wns-rail {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .35rem .25rem 1rem; scrollbar-width: none; -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.wns-rail::-webkit-scrollbar { display: none; }
.wns-rail .wns-card {
  flex: 0 0 158px; scroll-snap-align: start;
  opacity: 0; transform: translateY(16px);
  animation: wns-card-in .55s var(--wn-ease) forwards;
  animation-delay: var(--wns-stagger, 0ms);
}
@keyframes wns-card-in {
  to { opacity: 1; transform: none; }
}
.wns-rail-btn {
  position: absolute; top: 38%; transform: translateY(-50%);
  width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid var(--wn-border);
  background: color-mix(in srgb, var(--wn-surface) 92%, transparent); color: var(--wn-text);
  font-size: 1.45rem; line-height: 1; cursor: pointer; z-index: 5;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  transition: transform .2s, background .2s, opacity .2s;
  display: none;
}
.wns-rail-wrap:hover .wns-rail-btn { display: grid; place-items: center; }
.wns-rail-btn:hover { transform: translateY(-50%) scale(1.06); background: var(--wn-surface); }
.wns-rail-prev { left: -4px; }
.wns-rail-next { right: -4px; }

/* Cards */
.wns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1.15rem;
}
.wns-card {
  background: var(--wn-surface);
  border: 1px solid var(--wn-border);
  border-radius: var(--wn-radius);
  overflow: hidden;
  box-shadow: var(--wn-card-shadow);
  transition: transform .28s var(--wn-ease), box-shadow .28s var(--wn-ease);
  height: 100%;
}
.wns-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 22px 48px color-mix(in srgb, var(--wn-text) 16%, transparent);
  z-index: 2;
}
.wns-card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.wns-card-thumb {
  aspect-ratio: 2/3; width: 100%; background: color-mix(in srgb, var(--wn-accent) 12%, var(--wn-border));
  overflow: hidden; position: relative;
}
.wns-card-thumb img,
.wns-card-thumb .wns-card-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center top; display: block;
  transition: transform .45s var(--wn-ease);
}
.wns-card:hover .wns-card-thumb img,
.wns-card:hover .wns-card-thumb .wns-card-img { transform: scale(1.08); }
.wns-card-thumb-placeholder {
  display: block; width: 100%; height: 100%; min-height: 180px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--wn-accent) 40%, #c4b5fd), color-mix(in srgb, var(--wn-accent) 25%, #93c5fd));
}
.wns-card-shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(125deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform: translateX(-130%);
}
.wns-card:hover .wns-card-shine { animation: wns-shimmer .9s ease forwards; }
.wns-card-overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
  opacity: 0; transition: opacity .28s var(--wn-ease);
}
.wns-card:hover .wns-card-overlay { opacity: 1; }
.wns-card-cta {
  display: inline-flex; padding: .5rem 1.1rem; border-radius: 999px;
  background: #fff; color: #111; font-weight: 800; font-size: .82rem;
  transform: translateY(10px); transition: transform .28s var(--wn-ease);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.wns-card:hover .wns-card-cta { transform: translateY(0); }
.wns-card-badge {
  position: absolute; top: .5rem; left: .5rem; z-index: 2;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: .28rem .5rem; border-radius: 8px; color: #fff;
  background: color-mix(in srgb, var(--wn-accent) 88%, #000);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.wns-card-body { padding: .7rem .75rem .85rem; flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.wns-card-title {
  font-size: .88rem; margin: 0; line-height: 1.35; font-weight: 750;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wns-card-meta { margin: 0; color: var(--wn-muted); font-size: .74rem; font-weight: 650; }

.wns-archive-header { margin: 1.5rem 0 1.25rem; }
.wns-archive-header h1 { margin: 0 0 .35rem; font-size: 1.9rem; letter-spacing: -.02em; }
.wns-archive-sub { color: var(--wn-muted); margin: 0; }
.wns-empty { color: var(--wn-muted); padding: 1rem 0 2rem; }

/* CTA band */
.wns-cta-band {
  margin: 1.5rem 0 0; padding: 0;
}
.wns-cta-band-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.75rem 1.5rem; border-radius: 22px;
  background:
    radial-gradient(600px 200px at 10% 0%, color-mix(in srgb, var(--wn-accent) 30%, transparent), transparent 60%),
    linear-gradient(135deg, var(--wn-surface), color-mix(in srgb, var(--wn-accent) 8%, var(--wn-surface)));
  border: 1px solid var(--wn-border);
  box-shadow: var(--wn-card-shadow);
}
.wns-cta-band h2 { margin: 0 0 .35rem; font-size: 1.35rem; letter-spacing: -.02em; }
.wns-cta-band p { margin: 0; color: var(--wn-muted); max-width: 32rem; }
.wns-cta-band-actions { display: flex; flex-wrap: wrap; gap: .55rem; }

/* Pagination */
.navigation.pagination { margin-top: 2rem; }
.nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.nav-links a, .nav-links span {
  display: inline-flex; min-width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--wn-border); background: var(--wn-surface);
  color: var(--wn-text); text-decoration: none; font-weight: 650; font-size: .9rem; padding: 0 .55rem;
  transition: transform .15s, border-color .15s;
}
.nav-links a:hover { transform: translateY(-1px); border-color: var(--wn-accent); }
.nav-links .current { background: var(--wn-accent); border-color: var(--wn-accent); color: #fff; }

/* Story / series hub */
.wns-story-hub, .wns-video-hub, .wns-comic-hub { padding-top: 1.5rem; }
.wns-story-header, .wns-video-header, .wns-comic-header {
  display: grid; grid-template-columns: 220px 1fr; gap: 1.75rem; align-items: start;
  background: var(--wn-surface); border: 1px solid var(--wn-border);
  border-radius: calc(var(--wn-radius) + 4px); padding: 1.25rem; box-shadow: var(--wn-card-shadow);
  margin-bottom: 1.5rem;
}
.wns-story-cover img, .wns-video-cover img, .wns-comic-cover img {
  width: 100%; border-radius: 14px; display: block; box-shadow: 0 16px 36px rgba(0,0,0,.15);
  transition: transform .4s var(--wn-ease);
}
.wns-story-cover:hover img, .wns-video-cover:hover img, .wns-comic-cover:hover img { transform: scale(1.03); }
.wns-story-meta h1, .wns-video-meta h1, .wns-comic-meta h1 {
  margin: 0 0 .5rem; font-size: clamp(1.4rem, 3vw, 1.95rem); letter-spacing: -.02em;
}
.wns-story-excerpt, .wns-video-excerpt { color: var(--wn-muted); margin-bottom: .75rem; line-height: 1.55; }
.wns-story-tax { display: flex; flex-direction: column; gap: .55rem; margin: 0 0 1rem; }
.wns-story-cats, .wns-story-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.wns-tax-label {
  font-size: .75rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em;
  color: var(--wn-muted); margin-right: .15rem;
}
.wns-tax-pill {
  display: inline-flex; align-items: center;
  padding: .22rem .65rem; border-radius: 999px;
  background: color-mix(in srgb, var(--wn-accent) 12%, var(--wn-surface));
  border: 1px solid var(--wn-border);
  color: var(--wn-text); text-decoration: none; font-size: .82rem; font-weight: 650;
}
.wns-tax-pill:hover { border-color: var(--wn-accent); color: var(--wn-accent); }
.wns-tax-pill-tag {
  background: color-mix(in srgb, var(--wn-surface) 90%, var(--wn-bg));
}
.wns-children-heading { margin: 1.25rem 0 .5rem; font-weight: 750; font-size: 1.05rem; }
.wns-children-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.wns-children-list a {
  display: flex; justify-content: space-between; gap: 1rem; text-decoration: none; color: var(--wn-text);
  background: var(--wn-bg); border: 1px solid var(--wn-border); border-radius: 14px; padding: .8rem 1rem; font-weight: 650;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.wns-children-list a:hover {
  border-color: var(--wn-accent); color: var(--wn-accent); transform: translateX(4px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--wn-accent) 12%, transparent);
}

/* Reader */
.wns-reader-layout {
  display: grid; grid-template-columns: 210px 1fr; gap: 1.5rem; padding-top: 1.25rem;
}
.wns-reader-toc {
  position: sticky; top: calc(var(--wn-header-h) + .75rem); align-self: start;
  background: var(--wn-surface); border: 1px solid var(--wn-border); border-radius: var(--wn-radius);
  padding: 1rem; box-shadow: var(--wn-card-shadow);
}
.wns-toc-parent { margin: 0 0 .75rem; font-size: .9rem; }
.wns-toc-parent a { text-decoration: none; font-weight: 750; }
.wns-reader-controls { display: flex; gap: .4rem; }
.wns-font-btn {
  border: 1px solid var(--wn-border); background: var(--wn-bg); color: var(--wn-text);
  border-radius: 10px; padding: .35rem .55rem; cursor: pointer; font-weight: 750;
  transition: transform .15s;
}
.wns-font-btn:hover { transform: scale(1.05); }
.wns-reader-main {
  background: var(--wn-surface); border-radius: var(--wn-radius); padding: 1.5rem 1.75rem 2rem;
  border: 1px solid var(--wn-border); box-shadow: var(--wn-card-shadow);
}
.wns-reader-title { margin: 0 0 1rem; font-size: 1.45rem; }
.wns-reader-content {
  font-size: var(--wn-reader-size); line-height: var(--wn-reader-line); max-width: 42rem;
}
.wns-reader-content img { border-radius: 10px; }

/* Plugin blocks */
.stn-locked-block, .stn-video-block {
  border-radius: 18px !important; border: 1px solid var(--wn-border) !important;
  background: var(--wn-surface) !important; padding: 1.5rem !important;
}

/* Character rename box (plugin) - match theme tokens so it stays visible in dark mode */
.stn-char-name-box {
  border-color: var(--wn-border) !important;
  background: color-mix(in srgb, var(--wn-accent) 8%, var(--wn-surface)) !important;
  color: var(--wn-text);
  box-shadow: var(--wn-card-shadow) !important;
}
.stn-char-name-box-title { color: var(--wn-text) !important; }
.stn-char-name-box-hint,
.stn-char-variants-hint,
.stn-char-default-label { color: var(--wn-muted) !important; }
.stn-char-slot-label { color: var(--wn-accent) !important; }
.stn-char-name-input {
  border-color: var(--wn-border) !important;
  background: var(--wn-bg) !important;
  color: var(--wn-text) !important;
}
.stn-char {
  border-bottom-color: color-mix(in srgb, var(--wn-accent) 55%, transparent) !important;
}
.stn-pricing-wrap { text-align: center; }
.stn-pricing-heading { font-size: 1.45rem; }
.stn-thumb-badge-wrap { position: relative; display: block; }
.wns-theater { background: #000; color: #fff; padding: 1.5rem 0 3rem; }
.wns-theater a { color: #fda4af; }

/* Immersive mini-drama player page (sample 03-mini-drama-player) */
body.single-stn_video_episode {
  background: #050508;
}
body.single-stn_video_episode .wns-header,
body.single-stn_video_episode .wns-footer {
  display: none !important;
}
body.single-stn_video_episode .wns-main,
body.single-stn_video_episode main,
body.single-stn_video_episode .wns-site {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
.wns-drama {
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(ellipse 120% 80% at 50% 0%, #1a0f22 0%, #0a0810 42%, #050508 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(10px, env(safe-area-inset-top)) 12px 28px;
  box-sizing: border-box;
}
.wns-drama-top {
  width: 100%;
  max-width: 420px;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.wns-drama-back {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  font-size: 1.25rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.wns-drama-back:hover { background: rgba(255,255,255,.12); color: #fff; }
.wns-drama-back-spacer, .wns-drama-top-spacer { width: 40px; height: 40px; }
.wns-drama-title {
  margin: 0;
  text-align: center;
  font-size: clamp(0.95rem, 3.2vw, 1.1rem);
  font-weight: 750;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wns-drama-stage {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.wns-drama-stage .stn-episode-nav {
  width: 100%;
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.7);
  margin-top: 4px;
}
.wns-drama-stage .stn-episode-nav a { color: #e9a7ff; }
.wns-drama-stage .stn-pricing-wrap {
  width: 100%;
  background: #141018;
  border-color: #333;
  color: #eee;
}

/* Video series hub */
.wns-video-cover-vertical {
  aspect-ratio: 3/4;
  max-width: 280px;
  border-radius: var(--wn-radius);
  overflow: hidden;
  box-shadow: var(--wn-card-shadow);
}
.wns-video-cover-vertical img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.wns-ep-free {
  display: inline-block;
  margin-left: .4rem;
  font-style: normal;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wn-accent);
  background: color-mix(in srgb, var(--wn-accent) 14%, transparent);
  border-radius: 999px;
  padding: .12rem .45rem;
  vertical-align: middle;
}
.wns-video-body:empty { display: none; }
.stn-comic-pages { display: flex; flex-direction: column; gap: 8px; }
.stn-comic-page-img { display: block; width: 100%; height: auto; border-radius: 4px; background: #111; }
.wns-comic-content { max-width: 48rem; margin: 0 auto; }

/* Comic ebook reader page */
.wns-ebook-page {
  background: radial-gradient(ellipse at top, #1a1224 0%, #0a0a0e 55%, #060608 100%);
  color: #fff;
  min-height: calc(100vh - var(--wn-header-h, 64px));
  padding: 1rem 0 2.5rem;
}
.wns-ebook-inner { max-width: 640px; }
.wns-ebook-top { text-align: center; margin-bottom: 1rem; }
.wns-ebook-back {
  display: inline-block;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  font-weight: 650;
  margin-bottom: .4rem;
}
.wns-ebook-back:hover { color: #fff; }
.wns-ebook-title {
  margin: 0;
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  color: #fff;
}
.wns-comic-cta { margin: .75rem 0 1rem; }
.wns-comic-body:empty { display: none; }
.wns-comic-header {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 1.5rem;
  align-items: start;
}
.wns-comic-cover img {
  width: 100%;
  height: auto;
  border-radius: var(--wn-radius);
  box-shadow: var(--wn-card-shadow);
  display: block;
}
@media (max-width: 700px) {
  .wns-comic-header { grid-template-columns: 1fr; }
  .wns-comic-cover { max-width: 220px; }
}

/* Footer */
.wns-footer {
  border-top: 1px solid var(--wn-border); padding: 2.25rem 0 2.75rem; color: var(--wn-muted); font-size: .9rem;
  background: color-mix(in srgb, var(--wn-surface) 85%, var(--wn-bg));
}
.wns-footer-inner { display: grid; gap: 1rem; }
.wns-footer-brand strong { color: var(--wn-text); font-size: 1.05rem; }
.wns-footer-tag { margin: .25rem 0 0; }
.wns-footer-menu {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem;
}
.wns-footer-menu a { text-decoration: none; color: var(--wn-muted); font-weight: 650; transition: color .15s; }
.wns-footer-menu a:hover { color: var(--wn-accent); }
.wns-footer-copy { margin: .5rem 0 0; font-size: .82rem; }

/* Mobile */
@media (max-width: 900px) {
  .wns-nav-toggle { display: flex; order: 2; }
  .wns-header-actions { order: 3; }
  .wns-brand { order: 1; }
  .wns-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--wn-surface); border-bottom: 1px solid var(--wn-border);
    padding: .75rem 4vw 1rem; box-shadow: var(--wn-card-shadow); justify-content: flex-start;
  }
  .wns-header.is-open .wns-nav { display: block; }
  .wns-menu { flex-direction: column; align-items: stretch; }
  .wns-menu a { border-radius: 12px; padding: .75rem .95rem; }
  .wns-hero-inner { grid-template-columns: 1fr; }
  .wns-float-covers { height: 280px; max-width: 300px; }
  .wns-story-header, .wns-video-header, .wns-comic-header, .wns-reader-layout { grid-template-columns: 1fr; }
  .wns-reader-toc { position: static; }
  .wns-account-link { display: none; }
  .wns-rail-btn { display: grid !important; place-items: center; opacity: .92; }
  .wns-rail .wns-card { flex-basis: 142px; }
}
@media (max-width: 520px) {
  .wns-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .wns-hero-wattpad { padding: 1.75rem 0 1.4rem; }
  .wns-featured-content { padding: 1.25rem; }
  .wns-cta-band-inner { padding: 1.25rem; }
}

/* -- Auth (Join / Login) -- */
body.wns-auth-body { margin: 0; background: var(--wn-bg); }
.wns-auth {
  min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr;
}
.wns-auth-visual {
  position: relative; overflow: hidden; color: #fff;
  background: #1c0a12;
  display: flex; align-items: center; padding: 3rem;
}
.wns-auth-visual-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 30%, rgba(225,29,72,.45), transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 70%, rgba(124,58,237,.35), transparent 55%);
  animation: wns-glow-drift 10s ease-in-out infinite alternate;
}
.wns-auth-visual-inner { position: relative; z-index: 1; max-width: 28rem; }
.wns-auth-brand { font-weight: 800; letter-spacing: .04em; opacity: .9; margin: 0 0 1rem; }
.wns-auth-headline { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.15; margin: 0 0 .75rem; letter-spacing: -.03em; }
.wns-auth-sub { opacity: .85; margin: 0 0 1.5rem; line-height: 1.55; }
.wns-auth-covers { display: flex; gap: .65rem; }
.wns-auth-cover {
  width: 72px; aspect-ratio: 2/3; border-radius: 10px; overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.2);
  animation: wns-float 4.5s ease-in-out infinite;
}
.wns-auth-cover:nth-child(2) { animation-delay: .3s; transform: translateY(8px); }
.wns-auth-cover:nth-child(3) { animation-delay: .6s; }
.wns-auth-cover:nth-child(4) { animation-delay: .9s; transform: translateY(6px); }
.wns-auth-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wns-auth-panel {
  display: flex; flex-direction: column; justify-content: center;
  padding: 2.5rem clamp(1.25rem, 4vw, 3.5rem); max-width: 440px; width: 100%; margin: 0 auto;
}
.wns-auth-back {
  text-decoration: none; color: var(--wn-muted); font-weight: 650; font-size: .9rem; margin-bottom: 1.5rem;
}
.wns-auth-back:hover { color: var(--wn-accent); }
.wns-auth-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin-bottom: 1.25rem;
  background: var(--wn-bg); padding: .3rem; border-radius: 14px; border: 1px solid var(--wn-border);
}
.wns-auth-tab {
  text-align: center; text-decoration: none; color: var(--wn-muted); font-weight: 750;
  padding: .7rem .5rem; border-radius: 11px; transition: background .2s, color .2s;
}
.wns-auth-tab.is-active {
  background: var(--wn-surface); color: var(--wn-text);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--wn-text) 8%, transparent);
}
.wns-auth-form { display: flex; flex-direction: column; gap: .9rem; }
.wns-auth-field { display: flex; flex-direction: column; gap: .35rem; font-weight: 650; font-size: .88rem; }
.wns-auth-field input {
  border: 1px solid var(--wn-border); border-radius: 12px; padding: .8rem .95rem;
  font-size: 1rem; background: var(--wn-surface); color: var(--wn-text);
  transition: border-color .2s, box-shadow .2s;
}
.wns-auth-field input:focus {
  outline: none; border-color: var(--wn-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wn-accent) 22%, transparent);
}
.wns-auth-check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--wn-muted); }
.wns-auth-submit { width: 100%; margin-top: .25rem; padding: .9rem 1rem; }
.wns-auth-fineprint { margin: 0; font-size: .8rem; color: var(--wn-muted); text-align: center; }
.wns-auth-alert {
  padding: .75rem 1rem; border-radius: 12px; font-size: .9rem; font-weight: 650; margin-bottom: 1rem;
}
.wns-auth-alert-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.wns-auth-alert-ok { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
[data-theme="dark"] .wns-auth-alert-error { background: #450a0a; color: #fecaca; border-color: #7f1d1d; }
[data-theme="dark"] .wns-auth-alert-ok { background: #052e16; color: #a7f3d0; border-color: #14532d; }
@media (max-width: 900px) {
  .wns-auth { grid-template-columns: 1fr; }
  .wns-auth-visual { min-height: 220px; padding: 2rem 1.5rem; }
  .wns-auth-covers { display: none; }
}

/* -- My Account visual -- */
.wns-is-account .woocommerce,
body.woocommerce-account .wns-main { padding-top: 0; }
.wns-account { max-width: 1100px; margin: 0 auto; padding: 0 4vw 3rem; }
.wns-account-hero {
  margin: 1.25rem 0 1.5rem; padding: 1.5rem; border-radius: 22px;
  background:
    radial-gradient(500px 180px at 0% 0%, color-mix(in srgb, var(--wn-accent) 22%, transparent), transparent 60%),
    color-mix(in srgb, var(--wn-surface) 70%, var(--wn-bg));
  border: 1px solid var(--wn-border); box-shadow: var(--wn-card-shadow);
}
.wns-account-hero-inner { display: flex; gap: 1rem; align-items: center; }
.wns-account-avatar {
  width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center;
  font-size: 1.5rem; font-weight: 850; color: #fff;
  background: linear-gradient(135deg, var(--wn-accent), #7c3aed);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--wn-accent) 35%, transparent);
}
.wns-account-hello { margin: 0; font-size: .8rem; font-weight: 750; text-transform: uppercase; letter-spacing: .1em; color: var(--wn-accent); }
.wns-account-name { margin: .15rem 0 .4rem; font-size: 1.55rem; letter-spacing: -.02em; }
.wns-account-pill {
  display: inline-block; padding: .3rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 700;
  background: color-mix(in srgb, var(--wn-accent) 12%, var(--wn-bg)); color: var(--wn-accent);
}
.wns-account-access-muted { color: var(--wn-muted); margin: 0; font-size: .92rem; }
.wns-account-quick { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.wns-account-layout {
  display: grid; grid-template-columns: 220px 1fr; gap: 1.25rem; align-items: start;
}
.wns-account-nav .woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: .5rem;
  background: color-mix(in srgb, var(--wn-surface) 75%, var(--wn-bg));
  border: 1px solid var(--wn-border); border-radius: 16px; box-shadow: var(--wn-card-shadow);
}
.wns-account-nav .woocommerce-MyAccount-navigation li { margin: 0; }
.wns-account-nav .woocommerce-MyAccount-navigation a {
  display: block; text-decoration: none; color: var(--wn-muted); font-weight: 700;
  padding: .7rem .85rem; border-radius: 12px; transition: background .15s, color .15s;
}
.wns-account-nav .woocommerce-MyAccount-navigation a:hover,
.wns-account-nav .woocommerce-MyAccount-navigation .is-active a {
  background: color-mix(in srgb, var(--wn-accent) 12%, transparent); color: var(--wn-accent);
}
.wns-account-content {
  background: color-mix(in srgb, var(--wn-surface) 75%, var(--wn-bg));
  border: 1px solid var(--wn-border); border-radius: 16px;
  padding: 1.35rem 1.5rem; box-shadow: var(--wn-card-shadow); min-height: 280px;
}
.wns-account-content h2, .wns-account-content h3 { margin-top: 0; }
.wns-account-content .button, .wns-account-content button.button {
  border-radius: 999px !important; font-weight: 750 !important;
  background: var(--wn-accent) !important; color: #fff !important; border: none !important;
}
@media (max-width: 800px) {
  .wns-account-layout { grid-template-columns: 1fr; }
}

/* -- Offer / pricing -- */
.wns-offer-hero, .wns-showcase-hero {
  padding: 2.5rem 0 1.5rem; text-align: center;
  background:
    radial-gradient(700px 240px at 50% 0%, color-mix(in srgb, var(--wn-accent) 18%, transparent), transparent 70%);
}
.wns-offer-hero h1, .wns-showcase-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.03em; margin: 0 0 .75rem;
}
.wns-offer-lead { max-width: 40rem; margin: 0 auto; color: var(--wn-muted); font-size: 1.05rem; }
/* Features hero: more air between lead copy and CTAs */
.wns-showcase-hero .wns-offer-lead {
  margin-bottom: 0;
  line-height: 1.55;
}
.wns-showcase-hero .wns-hero-actions,
.wns-showcase-hero .wns-hero-actions-justify {
  margin-top: 1.85rem;
}
@media (min-width: 768px) {
  .wns-showcase-hero .wns-hero-actions,
  .wns-showcase-hero .wns-hero-actions-justify {
    margin-top: 2.15rem;
  }
}
.wns-offer-tiers { padding: 1.5rem 0 3rem; }
.wns-pricing-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; align-items: stretch;
}
.wns-price-card {
  position: relative; background: var(--wn-surface); border: 1px solid var(--wn-border);
  border-radius: 20px; padding: 1.5rem 1.35rem 1.4rem; box-shadow: var(--wn-card-shadow);
  display: flex; flex-direction: column; transition: transform .25s var(--wn-ease);
}
.wns-price-card:hover { transform: translateY(-6px); }
.wns-price-card-featured {
  border-color: color-mix(in srgb, var(--wn-accent) 55%, var(--wn-border));
  box-shadow: 0 18px 48px color-mix(in srgb, var(--wn-accent) 22%, transparent);
  transform: scale(1.03);
}
.wns-price-badge {
  position: absolute; top: -10px; right: 1rem; margin: 0;
  background: var(--wn-accent); color: #fff; font-size: .72rem; font-weight: 800;
  padding: .3rem .65rem; border-radius: 999px; letter-spacing: .04em; text-transform: uppercase;
}
.wns-price-tier { margin: 0; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--wn-accent); }
.wns-price-name { margin: .35rem 0 .5rem; font-size: 1.45rem; }
.wns-price-amount { margin: 0; font-size: 2.6rem; font-weight: 850; letter-spacing: -.04em; line-height: 1; }
.wns-price-currency { font-size: 1.2rem; vertical-align: super; margin-right: .1rem; }
.wns-price-period { margin: .35rem 0 1rem; color: var(--wn-muted); font-size: .9rem; }
.wns-price-features { list-style: none; margin: 0 0 1.25rem; padding: 0; flex: 1; }
.wns-price-features li {
  padding: .45rem 0 .45rem 1.4rem; position: relative; border-bottom: 1px solid var(--wn-border);
  font-size: .92rem;
}
.wns-price-features li::before {
  content: "✓"; position: absolute; left: 0; color: var(--wn-accent); font-weight: 800;
}
.wns-price-features li.is-muted { color: var(--wn-muted); }
.wns-price-cta { width: 100%; text-align: center; }
.wns-offer-note {
  margin-top: 2rem; padding: 1.35rem 1.5rem; border-radius: 16px;
  background: var(--wn-surface); border: 1px solid var(--wn-border);
}
.wns-offer-note h3 { margin-top: 0; }
.wns-offer-alt { margin: .75rem 0 1rem; padding-left: 1.1rem; color: var(--wn-muted); }
@media (max-width: 900px) {
  .wns-pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .wns-price-card-featured { transform: none; }
}

/* Hide WP admin bar on auth for cleaner look when not admin? keep for admins */

/* Default pages */
.wns-page { padding: 1.5rem 0 2.5rem; }
.wns-page-title { margin: 0 0 1rem; }
.wns-page-content { max-width: 48rem; }
.wns-woo { padding: 1rem 0 2.5rem; }
/* When account template renders inside page content */
.wns-page-content .wns-account { max-width: none; padding: 0; }
.wns-is-account .wns-page-article > .wns-archive-header { display: none; }

/* Brand logo */
.wns-logo-img .custom-logo-link,
.wns-logo-mark {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  line-height: 0;
}
.wns-logo-img .custom-logo,
.wns-logo-mark img {
  display: block;
  height: 48px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}
.wns-logo-text { /* screen-reader helper when image-only */ }
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute; width: 1px; word-wrap: normal !important;
}
.wns-auth-brand {
  display: flex; align-items: center; gap: .65rem; font-weight: 800;
}
.wns-auth-brand-logo {
  width: 56px; height: 56px; object-fit: contain; border-radius: 12px;
  background: rgba(0,0,0,.25); padding: 4px;
}
.wns-footer-logo {
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none; color: var(--wn-text);
}
.wns-footer-logo img {
  width: 40px; height: 40px; object-fit: contain; border-radius: 10px;
}
.wns-footer-by {
  display: flex; align-items: center; gap: .4rem;
  margin: .45rem 0 0; font-size: .82rem; color: var(--wn-muted);
}
.wns-footer-ks { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; }
@media (max-width: 520px) {
  .wns-logo-img .custom-logo,
  .wns-logo-mark img { height: 40px; max-width: 120px; }
}


/* Featured + cover fill */
.wns-featured-banner { min-height: 300px; }
.wns-featured-bg { background: color-mix(in srgb, var(--wn-accent) 18%, #111); }
.wns-featured-bg img,
.wns-featured-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.wns-footer-credit {
  color: var(--wn-accent); text-decoration: none; font-weight: 700;
}
.wns-footer-credit:hover { text-decoration: underline; }
.wns-dash-hello { font-size: 1.05rem; margin: 0 0 1rem; }
.wns-dash-links { margin: 0; padding-left: 1.1rem; }
.wns-dash-links a { font-weight: 700; text-decoration: none; }
.wns-dash-links a:hover { text-decoration: underline; }

/* —— My Account (theme-matched, not WC white box) —— */
body.woocommerce-account,
body.woocommerce-account .wns-main {
  background: var(--wn-bg) !important;
}
body.woocommerce-account .wns-main { padding: 0 0 3rem; }
body.woocommerce-account .wns-page,
body.woocommerce-account .wns-page-account {
  width: min(1120px, 94vw);
  max-width: none;
  margin: 0 auto;
  padding: 1.25rem 0 2rem;
  background: transparent !important;
}
body.woocommerce-account .wns-page-article,
body.woocommerce-account .wns-page-content,
body.woocommerce-account .wns-page-content-account,
body.woocommerce-account .entry-content {
  max-width: none !important;
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Kill default WooCommerce white columns */
body.woocommerce-account .woocommerce,
body.woocommerce-account .woocommerce-account,
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-account .woocommerce-MyAccount-navigation ul,
body.woocommerce-account .u-columns,
body.woocommerce-account .col2-set {
  background: transparent !important;
  box-shadow: none !important;
  float: none !important;
  width: auto !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
body.woocommerce-account .woocommerce-MyAccount-content {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.wns-account {
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}
.wns-account-hero {
  margin: 0 0 1.25rem;
  padding: 1.35rem 1.4rem 1.2rem;
  border-radius: 20px;
  background:
    radial-gradient(520px 200px at 0% 0%, color-mix(in srgb, var(--wn-accent) 20%, transparent), transparent 65%),
    color-mix(in srgb, var(--wn-bg) 35%, var(--wn-surface));
  border: 1px solid var(--wn-border);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--wn-text) 6%, transparent);
}
.wns-account-hero-inner {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.wns-account-avatar {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 1.45rem;
  font-weight: 850;
  color: #fff;
  background: linear-gradient(135deg, var(--wn-accent), color-mix(in srgb, var(--wn-accent) 40%, #7c3aed));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--wn-accent) 30%, transparent);
}
.wns-account-hello {
  margin: 0;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--wn-accent);
}
.wns-account-name {
  margin: .2rem 0 .35rem;
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  letter-spacing: -.02em;
  color: var(--wn-text);
}
.wns-account-pill {
  display: inline-block;
  padding: .28rem .7rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--wn-accent) 14%, var(--wn-bg));
  color: var(--wn-accent);
  border: 1px solid color-mix(in srgb, var(--wn-accent) 25%, var(--wn-border));
}
.wns-account-access-muted {
  margin: 0;
  color: var(--wn-muted);
  font-size: .92rem;
}
.wns-account-quick {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1rem;
}
.wns-account-quick .wns-chip {
  background: color-mix(in srgb, var(--wn-bg) 55%, var(--wn-surface));
  border-color: var(--wn-border);
  color: var(--wn-text);
}
.wns-account-quick .wns-chip-accent {
  background: color-mix(in srgb, var(--wn-accent) 14%, var(--wn-surface));
  border-color: color-mix(in srgb, var(--wn-accent) 40%, var(--wn-border));
  color: var(--wn-accent);
}

.wns-account-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.wns-account-aside {
  background: color-mix(in srgb, var(--wn-bg) 40%, var(--wn-surface));
  border: 1px solid var(--wn-border);
  border-radius: 18px;
  padding: .55rem;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--wn-text) 5%, transparent);
}
.wns-account-menu,
.wns-account-nav-inner ul,
.woocommerce-MyAccount-navigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.wns-account-menu li,
.woocommerce-MyAccount-navigation li {
  margin: 0 0 .2rem !important;
  list-style: none !important;
}
.wns-account-menu a,
.woocommerce-MyAccount-navigation a {
  display: flex !important;
  align-items: center;
  gap: .5rem;
  text-decoration: none !important;
  color: var(--wn-text) !important;
  font-weight: 700 !important;
  font-size: .92rem !important;
  padding: .72rem .85rem !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.wns-account-menu a:hover,
.woocommerce-MyAccount-navigation a:hover {
  background: color-mix(in srgb, var(--wn-accent) 12%, var(--wn-bg)) !important;
  color: var(--wn-accent) !important;
  border-color: color-mix(in srgb, var(--wn-accent) 22%, var(--wn-border)) !important;
}
.wns-account-menu .is-active a,
.woocommerce-MyAccount-navigation .is-active a {
  background: color-mix(in srgb, var(--wn-accent) 16%, var(--wn-bg)) !important;
  color: var(--wn-accent) !important;
  border-color: color-mix(in srgb, var(--wn-accent) 35%, var(--wn-border)) !important;
  box-shadow: inset 3px 0 0 var(--wn-accent);
}

.wns-account-content,
.woocommerce-MyAccount-content {
  background: color-mix(in srgb, var(--wn-bg) 30%, var(--wn-surface)) !important;
  border: 1px solid var(--wn-border) !important;
  border-radius: 18px !important;
  padding: 1.35rem 1.45rem 1.5rem !important;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--wn-text) 5%, transparent) !important;
  min-height: 280px;
  color: var(--wn-text) !important;
}
.wns-account-content a { color: var(--wn-accent); font-weight: 650; }
.wns-account-content p,
.wns-account-content li { color: var(--wn-text); }
.wns-account-content .form-row input.input-text,
.wns-account-content input[type="text"],
.wns-account-content input[type="email"],
.wns-account-content input[type="password"],
.wns-account-content textarea,
.wns-account-content select {
  background: var(--wn-bg) !important;
  border: 1px solid var(--wn-border) !important;
  border-radius: 12px !important;
  color: var(--wn-text) !important;
  padding: .7rem .85rem !important;
}
.wns-account-content .button,
.wns-account-content button.button,
.wns-account-content .woocommerce-Button {
  border-radius: 999px !important;
  font-weight: 750 !important;
  background: var(--wn-accent) !important;
  color: #fff !important;
  border: none !important;
  padding: .7rem 1.2rem !important;
}
.wns-dash-hello { font-size: 1.08rem; margin: 0 0 1rem; color: var(--wn-text); }
.wns-dash-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .45rem;
}
.wns-dash-links li a {
  display: block;
  padding: .75rem .95rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--wn-bg) 55%, transparent);
  border: 1px solid var(--wn-border);
  text-decoration: none;
  color: var(--wn-text) !important;
  font-weight: 700;
  transition: border-color .15s, transform .15s, background .15s;
}
.wns-dash-links li a:hover {
  border-color: var(--wn-accent);
  color: var(--wn-accent) !important;
  transform: translateX(3px);
  background: color-mix(in srgb, var(--wn-accent) 10%, var(--wn-bg));
}

@media (max-width: 860px) {
  .wns-account-layout { grid-template-columns: 1fr; }
  .wns-account-menu {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
  }
  .wns-account-menu li { flex: 1 1 auto; min-width: 42%; }
}


/* ========== Features showcase — one section per capability ========== */
.wns-feature-jump {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: .65rem 0;
  background: color-mix(in srgb, var(--wn-bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--wn-border);
}
.wns-feature-jump-inner {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
}
.wns-feature-jump a {
  font-size: .78rem;
  font-weight: 750;
  color: var(--wn-muted);
  text-decoration: none;
  padding: .4rem .75rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color .2s, border-color .2s, background .2s;
}
.wns-feature-jump a:hover,
.wns-feature-jump a:focus-visible {
  color: var(--wn-accent);
  border-color: color-mix(in srgb, var(--wn-accent) 35%, transparent);
  background: color-mix(in srgb, var(--wn-accent) 8%, transparent);
}

.wns-feature-block {
  padding: 3.25rem 0 3.5rem;
  scroll-margin-top: 72px;
}
.wns-feature-block-alt {
  background: color-mix(in srgb, var(--wn-bg) 70%, var(--wn-surface));
}
.wns-feature-block-head {
  text-align: center;
  margin-bottom: 1.75rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.wns-feature-block-head h2 {
  margin: .25rem 0 .65rem;
  font-size: clamp(1.55rem, 3.2vw, 2.15rem);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.wns-feature-block-head .wns-offer-lead {
  margin: 0 auto;
  max-width: 640px;
}
.wns-feature-block-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 1.75rem 2rem;
  align-items: center;
}
.wns-feature-block-grid-flip .wns-feature-block-copy { order: 2; }
.wns-feature-block-grid-flip .wns-feature-demo { order: 1; }

.wns-feature-points {
  list-style: none;
  margin: 0 0 1.35rem;
  padding: 0;
  display: grid;
  gap: .7rem;
}
.wns-feature-points li {
  position: relative;
  padding-left: 1.45rem;
  color: var(--wn-text);
  line-height: 1.45;
  font-size: .95rem;
}
.wns-feature-points li::before {
  content: '';
  position: absolute;
  left: 0; top: .45rem;
  width: .7rem; height: .7rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wn-accent) 85%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wn-accent) 18%, transparent);
}

.wns-feature-demo {
  border-radius: 20px;
  border: 1px solid var(--wn-border);
  background: color-mix(in srgb, var(--wn-surface) 94%, var(--wn-accent) 6%);
  box-shadow: var(--wn-card-shadow);
  padding: 1.25rem 1.35rem;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Copy protect demo */
.wns-demo-reader {
  width: min(100%, 420px);
  background: var(--wn-surface);
  border: 1px solid var(--wn-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.08);
}
.wns-demo-reader-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: .7rem 1rem;
  font-size: .78rem; font-weight: 750;
  background: color-mix(in srgb, var(--wn-bg) 80%, var(--wn-surface));
  border-bottom: 1px solid var(--wn-border);
  color: var(--wn-muted);
}
.wns-demo-lock-badge {
  color: var(--wn-accent);
  background: color-mix(in srgb, var(--wn-accent) 12%, transparent);
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.wns-demo-reader-body {
  position: relative;
  padding: 1.1rem 1.15rem 1.25rem;
  user-select: none;
}
.wns-demo-reader-body p {
  margin: 0 0 .75rem;
  line-height: 1.55;
  color: var(--wn-text);
  font-size: .95rem;
}
.wns-demo-muted { color: var(--wn-muted) !important; font-size: .85rem !important; }
.wns-demo-toast {
  position: absolute;
  left: 50%; top: 48%;
  transform: translate(-50%, -50%) scale(.92);
  background: #111; color: #fff;
  font-size: .8rem; font-weight: 750;
  padding: .45rem .85rem;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  animation: wns-demo-toast 3.4s ease-in-out infinite;
}
@keyframes wns-demo-toast {
  0%, 55% { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
  65%, 88% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; }
}

/* Character rename demo */
.wns-demo-char { width: min(100%, 400px); }
.wns-demo-char-fields {
  display: grid;
  gap: .65rem;
  margin-bottom: 1rem;
}
.wns-demo-char-fields label {
  display: grid;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 750;
  color: var(--wn-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.wns-demo-char-fields input {
  width: 100%;
  padding: .55rem .7rem;
  border-radius: 10px;
  border: 1px solid var(--wn-border);
  background: var(--wn-bg);
  color: var(--wn-text);
  font-size: 1rem;
  font-weight: 700;
}
.wns-demo-char-prose {
  background: var(--wn-surface);
  border: 1px solid var(--wn-border);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: var(--wn-card-shadow);
}
.wns-demo-char-prose p { margin: 0; line-height: 1.55; color: var(--wn-text); }
.wns-demo-char-prose strong {
  color: var(--wn-accent);
  border-bottom: 1px dotted color-mix(in srgb, var(--wn-accent) 50%, transparent);
  transition: opacity .25s;
}
.wns-demo-hint {
  margin: .75rem 0 0;
  font-size: .8rem;
  color: var(--wn-muted);
  font-weight: 650;
  text-align: center;
}

/* Plans demo */
.wns-demo-plans {
  width: min(100%, 360px);
  display: grid;
  gap: .7rem;
}
.wns-demo-plan {
  position: relative;
  text-align: left;
  border: 1px solid var(--wn-border);
  background: var(--wn-surface);
  border-radius: 14px;
  padding: .9rem 1rem;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.wns-demo-plan:hover { transform: translateY(-2px); }
.wns-demo-plan.is-active {
  border-color: var(--wn-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wn-accent) 25%, transparent);
}
.wns-demo-plan strong { font-size: .98rem; color: var(--wn-text); }
.wns-demo-price { font-weight: 800; color: var(--wn-accent); font-size: 1.05rem; }
.wns-demo-plan em {
  grid-column: 1 / -1;
  font-style: normal;
  font-size: .78rem;
  color: var(--wn-muted);
}
.wns-demo-plan-badge {
  position: absolute;
  top: -.55rem; right: .85rem;
  background: var(--wn-accent);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .2rem .5rem;
  border-radius: 999px;
}

/* Formats tabs */
.wns-format-tabs {
  border: 1px solid var(--wn-border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--wn-surface) 96%, var(--wn-accent) 4%);
  box-shadow: var(--wn-card-shadow);
  overflow: visible;
}
.wns-format-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .85rem;
  border-bottom: 1px solid var(--wn-border);
  background: color-mix(in srgb, var(--wn-bg) 55%, var(--wn-surface));
  justify-content: center;
  border-radius: 22px 22px 0 0;
  overflow: hidden;
}
.wns-format-tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--wn-muted);
  font-weight: 750;
  font-size: .9rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.wns-format-tab.is-active {
  color: var(--wn-text);
  background: var(--wn-surface);
  border-color: var(--wn-border);
  box-shadow: var(--wn-card-shadow);
}
.wns-format-panels {
  padding: 1.5rem 1.5rem 1.65rem;
  overflow: visible;
}
.wns-format-panel[hidden] { display: none !important; }
.wns-format-panel-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1.5rem;
  align-items: center;
  overflow: visible;
}
.wns-format-panel h3 {
  margin: 0 0 .85rem;
  font-size: 1.2rem;
  letter-spacing: -.01em;
}
.wns-demo-format {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Formats section: homepage-style floating cover stage */
.wns-format-stage {
  position: relative !important;
  width: min(100%, 380px);
  min-height: 320px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.wns-format-stage-glow {
  position: absolute;
  inset: 10% 8%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--wn-accent) 28%, transparent), transparent 70%);
  animation: wns-glow-drift 10s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
.wns-float-covers-sm {
  position: relative;
  width: 100%;
  height: 300px;
  max-width: 360px;
  margin: 0 auto;
  perspective: 900px;
  z-index: 1;
}
.wns-float-covers-sm .wns-float-cover {
  width: 40%;
}

/* Video tab: vertical reel marquee (distinct from story floats) */
.wns-video-reel {
  position: relative !important;
  width: min(100%, 360px);
  min-height: 300px;
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: .75rem;
  padding: 1rem 0 !important;
  background: linear-gradient(180deg, #0f172a, #1e1b2e) !important;
  border: 1px solid color-mix(in srgb, #fff 12%, transparent) !important;
  border-radius: 20px !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.28) !important;
  overflow: hidden !important;
}
.wns-video-reel-mask {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.wns-video-reel-track {
  display: flex;
  gap: .75rem;
  width: max-content;
  animation: wns-video-reel 22s linear infinite;
  padding: .25rem .5rem;
}
.wns-video-reel-card {
  position: relative;
  margin: 0;
  width: 118px;
  flex: 0 0 auto;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, #fff 18%, transparent);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  background: #111;
}
.wns-video-reel-card img {
  display: block;
  width: 100%;
  aspect-ratio: 9/16;
  object-fit: cover;
  object-position: center top;
}
.wns-video-reel-play {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .75rem;
  color: #fff;
  background: color-mix(in srgb, var(--wn-accent) 90%, #fff);
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  opacity: .92;
}
.wns-video-reel-card figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.4rem .4rem .4rem;
  font-size: .62rem;
  font-weight: 750;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wns-video-reel-badge {
  align-self: center;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #e2e8f0;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  padding: .3rem .7rem;
  border-radius: 999px;
}
@keyframes wns-video-reel {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Comic tab: stacked page flip (distinct from story floats) */
.wns-comic-flip {
  position: relative !important;
  width: min(100%, 340px);
  min-height: 300px;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  padding: 1rem !important;
  background: color-mix(in srgb, var(--wn-surface) 92%, var(--wn-accent) 8%) !important;
  border: 1px solid var(--wn-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--wn-card-shadow) !important;
}
.wns-comic-flip-stack {
  position: relative;
  width: 180px;
  height: 240px;
  perspective: 1000px;
}
.wns-comic-flip-page {
  position: absolute;
  inset: 0;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--wn-border);
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
  background: #111;
  transform-origin: left center;
}
.wns-comic-flip-page img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.wns-comic-flip-page-1 {
  z-index: 4;
  animation: wns-comic-page-1 5.5s ease-in-out infinite;
}
.wns-comic-flip-page-2 {
  z-index: 3;
  transform: translate(10px, 8px) rotate(2.5deg);
  animation: wns-comic-page-2 5.5s ease-in-out infinite;
}
.wns-comic-flip-page-3 {
  z-index: 2;
  transform: translate(18px, 14px) rotate(5deg);
  opacity: .92;
}
.wns-comic-flip-page-4 {
  z-index: 1;
  transform: translate(26px, 20px) rotate(7deg);
  opacity: .8;
}
@keyframes wns-comic-page-1 {
  0%, 18% { transform: rotateY(0deg) translate(0, 0); opacity: 1; }
  35%, 55% { transform: rotateY(-72deg) translate(-6px, 0); opacity: .35; }
  70%, 100% { transform: rotateY(0deg) translate(0, 0); opacity: 1; }
}
@keyframes wns-comic-page-2 {
  0%, 30% { transform: translate(10px, 8px) rotate(2.5deg); }
  45%, 65% { transform: translate(4px, 4px) rotate(1deg) scale(1.02); }
  80%, 100% { transform: translate(10px, 8px) rotate(2.5deg); }
}
.wns-comic-flip-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  font-weight: 750;
  color: var(--wn-muted);
}
.wns-comic-flip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wn-accent);
  animation: wns-pulse 1.8s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .wns-format-stage-glow,
  .wns-float-covers-sm .wns-float-cover,
  .wns-video-reel-track,
  .wns-comic-flip-page-1,
  .wns-comic-flip-page-2,
  .wns-comic-flip-dot {
    animation: none !important;
  }
  .wns-video-reel-track { transform: none; }
}
.wns-demo-pro-pill {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  background: var(--wn-accent);
  padding: .2rem .55rem;
  border-radius: 999px;
  margin-bottom: .65rem;
}
.wns-feature-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
}
.wns-theme-extra-points {
  margin: .85rem 0 .35rem;
}

/* Paywall demo */
.wns-demo-paywall {
  width: min(100%, 400px);
  position: relative;
}
.wns-demo-paywall-blur {
  background: var(--wn-surface);
  border: 1px solid var(--wn-border);
  border-radius: 16px;
  padding: 1.1rem 1.15rem 4.5rem;
  filter: blur(2.5px);
  opacity: .55;
  user-select: none;
}
.wns-demo-paywall-blur p {
  margin: 0;
  line-height: 1.55;
  color: var(--wn-text);
}
.wns-demo-paywall-card {
  position: absolute;
  left: 50%;
  bottom: .35rem;
  transform: translateX(-50%);
  width: calc(100% - 1.5rem);
  background: #111;
  color: #fff;
  border-radius: 16px;
  padding: 1rem 1.1rem;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
.wns-demo-paywall-card strong {
  display: block;
  font-size: 1rem;
  margin-bottom: .25rem;
}
.wns-demo-paywall-card p {
  margin: 0 0 .75rem;
  font-size: .85rem;
  color: #cbd5e1;
}
.wns-demo-gateways {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
}
.wns-demo-gateways span {
  font-size: .7rem;
  font-weight: 750;
  padding: .28rem .55rem;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
}

/* Theme colour lab (ThemeForest-style demos) */
.wns-theme-lab.wns-feature-block { /* inherits padding */ }
.wns-theme-lab-grid {
  display: grid; grid-template-columns: 1fr 1.35fr; gap: 1.5rem; align-items: start; margin-top: .25rem;
}
.wns-theme-swatches { display: flex; flex-direction: column; gap: .65rem; }
.wns-theme-swatch {
  text-align: left; border: 1px solid var(--wn-border); background: var(--wn-surface);
  border-radius: 14px; padding: .85rem 1rem; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.wns-theme-swatch:hover { transform: translateY(-2px); box-shadow: var(--wn-card-shadow); }
.wns-theme-swatch.is-active {
  border-color: var(--wn-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--wn-accent) 28%, transparent);
}
.wns-theme-swatch-bar { display: flex; gap: 4px; margin-bottom: .45rem; }
.wns-theme-swatch-bar i { flex: 1; height: 14px; border-radius: 4px; display: block; }
.wns-theme-swatch strong { display: block; font-size: .95rem; color: var(--wn-text); }
.wns-theme-swatch em { display: block; font-style: normal; font-size: .8rem; color: var(--wn-muted); margin-top: .15rem; }
.wns-theme-lab-hint { margin: .35rem 0 0; font-size: .8rem; color: var(--wn-muted); line-height: 1.45; }
.wns-theme-browser {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--wn-border);
  box-shadow: 0 18px 50px rgba(0,0,0,.12);
  background: #1f2937;
}
.wns-theme-browser-chrome {
  display: flex; align-items: center; gap: 6px;
  padding: .55rem .75rem;
  background: linear-gradient(180deg, #374151, #1f2937);
}
.wns-theme-browser-chrome > span {
  width: 10px; height: 10px; border-radius: 50%;
  background: #f87171;
}
.wns-theme-browser-chrome > span:nth-child(2) { background: #fbbf24; }
.wns-theme-browser-chrome > span:nth-child(3) { background: #34d399; }
.wns-theme-browser-url {
  flex: 1; margin-left: 8px;
  background: #111827; color: #9ca3af;
  font-size: .72rem; font-weight: 600;
  padding: .28rem .65rem; border-radius: 999px;
}
.wns-theme-preview {
  --tp-bg: var(--wn-bg);
  --tp-surface: var(--wn-surface);
  --tp-text: var(--wn-text);
  --tp-muted: var(--wn-muted);
  --tp-accent: var(--wn-accent);
  --tp-border: var(--wn-border);
  background: var(--tp-bg);
  color: var(--tp-text);
  border: 0;
  border-radius: 0;
  padding: 1.1rem;
  box-shadow: none;
  min-height: 340px;
  transition: background .35s, color .35s, border-color .35s;
}
.wns-tp-header { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.wns-tp-logo { font-weight: 800; color: var(--tp-text); }
.wns-tp-nav { display: flex; gap: 6px; flex: 1; justify-content: center; }
.wns-tp-nav i {
  display: block; width: 28px; height: 6px; border-radius: 99px;
  background: color-mix(in srgb, var(--tp-muted) 35%, transparent);
}
.wns-tp-pill {
  font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  background: color-mix(in srgb, var(--tp-accent) 16%, transparent);
  color: var(--tp-accent); padding: .25rem .55rem; border-radius: 999px;
}
.wns-tp-hero {
  display: grid; grid-template-columns: 100px 1fr; gap: .85rem;
  background: var(--tp-surface); border: 1px solid var(--tp-border);
  border-radius: 16px; padding: .85rem; margin-bottom: .85rem;
  transition: background .35s, border-color .35s;
}
.wns-tp-cover {
  aspect-ratio: 2/3; border-radius: 10px;
  background: linear-gradient(145deg, var(--tp-accent), color-mix(in srgb, var(--tp-accent) 30%, #111));
  background-size: cover;
  background-position: center;
}
.wns-tp-cover-img {
  background-color: #111;
}
.wns-tp-copy small { color: var(--tp-muted); font-weight: 700; font-size: .7rem; text-transform: uppercase; }
.wns-tp-copy strong { display: block; margin: .2rem 0 .35rem; color: var(--tp-text); font-size: 1.05rem; }
.wns-tp-copy p { margin: 0 0 .55rem; font-size: .82rem; color: var(--tp-muted); line-height: 1.4; }
.wns-tp-btn {
  display: inline-block; background: var(--tp-accent); color: #fff;
  font-size: .78rem; font-weight: 800; padding: .4rem .75rem; border-radius: 999px;
}
.wns-tp-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.wns-tp-row span {
  aspect-ratio: 2/3; border-radius: 10px;
  background: var(--tp-surface); border: 1px solid var(--tp-border);
  box-shadow: inset 0 -30px 40px color-mix(in srgb, var(--tp-accent) 12%, transparent);
  transition: background .35s, border-color .35s;
  background-size: cover;
  background-position: center;
}
.wns-tp-row .wns-tp-thumb {
  box-shadow: none;
  border-color: var(--tp-border);
}

/* Pricing embedded on features page */
.wns-offer-on-features .wns-pricing-grid {
  margin-top: .5rem;
}
.wns-offer-on-features .wns-offer-note {
  text-align: center;
  margin-top: 1.75rem;
  color: var(--wn-muted);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.wns-offer-on-features .wns-price-name {
  font-size: 1.35rem;
}
@media (max-width: 900px) {
  .wns-feature-block-grid,
  .wns-feature-block-grid-flip,
  .wns-format-panel-grid,
  .wns-theme-lab-grid { grid-template-columns: 1fr; }
  .wns-feature-block-grid-flip .wns-feature-block-copy,
  .wns-feature-block-grid-flip .wns-feature-demo { order: initial; }
  .wns-feature-demo { min-height: auto; }
  .wns-format-panels { padding: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wns-demo-toast { animation: none !important; opacity: 1; }
}