/* np-style-motion-comic.css */
/* =========================================================
   NutraPlanet Scoped Theme: Motion Comic Editorial
   Scope Gate: .np-scope.np-style-motion-comic

   Design thesis:
   - Comic-panel rhythm + modern editorial readability
   - High contrast (dark text on light surfaces)
   - Kinetic but controlled: bold outlines, caption bars, speech-bubble quotes
   - Each highlighted block gets a DISTINCT background color:
     • Key Takeaway Callouts (.callout)
     • Inline CTA Minor (.cta-minor)
     • Visual Break / Divider (hr)
     • Mid-Article CTA Major (.cta-major)
     • Related Posts (.related-posts)
     • Footer CTA (.footer-cta)
     • Internal Link Card (.internal-link-card)
     • Lead Magnet Download Card (.lead-magnet-card)

   Unique “fun value-adds” for THIS theme:
   1) Panel numbering: auto “PANEL 01” labels for major blocks (JS)
   2) “Speech bubble” pull quotes with tail that flips left/right (CSS + JS)
   3) Comic “sound effect” micro-tags on CTAs (CSS only, optional)

   IMPORTANT: FAQ toggles must NOT use button-styled controls.
   - If details/summary are used, we style summary as plain text with a simple caret.

   Constraints:
   - No globals. No :root/body/html.
   - Every selector begins with scope.
   - Includes Elementor nuclear overrides.
========================================================= */

/* =========================================================
   0) THEME VARIABLES (scoped only)
========================================================= */
.np-scope.np-style-motion-comic{
  /* Base */
  --np-bg: #fffdf7;
  --np-surface: #ffffff;
  --np-ink: #111111;
  --np-ink-2: #1f1f1f;
  --np-muted: #565656;

  /* Comic ink */
  --np-stroke: #111111;
  --np-stroke-soft: rgba(17,17,17,.22);

  /* Accent palette (comic pop) */
  --np-accent: #ff2d55;        /* pop pink-red */
  --np-accent-2: #175cff;      /* electric blue */
  --np-accent-3: #00b87a;      /* neon mint */

  /* Distinct block surfaces */
  --np-sf-takeaway: #fff2b8;   /* warm yellow */
  --np-sf-inline: #e7f4ff;     /* pale blue */
  --np-sf-divider: #f1e9ff;    /* lavender */
  --np-sf-major: #e9fff3;      /* mint */
  --np-sf-related: #ffe7f1;    /* pink */
  --np-sf-footer: #0b0f1a;     /* deep dark */
  --np-sf-internal: #eef0ff;   /* periwinkle */
  --np-sf-lead: #fff0d7;       /* peach */

  /* Type (comic header + readable body) */
  --np-font-display: "Bangers","Luckiest Guy","Impact",system-ui,sans-serif;
  --np-font-head: "Exo 2","Montserrat",system-ui,sans-serif;
  --np-font-body: "Nunito","Source Sans 3",system-ui,sans-serif;
  --np-font-ui: "Exo 2","Nunito",system-ui,sans-serif;
  --np-font-mono: "IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;

  /* Scale */
  --np-fs-body: clamp(1.02rem, 0.95rem + 0.35vw, 1.14rem);
  --np-lh-body: 1.68;
  --np-fs-h1: clamp(2.2rem, 1.4rem + 2.7vw, 3.35rem);
  --np-fs-h2: clamp(1.45rem, 1.12rem + 1.25vw, 2.05rem);
  --np-fs-h3: clamp(1.15rem, 1.02rem + 0.65vw, 1.45rem);

  /* Layout */
  --np-max: 76rem;
  --np-measure: 66ch;
  --np-gutter: clamp(1rem, 0.7rem + 1.6vw, 2.1rem);
  --np-block: clamp(1rem, 0.65rem + 1.25vw, 1.95rem);

  --np-radius: 18px;
  --np-radius-lg: 26px;

  /* Motion */
  --np-ease: cubic-bezier(.2,.9,.2,1);
  --np-dur: 520ms;

  background: var(--np-bg) !important;
  color: var(--np-ink) !important;
}

