:root{
  --bg:#050b16;
  --bg2:#081225;
  --bg3:#0b1630;
  --gold:#e1c37d;
  --gold-soft:#f2dfb8;
  --ivory:#f3ece0;
  --line:rgba(225,195,125,.26);
  --panel:rgba(7,12,24,.72);
  --panel-strong:rgba(8,13,26,.86);
  --shadow:0 18px 46px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ivory)}
body{
  font-family: Georgia, "Times New Roman", serif;
  line-height:1.6;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button,input{font:inherit}
.container{width:min(1320px, calc(100% - 52px));margin:0 auto}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Section 1 */
.intro-hero{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(5,10,20,.86) 0%, rgba(5,10,20,.58) 18%, rgba(5,10,20,.22) 42%, rgba(5,10,20,.10) 100%),
    url('assets/hero-bg.png') center center / cover no-repeat;
}
.hero-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(38% 44% at 18% 42%, rgba(255,232,184,.05), rgba(255,232,184,0) 72%),
    radial-gradient(28% 22% at 66% 18%, rgba(255,232,184,.04), rgba(255,232,184,0) 76%);
}
.intro-shell{position:relative;min-height:100vh;z-index:1}
.intro-topbar{
  display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  padding-top:24px;
}
.brand-title{
  color:var(--gold-soft);
  font-size:1.42rem;
  letter-spacing:.02em;
}
.brand-byline{
  color:var(--gold);
  font-size:.82rem;
  letter-spacing:.15em;
  margin-top:4px;
}
.intro-nav{
  display:flex;gap:24px;align-items:center;flex-wrap:wrap;
  color:var(--gold-soft);
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.menu-mark{
  border:none;background:transparent;color:var(--gold-soft);font-size:1.1rem;cursor:pointer
}
.intro-copy{
  max-width:540px;
  padding-top:128px;
  transform:translate(-8px, 22px);
}
.ornament{
  display:flex;align-items:center;gap:16px;max-width:510px;margin:0 0 18px;
}
.ornament-bottom{margin:18px 0 22px}
.line{height:1px;flex:1;background:linear-gradient(90deg, rgba(225,195,125,0), rgba(225,195,125,.94), rgba(225,195,125,0))}
.star{color:var(--gold);font-size:1rem}
.intro-copy h1{
  margin:0;
  color:var(--gold);
  font-size:clamp(3rem, 5.6vw, 5rem);
  line-height:1.19;
  letter-spacing:.05em;
  max-width:12ch;
  text-shadow:0 2px 16px rgba(0,0,0,.36);
}
.intro-copy p{
  margin:0 0 22px;
  color:var(--ivory);
  font-size:clamp(1.25rem, 1.45vw, 1.62rem);
  line-height:1.86;
  letter-spacing:.03em;
  max-width:26ch;
}
.primary-button,.gold-button,.outline-button,.secondary-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:300px;padding:16px 24px;border-radius:2px;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:.95rem;
}
.primary-button,.gold-button{
  background:linear-gradient(180deg, rgba(227,194,124,.24), rgba(227,194,124,.12));
  color:var(--gold-soft);
  border:1px solid rgba(227,194,124,.72);
  box-shadow:inset 0 0 0 1px rgba(255,231,183,.08), var(--shadow);
}
.outline-button,.secondary-cta{
  background:rgba(10,16,30,.22);
  color:var(--gold-soft);
  border:1px solid rgba(227,194,124,.52);
}
.button-row,.sub-cta-row{display:flex;gap:14px;flex-wrap:wrap}
.intro-follow{
  position:absolute;left:0;bottom:18px;display:flex;gap:14px;align-items:center;
  color:var(--gold-soft);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
}
.follow-icons{display:flex;gap:12px;align-items:center;font-size:1.02rem}

