:root {
  --book-purple: #3d315f;
  --book-plum: #5a255c;
  --book-gold: #f2c24f;
  --book-cream: #fbf8f2;
}

.book-page { overflow-x: hidden; }

.book-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 76px 0 68px;
  color: #fff;
  background:
    radial-gradient(circle at 84% 22%, rgb(242 194 79 / 19%), transparent 25%),
    linear-gradient(130deg, #17132f 0%, var(--book-purple) 52%, var(--book-plum) 100%);
}

.book-hero::before,
.book-hero::after {
  position: absolute;
  z-index: -1;
  content: "";
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 50%;
}

.book-hero::before { width: 440px; height: 440px; top: -210px; right: -80px; }
.book-hero::after { width: 620px; height: 620px; right: -320px; bottom: -390px; }

.book-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: var(--book-gold);
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.book-hero h1 {
  max-width: 820px;
  margin-bottom: 18px;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.6rem, 5.7vw, 5rem);
  line-height: .98;
}

.book-hero h1 span {
  display: block;
  margin-top: 12px;
  color: var(--book-gold);
  font-family: inherit;
  font-size: .42em;
  letter-spacing: .035em;
  line-height: 1.2;
  text-transform: uppercase;
}

.book-hero-copy > p { max-width: 650px; color: rgb(255 255 255 / 82%); font-size: 18px; }
.book-author { margin: 24px 0 29px; color: #fff; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.book-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.book-product-stage {
  position: relative;
  display: grid;
  min-height: 570px;
  align-items: center;
  justify-items: center;
}

.book-product-stage::after {
  position: absolute;
  right: 7%;
  bottom: 5%;
  left: 7%;
  height: 42px;
  content: "";
  background: rgb(0 0 0 / 30%);
  border-radius: 50%;
  filter: blur(18px);
  transform: perspective(120px) rotateX(62deg);
}

.book-product-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgb(255 255 255 / 15%), rgb(242 194 79 / 9%) 43%, transparent 70%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 50%;
}

.book-hero-product {
  position: relative;
  z-index: 1;
  width: min(100%, 435px);
  max-height: 590px;
  object-fit: contain;
  filter: drop-shadow(0 32px 30px rgb(0 0 0 / 35%));
  transform: rotate(1.5deg);
}

.book-intro { background: var(--book-cream); }

.book-author-visual {
  position: relative;
  min-height: 570px;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 20%, rgb(255 255 255 / 14%), transparent 30%),
    linear-gradient(145deg, #211a45, var(--book-purple) 58%, var(--book-plum));
  border-radius: 30px;
  box-shadow: 0 28px 65px rgb(40 28 61 / 20%);
}

.book-author-visual::after {
  position: absolute;
  right: 8%;
  bottom: 5%;
  left: 35%;
  height: 28px;
  content: "";
  background: rgb(0 0 0 / 25%);
  border-radius: 50%;
  filter: blur(15px);
}

.author-visual-ring { position: absolute; border: 1px solid rgb(255 255 255 / 16%); border-radius: 50%; }
.ring-one { width: 360px; height: 360px; top: -105px; left: -115px; }
.ring-two { width: 490px; height: 490px; right: -265px; bottom: -285px; }

.book-author-portrait {
  position: absolute;
  bottom: -8px;
  left: -4%;
  z-index: 1;
  width: 78%;
  max-height: 94%;
  object-fit: contain;
  object-position: bottom left;
  filter: drop-shadow(0 18px 22px rgb(0 0 0 / 20%));
}

.book-author-book {
  position: absolute;
  right: 2%;
  bottom: 1%;
  z-index: 3;
  width: 43%;
  max-height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 22px 20px rgb(0 0 0 / 38%));
  transform: rotate(2deg);
}