/* =========================================================
   1) ELEMENTOR OVERRIDE “NUCLEAR” RESET (scoped + !important)
========================================================= */
.np-scope.np-style-motion-comic,
.np-scope.np-style-motion-comic *{
  box-sizing: border-box !important;
}

.np-scope.np-style-motion-comic{
  font-family: var(--np-font-body) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: geometricPrecision !important;
}

.np-scope.np-style-motion-comic *{
  font-family: inherit !important;
  color: inherit !important;
}

.np-scope.np-style-motion-comic a,
.np-scope.np-style-motion-comic a *{
  color: var(--np-accent-2) !important;
  text-decoration: none !important;
}

.np-scope.np-style-motion-comic a:hover{
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.np-scope.np-style-motion-comic :focus{ outline: none !important; }
.np-scope.np-style-motion-comic :focus-visible{
  outline: 3px solid color-mix(in srgb, var(--np-accent-2) 55%, #fff 45%) !important;
  outline-offset: 3px !important;
  border-radius: 10px !important;
}

.np-scope.np-style-motion-comic img{
  max-width: 100% !important;
  height: auto !important;
  border-radius: 16px !important;
  border: 2px solid var(--np-stroke) !important;
}

/* Type */
.np-scope.np-style-motion-comic p{
  font-size: var(--np-fs-body) !important;
  line-height: var(--np-lh-body) !important;
  color: var(--np-ink-2) !important;
  margin: 0 0 1.05em 0 !important;
}

.np-scope.np-style-motion-comic strong{
  font-weight: 900 !important;
  color: var(--np-ink) !important;
}

.np-scope.np-style-motion-comic h1{
  font-family: var(--np-font-display) !important;
  font-size: var(--np-fs-h1) !important;
  line-height: 1.02 !important;
  letter-spacing: 0.01em !important;
  margin: 0 0 0.45em 0 !important;
  text-transform: uppercase !important;
  text-shadow: 3px 3px 0 rgba(0,0,0,.0) !important;
}

.np-scope.np-style-motion-comic h2{
  font-family: var(--np-font-head) !important;
  font-size: var(--np-fs-h2) !important;
  line-height: 1.16 !important;
  margin: 1.35em 0 0.55em 0 !important;
  font-weight: 900 !important;
}

.np-scope.np-style-motion-comic h3{
  font-family: var(--np-font-head) !important;
  font-size: var(--np-fs-h3) !important;
  line-height: 1.22 !important;
  margin: 1.05em 0 0.45em 0 !important;
  font-weight: 950 !important;
}

/* Lists */
.np-scope.np-style-motion-comic ul,
.np-scope.np-style-motion-comic ol{
  margin: 0 0 1.1em 1.1em !important;
  padding: 0 !important;
  font-size: var(--np-fs-body) !important;
  line-height: var(--np-lh-body) !important;
  color: var(--np-ink-2) !important;
}

.np-scope.np-style-motion-comic li{ margin: 0.35em 0 !important; }

/* =========================================================
   2) CONTAINER + MEASURE
========================================================= */
.np-scope.np-style-motion-comic .np-article,
.np-scope.np-style-motion-comic .article,
.np-scope.np-style-motion-comic .post-content{
  max-width: var(--np-max) !important;
  margin: 0 auto !important;
  padding: calc(var(--np-gutter) * 1.2) var(--np-gutter) !important;
}

.np-scope.np-style-motion-comic .reading-box,
.np-scope.np-style-motion-comic .reading{
  max-width: var(--np-measure) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================================================
   3) HERO (comic splash panel)
========================================================= */
.np-scope.np-style-motion-comic .hero{
  position: relative !important;
  border: 3px solid var(--np-stroke) !important;
  border-radius: var(--np-radius-lg) !important;
  background: var(--np-surface) !important;
  overflow: hidden !important;
  padding: clamp(1.2rem, 1rem + 2vw, 2.35rem) !important;
  margin-bottom: calc(var(--np-block) * 1.1) !important;
  box-shadow: 10px 10px 0 rgba(17,17,17,.12) !important;
}

/* halftone burst */
.np-scope.np-style-motion-comic .hero::before{
  content: "" !important;
  position: absolute !important;
  inset: -40px !important;
  background:
    radial-gradient(circle at 15% 18%, rgba(255,45,85,.22), transparent 40%),
    radial-gradient(circle at 78% 28%, rgba(23,92,255,.20), transparent 45%),
    radial-gradient(circle at 48% 95%, rgba(0,184,122,.18), transparent 45%),
    radial-gradient(circle at 20% 30%, rgba(17,17,17,.12) 0 1px, transparent 2px) 0 0 / 10px 10px !important;
  opacity: .7 !important;
  pointer-events: none !important;
}

.np-scope.np-style-motion-comic .hero > *{ position: relative !important; z-index: 1 !important; }

.np-scope.np-style-motion-comic .hero .meta,
.np-scope.np-style-motion-comic .hero .post-meta{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.55rem !important;
  align-items: center !important;
  margin-bottom: 0.9rem !important;
  font-family: var(--np-font-ui) !important;
  font-weight: 900 !important;
  color: var(--np-muted) !important;
}

.np-scope.np-style-motion-comic .pill,
.np-scope.np-style-motion-comic .hero .read-time{
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  padding: 0.34rem 0.7rem !important;
  border-radius: 999px !important;
  border: 2px solid var(--np-stroke) !important;
  background: #fff !important;
  font-family: var(--np-font-ui) !important;
  font-size: 0.9rem !important;
  color: var(--np-ink) !important;
  box-shadow: 3px 3px 0 rgba(17,17,17,.10) !important;
}

/* =========================================================
   4) KEY TAKEAWAY CALLOUT (distinct surface)
========================================================= */
.np-scope.np-style-motion-comic .callout{
  max-width: var(--np-measure) !important;
  margin: calc(var(--np-block) * 1.05) auto !important;
  padding: 1.05rem 1.15rem !important;
  border-radius: var(--np-radius-lg) !important;
  border: 3px solid var(--np-stroke) !important;
  background: var(--np-sf-takeaway) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 8px 8px 0 rgba(17,17,17,.10) !important;
}

.np-scope.np-style-motion-comic .callout::before{
  content: "KEY TAKEAWAY" !important;
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  padding: 0.24rem 0.6rem !important;
  border-radius: 999px !important;
  border: 2px solid var(--np-stroke) !important;
  background: #fff !important;
  font-family: var(--np-font-ui) !important;
  font-weight: 950 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
}

.np-scope.np-style-motion-comic .callout > :first-child{
  margin-top: 1.6rem !important;
}

.np-scope.np-style-motion-comic .callout .callout-title{
  font-family: var(--np-font-ui) !important;
  font-weight: 950 !important;
  margin: 0 0 0.4rem 0 !important;
}

/* =========================================================
   5) INLINE CTA (Minor) (distinct surface)
========================================================= */
.np-scope.np-style-motion-comic .cta-minor{
  display: inline !important;
  padding: 0.14rem 0.24rem !important;
  border-radius: 10px !important;
  background: var(--np-sf-inline) !important;
  border: 2px solid var(--np-stroke) !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
}

/* =========================================================
   6) VISUAL BREAK / DIVIDER (distinct band)
========================================================= */
.np-scope.np-style-motion-comic hr{
  border: 0 !important;
  height: 26px !important;
  margin: calc(var(--np-block) * 1.15) 0 !important;
  background: transparent !important;
  position: relative !important;
}

.np-scope.np-style-motion-comic hr::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 999px !important;
  background: var(--np-sf-divider) !important;
  border: 3px solid var(--np-stroke) !important;
  box-shadow: 6px 6px 0 rgba(17,17,17,.10) !important;
}

.np-scope.np-style-motion-comic hr::after{
  content: "✦  ✦  ✦" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  text-align: center !important;
  font-family: var(--np-font-ui) !important;
  font-weight: 950 !important;
  letter-spacing: 0.35em !important;
  color: rgba(17,17,17,.65) !important;
}

/* =========================================================
   7) INTERNAL LINK CARD (distinct surface)
========================================================= */
.np-scope.np-style-motion-comic .internal-link-card{
  max-width: var(--np-measure) !important;
  margin: calc(var(--np-block) * 1.05) auto !important;
  border-radius: var(--np-radius-lg) !important;
  background: var(--np-sf-internal) !important;
  border: 3px solid var(--np-stroke) !important;
  box-shadow: 8px 8px 0 rgba(17,17,17,.10) !important;
  padding: 1.05rem 1.1rem !important;
}

.np-scope.np-style-motion-comic .internal-link-card .title{
  font-family: var(--np-font-head) !important;
  font-weight: 950 !important;
  margin: 0 0 0.2rem 0 !important;
}

.np-scope.np-style-motion-comic .internal-link-card .desc{
  margin: 0 0 0.7rem 0 !important;
  color: var(--np-muted) !important;
}

/* =========================================================
   8) LEAD MAGNET DOWNLOAD CARD (distinct surface)
========================================================= */
.np-scope.np-style-motion-comic .lead-magnet-card{
  background: var(--np-sf-lead) !important;
  border: 3px solid var(--np-stroke) !important;
}

/* =========================================================
   9) GLASS GRID + CARDS (become “panels”)
========================================================= */
.np-scope.np-style-motion-comic .glass-grid{
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: clamp(0.85rem, 0.6rem + 1.15vw, 1.2rem) !important;
  margin: calc(var(--np-block) * 1.1) auto !important;
  max-width: var(--np-max) !important;
}

.np-scope.np-style-motion-comic .glass-card{
  grid-column: span 6 !important;
  border: 3px solid var(--np-stroke) !important;
  border-radius: var(--np-radius) !important;
  background: #fff !important;
  padding: 1rem 1.05rem !important;
  box-shadow: 8px 8px 0 rgba(17,17,17,.10) !important;
  position: relative !important;
}

/* =========================================================
   10) CTA MAJOR (distinct surface)
========================================================= */
.np-scope.np-style-motion-comic .cta-major{
  max-width: var(--np-max) !important;
  margin: calc(var(--np-block) * 1.35) auto !important;
  padding: clamp(1.15rem, 0.95rem + 1.25vw, 2rem) !important;
  border-radius: var(--np-radius-lg) !important;
  border: 3px solid var(--np-stroke) !important;
  background: var(--np-sf-major) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 10px 10px 0 rgba(17,17,17,.12) !important;
}

/* Optional “SFX” badge if you add .sfx on CTA */
.np-scope.np-style-motion-comic .cta-major.sfx::before{
  content: "POW!" !important;
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  padding: 0.35rem 0.55rem !important;
  border-radius: 12px !important;
  border: 3px solid var(--np-stroke) !important;
  background: #fff !important;
  font-family: var(--np-font-display) !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.03em !important;
  transform: rotate(8deg) !important;
}

.np-scope.np-style-motion-comic .cta-major .cta-title{
  font-family: var(--np-font-head) !important;
  font-weight: 950 !important;
  font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.65rem) !important;
  margin: 0 0 0.35rem 0 !important;
}

