/* ════════════════════════════════════════════════════════════════════
   MagicBooks.art — illustrated storybook landing
   ════════════════════════════════════════════════════════════════════ */

:root{
  /* light fairy-tale palette */
  --bg:           #fdf6ec;   /* warm cream */
  --bg-lavender:  #eeecfb;
  --bg-blush:     #f4c0d1;   /* soft pink */
  --bg-mint:      #f5c4b3;   /* soft peach */

  --paper:        #ffffff;   /* clean surfaces */
  --paper-cream:  #fffdf8;
  --paper-pink:   #fce6ee;
  --paper-lavender: #eeecfb;
  --paper-yellow: #fdf0d4;
  --paper-mint:   #f6e9e1;

  /* text — warm graphite */
  --ink:          #2c2c2a;
  --ink-soft:     #4a4644;
  --ink-mute:     #6b6660;
  --ink-dim:      #9a958e;
  --ink-warm:     #6b6660;

  /* accents — gold magic */
  --gold:         #ef9f27;
  --gold-bright:  #fac775;
  --gold-soft:    #fbe6c4;
  --gold-deep:    #c77f12;

  --rose:         #d9789b;
  --rose-light:   #f4c0d1;
  --rose-soft:    #fbdfe8;

  --purple:       #7f77dd;
  --purple-deep:  #6a61c8;
  --purple-soft:  #afa9ec;

  --border:       rgba(44, 44, 42, 0.14);
  --border-soft:  rgba(44, 44, 42, 0.07);

  /* fonts */
  --display:      "Berkshire Swash", "Playfair Display", serif;
  --serif:        "Cormorant Garamond", "Times New Roman", serif;
  --hand:         "Caveat", "Brush Script MT", cursive;
  --sans:         "Quicksand", -apple-system, BlinkMacSystemFont, sans-serif;

  --shadow-sm:    0 6px 18px -8px rgba(60, 55, 90, 0.16);
  --shadow-md:    0 18px 40px -16px rgba(60, 55, 90, 0.20);
  --shadow-lg:    0 30px 60px -22px rgba(60, 55, 90, 0.26);
  --shadow-paper: 0 10px 24px -12px rgba(60, 55, 90, 0.22), 0 2px 4px rgba(60, 55, 90, 0.07);
  --shadow-gold:  0 18px 40px -16px rgba(239, 159, 39, 0.42);

  --page: 1240px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body{position:relative;cursor:url("assets/star.svg") 6 6, auto}
a, button{cursor:pointer}
img{display:block;max-width:100%}

[data-reveal]{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].in{opacity:1;transform:translateY(0)}

/* ════════════════════════════════════════════
   WATERCOLOR SKY
   ════════════════════════════════════════════ */
.sky{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(60% 50% at 12% 8%, #ffe2ee 0%, transparent 60%),
    radial-gradient(45% 45% at 88% 12%, #fff0d4 0%, transparent 60%),
    radial-gradient(50% 50% at 96% 65%, #ffe2dc 0%, transparent 65%),
    radial-gradient(55% 55% at 6% 78%, #e8dafc 0%, transparent 65%),
    radial-gradient(45% 40% at 50% 100%, #fff3d4 0%, transparent 60%),
    linear-gradient(180deg, #fefaf0 0%, #faf3ff 50%, #fff5ee 100%);
}
.sky::after{
  /* subtle paper grain */
  content:"";
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.45 0 0 0 0 0.25 0 0 0 0.12 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.6'/></svg>");
  opacity:.55;
  mix-blend-mode:multiply;
  pointer-events:none;
}
#stars{position:absolute;inset:0;width:100%;height:100%}
.nebula{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  animation:drift 22s ease-in-out infinite alternate;
}
.nebula--violet{
  width:520px;height:520px;top:8%;left:-8%;
  background:radial-gradient(circle, rgba(157,111,214,.25) 0%, transparent 70%);
  opacity:.6;
}
.nebula--pink{
  width:420px;height:420px;top:42%;right:-6%;
  background:radial-gradient(circle, rgba(217,77,122,.18) 0%, transparent 70%);
  animation-delay:-7s;
  opacity:.7;
}
.nebula--gold{
  width:380px;height:380px;bottom:-5%;left:30%;
  background:radial-gradient(circle, rgba(245,197,24,.18) 0%, transparent 70%);
  animation-delay:-14s;
  opacity:.65;
}
@keyframes drift{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(40px,-30px) scale(1.1)}
}

/* ════════════════════════════════════════════
   MAGIC WAND CURSOR
   ════════════════════════════════════════════ */
#wand{
  display:none;
  position:fixed;top:0;left:0;
  width:40px;height:40px;
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%) rotate(-12deg);
  transition:transform .08s linear;
  will-change:transform;
}
#wand svg{
  filter:drop-shadow(0 0 10px rgba(245,197,24,.55));
  animation:wandWiggle 2.4s ease-in-out infinite;
}
@keyframes wandWiggle{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(8deg)}
}
#sparkles{position:fixed;inset:0;pointer-events:none;z-index:9998}
.spark{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle, #fff8cc 0%, #f5c518 50%, transparent 80%);
  pointer-events:none;
  animation:sparkFade 900ms ease-out forwards;
}
@keyframes sparkFade{
  0%{transform:translate(-50%,-50%) scale(1);opacity:1}
  100%{transform:translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) scale(0);opacity:0}
}

/* ════════════════════════════════════════════
   NAV
   ════════════════════════════════════════════ */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(20px,5vw,56px);
  background:linear-gradient(180deg, rgba(254,246,230,.94) 0%, rgba(254,246,230,.6) 70%, transparent 100%);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.brand{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--ink);
  font-family:var(--display);font-size:22px;
  letter-spacing:.2px;
}
.brand--logo img{
  height:42px;
  width:auto;
  display:block;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,0.5));
  transition:transform .25s ease;
}
.brand--logo:hover img{transform:translateY(-1px) scale(1.02)}
.brand--logo-sm img{height:32px}
@media (max-width: 720px){
  .brand--logo img{height:34px}
}
.brand__mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg, var(--purple-soft), var(--rose-soft));
  border:1px solid var(--border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.brand__dot{color:var(--gold)}
.nav__links{display:flex;gap:30px}
.nav__links a{
  color:var(--ink-soft);
  text-decoration:none;
  font-family:var(--sans);
  font-size:15px;font-weight:600;
  transition:color .2s;
}
.nav__links a:hover{color:var(--rose)}

/* ════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 24px;
  border-radius:999px;
  font-family:var(--sans);font-weight:700;font-size:15px;
  text-decoration:none;
  transition:transform .2s, box-shadow .2s, background .2s, color .2s;
  border:none;
  white-space:nowrap;
}
.btn--gold{
  background:linear-gradient(135deg, #fde68a 0%, #f5c518 55%, #d99e0b 100%);
  color:#3a1e6e;
  box-shadow:
    0 0 0 1px rgba(170,120,10,.25),
    var(--shadow-gold),
    inset 0 1px 0 rgba(255,255,255,.55);
}
.btn--gold:hover{
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(170,120,10,.35),
    0 22px 44px -14px rgba(212,160,23,.55),
    inset 0 1px 0 rgba(255,255,255,.65);
}
.btn--ghost{
  background:rgba(255,255,255,.6);
  color:var(--ink);
  border:1px solid var(--border);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{
  background:#fff;
  border-color:var(--rose);
  color:var(--rose);
}
.btn--block{display:flex;width:100%}
.btn--large{padding:18px 32px;font-size:17px}

/* ════════════════════════════════════════════
   EYEBROW & SECTION HEAD
   ════════════════════════════════════════════ */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-weight:700;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--purple-deep);
  padding:8px 16px;
  background:rgba(157,111,214,.10);
  border:1px solid rgba(157,111,214,.22);
  border-radius:999px;
  width:fit-content;
}
.eyebrow__dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--rose);
  box-shadow:0 0 8px var(--rose);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.3)}
}

