/*
Theme Name: Shadow To Power
Description: Shadow To Power by Anastasia — premium coaching brand.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 1.9.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shadow-to-power
Tags: full-site-editing, block-patterns, block-styles, wide-blocks
*/

/* === root === */

:root {
  --void:          #080605;
  --panel:         #0f0d0b;
  --crimson:       #740400;
  --crimson-hover: #9E0A06;
  --hero-from:     #6D0000;
  --hero-to:       #8B0000;
  --gold:          #D4C5B0;
  --accent:        #D4C5B0;
  --headline:      #F2EDE8;
  --sub:           #F2EDE8;
  --body:          #F2EDE8;
  --bone:          #F2EDE8;
  --white:         #FFFFFF;
  --border:        #2A2A2A;
  --font-head:     'Cormorant SC', Georgia, serif;
  --font-hero:     'Bebas Neue', Impact, sans-serif;
  --font-body:     'Questrial', 'Helvetica Neue', sans-serif;
  --font-label:    'Libre Baskerville', Georgia, serif;
  --ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --t:             0.35s var(--ease);
  --t-slow:        0.7s var(--ease);
  --section-pad:   7rem 3rem;
  --section-pad-sm:4rem 1.5rem;
}

/* === reset === */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--void);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--gold); color: var(--void); }
.wp-site-blocks { padding: 0 !important; }
.is-layout-flow > * { margin-block: 0 !important; }
.wp-block-post-content { font-family: var(--font-body); }
*, button, input, select, textarea, .wp-block-button__link, .wp-element-button {
  border-radius: 0 !important;
}

/* kill all warm/taupe leftovers */
.stp-sub, .stp-body { color: var(--body); }

/* === typography === */

.stp-label {
  font-family: 'DM Mono', monospace;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.6rem;
}

.stp-headline {
  font-family: var(--font-head);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.08;
  color: var(--headline);
  letter-spacing: 0.04em;
}

.stp-subhead {
  font-family: var(--font-label);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: var(--sub);
}

.stp-body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--body);
}

.stp-body p + p { margin-top: 1.4rem; }

.stp-gold-rule {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, var(--gold), transparent);
  opacity: 0.35;
  flex-shrink: 0;
}

.stp-gold-rule-full {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold) 50%, transparent);
  opacity: 0.4;
}

/* === layout === */

.stp-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.stp-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--section-pad);
}

.stp-inner--narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--section-pad);
}

.stp-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold) 50%, transparent);
  opacity: 0.35;
}

.stp-section + .stp-section > .stp-divider-top::before,
.stp-section-rule {
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold) 50%, transparent);
  opacity: 0.35;
  content: '';
}

/* === telegram community section === */

.stp-telegram {
  background: #3D0000 !important;
  width: 100%;
}

.stp-telegram * { background: transparent !important; }

.stp-telegram-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 4rem 2rem;
  text-align: center;
}

.stp-telegram-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: #D4C5B0 !important;
  display: block;
  margin-bottom: 1.25rem;
}

.stp-telegram-headline {
  font-family: var(--font-head) !important;
  font-style: italic !important;
  font-size: 2rem !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.02em !important;
  margin: 0 0 1rem !important;
}

/* community name — Cormorant SC italic white */
.stp-telegram-community-name {
  font-family: var(--font-head) !important;
  font-style: italic !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 0.75rem !important;
  margin-top: 0 !important;
}

.stp-telegram-body {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
  color: #FFFFFF !important;
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}

.stp-telegram-btn-wrap {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

/* === header === */

/* brand crown — replaces fixed header */
/* === brand crown — Cinzel Decorative floating logo === */

@keyframes stp-logo-float {
  from {
    transform: translateY(0px);
    text-shadow:
      0 0 18px rgba(255,255,255,0.55),
      0 0 35px rgba(212,197,176,0.55),
      0 0 70px rgba(212,197,176,0.2);
  }
  to {
    transform: translateY(-7px);
    text-shadow:
      0 0 28px rgba(255,255,255,0.75),
      0 0 55px rgba(212,197,176,0.7),
      0 0 100px rgba(212,197,176,0.3);
  }
}

.stp-brand-crown {
  width: 100%;
  padding: 2rem 2rem 1.25rem;
  background: #5A0000 !important;
  position: relative;
  z-index: 10;
  pointer-events: none;
  text-align: center;
}

.stp-brand-crown-text {
  font-family: 'Questrial', 'Helvetica Neue', sans-serif !important;
  font-size: clamp(1.2rem, 2.2vw, 1.8rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.4em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  display: inline-block;
}

.stp-brand-crown-text a,
.stp-brand-crown-text a:visited,
.stp-brand-crown-text a:link {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  text-decoration: none !important;
  pointer-events: auto;
  display: inline-block;
  animation: stp-logo-float 4s ease-in-out infinite alternate;
  text-shadow:
    0 0 20px rgba(212,197,176,0.8),
    0 0 40px rgba(212,197,176,0.4),
    0 0 80px rgba(212,197,176,0.2);
}

/* belt-and-suspenders: override any inherited dark text from section bg */
.stp-brand-crown * {
  color: #FFFFFF !important;
}

.stp-brand-crown-text a:hover {
  text-shadow:
    0 0 30px rgba(255,255,255,0.9),
    0 0 60px rgba(212,197,176,0.6),
    0 0 100px rgba(212,197,176,0.3);
}

/* === hero === */

.stp-hero {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(175deg, var(--hero-from) 0%, var(--hero-to) 60%, #5a0000 100%);
  position: relative;
  overflow: hidden;
}

/* grain overlay */
.stp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

/* DNA helix canvas layer */
#stp-helix {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.13;
}

.stp-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 2rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
}

.stp-hero-inner > * {
  width: 100%;
  box-sizing: border-box;
}

/* Centring cascade for headline — beats WP layout selectors */
.stp-hero-inner,
.stp-hero .wp-block-group.stp-hero-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---- word-reveal animation ---- */
.stp-hero-headline,
.stp-hero h1.stp-hero-headline,
.stp-hero .wp-block-heading.stp-hero-headline {
  font-family: var(--font-hero) !important;
  font-size: 4rem !important;
  font-weight: 400 !important;
  line-height: 1.0 !important;
  color: var(--white) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  display: block !important;
  position: static !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box;
  align-self: center;
}

@media (max-width: 860px) {
  .stp-hero-headline,
  .stp-hero h1.stp-hero-headline,
  .stp-hero .wp-block-heading.stp-hero-headline { white-space: normal !important; font-size: 2.2rem !important; }
}

/* each word is wrapped in a .stp-word span by JS */
.stp-hero-headline .stp-word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.16;
  padding-bottom: 0.04em;
}