.np-scope.np-style-motion-comic .cta-major .cta-sub{
  color: var(--np-muted) !important;
  margin: 0 0 0.95rem 0 !important;
}

.np-scope.np-style-motion-comic .cta-major .cta-button{
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.55rem !important;
  padding: 0.8rem 1.05rem !important;
  border-radius: 999px !important;
  border: 3px solid var(--np-stroke) !important;
  background: var(--np-accent) !important;
  color: #fff !important;
  font-family: var(--np-font-ui) !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  box-shadow: 5px 5px 0 rgba(17,17,17,.12) !important;
  transition: transform 160ms var(--np-ease) !important;
}

.np-scope.np-style-motion-comic .cta-major .cta-button:hover{
  transform: translateY(-2px) !important;
}

/* =========================================================
   11) PULL QUOTE = SPEECH BUBBLE (signature)
========================================================= */
.np-scope.np-style-motion-comic blockquote,
.np-scope.np-style-motion-comic .pull-quote{
  max-width: var(--np-measure) !important;
  margin: calc(var(--np-block) * 1.25) auto !important;
  padding: 1.1rem 1.2rem !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 3px solid var(--np-stroke) !important;
  box-shadow: 8px 8px 0 rgba(17,17,17,.10) !important;
  position: relative !important;
}