.book-copy { padding: 24px 5px; }
.book-copy h2,
.book-formats h2,
.book-order h2 { color: var(--book-purple); }
.book-copy h2 { margin-bottom: 20px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.4rem, 4vw, 4.1rem); }
.book-copy-title { color: var(--book-plum); font-size: 21px; font-weight: 800; }
.book-copy blockquote {
  margin: 27px 0 32px;
  padding: 25px 27px 25px 31px;
  color: var(--book-purple);
  background: #fff;
  border-left: 5px solid var(--book-gold);
  border-radius: 0 18px 18px 0;
  box-shadow: 0 16px 40px rgb(40 28 61 / 9%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  line-height: 1.55;
}

.book-formats { background: #fff; }
.book-formats .public-section-heading { margin-bottom: 36px; }
.book-format-card {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 520px;
  padding: 26px 30px 30px;
  overflow: hidden;
  flex-direction: column;
  align-items: flex-start;
  background: #fff;
  border: 1px solid rgb(61 49 95 / 12%);
  border-radius: 24px;
  box-shadow: 0 18px 48px rgb(23 19 47 / 9%);
}
.book-format-card.featured { color: #fff; background: linear-gradient(145deg, var(--book-purple), var(--book-plum)); }
.book-format-card.is-coming-soon { background: #f5f3f8; }

.book-format-visual {
  position: relative;
  display: grid;
  width: 100%;
  height: 320px;
  margin-bottom: 20px;
  align-items: end;
  justify-items: center;
  background: linear-gradient(145deg, #f8f5ed, #eee9f1);
  border-radius: 18px;
}
.featured .book-format-visual { background: rgb(255 255 255 / 9%); }
.is-coming-soon .book-format-visual { filter: grayscale(.55); opacity: .68; }
.book-format-visual img { width: auto; height: 292px; object-fit: contain; filter: drop-shadow(0 17px 14px rgb(0 0 0 / 22%)); }
.book-format-visual > i {
  position: absolute;
  top: 19px;
  left: 19px;
  z-index: 2;
  display: grid;
  width: 48px;
  height: 48px;
  color: #fff;
  background: var(--book-purple);
  border-radius: 50%;
  font-size: 22px;
  place-items: center;
}
.digital-format-label {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  padding: 8px 14px;
  color: #17132f;
  background: var(--book-gold);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.book-format-card h3 { margin-bottom: 20px; color: var(--book-purple); }
.book-format-card.featured h3 { color: #fff; }
.book-format-card .public-btn { margin-top: auto; }
.book-format-tag { color: var(--book-plum); font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.featured .book-format-tag { color: var(--book-gold); }
.book-coming-soon {
  display: inline-flex;
  margin-top: auto;
  padding: 12px 20px;
  color: #fff;
  background: #6f687c;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .04em;
}

.book-marketplaces {
  background:
    radial-gradient(circle at 8% 5%, rgb(252 177 27 / 13%), transparent 26%),
    linear-gradient(180deg, #f8f6fb 0%, #fff 100%);
}
.marketplace-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .8fr);
  gap: 40px;
  margin-bottom: 34px;
  align-items: end;
}
.marketplace-heading h2 {
  margin-bottom: 0;
  color: var(--book-purple);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
}
.marketplace-heading > p { margin: 0; color: #5f6676; font-size: 17px; line-height: 1.7; }
.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 15px;
}
.marketplace-card {
  position: relative;
  display: flex;
  min-height: 205px;
  padding: 22px;
  flex-direction: column;
  align-items: flex-start;
  color: var(--book-purple);
  background: rgb(255 255 255 / 92%);
  border: 1px solid rgb(61 49 95 / 12%);
  border-radius: 20px;
  box-shadow: 0 13px 30px rgb(23 19 47 / 8%);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.marketplace-card:hover,
.marketplace-card:focus-visible { color: var(--book-purple); border-color: rgb(252 177 27 / 75%); transform: translateY(-5px); box-shadow: 0 20px 42px rgb(23 19 47 / 14%); }
.marketplace-card:focus-visible { outline: 3px solid rgb(252 177 27 / 35%); outline-offset: 3px; }
.marketplace-card-primary { color: #fff; background: linear-gradient(145deg, #17132f, var(--book-purple)); border-color: transparent; }
.marketplace-card-primary:hover,
.marketplace-card-primary:focus-visible { color: #fff; }
.marketplace-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 20px;
  color: var(--book-purple);
  background: #f1edf6;
  border-radius: 17px;
  font-size: 27px;
  place-items: center;
}
.marketplace-card-primary .marketplace-icon { color: #17132f; background: var(--book-gold); }
.marketplace-amazon { color: #111; background: #ffca75; }
.marketplace-google { color: #2774e8; background: #eaf2ff; }
.marketplace-apple { color: #fff; background: #111; }
.marketplace-kobo { color: #fff; background: #d62370; }
.marketplace-kobo strong { font: 800 28px/1 Georgia, serif; }
.marketplace-card h3 { max-width: calc(100% - 42px); margin: auto 0 0; color: var(--book-purple); font-size: 20px; line-height: 1.2; }
.marketplace-card-primary h3 { color: #fff; }
.marketplace-arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: grid;
  width: 34px;
  height: 34px;
  color: var(--book-purple);
  background: #f3eff7;
  border-radius: 50%;
  place-items: center;
}
.marketplace-card-primary .marketplace-arrow { color: #17132f; background: var(--book-gold); }

.book-order { color: #fff; background: linear-gradient(125deg, #17132f, var(--book-purple)); }
.book-order h2 { margin-bottom: 26px; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.7rem, 5vw, 4.6rem); }
.book-payment-process { display: grid; gap: 14px; }
.payment-step { display: flex; gap: 15px; align-items: flex-start; }
.payment-step span {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  color: #17132f;
  background: var(--book-gold);
  border-radius: 50%;
  font-weight: 900;
  place-items: center;
}
.payment-step p { margin: 4px 0 0; color: rgb(255 255 255 / 80%); }
.book-secure-note {
  display: flex;
  gap: 13px;
  margin-top: 26px;
  padding: 18px;
  color: rgb(255 255 255 / 81%);
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 14px;
}
.book-secure-note i { color: var(--book-gold); font-size: 23px; }
.book-order .public-form { color: var(--inoza-ink); }
.book-order .public-form h3 { color: var(--book-purple); }
.book-order .public-form .public-btn { width: 100%; justify-content: center; }
.book-order .form-text { color: #667085; }

@media (max-width: 991px) {
  .book-hero { padding: 58px 0; }
  .book-product-stage { min-height: 485px; margin-top: 20px; }
  .book-hero-product { max-height: 500px; }
  .book-author-visual { min-height: 520px; }
  .marketplace-heading { grid-template-columns: 1fr; gap: 14px; }
  .marketplace-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
  .book-hero { text-align: center; }
  .book-hero-copy > p { font-size: 16px; }
  .book-actions { justify-content: center; }
  .book-product-stage { min-height: 405px; }
  .marketplace-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .marketplace-card { min-height: 165px; padding: 16px; }
  .marketplace-icon { width: 50px; height: 50px; margin-bottom: 15px; font-size: 23px; border-radius: 14px; }
  .marketplace-card h3 { max-width: calc(100% - 32px); font-size: 17px; }
  .marketplace-arrow { right: 13px; bottom: 13px; width: 30px; height: 30px; }
  .book-product-glow { width: 310px; height: 310px; }
  .book-hero-product { width: min(88%, 330px); max-height: 410px; }
  .book-author-visual { min-height: 420px; border-radius: 22px; }
  .book-author-portrait { left: -13%; width: 91%; }
  .book-author-book { right: -2%; width: 47%; }
  .book-copy { padding-top: 5px; text-align: center; }
  .book-copy blockquote { text-align: left; }
  .book-format-card { min-height: 470px; padding: 22px; }
  .book-format-visual { height: 280px; }
  .book-format-visual img { height: 255px; }
}

@media (max-width: 360px) {
  .marketplace-grid { grid-template-columns: 1fr; }
}