.stp-hero-headline .stp-word {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  /* cinematic: 0.6s per word, cubic-bezier 0.4 0 0.2 1 */
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1),
              opacity    0.6s cubic-bezier(0.4,0,0.2,1);
}

.stp-hero-headline .stp-word.in {
  transform: translateY(0);
  opacity: 1;
}

/* subtitle words */
.stp-hero-subtext .stp-word {
  transition: transform 0.8s cubic-bezier(0.4,0,0.2,1),
              opacity    0.8s cubic-bezier(0.4,0,0.2,1);
}

/* bold emphasis words inside headline */
.stp-hero-headline strong,
.stp-hero-headline b {
  font-weight: 700;
  font-style: normal;
  text-transform: none;
}

/* the fluid distortion target */
#stp-zfgf-canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 3;
  display: none;
}

.stp-zfgf-wrap {
  position: relative;
  display: inline;
  cursor: pointer;
}

.stp-zfgf-text {
  display: inline;
  transition: opacity 0.1s;
}

.stp-zfgf-text.distorting {
  opacity: 0;
}

/* divider between caption and teaser */
.stp-hero-divider,
.wp-block-separator.stp-hero-divider {
  display: block !important;
  width: 120px !important;
  max-width: 120px !important;
  height: 1px !important;
  background: #D4C5B0 !important;
  opacity: 0.7 !important;
  margin: 1.5rem auto !important;
  border: none !important;
  border-top: none !important;
  flex-shrink: 0;
  align-self: center;
}

.wp-block-separator.stp-hero-divider::before,
.wp-block-separator.stp-hero-divider::after {
  display: none !important;
}

/* caption line under headline */
.stp-hero-caption {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.4;
  color: #FFFFFF;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 0;
  letter-spacing: 0.02em;
  background: transparent;
}

/* short paragraph below caption */
.stp-hero-subtext {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  color: #F2EDE8;
  max-width: 600px;
  text-align: center;
  margin-top: 0;
  margin-bottom: 1rem;
}

.stp-hero-subtext .stp-word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.3;
  padding-bottom: 0.05em;
}

.stp-hero-subtext .stp-word {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.85s var(--ease-out), opacity 0.85s var(--ease-out);
}

.stp-hero-subtext .stp-word.in {
  transform: translateY(0);
  opacity: 1;
}

.stp-hero-byline {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(242,237,232,0.7);
  max-width: 640px;
  border-left: 1px solid rgba(212,197,176,0.5);
  padding-left: 1.5rem;
  margin-bottom: 2.2rem;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}

/* === hero teaser block === */
.stp-hero-teaser {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0;
}

.stp-hero-teaser-rule-top,
.stp-hero-teaser-rule-bottom {
  display: block;
  width: 200px;
  height: 1px;
  background: #D4C5B0 !important;
  opacity: 0.45;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  color: transparent !important;
  margin: 0 auto;
}

.stp-hero-teaser-rule-top  { margin-bottom: 1.5rem; }
.stp-hero-teaser-rule-bottom { margin-top: 1.5rem; }

.stp-hero-teaser-label {
  font-family: 'DM Mono', monospace !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
  color: #FFFFFF !important;
  text-align: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
}

.stp-hero-teaser-quote {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  color: #FFFFFF !important;
  text-align: center !important;
  margin-top: 0.6rem !important;
  margin-bottom: 2rem !important;
  max-width: 560px;
  margin-left: auto !important;
  margin-right: auto !important;
  background: transparent !important;
}

/* === button glow pulse animation === */
@keyframes stp-btn-glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 8px rgba(255,255,255,0.3),
      0 0 20px rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.7) !important;
  }
  50% {
    box-shadow:
      0 0 20px rgba(255,255,255,0.7),
      0 0 40px rgba(255,255,255,0.3),
      0 0 60px rgba(255,255,255,0.15) !important;
    border-color: #FFFFFF !important;
  }
}

@keyframes stp-btn-entrance {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* teaser ghost button */
.stp-hero-teaser-btn .wp-block-button__link,
.stp-hero-teaser-btn .wp-block-button__link:visited {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255,255,255,0.7) !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 1rem 3rem !important;
  animation:
    stp-btn-entrance 0.6s ease-out 1.4s both,
    stp-btn-glow-pulse 2.5s ease-in-out 2s infinite !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.3s ease, color 0.3s ease !important;
}

.stp-hero-teaser-btn .wp-block-button__link:hover {
  background: #FFFFFF !important;
  color: #080605 !important;
  border-color: #FFFFFF !important;
  box-shadow:
    0 0 20px rgba(255,255,255,0.7),
    0 0 40px rgba(255,255,255,0.3),
    0 0 60px rgba(255,255,255,0.15) !important;
  animation: none !important;
  transform: none;
}

/* === offer payment button (cherry red glow, same as telegram) === */
.stp-offer-pay-btn .wp-block-button__link,
.stp-offer-pay-btn .wp-block-button__link:visited {
  background: #8B0000 !important;
  color: #FFFFFF !important;
  border: none !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 1.1rem 2.75rem !important;
  animation: stp-telegram-btn-glow 2.5s ease-in-out infinite !important;
  transition: background 0.3s ease, box-shadow 0.2s ease !important;
}