/* tail (default left) */
.np-scope.np-style-motion-comic blockquote::after,
.np-scope.np-style-motion-comic .pull-quote::after{
  content: "" !important;
  position: absolute !important;
  left: 44px !important;
  bottom: -16px !important;
  width: 24px !important;
  height: 24px !important;
  background: #fff !important;
  border-left: 3px solid var(--np-stroke) !important;
  border-bottom: 3px solid var(--np-stroke) !important;
  transform: rotate(45deg) !important;
}

/* right-tail variant toggled by JS: .is-right */
.np-scope.np-style-motion-comic blockquote.is-right::after,
.np-scope.np-style-motion-comic .pull-quote.is-right::after{
  left: auto !important;
  right: 44px !important;
}

.np-scope.np-style-motion-comic blockquote p,
.np-scope.np-style-motion-comic .pull-quote p{
  font-family: var(--np-font-head) !important;
  font-weight: 950 !important;
  font-size: clamp(1.15rem, 1.02rem + 0.65vw, 1.55rem) !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  color: var(--np-ink) !important;
}

.np-scope.np-style-motion-comic blockquote cite,
.np-scope.np-style-motion-comic .pull-quote cite{
  display: block !important;
  margin-top: 0.75rem !important;
  font-family: var(--np-font-ui) !important;
  font-weight: 900 !important;
  color: var(--np-muted) !important;
}

