@font-face{font-family:"Fredoka";src:url("../fonts/fredoka.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Luckiest Guy";src:url("../fonts/luckiest-guy.woff2") format("woff2");font-weight:400;font-display:swap}
:root{
  --pink:#FF4FA3;--pink-d:#E0307F;--pink-l:#FFE3F1;--yellow:#FFC93C;--yellow-d:#F2A900;
  --blue:#3B82F6;--green:#22C55E;--orange:#FF8A00;--purple:#8B5CF6;--teal:#14B8A6;
  --ink:#2B1B3D;--ink-2:#5B4A6E;--cream:#FFF8EE;--white:#fff;
  --r:22px;--shadow:0 10px 30px rgba(43,27,61,.12);
  --display:"Luckiest Guy","Fredoka",system-ui,sans-serif;
  --body:"Fredoka",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--body);font-weight:400;font-size:17px;line-height:1.55;color:var(--ink);background:var(--cream)}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--pink-d)}
.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 18px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:10px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}

/* top bar */
.topbar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);border-bottom:3px solid var(--pink-l)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:10px;height:60px}
.brand img{height:38px;width:auto}
.nav{display:flex;gap:4px}
.nav a{font-weight:600;font-size:15px;text-decoration:none;color:var(--ink);padding:8px 10px;border-radius:999px;white-space:nowrap}
.nav a:hover{background:var(--pink-l);color:var(--pink-d)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:12px 24px;border-radius:999px;font-family:var(--body);font-weight:700;font-size:18px;text-decoration:none;border:0;cursor:pointer;line-height:1.15;text-align:center;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn-pink{background:var(--pink);color:#fff;box-shadow:0 5px 0 var(--pink-d)}
.btn-yellow{background:var(--yellow);color:var(--ink);box-shadow:0 5px 0 var(--yellow-d)}
.btn-outline{background:#fff;color:var(--ink);border:3px solid var(--ink);min-height:48px;font-size:16px}
.btn-amazon{width:100%;background:var(--yellow);color:var(--ink);box-shadow:0 5px 0 var(--yellow-d);font-size:19px;min-height:58px}
.btn-amazon::before{content:"";width:22px;height:22px;flex:none;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B1B3D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11h11.2L21 7H6.2'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.6'/%3E%3Ccircle cx='17' cy='19.5' r='1.6'/%3E%3C/svg%3E")}
.btn-amazon.is-soon{background:#EFE7F5;color:var(--ink-2);box-shadow:0 5px 0 #D9CCE6;cursor:default;transform:none}
.btn-amazon.is-soon::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B4A6E' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.btn-youtube{background:#FF0033;color:#fff;box-shadow:0 5px 0 #C20027}
.yt-ico{width:24px;height:17px;border-radius:5px;background:#fff;position:relative;flex:none}
.yt-ico::after{content:"";position:absolute;left:9px;top:4px;border-left:8px solid #FF0033;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}

/* hero */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(circle at 12% 18%,rgba(255,201,60,.35) 0 60px,transparent 61px),
  radial-gradient(circle at 92% 12%,rgba(59,130,246,.18) 0 46px,transparent 47px),
  radial-gradient(circle at 85% 92%,rgba(34,197,94,.2) 0 70px,transparent 71px),
  linear-gradient(180deg,#FFE3F1 0%,#FFF1F8 60%,var(--cream) 100%);padding:26px 0 34px}
.hero-in{display:grid;gap:22px}
.eyebrow{display:inline-block;margin:0 0 10px;padding:6px 14px;border-radius:999px;background:#fff;color:var(--pink-d);font-weight:700;font-size:14px;letter-spacing:.02em;box-shadow:0 3px 0 var(--pink-l)}
.hero-title{font-family:var(--display);font-weight:400;font-size:clamp(42px,11.5vw,76px);line-height:1;margin:0 0 14px;letter-spacing:.01em;text-shadow:0 3px 0 rgba(43,27,61,.12)}
.hero-title span{display:inline-block}
.c1{color:var(--pink)}.c2{color:var(--blue)}.c3{color:var(--green)}.c4{color:var(--orange)}.c5{color:var(--purple)}
.lede{font-size:18.5px;color:var(--ink-2);margin:0 0 20px;max-width:34em}
.cta{display:flex;flex-direction:column;gap:14px}
.cta .btn{width:100%}
.hero-art{position:relative}
.hero-art img{width:100%;border-radius:28px;border:6px solid #fff;box-shadow:var(--shadow);aspect-ratio:1100/958;object-fit:cover}
.sticker{position:absolute;font-family:var(--display);color:#fff;width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:32px;box-shadow:0 4px 0 rgba(0,0,0,.15);padding-top:6px}
.s-a{background:var(--pink);left:-6px;top:-10px;transform:rotate(-10deg)}
.s-b{background:var(--blue);right:-6px;top:38%;transform:rotate(8deg)}
.s-c{background:var(--green);left:14%;bottom:-14px;transform:rotate(6deg)}

/* pillars */
.pillars{background:#fff;border-top:4px dashed var(--pink-l);border-bottom:4px dashed var(--pink-l)}
.pillar-list{list-style:none;margin:0 auto;padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:14px 10px}
.pillar-list li{display:flex;flex-direction:column;align-items:center;text-align:center;font-size:14px;color:var(--ink-2)}
.pillar-list b{font-size:18px;color:var(--ink)}
.p-ico{font-size:28px;line-height:1.2}

/* sections */
.section{padding:48px 0}
.section-title{font-family:var(--display);font-weight:400;font-size:clamp(34px,8.5vw,52px);line-height:1.05;text-align:center;margin:0 0 10px;color:var(--ink)}
.section-title span{background:linear-gradient(transparent 62%,var(--yellow) 62%,var(--yellow) 90%,transparent 90%);padding:0 6px}
.section-title.left{text-align:left}
.section-lede{text-align:center;color:var(--ink-2);max-width:36em;margin:0 auto 28px;font-size:18px}
.sub-title{font-family:var(--display);font-weight:400;font-size:30px;margin:38px 0 14px;color:var(--pink)}

/* products */
.products{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.product{position:relative;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;border-top:8px solid var(--accent)}
.p-cover{background:color-mix(in srgb,var(--accent) 14%,#fff);padding:22px 22px 18px;display:grid;place-items:center}
.p-cover img{width:auto;max-height:340px;border-radius:6px 12px 12px 6px;box-shadow:-6px 8px 0 rgba(43,27,61,.08),0 10px 22px rgba(43,27,61,.22)}
.p-body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.p-format{margin:0 0 4px;font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.p-title{margin:0;font-size:23px;line-height:1.2;font-weight:700}
.p-sub{margin:2px 0 0;color:var(--ink-2);font-weight:500}
.p-price{margin:8px 0 6px;font-family:var(--display);font-size:32px;line-height:1;color:var(--ink)}
.p-desc{margin:4px 0 12px;color:var(--ink-2);font-size:16.5px}
.p-facts{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.p-facts li{font-size:13.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--accent) 13%,#fff);color:var(--ink)}
.product .btn-amazon{margin-top:auto}
.ribbon{position:absolute;top:16px;right:-38px;transform:rotate(35deg);background:var(--orange);color:#fff;font-weight:700;font-size:14px;padding:6px 44px;z-index:2;box-shadow:0 3px 0 rgba(0,0,0,.12);letter-spacing:.03em}
.product.is-live .ribbon{display:none}

/* zara tv */
.tv{background:linear-gradient(180deg,#EAF3FF 0%,#F4ECFF 100%);position:relative}
.teaser{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;display:grid}
.teaser-video{width:100%;aspect-ratio:16/9;background:#1b1030}
.teaser-copy{padding:18px 20px 24px}
.teaser-copy h3{margin:0 0 6px;font-size:24px}
.teaser-copy p{margin:0 0 16px;color:var(--ink-2)}
.teaser-copy .btn{width:100%}
.episodes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.episode{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 6px 16px rgba(43,27,61,.1);border-bottom:6px solid var(--ep,#FF4FA3)}
.episode.is-extra{display:none}
.episodes.show-all .episode.is-extra{display:block}
.ep-media{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;margin:0;background:#f3eef8;overflow:hidden;font:inherit;color:inherit}
button.ep-media{cursor:pointer}
.ep-media img{width:100%;height:100%;object-fit:cover}
.ep-media.is-art{background:color-mix(in srgb,var(--ep) 18%,#fff)}
.ep-media.is-art img{position:absolute;right:4%;top:6%;width:56%;height:88%;object-fit:contain;border-radius:12px}
.ep-letter{position:absolute;left:8%;top:50%;transform:translateY(-58%);font-family:var(--display);font-size:clamp(34px,10vw,58px);color:var(--ep);text-shadow:0 3px 0 rgba(0,0,0,.12);letter-spacing:.02em}
.ep-soon{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);white-space:nowrap;background:rgba(43,27,61,.82);color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px}
.ep-play{position:absolute;inset:0;margin:auto;width:58px;height:41px;border-radius:12px;background:#FF0033;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.ep-play::after{content:"";position:absolute;left:23px;top:12px;border-left:16px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.ep-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ep-cap{padding:8px 12px 12px;display:flex;flex-direction:column;line-height:1.25}
.ep-num{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ep,#FF4FA3)}
.ep-title{font-weight:600;font-size:16px}
.more-row{text-align:center;margin-top:20px}
.fine{text-align:center;font-size:14px;color:var(--ink-2);margin:16px auto 0;max-width:34em}

/* about */
.about-in{display:grid;gap:24px;align-items:center}
.author-photo{position:relative;width:min(300px,78vw);aspect-ratio:1;margin:0 auto;border-radius:50%;overflow:hidden;border:8px solid #fff;box-shadow:0 0 0 4px var(--pink),var(--shadow);background:var(--pink-l)}
.author-photo img{width:100%;height:100%;object-fit:cover}
.author-photo .ph-zara{opacity:.35;filter:saturate(.7)}
.ph-note{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;font-weight:700;color:var(--pink-d);font-size:17px;line-height:1.2;background:rgba(255,255,255,.92);padding:10px 16px;border-radius:16px;white-space:nowrap;box-shadow:0 3px 0 var(--pink-l)}
.author-photo.has-photo .ph-note{display:none}
.about-name{font-family:var(--display);font-size:28px;color:var(--pink);margin:0 0 6px}
.about-copy p{color:var(--ink-2);font-size:17.5px}
.placeholder-note{font-style:italic}
.about-copy .btn{width:100%;max-width:380px;margin-top:8px}
.about .section-title.left{text-align:center}
.about-copy{text-align:center}

/* footer */
.footer{background:var(--ink);color:#EDE6F5;padding:40px 0 30px;border-top:8px solid var(--pink)}
.footer a{color:#fff}
.footer-logo{width:240px;background:#fff;border-radius:16px;padding:10px 14px;margin-bottom:22px}
.footer-cols{display:grid;gap:20px}
.f-h{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.02em;color:var(--yellow);margin:0 0 6px}
.f-mail{font-weight:600;word-break:break-all}
.socials{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.social{color:#EDE6F5;text-decoration:none}
a.social{text-decoration:underline;text-underline-offset:3px}
.social b{display:inline-block;min-width:88px;color:#fff}
.privacy{margin-top:26px;padding:18px;border-radius:18px;background:rgba(255,255,255,.07);border:2px dashed rgba(255,255,255,.25)}
.privacy p{margin:0;font-size:15px;line-height:1.55}
.copy{margin:22px 0 0;font-size:14px;color:#BFB2CF}

/* ---- tablet & desktop ---- */
@media (min-width:600px){
  .cta{flex-direction:row;flex-wrap:wrap}
  .cta .btn{width:auto}
  .pillar-list{grid-template-columns:repeat(4,1fr)}
  .products{grid-template-columns:1fr 1fr}
  .episodes{grid-template-columns:repeat(3,1fr)}
  .teaser-copy .btn{width:auto}
  .ep-letter{font-size:clamp(34px,5.5vw,58px)}
}
@media (min-width:760px){
  .hero{padding:48px 0 60px}
  .hero-in{grid-template-columns:1.05fr 1fr;align-items:center;gap:44px}
  .nav a{font-size:16px;padding:8px 14px}
  .brand img{height:44px}
  .topbar-in{height:68px}
  .about-in{grid-template-columns:320px 1fr;gap:48px}
  .about .section-title.left,.about-copy{text-align:left}
  .author-photo{margin:0}
  .footer-cols{grid-template-columns:1fr 1fr}
  .section{padding:72px 0}
}
@media (min-width:900px){
  .products{grid-template-columns:1fr 1fr;gap:24px}
  .product{flex-direction:row;border-top:0;border-left:8px solid var(--accent)}
  .p-cover{flex:0 0 42%;padding:22px 16px}
  .p-cover img{max-height:330px}
  .p-body{padding:22px 22px 22px 6px}
  .p-title{font-size:21px}
  .btn-amazon{font-size:17px;padding:12px 16px}
}
@media (min-width:1000px){
  .teaser{grid-template-columns:1.6fr 1fr;align-items:center}
  .teaser-copy{padding:26px 30px}
  .teaser-copy .btn{width:100%}
  .hero-in{grid-template-columns:1fr 1fr}
}