.stp-offer-pay-btn .wp-block-button__link:hover {
  background: #a80000 !important;
  color: #FFFFFF !important;
  box-shadow:
    0 0 20px rgba(139,0,0,0.9),
    0 0 50px rgba(139,0,0,0.5),
    0 0 80px rgba(139,0,0,0.2) !important;
  animation: none !important;
}

.wp-block-buttons:has(.stp-offer-pay-btn) {
  margin-top: 1.5rem !important;
}

/* === telegram button glow (cherry red) === */
@keyframes stp-telegram-btn-glow {
  0%, 100% {
    box-shadow:
      0 0 8px rgba(139,0,0,0.5),
      0 0 20px rgba(139,0,0,0.2) !important;
  }
  50% {
    box-shadow:
      0 0 20px rgba(139,0,0,0.9),
      0 0 40px rgba(139,0,0,0.5),
      0 0 60px rgba(139,0,0,0.2) !important;
  }
}

.stp-telegram-btn .wp-block-button__link,
.stp-telegram-btn .wp-block-button__link:visited {
  background: #8B0000 !important;
  color: #FFFFFF !important;
  border: none !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 1.1rem 2.75rem !important;
  animation: stp-telegram-btn-glow 2.5s ease-in-out infinite !important;
  transition: background 0.3s ease, box-shadow 0.2s ease !important;
}

.stp-telegram-btn .wp-block-button__link:hover {
  background: #a80000 !important;
  color: #FFFFFF !important;
  box-shadow:
    0 0 20px rgba(139,0,0,0.9),
    0 0 50px rgba(139,0,0,0.5),
    0 0 80px rgba(139,0,0,0.2) !important;
  animation: none !important;
}

.stp-hero-byline.in {
  opacity: 1;
  transform: translateY(0);
}

.stp-hero-cta-btn-wrap {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.stp-hero-cta-btn-wrap.in {
  opacity: 1;
  transform: translateY(0);
}

.stp-hero-scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 3rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stp-hero-scroll-line {
  width: 40px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
  animation: scrollPulse 2.5s ease-in-out infinite;
}

.stp-hero-scroll-hint span {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: rgba(242,237,232,0.45);
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.25; width: 28px; }
  50%       { opacity: 0.7;  width: 48px; }
}

/* === section-shared === */

.stp-section-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold) 50%, transparent);
  opacity: 0.3;
  display: block;
}

.stp-reveal {
  opacity: 1;
  transform: none;
}

.stp-reveal.is-hidden {
  opacity: 0;
  transform: translateY(28px);
}

.stp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.stp-reveal-d1.is-visible { transition-delay: 0.1s; }
.stp-reveal-d2.is-visible { transition-delay: 0.22s; }
.stp-reveal-d3.is-visible { transition-delay: 0.34s; }
.stp-reveal-d4.is-visible { transition-delay: 0.46s; }

/* === who === */

.stp-who {
  background: var(--void);
}

.stp-who-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--section-pad);
}

.stp-who-headline {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4.8vw, 3.2rem);
  font-weight: 700;
  line-height: 1.08;
  color: #8B0000;
  letter-spacing: 0.04em;
  margin-bottom: 1.2rem;
}

.stp-who-body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--body);
}

.stp-who-body .wp-block-paragraph + .wp-block-paragraph,
.stp-who-body p + p { margin-top: 1.5rem; }

/* Who — three-part layout */
.stp-who-part-1 {
  max-width: 720px;
  margin: 0 auto;
}

.stp-who-part-2 {
  max-width: 720px;
  margin: 2.5rem auto;
  padding-left: 3rem;
  border-left: 2px solid #8B0000;
}

.stp-who-part-2 p + p { margin-top: 1.5rem; }

.stp-who-part-3 {
  max-width: 720px;
  margin: 2.5rem auto 0;
  font-size: 1.15rem !important;
  line-height: 2 !important;
}

.stp-who-part-3 .wp-block-paragraph,
.stp-who-part-3 p {
  font-size: 1.15rem !important;
  line-height: 2 !important;
  margin-top: 1.5rem !important;
}

.stp-who-part-3 .wp-block-paragraph:first-child,
.stp-who-part-3 p:first-child { margin-top: 0 !important; }

.stp-who-part-3 .stp-who-declaration {
  font-size: 1.1rem !important;
  margin-top: 1.5rem !important;
  line-height: 1.85 !important;
}

/* === What Is Shadow (stp-wis) — card layout === */
.stp-wis {
  background: #FFFFFF !important;
}
.stp-wis * { background: transparent !important; }
.stp-wis .stp-label { color: #8B0000 !important; }

.stp-wis-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--section-pad);
}

.stp-wis-headline {
  font-family: var(--font-head) !important;
  font-style: italic !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #080605 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 1.5rem !important;
  text-align: center;
}

.stp-wis-body {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.9;
  color: #1A1A1A;
  max-width: 780px;
  margin: 0 auto;
}

.stp-wis-body .wp-block-paragraph + .wp-block-paragraph { margin-top: 1.5rem; }
.stp-wis-body p { color: #1A1A1A !important; }

/* tight connector paragraph before cards */
.stp-wis-lead-into-cards {
  margin-bottom: 0.5rem !important;
}

.stp-wis-bridge {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  color: #8B0000 !important;
  text-align: center !important;
  margin-top: 3rem !important;
  margin-bottom: 2rem !important;
  background: transparent !important;
}

.stp-wis-cards {
  max-width: 780px !important;
  margin: 0 auto !important;
}

.stp-wis-card {
  background: #8B0000 !important;
  padding: 2.5rem !important;
  margin-bottom: 1.5rem !important;
  border-radius: 0 !important;
}

.stp-wis-card * { background: transparent !important; }

.stp-wis-card-icon-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-bottom: 1rem !important;
}