/* =========================================================
   12) STORY VIGNETTE (caption box style)
========================================================= */
.np-scope.np-style-motion-comic .story-vignette,
.np-scope.np-style-motion-comic .vignette{
  max-width: var(--np-measure) !important;
  margin: calc(var(--np-block) * 1.2) auto !important;
  padding: 1.1rem 1.2rem !important;
  border-radius: var(--np-radius-lg) !important;
  border: 3px solid var(--np-stroke) !important;
  background: #fff !important;
  box-shadow: 8px 8px 0 rgba(17,17,17,.10) !important;
  position: relative !important;
}

.np-scope.np-style-motion-comic .story-vignette::before,
.np-scope.np-style-motion-comic .vignette::before{
  content: "SCENE" !important;
  position: absolute !important;
  top: -14px !important;
  left: 16px !important;
  padding: 0.28rem 0.6rem !important;
  border-radius: 999px !important;
  border: 3px solid var(--np-stroke) !important;
  background: #fff !important;
  font-family: var(--np-font-display) !important;
  font-size: 1.05rem !important;
  letter-spacing: 0.02em !important;
}

/* =========================================================
   13) RELATED POSTS (distinct surface band)
========================================================= */
.np-scope.np-style-motion-comic .related-posts{
  max-width: var(--np-max) !important;
  margin: calc(var(--np-block) * 1.35) auto 0 auto !important;
  padding: clamp(1rem, 0.9rem + 1vw, 1.4rem) !important;
  border-radius: var(--np-radius-lg) !important;
  border: 3px solid var(--np-stroke) !important;
  background: var(--np-sf-related) !important;
  box-shadow: 10px 10px 0 rgba(17,17,17,.12) !important;
}

.np-scope.np-style-motion-comic .related-posts .cards{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

.np-scope.np-style-motion-comic .related-posts .card{
  border: 3px solid var(--np-stroke) !important;
  border-radius: var(--np-radius) !important;
  background: #fff !important;
  overflow: hidden !important;
  box-shadow: 8px 8px 0 rgba(17,17,17,.10) !important;
  transition: transform 210ms var(--np-ease) !important;
}

.np-scope.np-style-motion-comic .related-posts .card:hover{
  transform: translateY(-2px) rotate(-0.25deg) !important;
}

.np-scope.np-style-motion-comic .related-posts .card .title{
  font-family: var(--np-font-head) !important;
  font-weight: 950 !important;
  padding: 0.85rem 0.9rem 0.2rem 0.9rem !important;
  margin: 0 !important;
}

.np-scope.np-style-motion-comic .related-posts .card .desc{
  padding: 0 0.9rem 0.95rem 0.9rem !important;
  margin: 0 !important;
  color: var(--np-muted) !important;
}

/* =========================================================
   14) FOOTER CTA (distinct dark endcap)
========================================================= */
.np-scope.np-style-motion-comic .footer-cta{
  max-width: var(--np-max) !important;
  margin: calc(var(--np-block) * 1.35) auto 0 auto !important;
  padding: clamp(1.15rem, 0.95rem + 1.25vw, 2rem) !important;
  border-radius: var(--np-radius-lg) !important;
  border: 3px solid #ffffff !important;
  background: var(--np-sf-footer) !important;
  color: #ffffff !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 3px var(--np-stroke) inset !important;
}

.np-scope.np-style-motion-comic .footer-cta *{ color: #ffffff !important; }

.np-scope.np-style-motion-comic .footer-cta::before{
  content: "" !important;
  position: absolute !important;
  inset: -60px !important;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,45,85,.45), transparent 42%),
    radial-gradient(circle at 82% 35%, rgba(23,92,255,.40), transparent 48%),
    radial-gradient(circle at 55% 85%, rgba(0,184,122,.32), transparent 45%),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.18) 0 1px, transparent 2px) 0 0 / 11px 11px !important;
  opacity: .75 !important;
  pointer-events: none !important;
}