/* Section 2 */
.main-home{
  background:
    linear-gradient(180deg, #060d1a 0%, #060c17 100%);
  border-top:1px solid rgba(255,255,255,.04);
}
.main-header{
  position:sticky;top:0;z-index:8;
  background:rgba(5,10,20,.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.main-header-inner{
  display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 0;
}
.main-brand{display:flex;gap:12px;align-items:center;color:var(--gold-soft)}
.brand-emblem{font-size:1.35rem;color:var(--gold)}
.main-brand-title{font-size:1.2rem;letter-spacing:.02em}
.main-brand-byline{font-size:.78rem;letter-spacing:.12em;color:var(--gold)}
.main-nav{
  display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  color:var(--gold-soft);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
}
.join-link{
  padding:11px 16px;border:1px solid rgba(227,194,124,.62);
  background:linear-gradient(180deg, rgba(227,194,124,.22), rgba(227,194,124,.12));
}
.main-hero{
  display:grid;grid-template-columns:1fr 1.15fr;gap:0;
  min-height:680px;
  margin-top:22px;
  background:
    linear-gradient(90deg, rgba(6,10,20,.92) 0%, rgba(6,10,20,.78) 34%, rgba(6,10,20,.20) 52%, rgba(6,10,20,.06) 100%);
  border:1px solid rgba(227,194,124,.16);
  box-shadow:var(--shadow);
}
.main-hero-copy{
  padding:52px 48px 44px;
}
.main-hero-copy h2{
  margin:0 0 12px;
  color:var(--gold-soft);
  font-size:clamp(3rem, 5vw, 4.5rem);
  line-height:1.02;
  letter-spacing:.02em;
}
.main-tagline{
  color:#e8d7af;
  font-size:clamp(1.08rem, 1.45vw, 1.45rem);
  font-style:italic;
  max-width:22ch;
  margin-bottom:18px;
}
.tiny-divider{
  width:320px;max-width:100%;height:1px;
  background:linear-gradient(90deg, rgba(227,194,124,.94), rgba(227,194,124,.22), rgba(227,194,124,0));
  margin:14px 0 18px;
}
.main-description{
  color:#efe7d6;
  font-size:1.13rem;
  line-height:1.9;
  max-width:28ch;
  margin-bottom:24px;
}
.main-hero-visual{
  position:relative;
  background:
    radial-gradient(50% 44% at 62% 28%, rgba(255,222,170,.18), rgba(255,222,170,0) 68%),
    linear-gradient(180deg, rgba(8,13,25,.12), rgba(8,13,25,.24)),
    url('assets/hero-bg.png') center center / cover no-repeat;
}
.main-hero-visual::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(58% 66% at 60% 44%, rgba(255,228,182,.10), rgba(255,228,182,0) 74%);
}

/* Shared body */
.tri-band,
.why-story,
.explore-world,
.conversion-row,
.shop-grid{
  margin-top:28px;
}
.tri-band{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;border:1px solid rgba(227,194,124,.18);background:rgba(8,13,26,.68);
}
.tri-card{
  display:flex;gap:16px;align-items:flex-start;padding:24px 22px;
  border-right:1px solid rgba(227,194,124,.14);
}
.tri-card:last-child{border-right:none}
.icon-box{
  width:52px;height:52px;border:1px solid rgba(227,194,124,.36);
  display:grid;place-items:center;color:var(--gold);font-size:1.45rem;flex:0 0 auto
}
.tri-card h3,.feature-panel h3,.world-box h3,.conversion-card h3,.product-card h3{
  margin:0 0 8px;color:var(--gold-soft);font-size:1.25rem;letter-spacing:.01em
}
.tri-card p,.feature-panel p,.world-box p,.conversion-card p,.product-card p,.footer-note p{
  margin:0;color:#efe7d6;line-height:1.78;font-size:1rem
}
.section-heading{
  margin:34px 0 18px;
  text-align:center;
  color:var(--gold);
  font-size:1.02rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  position:relative;
}
.section-heading::before,.section-heading::after{
  content:"";position:absolute;top:50%;width:24%;height:1px;background:linear-gradient(90deg, rgba(227,194,124,0), rgba(227,194,124,.85));
}
.section-heading::before{left:0}
.section-heading::after{right:0;transform:scaleX(-1)}
.three-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature-panel,.conversion-card,.product-card,.world-box{
  background:var(--panel);border:1px solid rgba(227,194,124,.18);box-shadow:var(--shadow)
}
.feature-panel{
  display:grid;grid-template-columns:140px 1fr;gap:18px;padding:18px
}
.feature-panel-highlight{border-color:rgba(227,194,124,.38)}
.feature-thumb,.world-thumb,.product-thumb{
  min-height:138px;border:1px solid rgba(227,194,124,.16);
  background:
    linear-gradient(180deg, rgba(255,230,176,.10), rgba(255,230,176,.02)),
    url('assets/hero-bg.png') center center / cover no-repeat;
}
/* world card replacement */
.glow-a{
  background:
    linear-gradient(180deg, rgba(255,230,176,.08), rgba(255,230,176,.01)),
    url('assets/feature-world.png') center center / cover no-repeat !important;
}
.glow-b{background-position:50% center}
.glow-c{background-position:82% center}
.six-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.world-box{padding:14px}
.world-thumb{min-height:118px;margin-bottom:12px}
.world-thumb.thumb-1{
  background:
    linear-gradient(180deg, rgba(255,230,176,.08), rgba(255,230,176,.01)),
    url('assets/world-episodes.png') center center / cover no-repeat !important;
}
.world-thumb.thumb-2{
  background:
    linear-gradient(180deg, rgba(255,230,176,.08), rgba(255,230,176,.01)),
    url('assets/world-characters.png') center center / cover no-repeat !important;
}
.world-thumb.thumb-3{
  background:
    linear-gradient(180deg, rgba(255,230,176,.08), rgba(255,230,176,.01)),
    url('assets/world-archive.png') center center / cover no-repeat !important;
}
.world-thumb.thumb-4{
  background:
    linear-gradient(180deg, rgba(255,230,176,.08), rgba(255,230,176,.01)),
    url('assets/world-factions.png') center center / cover no-repeat !important;
}
.world-thumb.thumb-5{
  background:
    linear-gradient(180deg, rgba(255,230,176,.08), rgba(255,230,176,.01)),
    url('assets/world-map.png') center center / cover no-repeat !important;
}
.world-thumb.thumb-6{
  background:
    linear-gradient(180deg, rgba(255,230,176,.08), rgba(255,230,176,.01)),
    url('assets/world-perfume-flora.png') center center / cover no-repeat !important;
}

.conversion-row{
  display:grid;grid-template-columns:1fr 1.45fr 1fr;gap:18px
}
.conversion-card{padding:24px}
.membership-card{border-color:rgba(227,194,124,.42);box-shadow:0 0 0 1px rgba(227,194,124,.12), var(--shadow)}
.eyebrow{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.78rem;
  margin-bottom:10px;
}
.conversion-card ul{
  margin:0 0 18px 1.1rem;padding:0;color:#efe7d6;line-height:1.8
}
.small{min-width:0;padding:13px 18px;font-size:.86rem}
.signup-card input,.conversion-card input,.footer-form input{
  width:100%;padding:14px 14px;background:rgba(6,11,22,.82);border:1px solid rgba(227,194,124,.28);color:#fff;margin:10px 0 12px
}
.shop-grid .three-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.product-card{padding:14px}
.product-thumb{min-height:132px;margin-bottom:14px}

.product-thumb.thumb-1{background:linear-gradient(180deg, rgba(255,230,176,.08), rgba(255,230,176,.01)), url('assets/product-codex.jpg') center center / cover no-repeat}
.product-thumb.thumb-2{background:linear-gradient(180deg, rgba(255,230,176,.08), rgba(255,230,176,.01)), url('assets/product-recipe.jpg') center center / cover no-repeat}
.product-thumb.thumb-3{background:linear-gradient(180deg, rgba(255,230,176,.08), rgba(255,230,176,.01)), url('assets/product-dataroom.jpg') center center / cover no-repeat}
.price{margin-top:10px;color:var(--gold);font-size:1.26rem}
.main-footer{
  margin-top:34px;padding:28px 0 18px;background:#060c17;border-top:1px solid rgba(255,255,255,.05)
}
.footer-signup{
  display:grid;grid-template-columns:1.1fr 1.4fr;gap:22px;align-items:center
}
.footer-note .eyebrow{margin-bottom:8px}
.footer-form{
  display:grid;grid-template-columns:1fr auto;gap:0
}
.footer-form input{
  margin:0;border-right:none
}
.footer-join{
  min-width:180px;border-left:none
}
.footer-bar{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.04);color:#e5dbc7;font-size:.88rem
}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}
.button-like{cursor:pointer}