.section-head{
  max-width:760px;
  margin:0 auto 44px;
  padding:0 24px;
  text-align:left;
}
.section-head--center{text-align:center;margin-inline:auto}
.section-head--center .eyebrow{margin-inline:auto;display:flex}
.section-head h2{
  font-family:var(--serif);
  font-weight:500;
  font-style:italic;
  font-size:clamp(40px, 5.8vw, 76px);
  line-height:1.02;
  letter-spacing:-.01em;
  margin:16px 0 16px;
  text-wrap:balance;
  color:var(--ink);
}
.section-head h2 em{
  font-family:var(--display);
  font-style:normal;
  color:var(--rose);
  font-weight:400;
  font-size:1.02em;
  font-feature-settings:"liga","dlig";
}
.section-head p{
  color:var(--ink-soft);
  font-family:var(--serif);
  font-size:20px;
  max-width:580px;
  text-wrap:pretty;
  font-style:italic;
  font-weight:500;
}

/* ornamental divider */
.ornament{
  display:flex;justify-content:center;
  margin:20px auto;
  opacity:.85;
}
.ornament svg{
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.6));
}

/* ════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════ */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:60px;
  align-items:center;
  max-width:var(--page);
  margin:0 auto;
  padding:24px clamp(20px,5vw,56px) 60px;
  min-height:calc(100vh - 86px);
}
.hero__copy{position:relative;z-index:2}
.hero__title{
  font-family:var(--serif);
  font-weight:500;
  font-style:italic;
  font-size:clamp(54px, 7.4vw, 104px);
  line-height:1;
  letter-spacing:-.018em;
  margin:22px 0 24px;
  text-wrap:balance;
  color:var(--ink);
}
.hero__title-accent{
  display:inline-block;
  font-family:var(--display);
  font-style:normal;
  font-weight:400;
  color:var(--rose);
  font-size:1.08em;
  background:linear-gradient(135deg, #d4a017 0%, #e85a8a 50%, #9d6fd6 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  position:relative;
  padding-right:.08em;
}
.hero__title-accent::after{
  content:"";
  position:absolute;
  left:6%;right:12%;bottom:-2px;
  height:10px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8'><path d='M0,4 Q25,0 50,4 T100,4 T150,4 T200,4' stroke='%23d4a017' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>") repeat-x center/100px 8px;
  opacity:.85;
}
.hero__sub{
  font-family:var(--serif);
  font-size:21px;
  line-height:1.45;
  color:var(--ink-soft);
  max-width:540px;
  margin-bottom:30px;
  text-wrap:pretty;
}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.hero__meta{
  display:flex;align-items:center;gap:14px;
  list-style:none;flex-wrap:wrap;
  color:var(--ink-soft);
  font-family:var(--sans);
  font-size:14px;font-weight:500;
}
.hero__meta strong{color:var(--ink);font-weight:700}
.hero__meta .dot{color:var(--gold)}

/* hero illustration cluster */
.hero__art{
  position:relative;
  height:600px;
  perspective:1200px;
}
.hero__art-bg{
  position:absolute;
  inset:-30px;
  background:
    radial-gradient(60% 60% at 60% 40%, rgba(255,122,89,.18) 0%, transparent 70%),
    radial-gradient(40% 40% at 30% 70%, rgba(157,111,214,.20) 0%, transparent 70%);
  filter:blur(20px);
  z-index:0;
}
.hero-card{
  position:absolute;
  background:var(--paper);
  border:1px solid var(--border);
  box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.7);
  overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.hero-card img{
  width:100%;height:100%;
  object-fit:cover;
}
.hero-card--main{
  width:62%; height:84%;
  top:4%; right:20%;
  border-radius:26px;
  padding:12px;
  transform:rotate(-4deg);
  z-index:2;
  animation:float1 9s ease-in-out infinite;
}
.hero-card--main img{border-radius:18px}
.hero-card__caption{
  position:absolute;
  left:12px;right:12px;bottom:12px;
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;
  background:rgba(255,250,240,.95);
  backdrop-filter:blur(8px);
  border-radius:14px;
  font-family:var(--hand);
  font-size:20px;font-weight:600;
  color:var(--ink);
  box-shadow:0 4px 12px -4px rgba(72,38,22,.15);
}
.hero-card__sparkle{color:var(--gold);font-size:18px;font-family:var(--sans)}
.hero-card--small1{
  width:42%; height:44%;
  top:0; right:-4%;
  border-radius:24px;
  padding:10px;
  transform:rotate(6deg);
  z-index:3;
  animation:float2 7s ease-in-out infinite;
}
.hero-card--small1 img{border-radius:16px}
.hero-card--small2{
  width:30%; height:30%;
  bottom:0; left:4%;
  border-radius:50%;
  padding:8px;
  transform:rotate(-4deg);
  z-index:4;
  animation:float3 8s ease-in-out infinite;
}
.hero-card--small2 img{border-radius:50%;width:100%;height:100%;object-fit:cover}

@keyframes float1{
  0%,100%{transform:rotate(-4deg) translateY(0)}
  50%{transform:rotate(-4deg) translateY(-14px)}
}
@keyframes float2{
  0%,100%{transform:rotate(6deg) translateY(0)}
  50%{transform:rotate(6deg) translateY(-10px)}
}
@keyframes float3{
  0%,100%{transform:rotate(-4deg) translateY(0)}
  50%{transform:rotate(-4deg) translateY(-12px)}
}

.float-decor{
  position:absolute;pointer-events:none;
  filter:drop-shadow(0 0 10px currentColor);
  animation:spin 14s linear infinite;
}
.float-decor--star1{top:6%;left:-2%;color:#d4a017;animation-duration:10s}
.float-decor--star2{top:46%;right:-4%;color:var(--rose);animation:bounce 4s ease-in-out infinite}
.float-decor--star3{bottom:6%;right:42%;color:var(--purple);animation:bounce 5s ease-in-out infinite reverse}
.float-decor--moon{top:32%;right:-2%;animation:bounce 8s ease-in-out infinite;filter:drop-shadow(0 8px 20px rgba(245,197,24,.25))}

@keyframes spin{
  0%{transform:rotate(0)}
  100%{transform:rotate(360deg)}
}
@keyframes bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-16px)}
}