.np-scope.np-style-motion-comic .footer-cta > *{ position: relative !important; z-index: 1 !important; }

.np-scope.np-style-motion-comic .footer-cta .cta-title{
  font-family: var(--np-font-display) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  margin: 0 0 0.35rem 0 !important;
}

.np-scope.np-style-motion-comic .footer-cta .cta-sub{
  color: rgba(255,255,255,.82) !important;
}

.np-scope.np-style-motion-comic .footer-cta .cta-button{
  background: #ffffff !important;
  color: #0b0f1a !important;
  border: 3px solid var(--np-stroke) !important;
  box-shadow: 6px 6px 0 rgba(0,0,0,.25) !important;
}

/* =========================================================
   15) FAQ TOGGLES (NO BUTTON LOOK)
   Styles <details><summary> if present, as plain text with caret.
========================================================= */
.np-scope.np-style-motion-comic details{
  max-width: var(--np-measure) !important;
  margin: 0.9rem auto !important;
  border: 3px solid var(--np-stroke) !important;
  border-radius: var(--np-radius) !important;
  background: #fff !important;
  box-shadow: 8px 8px 0 rgba(17,17,17,.10) !important;
  overflow: hidden !important;
}

.np-scope.np-style-motion-comic summary{
  list-style: none !important;
  cursor: pointer !important;
  padding: 0.9rem 1rem !important;
  font-family: var(--np-font-head) !important;
  font-weight: 950 !important;
  color: var(--np-ink) !important;
  background: #fff !important;
}

.np-scope.np-style-motion-comic summary::-webkit-details-marker{ display: none !important; }

.np-scope.np-style-motion-comic summary::after{
  content: "▾" !important;
  float: right !important;
  font-family: var(--np-font-ui) !important;
  color: rgba(17,17,17,.75) !important;
  transform: translateY(1px) !important;
}

.np-scope.np-style-motion-comic details[open] summary::after{
  content: "▴" !important;
}

.np-scope.np-style-motion-comic details > :not(summary){
  padding: 0 1rem 1rem 1rem !important;
}

/* =========================================================
   16) REVEAL HOOKS (IO) + panel pop
========================================================= */
.np-scope.np-style-motion-comic .np-reveal{
  opacity: 0 !important;
  transform: translateY(12px) scale(0.99) !important;
  transition: opacity var(--np-dur) var(--np-ease), transform var(--np-dur) var(--np-ease) !important;
  will-change: opacity, transform !important;
}

.np-scope.np-style-motion-comic .np-reveal.is-visible{
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

@media (prefers-reduced-motion: reduce){
  .np-scope.np-style-motion-comic .np-reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================================================
   17) RESPONSIVE
========================================================= */
@media (max-width: 900px){
  .np-scope.np-style-motion-comic .glass-card{ grid-column: span 12 !important; }
  .np-scope.np-style-motion-comic .related-posts .cards{ grid-template-columns: 1fr !important; }
}

@media (max-width: 640px){
  .np-scope.np-style-motion-comic .hero{ padding: 1.15rem !important; }
  .np-scope.np-style-motion-comic blockquote,
  .np-scope.np-style-motion-comic .pull-quote{
    border-radius: 24px !important; /* less bubble on tiny screens */
  }
}