Senseich

Стили не так подключили, создайте в той же папке файл style.css
Вырежьте все стили начиная с body { } , сохраните их в style.css
И не забудьте подключить, как выше написали вам, добавив между тегами head строчку <link rel="stylesheet" href="style.css">

coderxx, зачем, если можно это на квери сделать. в принципе можно сделать как неактивные ссылки и использовать : active , но это костыль )

Может проще создать класс, например:

.faq__question_w {
	border-bottom: dashed 3px white;
}

Тогда скрипт будет, как то так:

$('.faq__question').on('click', function () {
    $(this).toggleClass('faq__question_w').next('.faq__answer').slideToggle();
    $(this).closest('.frame').siblings().find('.faq__answer').slideUp();
  $(this).closest('.frame').siblings().find('.faq__question').removeClass('faq__question_w');
});

Ну это на скорую руку. может проще можно *)

Вроде как с тенями такая фишка не прокатит, хоть они и на одно слое, элемент который ниже в потоке будет перекрывать элемент который выше. Если только попробовать поиграть с тенями, допустим для второго уровня: -webkit-box-shadow: -1px 1px 5px 2px rgba(0,0,0,0.44);
а для третьего: -webkit-box-shadow: 0px 1px 5px 2px rgba(0,0,0,0.44);
Ну это как пример, вобщем сделать так, чтобы тени слева и справа не наезжали друг на друга.