.stp-wis-icon {
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  background: #D4C5B0 !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stp-wis-card-label {
  font-family: var(--font-body) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.stp-wis-card-body {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.85 !important;
  color: #FFFFFF !important;
  margin-bottom: 1.25rem !important;
  margin-top: 0 !important;
}

.stp-wis-card-reframe {
  font-family: var(--font-head) !important;
  font-style: italic !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  opacity: 0.9;
}

.stp-wis-closing {
  font-family: var(--font-head) !important;
  font-style: italic !important;
  font-size: 1.4rem !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #8B0000 !important;
  text-align: center !important;
  margin-top: 3rem !important;
  margin-bottom: 2rem !important;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  background: transparent !important;
}

.stp-wis-divider-bottom {
  opacity: 0.6;
  margin-top: 0;
}

/* === FAQ (stp-faq) === */
.stp-faq {
  background: #FFFFFF !important;
}
.stp-faq * { color: #080605 !important; background: transparent !important; }
.stp-faq .stp-label { color: #8B0000 !important; }
.stp-faq h2.stp-faq-headline { color: #080605 !important; }

.stp-faq-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--section-pad);
}

.stp-faq-headline {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4.8vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  color: #080605;
  letter-spacing: 0.04em;
  margin-bottom: 2.5rem;
}

.stp-faq-item {
  border-bottom: 1px solid #2A2A2A;
}

.stp-faq-item:first-of-type { border-top: 1px solid #2A2A2A; }

.stp-faq-q {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  color: #080605;
  padding: 1.2rem 3rem 1.2rem 0;
  cursor: pointer;
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  line-height: 1.4;
  transition: color 0.25s ease;
}

.stp-faq-q::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #8B0000;
  font-size: 1.4rem;
  font-weight: 300;
  transition: transform 0.4s ease;
  line-height: 1;
}

.stp-faq-item.open .stp-faq-q::after {
  transform: translateY(-50%) rotate(45deg);
}

.stp-faq-a {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.85;
  color: #333333;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding-bottom 0.4s ease;
  padding-bottom: 0;
}

.stp-faq-item.open .stp-faq-a {
  max-height: 600px;
  padding-bottom: 1.5rem;
}

.stp-faq-closing {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 1.3rem;
  color: #8B0000;
  text-align: center;
  display: block;
  margin-top: 2.5rem;
}

.stp-who-body p strong {
  color: var(--sub);
  font-weight: 500;
}

/* === section-backgrounds — alternating rhythm === */

/*
 * S2 — Who This Is For (formerly stp-who): WHITE
 * S3 — What Is Running Your Business (stp-mechanism): DARK VOID
 * S4 — The Shadow Mirror (stp-mirror): DARK VOID
 * S5 — The Offers (stp-offers): DEEP CHERRY #6D0000
 * S6 — Where To Start (stp-wts): DARK VOID
 * About: DARK VOID
 *
 * The mechanism section uses the texture image with dark overlay.
 */

/* === white-section text rules (applies to .stp-who, .stp-wis, .stp-faq) === */
.stp-white-section {
  background: #FFFFFF !important;
}
.stp-white-section * {
  color: #1A1A1A !important;
  background: transparent !important;
  border-color: #2A2A2A !important;
}
.stp-white-section .stp-label { color: #8B0000 !important; }
.stp-white-section h1,
.stp-white-section h2,
.stp-white-section h3,
.stp-white-section h4 { color: #080605 !important; }
.stp-white-section a,
.stp-white-section a:visited { color: #8B0000 !important; }

/* S2 — Who This Is For: white */
.stp-who {
  background: #FFFFFF !important;
}
.stp-who * { color: #1A1A1A !important; background: transparent !important; }
.stp-who .stp-who-cta-btn .wp-block-button__link,
.stp-who .stp-who-cta-btn .wp-block-button__link:visited {
  color: #FFFFFF !important;
  background: #8B0000 !important;
}
.stp-who .stp-who-cta-btn .wp-block-button__link:hover {
  color: #FFFFFF !important;
  background: #8B0000 !important;
}
.stp-who h2.stp-who-headline { color: #080605 !important; }
.stp-who .stp-label { color: #8B0000 !important; }
.stp-who .stp-who-declaration { color: #8B0000 !important; }
.stp-who .stp-who-closing-wrap {
  background: #080605 !important;
  margin-left: -3rem;
  margin-right: -3rem;
  padding-left: 3rem;
  padding-right: 3rem;
}
.stp-who .stp-who-closing-wrap * { background: transparent !important; }
.stp-who .stp-who-closing-end { color: #8B0000 !important; }
.stp-who .stp-who-closing-identity { color: #8B0000 !important; }
.stp-who .stp-who-inner,
.stp-who .stp-who-body { background: transparent !important; }

/* S3 — What Is Running Your Business: texture image, dark overlay */
.stp-mechanism {
  background-color: #080605 !important;
  background-image:
    linear-gradient(rgba(8,6,5,0.65), rgba(8,6,5,0.65)),
    url('http://localhost:8881/wp-content/uploads/2026/05/stp-bg-texture.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
}
.stp-mechanism * { color: #F2EDE8 !important; }
.stp-mechanism .stp-mechanism-headline { color: #8B0000 !important; }
.stp-mechanism::before, .stp-mechanism::after { opacity: 0.2 !important; }

/* S4 — Shadow Mirror: cherry red */
.stp-mirror {
  background: #8B0000 !important;
  background-image: none !important;
}
.stp-mirror * { color: #FFFFFF !important; }
.stp-mirror .stp-mirror-qnum { color: rgba(255,255,255,0.6) !important; }
.stp-mirror .stp-mirror-progress-fill { background: #FFFFFF !important; }
.stp-mirror .stp-mirror-progress { background: rgba(255,255,255,0.2) !important; }
.stp-mirror .stp-mirror-answer { color: #FFFFFF !important; background: transparent !important; border-color: rgba(255,255,255,0.5) !important; }
.stp-mirror .stp-mirror-answer:hover,
.stp-mirror .stp-mirror-answer.selected { background: rgba(255,255,255,0.15) !important; border-color: #FFFFFF !important; }

/* S5 — Offers: deep cherry */
.stp-offers {
  background: #6D0000 !important;
  background-image: none !important;
}
.stp-offers * { color: #FFFFFF !important; }
.stp-offers .stp-offer-label,
.stp-offers .stp-offer-level-num,
.stp-offers .stp-offer-includes-label,
.stp-offers .stp-label { color: var(--gold) !important; }
.stp-offers .stp-offer-headline { color: #FFFFFF !important; }
.stp-offers .stp-offer { background: rgba(0,0,0,0.22) !important; border-color: rgba(255,255,255,0.1) !important; }
.stp-offers .stp-offer:hover { background: rgba(0,0,0,0.38) !important; border-color: rgba(212,197,176,0.3) !important; }
.stp-offers .stp-offer::before { background: #D4C5B0 !important; }
.stp-offers .stp-offer-level { border-bottom-color: rgba(255,255,255,0.07) !important; }
.stp-offers .stp-offer-levels { border-top-color: rgba(255,255,255,0.1) !important; }
.stp-offers .stp-offer-includes li { border-bottom-color: rgba(255,255,255,0.06) !important; }
.stp-offers .stp-offer-includes li::before { background: #D4C5B0 !important; }
.stp-offers .stp-offer-label,
.stp-offers .stp-offer-level-num,
.stp-offers .stp-offer-includes-label,
.stp-offers .stp-label { color: #D4C5B0 !important; }

/* S6 — Where To Start: dark void */
.stp-wts {
  background: var(--void) !important;
  background-image: none !important;
}
.stp-wts .wp-block-group { background: transparent !important; }
.stp-wts * { color: var(--bone) !important; }
.stp-wts .stp-wts-headline { color: #8B0000 !important; }
.stp-wts .stp-wts-track-label { color: #D4C5B0 !important; }
.stp-wts .stp-wts-track { border-left-color: rgba(212,197,176,0.35) !important; }
.stp-wts .stp-wts-closing { color: var(--sub) !important; border-top-color: rgba(212,197,176,0.15) !important; }

/* About — white */
.stp-about { background: #FFFFFF !important; background-image: none !important; }
.stp-about * { color: #1A1A1A !important; background: transparent !important; }
.stp-about .stp-about-headline { color: #8B0000 !important; }
.stp-about .stp-label { color: #8B0000 !important; }

/* === shadow-mirror === */

.stp-mirror {
  position: relative;
}

.stp-mirror-invite {
  max-width: 700px;
  margin: 0 auto;
  padding: 6rem 3rem 4rem;
  text-align: center;
}

.stp-mirror-label {
  font-family: var(--font-head) !important;
  font-size: clamp(2.5rem, 5vw, 3.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
  color: #FFFFFF !important;
  margin-bottom: 0.5rem !important;
  display: block;
  line-height: 1.05 !important;
}

.stp-mirror-invite-headline {
  font-family: var(--font-head) !important;
  font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  line-height: 1.3 !important;
  color: rgba(255,255,255,0.85) !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 0.5rem !important;
}

.stp-mirror-invite-sub {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
  color: rgba(255,255,255,0.8) !important;
  margin-bottom: 2.5rem !important;
}

/* pull quote */
.stp-mirror-quote {
  max-width: 680px;
  margin: 0 auto;
  padding: 2rem 3rem;
  text-align: center;
  position: relative;
}

.stp-mirror-quote-rule-top,
.stp-mirror-quote-rule-bottom {
  display: block;
  height: 1px;
  background: rgba(255,255,255,0.3) !important;
  margin: 0 auto;
  width: 100%;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  color: transparent !important;
}

.stp-mirror-quote-rule-top { margin-bottom: 1.75rem; }
.stp-mirror-quote-rule-bottom { margin-top: 1.75rem; }

.stp-mirror-quote-text {
  font-family: var(--font-head) !important;
  font-style: italic !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
}

/* carousel */
#stp-mirror-carousel {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 3rem 6rem;
  position: relative;
  scroll-margin-top: 2rem;
}

.stp-mirror-slide {
  display: none;
  text-align: center;
  animation: mirrorSlideIn 0.45s var(--ease-out) both;
}

.stp-mirror-slide.active {
  display: block;
}

@keyframes mirrorSlideIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

.stp-mirror-qnum {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: var(--gold);
  display: block;
  text-align: left;
  margin-bottom: 1.25rem;
}

.stp-mirror-progress {
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.15);
  margin-bottom: 3rem;
  position: relative;
  overflow: hidden;
}

.stp-mirror-progress-fill {
  height: 100%;
  background: var(--gold);
  transition: width 0.4s var(--ease-out);
}

.stp-mirror-question {
  font-family: var(--font-body) !important;
  font-size: clamp(1rem, 1.8vw, 1.3rem) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 3rem;
  min-height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.stp-mirror-answers {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}

.stp-mirror-answer {
  font-family: var(--font-label);
  font-style: italic;
  font-size: 0.88rem;
  letter-spacing: 0.14em;
  color: #FFFFFF;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 0;
  padding: 0.9rem 2.75rem;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.stp-mirror-answer:hover,
.stp-mirror-answer.selected {
  background: #8B0000;
  border-color: #8B0000;
  color: #FFFFFF;
  box-shadow: 0 0 12px rgba(139,0,0,0.6), 0 0 30px rgba(139,0,0,0.3);
}

.stp-mirror-next {
  font-family: var(--font-label);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  color: #FFFFFF;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  pointer-events: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.stp-mirror-next.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* result screen */
.stp-mirror-result {
  display: none;
  text-align: center;
  padding: 2rem 0 4rem;
  animation: mirrorResultIn 0.6s ease both;
}

.stp-mirror-result.active {
  display: block;
}

@keyframes mirrorResultIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stp-mirror-result-headline {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 400;
  color: #FFFFFF !important;
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.stp-mirror-result-body {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.82) !important;
  max-width: 560px;
  margin: 0 auto 2.5rem;
}

.stp-mirror-result-cta {
  display: inline-block;
  font-family: var(--font-label);
  font-style: italic;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  color: #FFFFFF;
  background: #8B0000;
  border: none;
  border-radius: 0;
  padding: 1.1rem 2.75rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 0 12px rgba(139,0,0,0.6), 0 0 30px rgba(139,0,0,0.3);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.stp-mirror-result-cta:hover {
  background: #a80000;
  box-shadow: 0 0 20px rgba(139,0,0,0.9), 0 0 50px rgba(139,0,0,0.5);
}

/* === who-extended === */

.stp-who-body .wp-block-paragraph {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--body);
  margin-bottom: 1.6rem;
}

.stp-who-body .wp-block-paragraph + .wp-block-paragraph {
  margin-top: 0;
}

.stp-who-declaration {
  font-family: var(--font-body) !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  font-style: italic !important;
  line-height: 1.85 !important;
  color: #8B0000 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: block;
}

.stp-who-closing-wrap {
  margin-top: 3.5rem;
  padding-top: 3rem;
  padding-bottom: 4.5rem;
  border-top: 1px solid rgba(212,197,176,0.18);
  text-align: center;
}

.stp-who-closing-identity {
  font-family: var(--font-body) !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  font-style: italic !important;
  line-height: 1.8 !important;
  color: #8B0000 !important;
  letter-spacing: 0 !important;
  margin-bottom: 1rem !important;
  display: block;
}

.stp-who-closing-end {
  font-family: var(--font-body) !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  font-style: italic !important;
  line-height: 1.8 !important;
  color: #8B0000 !important;
  letter-spacing: 0 !important;
  display: block;
}

/* === mechanism === */

.stp-mechanism {
  background: var(--panel);
  position: relative;
}

.stp-mechanism::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold) 50%, transparent);
  opacity: 0.3;
}

.stp-mechanism::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold) 50%, transparent);
  opacity: 0.3;
}

.stp-mechanism-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--section-pad);
}

.stp-mechanism-headline {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4.8vw, 3.2rem);
  font-weight: 700;
  line-height: 1.08;
  color: #8B0000;
  letter-spacing: 0.04em;
  margin-bottom: 1.2rem;
}

/* === offers === */

.stp-offers {
  background: var(--void);
}

.stp-offers-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--section-pad);
}

.stp-offers-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.5rem;
}

.stp-offer {
  background: var(--panel);
  padding: 3.5rem;
  border: 1px solid rgba(212,197,176,0.1);
  position: relative;
  transition: border-color var(--t);
}

.stp-offer:hover {
  border-color: rgba(212,197,176,0.25);
}

.stp-offer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--crimson);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}

.stp-offer:hover::before {
  transform: scaleX(1);
}

.stp-offer + .stp-offer {
  margin-top: 1.5px;
}

.stp-offer-label {
  font-family: var(--font-label);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  display: block;
  margin-bottom: 1.25rem;
}

.stp-offer-headline {
  font-family: var(--font-head);
  font-size: clamp(1.85rem, 3.2vw, 2.8rem);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.08;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

.stp-offer-subhead {
  font-family: var(--font-label);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--sub);
  line-height: 1.5;
  margin-bottom: 2rem;
}

.stp-offer-body {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--body);
}

.stp-offer-body p + p { margin-top: 1.25rem; }

.stp-offer-levels {
  margin: 2rem 0;
  border-top: 1px solid rgba(212,197,176,0.15);
}

.stp-offer-level {
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(212,197,176,0.1);
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 1.25rem !important;
  align-items: flex-start !important;
}

.stp-offer-level > .wp-block-paragraph:first-child,
.stp-offer-level > .stp-offer-level-num {
  flex-shrink: 0;
  width: 3.5rem;
}

.stp-offer-level-num {
  font-family: var(--font-label);
  font-style: italic;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  padding-top: 0.2rem;
  flex-shrink: 0;
  width: 3.5rem;
}

.stp-offer-level-label {
  font-family: var(--font-label);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--sub);
  margin-bottom: 0.4rem;
  display: block;
}

.stp-offer-level-text {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--body);
}

.stp-offer-includes {
  margin: 2rem 0;
  border-top: 1px solid rgba(212,197,176,0.15);
}

.stp-offer-includes-label {
  font-family: var(--font-label);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin: 1.25rem 0 0.75rem;
  display: block;
}

.stp-offer-includes ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stp-offer-includes li {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--body);
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}

.stp-offer-includes li::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
  margin-top: 0.8rem;
}

.stp-offer-price {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400;
  color: var(--headline);
  margin: 1.75rem 0 0.5rem;
}

.stp-offer-price-note {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--body);
  margin-bottom: 1.75rem;
  font-style: italic;
}

.stp-offer-cta {
  display: inline-block;
  font-family: var(--font-label);
  font-style: italic;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--void);
  background: var(--gold);
  border: none;
  border-radius: 0;
  padding: 1rem 2.5rem;
  text-decoration: none;
  transition: background var(--t), transform var(--t);
}

.stp-offer-cta:hover {
  background: #e0bc5e;
  color: var(--void);
  transform: translateY(-1px);
}

.stp-offer-note {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--body);
  opacity: 0.7;
  margin-top: 1rem;
  display: block;
}

/* === where-to-start === */

.stp-wts {
  background: var(--panel);
  position: relative;
}

.stp-wts::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold) 50%, transparent);
  opacity: 0.3;
}

.stp-wts-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--section-pad);
}

.stp-wts-headline {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #8B0000;
  line-height: 1.1;
  letter-spacing: 0.04em;
  margin-bottom: 0.8rem;
}

.stp-wts-track {
  padding: 2rem 0 2rem 1.5rem;
  border-left: 1px solid rgba(212,197,176,0.3);
  margin-bottom: 0;
}

.stp-wts-track + .stp-wts-track {
  margin-top: 1px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

.stp-wts-track-label {
  font-family: var(--font-label);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  display: block;
  margin-bottom: 0.5rem;
}

.stp-wts-track-text {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--body);
}

.stp-wts-closing {
  font-family: var(--font-label);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-style: italic;
  color: var(--sub);
  line-height: 1.6;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(212,197,176,0.15);
}

/* === reels row === */

.stp-reels {
  background: var(--void);
}

.stp-reels-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem 2rem 6rem;
}

.stp-reels-label {
  color: #D4C5B0 !important;
  margin-bottom: 2.5rem !important;
}

.stp-reels-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 1.5rem !important;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 100%;
}

.stp-reel-box {
  flex: 1 1 0;
  min-width: 0;
  max-width: 340px;
  background: #0f0d0b;
  border: 1px solid rgba(212,197,176,0.12);
  overflow: hidden;
  position: relative;
}

/* constrain the Instagram blockquote inside the box */
.stp-reel-box .instagram-media {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* placeholder boxes */
.stp-reel-placeholder {
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(212,197,176,0.2);
}

.stp-reel-ph-inner {
  text-align: center;
  padding: 2rem;
}

.stp-reel-ph-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(212,197,176,0.4);
  display: block;
}

@media (max-width: 768px) {
  .stp-reels-row {
    flex-direction: column !important;
    align-items: center !important;
  }
  .stp-reel-box {
    max-width: 100%;
    width: 100%;
  }
}

/* === interstitial break === */
.stp-interstitial {
  background: #1A0A0A;
  width: 100%;
}

.stp-interstitial-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 5rem 3rem;
  text-align: center;
}

.stp-interstitial-rule-top,
.stp-interstitial-rule-bottom {
  display: block;
  height: 1px;
  background: #D4C5B0 !important;
  opacity: 0.35;
  font-size: 0 !important;
  line-height: 0 !important;
  padding: 0 !important;
  margin: 0 auto;
  width: 100%;
  color: transparent !important;
}

.stp-interstitial-rule-top { margin-bottom: 2.5rem; }
.stp-interstitial-rule-bottom { margin-top: 2.5rem; }

.stp-interstitial-quote {
  font-family: var(--font-head) !important;
  font-style: italic !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #FFFFFF !important;
  letter-spacing: 0.02em !important;
  margin: 0 0 1.25rem !important;
  background: transparent !important;
}

@media (max-width: 860px) {
  .stp-interstitial-quote { font-size: 1rem !important; }
}

.stp-interstitial-attr {
  font-family: 'DM Mono', monospace !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: #D4C5B0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* === about === */

.stp-about {
  background: #FFFFFF;
  position: relative;
}

.stp-about::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold) 50%, transparent);
  opacity: 0.3;
}