/* ════════════════════════════════════════════
   PROMISE STRIP
   ════════════════════════════════════════════ */
.strip{
  max-width:var(--page);
  margin:0 auto;
  padding:24px clamp(20px,5vw,56px);
}
.strip__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
  align-items:center;
  gap:18px;
  padding:22px 28px;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow-paper);
}
.strip__item{
  display:flex;align-items:center;gap:14px;
  font-family:var(--sans);
  font-size:14px;
}
.strip__item strong{display:block;color:var(--ink);font-size:15px;font-weight:700;font-family:var(--sans)}
.strip__item span{color:var(--ink-mute);font-size:13px}
.strip__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;
  flex-shrink:0;
}
.strip__icon--gold{background:var(--gold-soft);color:var(--gold)}
.strip__icon--pink{background:var(--rose-soft);color:var(--rose)}
.strip__icon--purple{background:var(--purple-soft);color:var(--purple-deep)}
.strip__divider{
  width:1px;height:36px;
  background:linear-gradient(180deg, transparent, var(--border), transparent);
}

/* ════════════════════════════════════════════
   WORLDS — book cover grid
   ════════════════════════════════════════════ */
.worlds{
  max-width:var(--page);
  margin:80px auto 60px;
  padding:0 clamp(20px,5vw,56px);
}
.worlds__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px 28px;
}
.world-card{
  position:relative;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, border-color .3s;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-paper);
}
.world-card:hover{
  transform:translateY(-10px) rotate(0deg) !important;
  border-color:var(--rose);
  box-shadow:var(--shadow-lg);
}
.world-card--1{transform:rotate(-1.4deg)}
.world-card--2{transform:rotate(1.6deg);margin-top:24px}
.world-card--3{transform:rotate(-1.2deg)}
.world-card--4{transform:rotate(1.4deg)}
.world-card--5{transform:rotate(-1.6deg);margin-top:24px}

.world-card__cover{
  aspect-ratio:9/16;
  margin:10px 10px 0;
  border-radius:12px;
  overflow:hidden;
  background:var(--purple-soft);
  position:relative;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.world-card__cover img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.world-card__body{
  padding:20px 22px 24px;
  position:relative;
}
.world-card__num{
  position:absolute;
  top:18px;right:22px;
  font-family:var(--display);
  font-size:18px;
  color:var(--gold);
  letter-spacing:.04em;
}
.world-card h3{
  font-family:var(--serif);
  font-weight:500;
  font-style:italic;
  font-size:28px;
  line-height:1.05;
  letter-spacing:-.01em;
  margin-bottom:10px;
  padding-right:54px;
  color:var(--ink);
}
.world-card p{
  color:var(--ink-soft);
  font-family:var(--serif);
  font-size:16px;
  line-height:1.4;
  margin-bottom:16px;
  text-wrap:pretty;
}
.world-card__tag{
  display:inline-block;
  font-family:var(--sans);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);
  padding:5px 12px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:999px;
  font-weight:700;
}
.world-card__tag--gold{color:var(--gold);border-color:rgba(212,160,23,.4);background:var(--gold-soft)}

.world-card--custom{
  background:linear-gradient(135deg, var(--paper-lavender) 0%, var(--paper-pink) 100%);
  border:1.5px dashed var(--purple);
  transform:rotate(1.2deg);
  display:flex;align-items:center;justify-content:center;
  min-height:240px;
}
.world-card__body--custom{
  text-align:center;
  padding:42px 26px;
}
.world-card__sparks{
  margin:0 auto 16px;
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.7);
  animation:bounce 3s ease-in-out infinite;
  box-shadow:0 4px 14px -4px rgba(212,160,23,.4);
}
.world-card--custom h3{padding-right:0}