/* Sakura */
.sakura-layer{
  position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:9;perspective:1600px
}
.sakura-petal{
  position:absolute;top:-16vh;left:0;width:var(--w,18px);height:var(--h,13px);opacity:0;
  animation-name:sakuraPremiumFloat;animation-timing-function:cubic-bezier(.31,.06,.27,1);animation-iteration-count:infinite;
  transform-style:preserve-3d;mix-blend-mode:screen;
}
.sakura-petal::before,.sakura-petal::after{content:"";position:absolute;inset:0}
.sakura-petal::before{
  background:
    radial-gradient(110% 125% at 30% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 15%, rgba(255,255,255,0) 32%),
    radial-gradient(100% 120% at 74% 72%, rgba(239,170,196,.25) 0%, rgba(239,170,196,0) 50%),
    linear-gradient(135deg, rgba(255,247,248,.98) 0%, rgba(255,236,240,.98) 30%, rgba(248,214,224,.94) 58%, rgba(236,184,202,.92) 100%);
  border-radius:68% 32% 66% 34% / 44% 48% 52% 56%;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.78), inset -1px -2px 0 rgba(214,145,172,.22), 0 0 1px rgba(255,248,250,.40);
  transform:rotate(var(--petal-rot,-14deg));
}
.sakura-petal::after{
  inset:16% 42% 18% 44%;width:1px;border-radius:999px;
  background:linear-gradient(to bottom, rgba(247,206,220,.08), rgba(204,128,163,.34), rgba(247,206,220,.04));
  transform:rotate(calc(var(--petal-rot,-14deg) * .32));opacity:.72;
}
@keyframes sakuraPremiumFloat{
  0%{transform:translate3d(0,-18vh,0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(var(--scale,1));opacity:0}
  7%{opacity:var(--opacity,.9)}
  18%{transform:translate3d(var(--driftA,22px),12vh,0) rotateX(75deg) rotateY(55deg) rotateZ(var(--spinA,85deg)) scale(var(--scale,1));opacity:calc(var(--opacity,.9)*.98)}
  38%{transform:translate3d(var(--driftB,-36px),36vh,0) rotateX(155deg) rotateY(120deg) rotateZ(var(--spinB,180deg)) scale(var(--scale,1));opacity:calc(var(--opacity,.9)*.94)}
  58%{transform:translate3d(var(--driftC,24px),58vh,0) rotateX(235deg) rotateY(175deg) rotateZ(var(--spinC,290deg)) scale(var(--scale,1));opacity:calc(var(--opacity,.9)*.86)}
  78%{transform:translate3d(var(--driftD,-28px),82vh,0) rotateX(320deg) rotateY(235deg) rotateZ(var(--spinD,405deg)) scale(var(--scale,1));opacity:calc(var(--opacity,.9)*.68)}
  100%{transform:translate3d(var(--driftE,18px),116vh,0) rotateX(400deg) rotateY(310deg) rotateZ(var(--spinE,520deg)) scale(var(--scale,1));opacity:0}
}

@media (max-width:1200px){
  .main-hero{grid-template-columns:1fr}
  .six-grid{grid-template-columns:repeat(3,1fr)}
  .conversion-row{grid-template-columns:1fr}
  .footer-signup{grid-template-columns:1fr}
}
@media (max-width:900px){
  .intro-topbar,.main-header-inner{flex-direction:column;align-items:flex-start}
  .intro-nav,.main-nav{gap:12px;font-size:.72rem}
  .intro-copy{padding-top:108px;transform:none;max-width:420px}
  .intro-copy h1{font-size:clamp(2.25rem, 8vw, 3.6rem)}
  .intro-copy p{font-size:clamp(1rem, 3vw, 1.16rem);max-width:25ch}
  .button-row,.sub-cta-row{flex-direction:column}
  .primary-button,.gold-button,.outline-button,.secondary-cta{width:100%;min-width:0}
  .tri-band,.three-grid,.shop-grid .three-grid{grid-template-columns:1fr}
  .tri-card{border-right:none;border-bottom:1px solid rgba(227,194,124,.14)}
  .tri-card:last-child{border-bottom:none}
}
@media (max-width:640px){
  .container{width:min(100% - 24px, 1320px)}
  .six-grid{grid-template-columns:1fr 1fr}
  .feature-panel{grid-template-columns:1fr}
  .footer-form{grid-template-columns:1fr}
  .footer-join{border-left:1px solid rgba(227,194,124,.72);margin-top:10px}
}



/* Reduce intro hero heading and paragraph size */
.intro-copy h1{
  font-size: clamp(2.35rem, 4.3vw, 3.75rem) !important;
  line-height: 1.22 !important;
}
.intro-copy p{
  font-size: clamp(0.98rem, 1.1vw, 1.18rem) !important;
  line-height: 1.82 !important;
  max-width: 28ch !important;
}
.ornament .star{
  font-size: .92rem !important;
}

@media (max-width: 900px){
  .intro-copy h1{
    font-size: clamp(1.95rem, 6.2vw, 3rem) !important;
    line-height: 1.24 !important;
  }
  .intro-copy p{
    font-size: clamp(0.9rem, 2.4vw, 1.04rem) !important;
    line-height: 1.78 !important;
    max-width: 26ch !important;
  }
}



/* Fit the entire landing hero into one viewport more like a complete first-screen composition */
.intro-hero{
  min-height: 100svh !important;
  height: 100svh !important;
}

.intro-shell{
  min-height: 100svh !important;
  height: 100svh !important;
}

.intro-topbar{
  padding-top: 18px !important;
}

.brand-title{
  font-size: 1.2rem !important;
}
.brand-byline{
  font-size: 0.72rem !important;
}

.intro-nav{
  gap: 16px !important;
  font-size: 0.72rem !important;
}

.intro-copy{
  max-width: 430px !important;
  padding-top: 82px !important;
  transform: translate(-4px, 8px) !important;
}

.intro-copy h1{
  font-size: clamp(1.9rem, 3.2vw, 2.95rem) !important;
  line-height: 1.14 !important;
  max-width: 11ch !important;
  letter-spacing: 0.04em !important;
}

.intro-copy p{
  font-size: clamp(0.88rem, 0.94vw, 1rem) !important;
  line-height: 1.68 !important;
  max-width: 24ch !important;
  margin-bottom: 16px !important;
}

.ornament{
  max-width: 420px !important;
  margin-bottom: 14px !important;
}
.ornament-bottom{
  margin: 12px 0 16px !important;
}
.ornament .star{
  font-size: 0.82rem !important;
}

.primary-button{
  min-width: 250px !important;
  padding: 13px 18px !important;
  font-size: 0.84rem !important;
}

.intro-follow{
  bottom: 12px !important;
  font-size: 0.72rem !important;
}

.follow-icons{
  font-size: 0.92rem !important;
}

/* Ensure the first section does not visually overflow the first viewport */
@media (max-width: 1200px){
  .intro-copy{
    padding-top: 74px !important;
    max-width: 400px !important;
  }
  .intro-copy h1{
    font-size: clamp(1.72rem, 3.6vw, 2.6rem) !important;
  }
  .intro-copy p{
    font-size: clamp(0.84rem, 0.98vw, 0.96rem) !important;
  }
}

@media (max-width: 900px){
  .intro-hero,
  .intro-shell{
    min-height: 100svh !important;
    height: 100svh !important;
  }

  .intro-topbar{
    padding-top: 14px !important;
  }

  .intro-nav{
    gap: 10px !important;
    font-size: 0.66rem !important;
  }

  .brand-title{
    font-size: 1.02rem !important;
  }
  .brand-byline{
    font-size: 0.64rem !important;
  }

  .intro-copy{
    padding-top: 72px !important;
    max-width: 330px !important;
    transform: none !important;
  }

  .intro-copy h1{
    font-size: clamp(1.42rem, 5vw, 2.1rem) !important;
    line-height: 1.12 !important;
    max-width: 10.5ch !important;
  }

  .intro-copy p{
    font-size: clamp(0.76rem, 2vw, 0.9rem) !important;
    line-height: 1.56 !important;
    max-width: 23ch !important;
    margin-bottom: 14px !important;
  }

  .primary-button{
    min-width: 220px !important;
    padding: 12px 16px !important;
    font-size: 0.78rem !important;
  }

  .intro-follow{
    bottom: 10px !important;
    gap: 10px !important;
    font-size: 0.66rem !important;
  }
  .follow-icons{
    gap: 9px !important;
    font-size: 0.82rem !important;
  }
}

@media (max-width: 640px){
  .container{
    width: min(100% - 20px, 1320px) !important;
  }

  .intro-topbar{
    gap: 10px !important;
  }

  .intro-nav{
    gap: 8px !important;
    font-size: 0.6rem !important;
  }

  .intro-copy{
    padding-top: 66px !important;
    max-width: 285px !important;
  }

  .intro-copy h1{
    font-size: 1.28rem !important;
    line-height: 1.1 !important;
    letter-spacing: 0.03em !important;
  }

  .intro-copy p{
    font-size: 0.72rem !important;
    line-height: 1.5 !important;
    max-width: 22ch !important;
  }

  .ornament{
    margin-bottom: 10px !important;
  }

  .ornament-bottom{
    margin: 10px 0 14px !important;
  }

  .primary-button{
    min-width: 200px !important;
    padding: 10px 14px !important;
    font-size: 0.74rem !important;
  }

  .intro-follow{
    bottom: 8px !important;
    font-size: 0.62rem !important;
  }
}



/* Final stronger reduction so the first landing fits comfortably in one viewport */
.intro-hero,
.intro-shell{
  min-height: 100svh !important;
  height: 100svh !important;
}

.intro-topbar{
  padding-top: 14px !important;
}

.intro-copy{
  max-width: 360px !important;
  padding-top: 64px !important;
  transform: translate(0, 2px) !important;
}

.intro-copy h1{
  font-size: clamp(1.42rem, 2.45vw, 2.15rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.03em !important;
  max-width: 10.4ch !important;
}

.intro-copy p{
  font-size: clamp(0.72rem, 0.82vw, 0.86rem) !important;
  line-height: 1.48 !important;
  letter-spacing: 0.015em !important;
  max-width: 22ch !important;
  margin-bottom: 12px !important;
}

.ornament{
  max-width: 360px !important;
  margin-bottom: 10px !important;
}
.ornament-bottom{
  margin: 8px 0 12px !important;
}
.ornament .star{
  font-size: 0.72rem !important;
}

.primary-button{
  min-width: 190px !important;
  padding: 10px 14px !important;
  font-size: 0.72rem !important;
}

.intro-follow{
  bottom: 8px !important;
  font-size: 0.62rem !important;
}
.follow-icons{
  gap: 8px !important;
  font-size: 0.76rem !important;
}

.brand-title{
  font-size: 1rem !important;
}
.brand-byline{
  font-size: 0.62rem !important;
}
.intro-nav{
  gap: 10px !important;
  font-size: 0.62rem !important;
}

@media (max-width: 900px){
  .intro-copy{
    max-width: 280px !important;
    padding-top: 58px !important;
  }

  .intro-copy h1{
    font-size: clamp(1.12rem, 4.05vw, 1.7rem) !important;
    line-height: 1.06 !important;
    max-width: 10ch !important;
  }

  .intro-copy p{
    font-size: clamp(0.64rem, 1.75vw, 0.78rem) !important;
    line-height: 1.42 !important;
    max-width: 21ch !important;
    margin-bottom: 10px !important;
  }

  .primary-button{
    min-width: 176px !important;
    padding: 9px 12px !important;
    font-size: 0.68rem !important;
  }

  .brand-title{
    font-size: 0.92rem !important;
  }
  .brand-byline{
    font-size: 0.58rem !important;
  }
  .intro-nav{
    font-size: 0.56rem !important;
    gap: 8px !important;
  }
  .intro-follow{
    font-size: 0.56rem !important;
  }
}

@media (max-width: 640px){
  .intro-copy{
    max-width: 235px !important;
    padding-top: 52px !important;
  }

  .intro-copy h1{
    font-size: 1rem !important;
    line-height: 1.04 !important;
    letter-spacing: 0.025em !important;
  }

  .intro-copy p{
    font-size: 0.58rem !important;
    line-height: 1.36 !important;
    max-width: 20ch !important;
  }

  .primary-button{
    min-width: 160px !important;
    font-size: 0.64rem !important;
    padding: 8px 11px !important;
  }

  .intro-follow{
    bottom: 6px !important;
    font-size: 0.52rem !important;
  }
  .follow-icons{
    font-size: 0.68rem !important;
  }
}



/* Center all text in the first hero section and widen spacing/leading */
.intro-copy{
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.intro-copy h1,
.intro-copy p,
.intro-copy .ornament,
.intro-copy .ornament-bottom,
.intro-copy .primary-button{
  text-align: center !important;
  align-self: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.intro-copy h1{
  max-width: 13ch !important;
  line-height: 1.52 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.10em !important;
}

.intro-copy p{
  max-width: 34ch !important;
  line-height: 2.15 !important;
  letter-spacing: 0.08em !important;
  word-spacing: 0.06em !important;
  margin-top: 0.4em !important;
}

.intro-copy .ornament-bottom{
  margin: 22px 0 28px !important;
}

@media (max-width: 900px){
  .intro-copy h1{
    max-width: 12ch !important;
    line-height: 1.40 !important;
    letter-spacing: 0.10em !important;
    word-spacing: 0.07em !important;
  }
  .intro-copy p{
    max-width: 30ch !important;
    line-height: 1.92 !important;
    letter-spacing: 0.065em !important;
    word-spacing: 0.045em !important;
  }
  .intro-copy .ornament-bottom{
    margin: 18px 0 22px !important;
  }
}

@media (max-width: 640px){
  .intro-copy h1{
    max-width: 11ch !important;
    line-height: 1.32 !important;
    letter-spacing: 0.08em !important;
    word-spacing: 0.05em !important;
  }
  .intro-copy p{
    max-width: 26ch !important;
    line-height: 1.72 !important;
    letter-spacing: 0.05em !important;
    word-spacing: 0.03em !important;
  }
  .intro-copy .ornament-bottom{
    margin: 14px 0 18px !important;
  }
}



/* Move the whole hero text section further left */
.intro-copy{
  position: relative !important;
  left: -90px !important;
}

@media (max-width: 1200px){
  .intro-copy{
    left: -60px !important;
  }
}

@media (max-width: 900px){
  .intro-copy{
    left: -34px !important;
  }
}

@media (max-width: 640px){
  .intro-copy{
    left: -18px !important;
  }
}



/* Push the whole first hero text section much further to the left */
.intro-copy{
  position: relative !important;
  left: -170px !important;
}

@media (max-width: 1200px){
  .intro-copy{
    left: -110px !important;
  }
}

@media (max-width: 900px){
  .intro-copy{
    left: -56px !important;
  }
}

@media (max-width: 640px){
  .intro-copy{
    left: -26px !important;
  }
}



/* Push the whole first hero text section extremely far to the left */
.intro-copy{
  position: relative !important;
  left: -280px !important;
}

@media (max-width: 1400px){
  .intro-copy{
    left: -220px !important;
  }
}

@media (max-width: 1200px){
  .intro-copy{
    left: -160px !important;
  }
}

@media (max-width: 900px){
  .intro-copy{
    left: -84px !important;
  }
}

@media (max-width: 640px){
  .intro-copy{
    left: -36px !important;
  }
}



/* Push the whole first hero text section dramatically farther left */
.intro-copy{
  position: relative !important;
  left: -460px !important;
}

@media (max-width: 1600px){
  .intro-copy{
    left: -380px !important;
  }
}

@media (max-width: 1400px){
  .intro-copy{
    left: -320px !important;
  }
}

@media (max-width: 1200px){
  .intro-copy{
    left: -230px !important;
  }
}

@media (max-width: 900px){
  .intro-copy{
    left: -120px !important;
  }
}

@media (max-width: 640px){
  .intro-copy{
    left: -52px !important;
  }
}



/* Mobile optimization while preserving the PC layout */

/* Tablet */
@media (max-width: 900px){
  .intro-copy{
    left: -24px !important;
    max-width: min(82vw, 430px) !important;
    width: min(82vw, 430px) !important;
  }

  .intro-copy h1{
    font-size: clamp(1.28rem, 4.8vw, 1.85rem) !important;
    line-height: 1.34 !important;
    letter-spacing: 0.09em !important;
    word-spacing: 0.04em !important;
    max-width: 12ch !important;
  }

  .intro-copy p{
    font-size: clamp(0.74rem, 2.05vw, 0.92rem) !important;
    line-height: 1.72 !important;
    letter-spacing: 0.04em !important;
    word-spacing: 0.02em !important;
    max-width: 26ch !important;
  }

  .primary-button{
    font-size: 0.78rem !important;
    min-width: 182px !important;
    padding: 10px 14px !important;
  }
}

/* Mobile */
@media (max-width: 640px){
  .intro-copy{
    left: 0 !important;
    margin-left: 16px !important;
    margin-right: auto !important;
    max-width: calc(100vw - 32px) !important;
    width: calc(100vw - 32px) !important;
    align-items: flex-start !important;
    text-align: left !important;
    transform: translate(0, 18px) !important;
  }

  .intro-copy h1,
  .intro-copy p,
  .intro-copy .ornament,
  .intro-copy .ornament-bottom{
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    align-self: flex-start !important;
    justify-content: flex-start !important;
  }

  .intro-copy h1{
    font-size: 1.06rem !important;
    line-height: 1.26 !important;
    letter-spacing: 0.07em !important;
    word-spacing: 0.02em !important;
    max-width: 12ch !important;
  }

  .intro-copy p{
    font-size: 0.65rem !important;
    line-height: 1.56 !important;
    letter-spacing: 0.03em !important;
    word-spacing: 0.01em !important;
    max-width: 24ch !important;
  }

  .primary-button{
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    font-size: 0.68rem !important;
    min-width: 164px !important;
    padding: 9px 12px !important;
  }
}

/* Small mobile */
@media (max-width: 420px){
  .intro-copy{
    margin-left: 14px !important;
    max-width: calc(100vw - 28px) !important;
    width: calc(100vw - 28px) !important;
  }

  .intro-copy h1{
    font-size: 0.96rem !important;
    line-height: 1.2 !important;
    max-width: 12.5ch !important;
  }

  .intro-copy p{
    font-size: 0.61rem !important;
    line-height: 1.48 !important;
    max-width: 23ch !important;
  }

  .primary-button{
    font-size: 0.63rem !important;
    min-width: 150px !important;
    padding: 8px 10px !important;
  }
}


/* Replace WHY THIS STORY STAYS WITH YOU card images */
.glow-b{
  background:
    linear-gradient(180deg, rgba(255,230,176,.08), rgba(255,230,176,.01)),
    url('assets/heroine-card.png') center center / cover no-repeat !important;
}

.glow-c{
  background:
    linear-gradient(180deg, rgba(255,230,176,.08), rgba(255,230,176,.01)),
    url('assets/story-card.png') center center / cover no-repeat !important;
}


/* =========================
   Added pages only (existing landing and visuals preserved)
========================= */
.added-page {
  background:
    radial-gradient(circle at top, rgba(161,132,82,.10), transparent 28%),
    linear-gradient(180deg, #07101d 0%, #08111f 35%, #060d18 100%);
  color: var(--ivory);
}
.added-header {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(10px);
  background: rgba(6,13,24,.78);
  border-bottom: 1px solid rgba(225,195,125,.16);
}
.added-header__inner {
  width: min(1240px, calc(100% - 52px));
  margin: 0 auto;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.added-brand {
  display: inline-flex;
  gap: 12px;
  align-items: center;
}
.added-brand-mark { color: var(--gold); font-size: 1rem; }
.added-brand-title { font-size: .95rem; letter-spacing: .14em; color: var(--gold-soft); }
.added-brand-byline { font-size: .78rem; letter-spacing: .14em; color: var(--gold); text-transform: uppercase; }
.added-nav { display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
.added-nav a { color: rgba(243,236,224,.82); font-size: .86rem; letter-spacing: .12em; text-transform: uppercase; }
.added-nav a:hover { color: var(--gold); }
.added-nav .added-nav-cta {
  padding: 10px 14px;
  border: 1px solid rgba(225,195,125,.36);
  border-radius: 999px;
}
.added-page-hero { padding: 110px 0 42px; }
.added-page-hero__inner { width: min(920px, calc(100% - 52px)); margin: 0 auto; text-align: center; }
.added-eyebrow { margin:0 0 12px; color: var(--gold); font-size:.82rem; letter-spacing:.20em; text-transform:uppercase; }
.added-page-title { margin:0; font-size: clamp(2rem, 4vw, 3.6rem); line-height:1.15; font-weight:500; color: var(--gold-soft); }
.added-page-lede { margin: 18px auto 0; max-width: 720px; color: rgba(243,236,224,.80); font-size: 1.05rem; line-height: 1.85; }
.added-section { padding: 26px 0 72px; }
.added-container { width: min(1200px, calc(100% - 52px)); margin: 0 auto; }
.added-panel {
  background: rgba(10,16,30,.72);
  border: 1px solid rgba(225,195,125,.18);
  border-radius: 22px;
  box-shadow: 0 18px 46px rgba(0,0,0,.22);
}
.added-button, .added-button-outline {
  display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  padding: 0 22px; border-radius:999px; letter-spacing:.08em; text-transform:uppercase; font-size:.88rem;
}
.added-button { background: linear-gradient(180deg, #d6b16b 0%, #b8873c 100%); color:#08111f; border:1px solid #d6b16b; }
.added-button-outline { border:1px solid rgba(225,195,125,.34); color: var(--ivory); }
.added-grid-3 { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:22px; }
.added-grid-2 { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:22px; }
.added-card { padding: 24px 22px; }
.added-card h3 { margin:0 0 12px; font-size:1.18rem; font-weight:500; color: var(--gold-soft); }
.added-card p, .added-card li { color: rgba(243,236,224,.80); line-height:1.75; }
.added-card ul { margin: 14px 0 0; padding-left: 18px; }
.added-form { display:grid; gap:14px; max-width: 620px; margin: 0 auto; }
.added-form input, .added-form textarea {
  width:100%; background: rgba(255,255,255,.04); color: var(--ivory); border:1px solid rgba(225,195,125,.22); border-radius: 16px; padding: 14px 16px;
}
.added-form input::placeholder, .added-form textarea::placeholder { color: rgba(243,236,224,.48); }
.added-footer { border-top: 1px solid rgba(225,195,125,.14); background: rgba(4,9,18,.82); }
.added-footer__inner { width:min(1200px, calc(100% - 52px)); margin:0 auto; padding: 28px 0 40px; }
.added-footer-links { display:flex; flex-wrap:wrap; gap:14px 18px; }
.added-footer-links a { color: rgba(243,236,224,.74); font-size:.9rem; }

/* Episode 1 */
.episode-shell { width:min(760px, calc(100% - 52px)); margin:0 auto; }
.episode-text { font-size:1.08rem; line-height:2.02; letter-spacing:.01em; }
.episode-text p { margin:0 0 1.45em; }
.episode-linger { padding-top: 18px; border-top:1px solid rgba(225,195,125,.16); margin-top: 18px; }
.episode-next-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:22px; margin-top: 26px; }

/* Membership */
.membership-highlights { margin-top: 28px; }
.membership-compare { margin-top: 28px; }
.membership-compare .added-card { padding: 28px 24px; }
.membership-compare h3 { margin-bottom: 10px; }
.membership-compare ul { margin-top: 12px; }
.membership-join { margin-top: 32px; padding: 34px 28px; text-align:center; }

/* Shop */
.shop-grid { margin-top: 28px; }
.shop-product.featured { border-color: rgba(225,195,125,.30); transform: translateY(-4px); }
.shop-price { color: var(--gold); letter-spacing:.12em; text-transform:uppercase; font-size:.82rem; margin: 10px 0 0; }
.shop-bottom { margin-top: 30px; text-align:center; padding: 32px 24px; }

/* Newsletter */
.newsletter-benefits { margin-top: 28px; }
.newsletter-join { margin-top: 30px; padding: 34px 24px; text-align:center; }
.newsletter-join .added-form { max-width: 560px; }

/* Story */
.story-grid { margin-top: 28px; }
.story-card-cta { margin-top: 12px; }

@media (max-width: 960px) {
  .added-header__inner { flex-direction: column; align-items:flex-start; }
  .added-grid-3, .episode-next-grid, .added-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .added-page-hero { padding-top: 92px; }
  .added-page-lede { font-size: .98rem; }
  .episode-text { font-size: 1rem; line-height: 1.92; }
}


/* Added: Season archive list */
.episode-archive{margin:14px 0 0 18px; padding:0}
.episode-archive li{margin:8px 0}
.tag{
  display:inline-block;
  margin-left:10px;
  padding:2px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px;
  color:var(--gold-soft);
  background:rgba(225,195,125,.08);
}

/* Slightly enlarge first landing hero text per latest request */
.intro-copy h1{
  font-size: clamp(1.50rem, 2.60vw, 2.28rem) !important;
}
.intro-copy p{
  font-size: clamp(0.76rem, 0.88vw, 0.92rem) !important;
}
.primary-button{
  font-size: 0.75rem !important;
  min-width: 196px !important;
}

@media (max-width: 900px){
  .intro-copy h1{
    font-size: clamp(1.34rem, 5.1vw, 1.95rem) !important;
  }
  .intro-copy p{
    font-size: clamp(0.77rem, 2.15vw, 0.95rem) !important;
  }
  .primary-button{
    font-size: 0.80rem !important;
    min-width: 188px !important;
  }
}

@media (max-width: 640px){
  .intro-copy h1{
    font-size: 1.10rem !important;
  }
  .intro-copy p{
    font-size: 0.67rem !important;
  }
  .primary-button{
    font-size: 0.70rem !important;
    min-width: 168px !important;
  }
}

@media (max-width: 420px){
  .intro-copy h1{
    font-size: 1.00rem !important;
  }
  .intro-copy p{
    font-size: 0.62rem !important;
  }
  .primary-button{
    font-size: 0.64rem !important;
    min-width: 152px !important;
  }
}

/* Make first landing hero text a bit larger again */
.intro-copy h1{
  font-size: clamp(1.58rem, 2.78vw, 2.42rem) !important;
}
.intro-copy p{
  font-size: clamp(0.80rem, 0.93vw, 0.97rem) !important;
}
.primary-button{
  font-size: 0.78rem !important;
  min-width: 202px !important;
  padding: 10px 15px !important;
}

@media (max-width: 900px){
  .intro-copy h1{
    font-size: clamp(1.40rem, 5.35vw, 2.05rem) !important;
  }
  .intro-copy p{
    font-size: clamp(0.79rem, 2.25vw, 0.98rem) !important;
  }
  .primary-button{
    font-size: 0.82rem !important;
    min-width: 192px !important;
  }
}

@media (max-width: 640px){
  .intro-copy h1{
    font-size: 1.14rem !important;
  }
  .intro-copy p{
    font-size: 0.69rem !important;
  }
  .primary-button{
    font-size: 0.72rem !important;
    min-width: 172px !important;
  }
}

@media (max-width: 420px){
  .intro-copy h1{
    font-size: 1.03rem !important;
  }
  .intro-copy p{
    font-size: 0.64rem !important;
  }
  .primary-button{
    font-size: 0.66rem !important;
    min-width: 156px !important;
  }
}

/* Slightly larger again for first landing hero text */
.intro-copy h1{
  font-size: clamp(1.66rem, 2.95vw, 2.56rem) !important;
}
.intro-copy p{
  font-size: clamp(0.83rem, 0.98vw, 1.02rem) !important;
}
.primary-button{
  font-size: 0.80rem !important;
  min-width: 208px !important;
  padding: 11px 16px !important;
}

@media (max-width: 900px){
  .intro-copy h1{
    font-size: clamp(1.46rem, 5.55vw, 2.14rem) !important;
  }
  .intro-copy p{
    font-size: clamp(0.81rem, 2.35vw, 1.00rem) !important;
  }
  .primary-button{
    font-size: 0.84rem !important;
    min-width: 196px !important;
  }
}

@media (max-width: 640px){
  .intro-copy h1{
    font-size: 1.18rem !important;
  }
  .intro-copy p{
    font-size: 0.71rem !important;
  }
  .primary-button{
    font-size: 0.74rem !important;
    min-width: 176px !important;
  }
}

@media (max-width: 420px){
  .intro-copy h1{
    font-size: 1.06rem !important;
  }
  .intro-copy p{
    font-size: 0.65rem !important;
  }
  .primary-button{
    font-size: 0.67rem !important;
    min-width: 160px !important;
  }
}

/* Pricing */
.hero-compact{padding-top:110px; padding-bottom:28px}
.pricing-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:18px}
.pricing-card{border:1px solid var(--line); border-radius:16px; padding:18px; background:rgba(0,0,0,.28); position:relative}
.pricing-card .price{font-size:1.4rem; margin:6px 0 0}
.pricing-card .per{font-size:.9rem; color:var(--muted)}
.pricing-card .badge{position:absolute; top:14px; right:14px; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(225,195,125,.35); padding:6px 10px; border-radius:999px; background:rgba(225,195,125,.08)}
.pricing-card.featured{border-color:rgba(225,195,125,.35); box-shadow:0 0 0 1px rgba(225,195,125,.12) inset}
.pricing-top .muted{margin-top:6px}
.pricing-actions{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
.fineprint{margin-top:12px; font-size:.86rem; color:var(--muted)}

.table-wrap{overflow:auto; border:1px solid var(--line); border-radius:16px; margin-top:18px; background:rgba(0,0,0,.22)}
.pricing-table{width:100%; border-collapse:collapse; min-width:720px}
.pricing-table th,.pricing-table td{padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); vertical-align:top}
.pricing-table th{font-weight:600; text-align:left; color:var(--gold-soft); background:rgba(255,255,255,.03)}

/* Data room */
.link-list{margin:14px 0 0 18px}
.link-list li{margin:10px 0}
.steps{margin:14px 0 0 18px}

@media (max-width: 960px){
  .pricing-grid{grid-template-columns:1fr}
  .hero-compact{padding-top:92px}
}