.stp-about-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--section-pad);
}

.stp-about-headline {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4.8vw, 3.2rem);
  font-weight: 700;
  color: #8B0000;
  line-height: 1.08;
  letter-spacing: 0.04em;
  margin-bottom: 0.8rem;
}

.stp-about-body {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.85;
  color: #1A1A1A;
}

.stp-about-body p + p { margin-top: 1.4rem; }

/* float-wrap about layout */
.stp-about-float-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--section-pad);
}

figure.stp-about-float-img,
.stp-about-float-img {
  float: right !important;
  width: 42% !important;
  margin: 0.5rem 0 2.5rem 3rem !important;
  shape-outside: border-box;
  line-height: 0;
  display: block;
}

figure.stp-about-float-img img,
.stp-about-float-img img {
  width: 100% !important;
  height: auto;
  display: block;
  border-radius: 0 !important;
  filter: contrast(1.04) brightness(0.97);
}

.stp-about-float-body {
  /* no overflow:hidden — that would create a new BFC and stop text wrapping around the float */
  display: block;
  max-width: 100% !important;
}

.stp-about-float-body > * {
  max-width: 100% !important;
}

.stp-about-float-body .wp-block-paragraph + .wp-block-paragraph {
  margin-top: 1.4rem;
}

/* clearfix after float */
.stp-about-float-wrap::after {
  content: '';
  display: table;
  clear: both;
}