/* ── compact 8-world grid ── */
.worlds__grid--compact{
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.worlds__grid--compact .world-card{transform:none}
.world-card--compact .world-card__cover{
  aspect-ratio:3/4;
}
.world-card--compact .world-card__body{
  padding:14px 16px 16px;
}
.world-card--compact h3{
  font-size:19px;
  line-height:1.1;
  padding-right:0;
  margin-bottom:8px;
}
/* create tile */
.world-card--create{
  text-decoration:none;
  background:linear-gradient(150deg, var(--purple) 0%, var(--purple-deep) 100%);
  border:1px solid var(--purple-deep);
  box-shadow:0 16px 34px -14px rgba(127,119,221,0.55);
  display:flex;
}
.world-card--create:hover{
  transform:translateY(-8px) !important;
  border-color:var(--purple-deep);
  box-shadow:0 26px 48px -16px rgba(127,119,221,0.6);
}
.world-card__create{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:24px 18px;
  height:100%;
  gap:4px;
}
.world-card--create .world-card__sparks{
  width:58px;height:58px;margin:0 auto 6px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,0.16);
  animation:bounce 3s ease-in-out infinite;
}
.world-card--create h3{
  font-family:var(--display);
  font-size:24px;line-height:1.05;color:#fff;
}
.world-card--create p{
  font-family:var(--serif);font-style:italic;
  font-size:14px;line-height:1.35;
  color:rgba(255,255,255,0.9);
  margin:6px 0 14px;
}
.world-card__createbtn{
  display:inline-block;
  font-family:var(--sans);font-weight:700;font-size:13px;
  padding:10px 18px;border-radius:999px;
  background:linear-gradient(135deg,#fde68a,#f5c518);
  color:#2c2c2a;
  box-shadow:0 8px 18px -8px rgba(239,159,39,0.6);
}
.worlds__cta{display:flex;justify-content:center;margin-top:36px}
.worlds__invite{
  margin-top:34px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:24px clamp(22px,3vw,38px);
  border-radius:24px;
  background:linear-gradient(135deg, var(--purple-soft) 0%, #ece8fb 60%, var(--rose-soft) 100%);
  border:1px solid rgba(127,119,221,0.3);
  box-shadow:var(--shadow-sm);
}
.worlds__invite-copy{display:flex;align-items:center;gap:14px;flex:1;min-width:260px}
.worlds__invite-spark{color:var(--gold-deep);font-size:24px;flex-shrink:0}
.worlds__invite-copy p{
  font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.4;
  color:var(--ink);text-wrap:pretty;margin:0;
}
.worlds__invite-copy strong{font-family:var(--display);font-style:normal;font-weight:400;color:var(--purple-deep)}

/* ════════════════════════════════════════════
   HOW IT WORKS
   ════════════════════════════════════════════ */
.how{
  max-width:var(--page);
  margin:60px auto 50px;
  padding:0 clamp(20px,5vw,56px);
  position:relative;
}
.how__steps{
  display:flex;
  flex-direction:column;
  gap:80px;
  margin-top:40px;
}
.how-step{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:64px;
  align-items:center;
}
.how-step--reverse{grid-template-columns:1fr 1.05fr}
.how-step--reverse .how-step__img{order:2}
.how-step__img{
  position:relative;
  aspect-ratio:6/5;
  background:var(--paper);
  border-radius:22px;
  padding:12px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
}
.how-step__img img{
  border-radius:14px;
  width:100%;height:100%;
  object-fit:cover;
}
.how-step__img--tilt-l{transform:rotate(-2deg)}
.how-step__img--tilt-r{transform:rotate(2deg)}
.how-step__img::before{
  content:"";
  position:absolute;
  inset:-14px;
  background:radial-gradient(50% 50% at 50% 50%, rgba(245,197,24,.20) 0%, transparent 70%);
  z-index:-1;
  filter:blur(20px);
}
.how-step__copy{padding:0 12px}
.how-step__num{
  font-family:var(--display);
  font-size:54px;
  font-weight:400;
  line-height:1;
  color:var(--gold);
  display:block;
  margin-bottom:14px;
  letter-spacing:.02em;
}
.how-step h3{
  font-family:var(--serif);
  font-weight:500;
  font-style:italic;
  font-size:44px;
  line-height:1.05;
  letter-spacing:-.01em;
  margin-bottom:16px;
  text-wrap:balance;
  color:var(--ink);
}
.how-step p{
  font-family:var(--serif);
  font-size:19px;
  line-height:1.45;
  color:var(--ink-soft);
  max-width:460px;
  text-wrap:pretty;
}
.how-step p strong{color:var(--rose);font-weight:600;font-style:italic}

/* ════════════════════════════════════════════
   STORIES SCATTER
   ════════════════════════════════════════════ */
.stories{
  max-width:1400px;
  margin:60px auto 50px;
  padding:0 clamp(20px,5vw,56px);
  position:relative;
}
.scatter{
  position:relative;
  height:900px;
  margin-top:30px;
}
.scatter__item{
  position:absolute;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:22px;
  padding:12px;
  box-shadow:var(--shadow-md);
  transition:transform .5s cubic-bezier(.2,.7,.2,1), z-index 0s;
}
.scatter__item img{
  width:100%;
  border-radius:14px;
  display:block;
  object-fit:cover;
}
.scatter__item:hover{
  z-index:10;
  transform:scale(1.05) rotate(0deg) !important;
  box-shadow:var(--shadow-lg);
}
.scatter__item figcaption{
  margin-top:10px;
  padding:0 6px 4px;
  font-family:var(--hand);
  font-size:20px;
  font-weight:600;
  color:var(--ink);
  text-align:center;
}

.scatter__item--1{ width:280px; top:0;left:4%; transform:rotate(-7deg); }
.scatter__item--1 img{aspect-ratio:9/16}
.scatter__item--2{ width:300px; top:80px;left:28%; transform:rotate(5deg); }
.scatter__item--2 img{aspect-ratio:9/16}
.scatter__item--3{ width:280px; top:30px;right:22%; transform:rotate(-3deg); }
.scatter__item--3 img{aspect-ratio:9/16}
.scatter__item--4{ width:280px; top:460px;left:12%; transform:rotate(6deg); }
.scatter__item--4 img{aspect-ratio:9/16}
.scatter__item--5{ width:300px; top:480px;right:6%; transform:rotate(-5deg); }
.scatter__item--5 img{aspect-ratio:9/16}

.scatter__spark{
  position:absolute;
  color:var(--gold);
  font-size:28px;
  text-shadow:0 0 12px rgba(212,160,23,.45);
  pointer-events:none;
  animation:bounce 4s ease-in-out infinite;
}
.scatter__spark--1{top:140px;left:48%;color:var(--gold)}
.scatter__spark--2{top:340px;left:64%;color:var(--rose);animation-delay:-1s;font-size:22px}
.scatter__spark--3{top:580px;left:42%;color:var(--purple);animation-delay:-2s;font-size:32px}
.scatter__spark--4{top:240px;left:14%;color:var(--gold);animation-delay:-3s;font-size:20px}

/* ════════════════════════════════════════════
   LETTERS PINBOARD
   ════════════════════════════════════════════ */
.board{
  max-width:1400px;
  margin:60px auto 80px;
  padding:0 clamp(20px,5vw,56px);
  position:relative;
}
.board__inner{
  position:relative;
  margin-top:40px;
  min-height:920px;
  padding:50px 0 60px;
  background:
    radial-gradient(70% 80% at 50% 30%, rgba(255,243,214,0.5) 0%, transparent 70%);
}

/* central polaroid with quote.jpg */
.polaroid{
  position:absolute;
  left:50%;top:30px;
  transform:translateX(-50%) rotate(2deg);
  width:min(420px, 50%);
  background:#fffaf0;
  padding:16px 16px 60px;
  box-shadow:
    var(--shadow-lg),
    inset 0 0 0 1px rgba(0,0,0,.03);
  z-index:5;
}
.polaroid img{
  width:100%;
  display:block;
  background:var(--purple-soft);
  filter:saturate(1.05);
}
.polaroid__tape{
  position:absolute;
  top:-14px;left:50%;
  transform:translateX(-50%) rotate(-4deg);
  width:90px;height:24px;
  background:linear-gradient(180deg, rgba(245,197,24,.55), rgba(245,197,24,.35));
  box-shadow:0 4px 12px rgba(72,38,22,.18);
  border-radius:2px;
}
.polaroid__tape::before,
.polaroid__tape::after{
  content:"";
  position:absolute;top:0;bottom:0;
  width:6px;
  background:linear-gradient(180deg, rgba(255,255,255,.4), transparent);
}
.polaroid__tape::before{left:-3px;transform:skewX(-20deg)}
.polaroid__tape::after{right:-3px;transform:skewX(20deg)}
.polaroid figcaption{
  margin-top:14px;
  font-family:var(--hand);
  text-align:center;
}
.polaroid__stars{
  font-size:22px;color:var(--gold);
  letter-spacing:3px;
  margin-bottom:6px;
}
.polaroid p{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:18px;
  line-height:1.35;
  color:var(--ink);
  margin-bottom:10px;
  text-wrap:pretty;
}
.polaroid__sig{
  font-family:var(--hand);
  font-size:18px;
  color:var(--ink-soft);
  font-weight:600;
}

/* handwritten notes */
.note{
  position:absolute;
  width:280px;
  padding:24px 22px 22px;
  font-family:var(--hand);
  color:var(--ink);
  box-shadow:var(--shadow-paper);
  z-index:2;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), z-index 0s, box-shadow .35s;
}
.note:hover{
  z-index:20;
  transform:rotate(0deg) scale(1.04) !important;
  box-shadow:var(--shadow-lg);
}
.note__stars{
  font-size:20px;color:var(--gold);
  letter-spacing:2px;
  margin-bottom:8px;
  font-family:var(--sans);
}
.note__body{
  font-size:22px;
  line-height:1.3;
  margin-bottom:14px;
  text-wrap:pretty;
  font-weight:500;
}
.note__sig{
  font-size:19px;
  color:var(--ink-soft);
  font-weight:600;
  border-top:1.5px dashed rgba(72,38,22,.18);
  padding-top:8px;
}
.note__sig span{
  display:block;
  font-size:15px;
  color:var(--ink-mute);
  font-weight:500;
  font-family:var(--sans);
  letter-spacing:.02em;
  margin-top:2px;
}

/* paper colors */
.note--cream    {background:#fffaf0;border:1px solid rgba(160,120,60,.18)}
.note--blush    {background:#ffe9f0;border:1px solid rgba(217,77,122,.20)}
.note--lavender {background:#ece1ff;border:1px solid rgba(157,111,214,.22)}
.note--butter   {background:#fff5cc;border:1px solid rgba(212,160,23,.22)}
.note--mint     {background:#e3f3e3;border:1px solid rgba(72,140,72,.18)}

/* lined paper for lavender */
.note--lavender{
  background:
    repeating-linear-gradient(180deg,
      transparent 0,
      transparent 25px,
      rgba(157,111,214,.18) 25px,
      rgba(157,111,214,.18) 26px),
    #ece1ff;
}

/* torn / deckled edge */
.note--torn{
  -webkit-mask:radial-gradient(8px at 8px 50%, transparent 98%, #000 100%) 0 0/100% 16px repeat-y;
          mask:radial-gradient(8px at 8px 50%, transparent 98%, #000 100%) 0 0/100% 16px repeat-y;
  padding-left:28px;
}

/* note positions */
.note--tilt-l1{ top:60px;  left:2%;  transform:rotate(-10deg);  width:280px; }
.note--tilt-r1{ top:80px;  right:4%; transform:rotate(7deg);    width:280px; }
.note--tilt-l2{ top:480px; left:8%;  transform:rotate(-5deg);   width:300px; }
.note--tilt-r2{ top:500px; right:10%;transform:rotate(8deg);    width:280px; }
.note--tilt-l3{ top:720px; left:38%; transform:rotate(-3deg);   width:260px; }

/* decorative pinning */
.note__tape{
  position:absolute;
  top:-10px;left:30px;
  width:60px;height:18px;
  background:linear-gradient(180deg, rgba(245,197,24,.6), rgba(245,197,24,.35));
  box-shadow:0 3px 8px rgba(72,38,22,.18);
  border-radius:1px;
  transform:rotate(-6deg);
}
.note__tape--gold{background:linear-gradient(180deg, rgba(245,197,24,.65), rgba(212,160,23,.4))}
.note__tape--left{left:-10px;top:18px;transform:rotate(35deg);width:50px}
.note__tape--right{left:auto;right:-10px;top:18px;transform:rotate(-35deg);width:50px}

.note__pin{
  position:absolute;
  top:-6px;left:50%;
  transform:translateX(-50%);
  width:20px;height:20px;
  border-radius:50%;
  box-shadow:
    inset -3px -3px 6px rgba(0,0,0,.25),
    inset 3px 3px 4px rgba(255,255,255,.4),
    0 4px 8px rgba(72,38,22,.30);
}
.note__pin--red{
  background:radial-gradient(circle at 35% 35%, #ff6e6e, #d12c2c 70%, #8a1818);
}
.note__pin--gold{
  background:radial-gradient(circle at 35% 35%, #ffe48a, #d4a017 70%, #8a6608);
}
.note__pin--heart{
  background:transparent;
  box-shadow:none;
  font-size:24px;
  color:#d94d7a;
  display:flex;align-items:center;justify-content:center;
  width:auto;height:auto;
  top:-10px;
  filter:drop-shadow(0 4px 6px rgba(72,38,22,.3));
}

/* board decorative stars */
.board__star{
  position:absolute;
  pointer-events:none;
  animation:bounce 5s ease-in-out infinite;
  filter:drop-shadow(0 0 6px currentColor);
}
.board__star--a{top:20px;left:18%;animation-delay:-1s}
.board__star--b{top:440px;left:46%;animation-delay:-2s}
.board__star--c{top:280px;right:24%;animation-delay:-3s}
.board__star--d{top:780px;right:22%;animation-delay:-1.5s}

/* ════════════════════════════════════════════
   PRICE
   ════════════════════════════════════════════ */
.price{
  max-width:var(--page);
  margin:60px auto;
  padding:0 clamp(20px,5vw,56px);
}
.price__inner{
  background:
    radial-gradient(80% 80% at 50% 0%, rgba(245,197,24,.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, #fff5e2 100%);
  border:1px solid var(--border);
  border-radius:36px;
  padding:54px clamp(24px,5vw,72px);
  text-align:center;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-md);
}
.price__inner::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12,0 L13,10 L23,12 L13,14 L12,24 L11,14 L1,12 L11,10 Z' fill='%23d4a017' opacity='0.10'/></svg>") repeat;
  background-size:80px 80px;
  pointer-events:none;
}
.price__inner > *{position:relative}
.price__pill{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--gold);
  padding:8px 14px;
  background:var(--gold-soft);
  border:1px solid rgba(212,160,23,.4);
  border-radius:999px;
}
.price__pill-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.price__inner h2{
  font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(36px,4.6vw,60px);
  line-height:1.05;letter-spacing:-.01em;
  margin:22px 0 36px;
  text-wrap:balance;
  color:var(--ink);
}
.price__inner h2 em{font-family:var(--display);font-style:normal;color:var(--rose);font-weight:400;font-size:1em}
.price__cols{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:22px;
  text-align:left;
  max-width:780px;
  margin:0 auto;
}
.price__col{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:24px;
  padding:30px 26px;
  box-shadow:var(--shadow-sm);
}
.price__col h4{
  font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:24px;color:var(--ink-soft);
  margin-bottom:6px;
}
.price__num{
  font-family:var(--serif);font-weight:600;
  font-size:50px;letter-spacing:-.01em;
  color:var(--ink);
  margin-bottom:20px;
}
.price__num span{font-size:15px;color:var(--ink-mute);font-family:var(--sans);font-weight:600}
.price__col ul{list-style:none;margin-bottom:22px}
.price__col li{
  padding:9px 0 9px 26px;
  position:relative;
  font-family:var(--serif);
  color:var(--ink-soft);
  font-size:17px;
  border-bottom:1px solid var(--border-soft);
}
.price__col li:last-child{border-bottom:none}
.price__col li::before{
  content:"✦";
  position:absolute;left:0;top:9px;
  color:var(--gold);
  font-family:var(--sans);
}
.price__col--main{
  background:linear-gradient(180deg, #fffbea 0%, #fff5f5 100%);
  border:1.5px solid rgba(212,160,23,.45);
  position:relative;
  box-shadow:0 0 0 4px rgba(245,197,24,.08), var(--shadow-md);
}
.price__col--main h4{color:var(--rose)}
.price__col--main .price__num{color:var(--ink)}
.price__col--main li::before{color:var(--rose)}
.price__badge{
  position:absolute;
  top:-12px;left:50%;
  transform:translateX(-50%);
  font-family:var(--sans);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;
  padding:7px 14px;
  background:linear-gradient(135deg, #fde68a, #f5c518);
  color:#3a1e6e;
  border-radius:999px;
  box-shadow:0 4px 12px -4px rgba(212,160,23,.5);
}
.price__pay{
  display:block;margin-top:14px;
  text-align:center;
  font-size:12px;color:var(--ink-mute);
  letter-spacing:.06em;
  font-family:var(--sans);
}

/* ════════════════════════════════════════════
   FINALE
   ════════════════════════════════════════════ */
.finale{
  max-width:var(--page);
  margin:80px auto 60px;
  padding:0 clamp(20px,5vw,56px);
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:64px;
  align-items:center;
  position:relative;
}
.finale__art{
  aspect-ratio:6/5;
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:36px;
  padding:14px;
  transform:rotate(-2deg);
  box-shadow:var(--shadow-lg), 0 0 80px -20px rgba(212,160,23,.35);
  position:relative;
}
.finale__art img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:24px;
}
.finale__art::before, .finale__art::after{
  content:"✦";position:absolute;color:var(--gold);
  font-size:36px;text-shadow:0 4px 12px rgba(212,160,23,.4);
  animation:bounce 3s ease-in-out infinite;
}
.finale__art::before{top:-22px;left:-12px}
.finale__art::after{bottom:-22px;right:-12px;animation-delay:-1.5s;color:var(--rose)}
.finale__copy h2{
  font-family:var(--serif);font-weight:500;font-style:italic;
  font-size:clamp(40px,5vw,70px);
  line-height:1.02;letter-spacing:-.01em;
  margin-bottom:20px;text-wrap:balance;
  color:var(--ink);
}
.finale__copy h2 em{font-family:var(--display);font-style:normal;color:var(--rose);font-weight:400;font-size:1.02em}
.finale__copy p{
  font-family:var(--serif);
  font-size:20px;color:var(--ink-soft);
  margin-bottom:30px;max-width:480px;text-wrap:pretty;
  line-height:1.45;
}
.finale__fine{
  font-family:var(--sans) !important;
  font-size:13px !important;color:var(--ink-mute) !important;
  margin-top:18px !important;
}

/* ════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════ */
.footer{
  border-top:1px solid var(--border);
  padding:48px clamp(20px,5vw,56px) 28px;
  background:linear-gradient(180deg, transparent 0%, rgba(255,250,240,.6) 100%);
}
.footer__cols{
  max-width:var(--page);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:40px;
}
.footer__brand p{
  color:var(--ink-soft);
  font-family:var(--serif);
  font-style:italic;
  font-size:15px;
  max-width:280px;
  margin-top:12px;
}
.footer h5{
  font-family:var(--sans);font-weight:700;
  font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--purple-deep);
  margin-bottom:16px;
}
.footer a{
  display:block;
  color:var(--ink-soft);
  text-decoration:none;
  font-family:var(--sans);
  font-size:14px;
  margin-bottom:10px;
  transition:color .2s;
}
.footer a:hover{color:var(--rose)}
.footer__btm{
  max-width:var(--page);
  margin:36px auto 0;
  padding-top:20px;
  border-top:1px solid var(--border-soft);
  display:flex;justify-content:space-between;
  font-family:var(--sans);
  font-size:13px;color:var(--ink-mute);
}

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 1100px){
  .worlds__grid{grid-template-columns:repeat(2,1fr)}
  .worlds__grid--compact{grid-template-columns:repeat(3,1fr)}
  .world-card{margin-top:0 !important}
}
@media (max-width: 1024px){
  .hero{grid-template-columns:1fr;gap:40px;padding-top:16px}
  .hero__art{height:520px;max-width:560px;margin:0 auto;width:100%}
  .strip__inner{ grid-template-columns:1fr 1fr; gap:20px; }
  .strip__divider{display:none}
  .how-step, .how-step--reverse{grid-template-columns:1fr;gap:32px}
  .how-step--reverse .how-step__img{order:0}
  .price__cols{grid-template-columns:1fr}
  .finale{grid-template-columns:1fr;gap:40px}
  .finale__art{max-width:520px;margin:0 auto;width:100%}
  .footer__cols{grid-template-columns:1fr 1fr;gap:28px}

  /* scatter rearrange */
  .scatter{height:1400px}
  .scatter__item--1{width:240px;left:2%;top:0}
  .scatter__item--2{width:240px;left:auto;right:2%;top:60px}
  .scatter__item--3{width:240px;right:auto;left:2%;top:480px}
  .scatter__item--4{width:240px;right:2%;left:auto;top:540px}
  .scatter__item--5{width:240px;right:auto;left:50%;top:980px;transform:translateX(-50%) rotate(-5deg)}

  /* board rearrange */
  .board__inner{min-height:auto;padding:30px 0;display:flex;flex-direction:column;align-items:center;gap:30px}
  .polaroid, .note{position:relative;left:auto;right:auto;top:auto;transform:none;margin:0 auto}
  .polaroid{transform:rotate(2deg);width:min(380px,90%)}
  .note{width:min(320px,90%)}
  .note--tilt-l1{transform:rotate(-3deg)}
  .note--tilt-r1{transform:rotate(2deg)}
  .note--tilt-l2{transform:rotate(-2deg)}
  .note--tilt-r2{transform:rotate(3deg)}
  .note--tilt-l3{transform:rotate(-2deg)}
  .board__star{display:none}
}

/* ════════════════════════════════════════════
   LIBRARY FEATURE (enlarged cover grid)
   ════════════════════════════════════════════ */
.library-feature{
  max-width:var(--page);
  margin:60px auto;
  padding:0 clamp(20px,5vw,56px);
}
.lib-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:28px;
}
.lib-card{
  display:flex;flex-direction:column;
  text-decoration:none;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.lib-card:nth-child(4n+1){transform:rotate(-1deg)}
.lib-card:nth-child(4n+2){transform:rotate(1.2deg)}
.lib-card:nth-child(4n+3){transform:rotate(-1.4deg)}
.lib-card:nth-child(4n){transform:rotate(0.8deg)}
.lib-card:hover{transform:translateY(-8px) rotate(0deg)}
.lib-card__cover{
  aspect-ratio:2/3;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--border);
  background:linear-gradient(160deg, var(--paper-cream) 0%, var(--paper-pink) 100%);
  box-shadow:var(--shadow-paper);
  transition:box-shadow .4s, border-color .3s;
}
.lib-card:hover .lib-card__cover{box-shadow:var(--shadow-lg);border-color:var(--purple)}
.lib-card__cover img{width:100%;height:100%;object-fit:contain;display:block}
.lib-card__title{
  margin-top:13px;
  font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:19px;line-height:1.18;color:var(--ink);
  text-wrap:balance;
}
.lib-card__price{
  font-family:var(--sans);font-size:13px;font-weight:700;
  color:var(--gold-deep);margin-top:4px;
}
.library-feature__cta{display:flex;justify-content:center;margin-top:36px}

/* ════════════════════════════════════════════
   OFFERINGS (vertical tabs)
   ════════════════════════════════════════════ */
.offer{
  max-width:var(--page);
  margin:60px auto;
  padding:0 clamp(20px,5vw,56px);
}
.offer__shell{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:26px;
  align-items:start;
}
.offer__tabs{display:flex;flex-direction:column;gap:12px}
.offer__tab{
  display:flex;flex-direction:column;gap:3px;
  text-align:left;
  padding:18px 22px;
  background:var(--paper);
  border:1.5px solid var(--border);
  border-radius:18px;
  font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:22px;color:var(--ink);
  cursor:pointer;
  transition:all .25s;
  box-shadow:var(--shadow-sm);
}
.offer__tab small{
  font-family:var(--sans);font-style:normal;font-weight:600;
  font-size:12px;letter-spacing:.02em;color:var(--ink-mute);
}
.offer__tab:hover{border-color:var(--purple);transform:translateX(2px)}
.offer__tab.is-active{
  background:linear-gradient(135deg, var(--purple) 0%, var(--purple-deep) 100%);
  border-color:transparent;color:#fff;
  box-shadow:0 14px 30px -12px rgba(127,119,221,0.55);
}
.offer__tab.is-active small{color:rgba(255,255,255,0.85)}
.offer__panels{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:24px;
  padding:26px clamp(20px,3vw,34px);
  box-shadow:var(--shadow-paper);
  min-height:340px;
}
.offer__panel{display:none;animation:offerFade .4s ease}
.offer__panel.is-active{display:block}
@keyframes offerFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.offer-tier{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px 20px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--paper-cream);
  margin-bottom:12px;
}
.offer-tier--feature{
  background:linear-gradient(135deg, #fffbea 0%, #fff5f0 100%);
  border-color:rgba(239,159,39,0.45);
  box-shadow:0 0 0 3px rgba(239,159,39,0.08);
}
.offer-tier__main{flex:1;min-width:0}
.offer-tier__name{
  font-family:var(--serif);font-style:italic;font-weight:700;
  font-size:22px;color:var(--ink);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.offer-tier__tag{
  font-family:var(--sans);font-style:normal;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:800;
  padding:4px 10px;border-radius:999px;
  background:linear-gradient(135deg,#fde68a,#f5c518);color:#2c2c2a;
}
.offer-tier__tag--blue{background:#042c53;color:#fff}
.offer-tier__desc{
  font-family:var(--serif);font-size:15px;line-height:1.4;
  color:var(--ink-soft);margin-top:5px;text-wrap:pretty;
}
.offer-tier__side{
  flex-shrink:0;text-align:right;
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;
}
.offer-tier__side--col{min-width:160px}
.offer-tier__price{
  font-family:var(--serif);font-weight:700;font-size:22px;color:var(--ink);
}
.offer-tier__price small{font-family:var(--sans);font-size:12px;color:var(--ink-mute);font-weight:600}
.offer-tier__price2{font-family:var(--sans);font-size:12px;color:var(--ink-mute);font-weight:600}
.btn--sm{padding:9px 16px;font-size:13px}
.offer-adv{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:8px 18px;
  margin-top:18px;padding-top:16px;
  border-top:1px dashed var(--border);
}
.offer-adv li{
  position:relative;padding-left:20px;
  font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-soft);
}
.offer-adv li::before{content:"✦";position:absolute;left:0;color:var(--gold-deep);font-style:normal}
.offer__panelcta{margin-top:18px}

@media (max-width: 880px){
  .lib-grid{grid-template-columns:repeat(2,1fr);gap:22px}
  .lib-card{transform:none !important}
  .offer__shell{grid-template-columns:1fr}
  .offer__tabs{flex-direction:row;overflow-x:auto;padding-bottom:4px}
  .offer__tab{flex:1 0 auto;min-width:160px}
  .offer-tier{flex-direction:column;align-items:flex-start;gap:10px}
  .offer-tier__side{text-align:left;align-items:flex-start}
}

@media (max-width: 720px){
  body{cursor:auto}
  a,button{cursor:pointer}
  #wand{display:none}
  /* ─── mobile burger nav (desktop menu untouched) ─── */
  .nav{gap:6px}
  .nav .brand{margin-right:auto}
  .nav__burger{
    display:flex !important;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:11px;flex-shrink:0;
    background:transparent;border:none;cursor:pointer;border-radius:10px;
    -webkit-tap-highlight-color:transparent;
  }
  .nav__burger span{
    display:block;width:100%;height:2px;border-radius:2px;
    background:var(--ink);
    transition:transform .25s ease, opacity .2s ease;
  }
  .nav__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__burger.is-open span:nth-child(2){opacity:0}
  .nav__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav__links{
    display:flex;flex-direction:column;gap:2px;
    position:absolute;top:calc(100% - 4px);
    left:clamp(20px,5vw,56px);right:clamp(20px,5vw,56px);
    padding:8px;
    background:var(--paper-cream);
    border:1px solid var(--border);border-radius:16px;
    box-shadow:0 20px 44px -18px rgba(45,15,8,.4);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav__links.is-open{opacity:1;visibility:visible;transform:translateY(0)}
  .nav__links a{padding:14px 16px;border-radius:10px;font-size:16px}
  .worlds__grid{grid-template-columns:1fr}
  .worlds__grid--compact{grid-template-columns:1fr 1fr}
  .world-card{transform:none !important;margin-top:0 !important}
  .footer__cols{grid-template-columns:1fr}
  .footer__btm{flex-direction:column;gap:8px;text-align:center}
  .hero__title{font-size:50px}
  .section-head h2{font-size:38px}
}