.stp-who-body .wp-block-paragraph + .wp-block-paragraph,
.stp-about-body .wp-block-paragraph + .wp-block-paragraph,
.stp-mechanism-inner .wp-block-paragraph + .wp-block-paragraph {
  margin-top: 1.4rem;
}

/* === footer === */

.stp-footer {
  background: var(--void);
  border-top: 4px solid #3D0000;
  padding: 2.5rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.stp-footer-brand {
  font-family: var(--font-head);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--sub);
  text-decoration: none;
}

.stp-footer-tagline {
  font-family: var(--font-pull);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--body);
  opacity: 0.7;
}

.stp-footer-ig {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  transition: opacity var(--t);
}

.stp-footer-ig:hover { opacity: 0.6; }

.stp-footer-ig-handle {
  font-family: var(--font-label);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--gold);
}

/* === inner-containers === */

.stp-who-inner,
.stp-mechanism-inner,
.stp-wts-inner,
.stp-about-inner {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: var(--section-pad) !important;
  width: 100%;
}

.stp-offers-inner {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: var(--section-pad) !important;
  width: 100%;
}

.stp-offers-inner > * {
  max-width: 100% !important;
}

.stp-offer-levels,
.stp-offer-includes {
  max-width: 100% !important;
  width: 100%;
}

.stp-offer-level > .wp-block-group {
  flex: 1;
  max-width: 100% !important;
}

/* === buttons === */

/* shared glow mixin values */
--btn-glow:       0 0 12px rgba(139,0,0,0.6), 0 0 30px rgba(139,0,0,0.3), 0 0 60px rgba(139,0,0,0.15);
--btn-glow-hover: 0 0 20px rgba(139,0,0,0.9), 0 0 50px rgba(139,0,0,0.5), 0 0 90px rgba(139,0,0,0.2);

.stp-hero-cta-btn .wp-block-button__link,
.stp-offer-cta .wp-block-button__link,
.wp-block-button__link,
.wp-element-button {
  font-family: var(--font-label) !important;
  font-style: italic !important;
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  color: #FFFFFF !important;
  background: #8B0000 !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 1.1rem 2.75rem !important;
  text-decoration: none !important;
  box-shadow: 0 0 12px rgba(139,0,0,0.6), 0 0 30px rgba(139,0,0,0.3), 0 0 60px rgba(139,0,0,0.15) !important;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}

.stp-hero-cta-btn .wp-block-button__link:hover,
.stp-offer-cta .wp-block-button__link:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
  background: #a80000 !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 20px rgba(139,0,0,0.9), 0 0 50px rgba(139,0,0,0.5), 0 0 90px rgba(139,0,0,0.2) !important;
  transform: translateY(-2px);
}

/* Ghost button — Mirror section only */
.stp-mirror-cta-btn .wp-block-button__link,
.stp-mirror-cta-btn .wp-block-button__link:visited {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 1px solid #FFFFFF !important;
  box-shadow: none !important;
}
.stp-mirror-cta-btn .wp-block-button__link:hover {
  background: #FFFFFF !important;
  color: #8B0000 !important;
  border-color: #FFFFFF !important;
  box-shadow: none !important;
  transform: translateY(-2px);
}

/* Solid red glow button — Who section CTA */
.stp-who-cta-btn .wp-block-button__link,
.stp-who-cta-btn .wp-block-button__link:visited {
  background: #8B0000 !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 0 12px rgba(139,0,0,0.6), 0 0 30px rgba(139,0,0,0.3), 0 0 60px rgba(139,0,0,0.15) !important;
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}
.stp-who-cta-btn .wp-block-button__link:hover {
  background: #8B0000 !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 0 20px rgba(139,0,0,0.9), 0 0 50px rgba(139,0,0,0.5), 0 0 90px rgba(139,0,0,0.2) !important;
  transform: translateY(-2px);
}

.stp-who-cta-wrap {
  margin-top: 2.5rem;
  text-align: left;
}

.stp-section-rule .wp-block-group {
  padding: 0 !important;
  margin: 0 !important;
}

.stp-section-rule {
  height: 1px !important;
  padding: 0 !important;
  background: linear-gradient(to right, transparent, var(--accent) 50%, transparent) !important;
  opacity: 0.3;
}

/* === animations === */

/* hero text reveal: JS-driven word-split. CSS defines final state. */
/* scroll-reveal for sections below hero */
@keyframes sectionFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === responsive === */

@media (max-width: 860px) {
  :root { --section-pad: 4.5rem 1.75rem; }
  .stp-header { padding: 1rem 1.5rem; }
  .stp-header-nav { display: none; }
  .stp-hero-inner { padding: 2rem 1.75rem 3rem; }
  .stp-hero-caption { font-size: 0.85rem; }
  .stp-hero-teaser { margin-top: 2rem; }
  .stp-offer { padding: 2.25rem 1.5rem; }
  .stp-footer { flex-direction: column; text-align: center; padding: 2rem 1.5rem; }
  .stp-footer-tagline { display: none; }
  .stp-about-float-img {
    float: none;
    width: 100%;
    margin: 0 0 2rem 0;
  }
  .stp-who .stp-who-closing-wrap {
    margin-left: -1.75rem;
    margin-right: -1.75rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}

@media (max-width: 520px) {
  .stp-hero-headline { font-size: 2rem; }
  .stp-offer-level { grid-template-columns: 1fr; }
  .stp-offer-level-num { font-size: 0.55rem; }
  .stp-who-part-2 { padding-left: 1.25rem; }
}

/* === hamburger nav === */

.stp-nav-toggle {
  position: fixed;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 1000;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: filter 0.3s ease;
}

.stp-nav-toggle:hover {
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.3));
}

.stp-nav-bar {
  display: block;
  width: 26px;
  height: 2px;
  background: #FFFFFF;
  transition: transform 0.35s ease, opacity 0.35s ease;
  transform-origin: center;
}

.stp-nav-toggle.open .stp-nav-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.stp-nav-toggle.open .stp-nav-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.stp-nav-toggle.open .stp-nav-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.stp-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(8,6,5,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.stp-nav-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.stp-nav-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 100%;
  background: #1A0000;
  display: flex;
  flex-direction: column;
  padding: 5rem 2.5rem 3rem;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
}

.stp-nav-overlay.open .stp-nav-drawer {
  transform: translateX(0);
}

.stp-nav-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: color 0.25s ease;
}

.stp-nav-close:hover { color: #8B0000; }

.stp-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.stp-nav-link {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #FFFFFF !important;
  text-decoration: none;
  display: block;
  padding: 0.55rem 0;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: color 0.25s ease;
}

.stp-nav-link:hover { color: #8B0000 !important; }

@media (max-width: 768px) {
  .stp-nav-drawer {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .stp-reveal.is-hidden { opacity: 1 !important; transform: none !important; }
  .stp-word { transform: none !important; opacity: 1 !important; transition: none !important; }
  .stp-hero-byline, .stp-hero-cta-btn-wrap { opacity: 1 !important; transform: none !important; }
  #stp-helix { display: none !important; }
  #stp-zfgf-target { filter: none !important; }
  .stp-brand-crown-text a {
    animation: none !important;
    transform: none !important;
    text-shadow: 0 0 20px rgba(255,255,255,0.5), 0 0 40px rgba(212,197,176,0.3) !important;
  }
  .stp-hero-teaser-btn .wp-block-button__link,
  .stp-telegram-btn .wp-block-button__link {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* scroll-anim: everything visible, no clip-path, no transform */
  [style*='clip-path'] { clip-path: none !important; }
  [style*='translateY'] { transform: none !important; }
  [style*='scale'] { transform: none !important; }
  [style*='opacity: 0'] { opacity: 1 !important; }
}