/* The content pages (how it works, prices, examples, reviews, help,
   contact, gifts, ages, ideas, themes, names, blog, legal): their own
   blocks, after home.css, whose sections (theme cloud, reviews, USPs,
   promo, age tiles, SEO card) they reuse. Values follow the reference
   layout; phone values sit under max-width 767px. */

/* ── shared bits ── */
@keyframes imageLoader { to { transform: rotate(360deg); } }
@keyframes mpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* The star row's filled share (the rating line, the reviews aggregate). */
.cta-fill-0 { width: 0; } .cta-fill-2 { width: 2%; } .cta-fill-4 { width: 4%; } .cta-fill-6 { width: 6%; } .cta-fill-8 { width: 8%; }
.cta-fill-10 { width: 10%; } .cta-fill-12 { width: 12%; } .cta-fill-14 { width: 14%; } .cta-fill-16 { width: 16%; } .cta-fill-18 { width: 18%; }
.cta-fill-20 { width: 20%; } .cta-fill-22 { width: 22%; } .cta-fill-24 { width: 24%; } .cta-fill-26 { width: 26%; } .cta-fill-28 { width: 28%; }
.cta-fill-30 { width: 30%; } .cta-fill-32 { width: 32%; } .cta-fill-34 { width: 34%; } .cta-fill-36 { width: 36%; } .cta-fill-38 { width: 38%; }
.cta-fill-40 { width: 40%; } .cta-fill-42 { width: 42%; } .cta-fill-44 { width: 44%; } .cta-fill-46 { width: 46%; } .cta-fill-48 { width: 48%; }
.cta-fill-50 { width: 50%; } .cta-fill-52 { width: 52%; } .cta-fill-54 { width: 54%; } .cta-fill-56 { width: 56%; } .cta-fill-58 { width: 58%; }
.cta-fill-60 { width: 60%; } .cta-fill-62 { width: 62%; } .cta-fill-64 { width: 64%; } .cta-fill-66 { width: 66%; } .cta-fill-68 { width: 68%; }
.cta-fill-70 { width: 70%; } .cta-fill-72 { width: 72%; } .cta-fill-74 { width: 74%; } .cta-fill-76 { width: 76%; } .cta-fill-78 { width: 78%; }
.cta-fill-80 { width: 80%; } .cta-fill-82 { width: 82%; } .cta-fill-84 { width: 84%; } .cta-fill-86 { width: 86%; } .cta-fill-88 { width: 88%; }
.cta-fill-90 { width: 90%; } .cta-fill-92 { width: 92%; } .cta-fill-94 { width: 94%; } .cta-fill-96 { width: 96%; } .cta-fill-98 { width: 98%; }
.cta-fill-100 { width: 100%; }

/* A picture not made yet: a sand box with the subject's symbol. */
.ph-icon {
  display: inline-flex; align-items: center; justify-content: center; background: #ede8df; border-radius: 30px;
  color: #b9ab97; aspect-ratio: 1; width: 100%;
}
.ph-icon .material-symbols-outlined { font-size: 48px; }
.ph-hero { max-width: 300px; border-radius: 48px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.06)); }
.ph-hero .material-symbols-outlined { font-size: 140px; }
.ph-promo { max-width: 200px; }
.ph-promo .material-symbols-outlined { font-size: 96px; }
@media (max-width: 767px) {
  .ph-hero { max-width: 125px; border-radius: 30px; }
  .ph-hero .material-symbols-outlined { font-size: 64px; }
  .ph-promo { max-width: 130px; }
  .ph-promo .material-symbols-outlined { font-size: 64px; }
}

/* Reveal on scroll (site.js adds .mp-ex-anim to the page, .mp-ex-seen to
   each [data-reveal] once it is in view); without the script, or under
   reduced motion, everything stands where it ends. */
.mp-ex-anim [data-reveal] { opacity: 0; transform: translateY(44px) scale(0.98); transition: opacity 0.85s cubic-bezier(0.32, 0.72, 0.24, 1), transform 0.9s cubic-bezier(0.32, 0.72, 0.24, 1); }
.mp-ex-anim [data-reveal].mp-ex-seen { opacity: 1; transform: none; }

/* ── page heads ── */
.page, .help, .contact, .book, .idea, .blog-item, section.ideas { margin-top: 50px; }
.pricing-top h1, .examples h1, .ideas h1, .blog h1, .page h1 { font-size: 38px; font-weight: 800; }
.info, .pricing-top p { font-size: 20px; font-weight: 300; }
.pricing-top p b { font-weight: 700; }
.page a:not(.button):not(.card):not(.custom-radio-block):not(.page-link), .theme-content a, .idea p a { color: var(--primary-color); }
.page h2, .help h2, .legal-page h2, .contact-company h2 { font-size: 22px; font-weight: 700; margin: 0 0 15px; color: var(--text-color); }
.ideas .row > .col-12 > h1 { margin-bottom: 10px; }
@media (max-width: 767px) {
  .page, .help, .contact, .book, .idea, .blog-item, section.ideas { margin-top: 15px; }
  .pricing-top h1, .examples h1, .ideas h1, .blog h1, .page h1 { font-size: 28px; }
  .info, .pricing-top p { font-size: 18px; }
  .page .wrapper { padding: 25px; }
}

/* ── C3 hub and detail hero ── */
.theme-top { padding-top: 75px; }
.theme-top h1 { font-size: 48px; font-weight: 800; line-height: 1.2; max-width: 655px; opacity: 0; animation: fadeIn 1s ease-out 0.15s forwards; }
.theme-top .col-md-7 > p { font-size: 21px; font-weight: 300; max-width: 570px; margin-bottom: 20px; opacity: 0; animation: fadeInUp 0.5s ease-out 0.3s forwards; }
.theme-top .col-md-7 > .button { display: block; width: 100%; max-width: 330px; text-align: center; padding: 12px 15px; opacity: 0; animation: fadeInUp 0.6s ease-out 0.4s forwards; }
.theme-top .cta-block-link { margin-bottom: 0; }
.gift-top h1, .gift-top .col-md-7 > p, .age-top h1, .age-top .col-md-7 > p { max-width: none; }
.theme-top .hero-icon, .theme-top .col-md-5 > img { width: 350px; max-width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1)); }
.theme-top .col-md-5 > .ph-hero { display: flex; margin-left: auto; margin-right: auto; }
.theme-top .col-md-5 > .gift-hero-icon { width: 250px; }
.ages-hero-group { display: inline-flex; align-items: flex-end; justify-content: center; gap: 0; }
.ages-hero-group img { width: 25%; height: auto; max-width: 130px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1)); margin: 0 -6px; }
@media (max-width: 1199px) { .theme-top h1 { font-size: 40px; } }
@media (max-width: 767px) {
  .theme-top { padding: 15px 0; }
  .theme-top h1 { font-size: 30px; margin-bottom: 5px; }
  .theme-top .col-md-7 > p { font-size: 17px; max-width: none; }
  .theme-top .col-md-7 > .button { padding: 10px 30px; margin: 0 auto 7px; }
  .theme-top .cta-block-link { margin: 5px auto 0; }
  .hero-mobile-img { max-width: 34%; height: auto; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1)); }
  .gift-hero-icon-mobile { max-width: 25%; }
  .ages-hero-group-mobile img { max-width: 60px; }
}
@media (max-width: 359px) { .theme-top .cta-reviews-count { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .theme-top h1, .theme-top .col-md-7 > p, .theme-top .col-md-7 > .button { opacity: 1; animation: none; }
}

/* ── C4 and C5 pill bands ── */
.theme-overview-vol-mobiel { margin-top: 0; }
@media (max-width: 767px) {
  .theme-overview-vol-mobiel #initial-view li.list-inline-item:nth-last-child(-n+7):not(:last-child) { display: inline-block; }
}
.names-pill-block .wrapper { background: #f4e7e1; }
.ages-pill-block .wrapper { background: #f3ece8; }
.names-overview h2 { margin-bottom: 30px; }
.names-overview .subject-links-wrapper ul a .material-symbols-outlined { font-size: 20px; color: var(--primary-color); margin: -2px 5px 0 0; }
.ages-pill-block ul li:nth-child(10n+1) a:not(.show-more-trigger) { background-image: linear-gradient(-180deg, #ffdfc8, #f2ccb1); border-color: #dfbca3; }
.ages-pill-block ul li:nth-child(10n+2) a:not(.show-more-trigger) { background-image: linear-gradient(-180deg, #e0e8e3, #cdd7d1); border-color: #bdc6c0; }
.ages-pill-block ul li:nth-child(10n+3) a:not(.show-more-trigger) { background-image: linear-gradient(-180deg, #fdddd8, #efcac4); border-color: #dcbab4; }
.ages-pill-block ul li:nth-child(10n+4) a:not(.show-more-trigger) { background-image: linear-gradient(-180deg, #fbe7e4, #eed6d2); border-color: #dbc5c1; }
.ages-pill-block ul a:not(.show-more-trigger):hover { border-color: var(--primary-color); }

/* ── C6 USP bands ── */
.usp-lead { font-size: 19px; font-weight: 300; margin: -15px auto 30px; max-width: 760px; }
.usp-closing .usp-lead { margin: 0 auto 25px; }
.usp-closing .button { margin: 0; }
@media (max-width: 767px) { .usp-lead { font-size: 17px; margin-top: -10px; } }

/* ── C8 reviews: the call-to-action card ── */
.card3.cta-card { background: linear-gradient(135deg, var(--light-primary-color), var(--primary-tint)) !important; text-align: center; }
.cta-card .material-symbols-outlined { font-size: 42px; color: var(--primary-color); }
.cta-card .card-title { font-size: 23px; font-weight: 700; color: var(--text-color); margin: 8px 0; }
.cta-card p { font-size: 17px; }
.cta-card .button { font-size: 14px; padding: 10px 24px; margin: 0; }

/* ── C9 book look ── */
.booklook .wrapper { background: #d8e2dc38; padding: 50px 30px; }
.booklook h2 { font-size: 34px; font-weight: 800; color: var(--primary-color); margin-bottom: 5px; }
.booklook .wrapper > p { font-size: 19px; font-weight: 300; margin-bottom: 25px; }
.booklook h3 { font-size: 18px; font-weight: 700; color: var(--primary-color); margin-bottom: 15px; }
.booklook .box { background: #ffffff9c; padding: 30px; border-radius: 20px; }
.coverwrapper { max-width: 260px; padding-right: 35px; padding-bottom: 5px; margin: 0 auto; }
.coverwrapper .cover { max-width: 240px; margin: 5px 0 20px 6px; }
.cover-border-right { position: absolute; top: 5px; right: 0; bottom: 30px; width: 20px; border-right: 2px dashed #000; border-top: 2px dashed #000; border-bottom: 2px dashed #000; border-left: 0; }
.cover-border-right span { position: absolute; top: 50%; left: calc(100% + 14px); transform: translate(-50%, -50%) rotate(90deg); font-size: 18px; font-weight: 700; white-space: nowrap; }
.cover-border-bottom { position: relative; height: 20px; margin-right: 35px; margin-left: 6px; border-left: 2px dashed #000; border-right: 2px dashed #000; border-bottom: 2px dashed #000; }
.cover-border-bottom span { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); font-size: 18px; font-weight: 700; }
.booklook ul.usp { list-style: none; padding: 0; margin: 0; }
.booklook ul.usp li { display: block; font-style: italic; font-weight: 300; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px dashed #0097a740; }
.booklook ul.usp li strong { font-style: normal; font-weight: 500; }
.booklook ul.usp .material-symbols-outlined { color: var(--primary-color); vertical-align: sub; margin-right: 3px; }
@media (max-width: 767px) {
  .booklook .wrapper { padding: 35px 20px; border-radius: 28px; }
  .booklook h2 { font-size: 26px; }
  .booklook .wrapper > p { font-size: 18px; }
  .booklook .box { padding: 25px 15px 40px; }
  .booklook ul.usp li { font-size: 15px; }
  .booklook ul.usp .material-symbols-outlined { margin-right: 5px; }
}

/* ── C11 promo: the icon floats ── */
.seasonal-promo .ph-promo { animation: mpExFloatSoft 6s ease-in-out 1.6s infinite; }
@media (prefers-reduced-motion: reduce) { .seasonal-promo .ph-promo { animation: none; } }

/* ── C12 reading blocks ── */
.theme-content .wrapper { padding: 50px; }
.theme-content h2 { font-size: 34px; font-weight: 800; color: var(--primary-color); margin: 0 0 15px; }
.theme-content p { font-size: 17px; line-height: 30px; }
.gift-article h2, .age-article h2 { margin-top: 40px; }
.gift-article h2.mt-0, .age-article h2.mt-0 { margin-top: 0; }
.age--highlight-card { background: var(--light-primary-color); border: 1px solid rgba(var(--primary-color-rgb), 0.14); border-radius: 24px; padding: 28px 24px; margin-top: 40px; }
.age--highlight-card h2 { margin-top: 0 !important; }
.age--highlight-card p:last-child { margin-bottom: 0; }
@media (min-width: 768px) { .age--highlight-card { padding: 36px 40px; } }
@media (max-width: 767px) {
  .theme-content .wrapper { padding: 25px; }
  .theme-content h2 { font-size: 26px; }
}

/* ── C13 related articles ── */
.mp-hub-related h2 { font-size: 34px; font-weight: 800; color: var(--primary-color); margin-bottom: 25px; }
.mp-hub-card-imgwrap { border-radius: 12px; overflow: hidden; }
.mp-hub-card-imgwrap .ph-icon { aspect-ratio: auto; height: 170px; border-radius: 0; transition: transform 0.45s; }
.mp-hub-card:hover .ph-icon { transform: scale(1.07); }
.mp-hub-card-title { font-size: 18px; font-weight: 600; line-height: 1.35; margin-top: 0.7rem; }
.mp-hub-card:hover .mp-hub-card-title { color: var(--primary-color); }
.mp-hub-card-more { margin-top: 0.45rem; color: var(--primary-color); font-weight: 700; font-size: 15px; }
@media (max-width: 767px) {
  .mp-hub-related .wrapper { padding: 24px; border-radius: 24px; }
  .mp-hub-related h2 { font-size: 26px; }
  .mp-hub-card-imgwrap .ph-icon { height: 110px; }
  .mp-hub-card-title { font-size: 15px; }
  .mp-hub-card-more { font-size: 13px; }
}

/* ── C14 book cards ── */
.book-grid .card { border: 0; border-radius: 20px; padding: 17px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); }
.book-grid .card > a { display: block; color: var(--text-color); }
.book-grid .col:nth-child(8n+1) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #ffd7ba; }
.book-grid .col:nth-child(8n+2) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #d8e2dc; }
.book-grid .col:nth-child(8n+3) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #fcd5ce; }
.book-grid .col:nth-child(8n+4) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #fae1dd; }
.book-grid .col:nth-child(8n+5) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #f8edeb; }
.book-grid .col:nth-child(8n+6) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #ffe5d9; }
.book-grid .col:nth-child(8n+7) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #ece4db; }
.book-grid .col:nth-child(8n) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #fec5bb; }
.book-grid .card:hover { box-shadow: 0 3px 8px rgb(56 56 56 / 20%); }
.image-container { position: relative; min-height: 120px; }
.image-container:not(.loaded)::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  border: 3px solid #f0e8e0; border-top-color: var(--primary-color); animation: imageLoader 0.7s linear infinite;
}
.image-container:not(.loaded) .box-img, .image-container:not(.loaded) h4 { opacity: 0; }
.image-container .box-img, .image-container h4 { transition: opacity 0.4s; }
.book-grid .cover { margin: 25px 25px 0 calc(25px + max(4px, 3.06%)); }
.book-grid h4 { font-size: 16px; font-weight: 600; line-height: 22px; margin: 15px 0 10px; text-align: center; }
.book-grid a:hover h4 { color: var(--primary-color); }
/* A blank cover carries its title in ink at the top, the book glyph below. */
.cover-titled { flex-direction: column; justify-content: flex-start; gap: 18%; padding: 14% 8% 0; text-align: center; }
.cover-titled h5 { font-size: 15px; font-weight: 700; line-height: 1.3; color: #5a4a3a; margin: 0; text-wrap: balance; hyphens: auto; }
.cover-titled .material-symbols-outlined { font-size: 54px; color: var(--primary-color); opacity: 0.35; }
@media (max-width: 767px) {
  .book-grid .card { padding: 10px; }
  .book-grid .cover { margin: 10px 10px 0 calc(10px + max(4px, 3.06%)); }
  .book-grid h4 { font-size: 13px; line-height: 18px; margin: 10px 0 5px; }
  .cover-titled h5 { font-size: 11px; }
  .cover-titled .material-symbols-outlined { font-size: 34px; }
}

/* ── C16 tiles beyond the fourth ── */
.form-group > div:nth-child(8n+5) .radio-content { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #f8edeb; border-color: #d5c9c7; }
.form-group > div:nth-child(8n+6) .radio-content { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #ffe5d9; border-color: #dcc2b5; }
.form-group > div:nth-child(8n+7) .radio-content { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #ece4db; border-color: #c5b8aa; }
.form-group > div:nth-child(8n) .radio-content { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #fec5bb; border-color: #e0a499; }
a.custom-radio-block { display: block; text-decoration: none; }
.radio-content > .ph-icon { width: 90px; margin: 0 auto 10px; background: #ffffff8c; border-radius: 24px; color: #c9875a; }
.radio-content > .ph-icon .material-symbols-outlined { font-size: 52px; color: #c9875a; transition: transform 300ms cubic-bezier(0.2, 0.6, 0.6, 1); }
.custom-radio-block:hover .radio-content > .ph-icon .material-symbols-outlined { transform: scale(1.09); }
.custom-radio-block:hover .radio-content { transform: translateY(-1px); }
.ideas .homepage-form .radio-content.big img { max-width: 90px; }
@media (max-width: 767px) {
  .radio-content > .ph-icon { width: 70px; border-radius: 18px; }
  .radio-content > .ph-icon .material-symbols-outlined { font-size: 40px; }
  .ideas .homepage-form .radio-content.big img { max-width: 70px; }
}

/* ── C17 three steps ── */
.how-centered h2 { text-align: center; font-size: 34px; font-weight: 800; color: var(--primary-color); }
.how-centered .how-lead { font-size: 17px; line-height: 30px; text-align: center; max-width: 820px; margin: 0 auto; }
.how .step-number {
  display: flex; align-items: center; justify-content: center; width: 43px; height: 43px; border-radius: 50%; margin: 20px auto;
  background-color: var(--primary-color); background-image: var(--primary-gradient); border: 2px solid var(--primary-color); color: #fff; font-size: 26px; font-weight: 700;
}
.how img { max-width: 200px; }
.how h3 { font-size: 18px; font-weight: 800; }
.how p { font-size: 16px; }
.how p b { font-weight: 600; }
@media (max-width: 767px) { .how-centered h2 { font-size: 26px; } }

/* ── C18 pagination, C19 breadcrumb ── */
.pagination { margin: 35px auto; flex-wrap: wrap; row-gap: 8px; }
.page-link { color: var(--primary-color) !important; border: 2px solid var(--primary-color); border-radius: 10px !important; font-size: 18px; font-weight: 700; margin: 0 4px; background: transparent; }
.page-link:hover { background: var(--light-primary-color); }
.page-item.active .page-link { background: var(--primary-color); border-color: var(--primary-color); color: #fff !important; }
.page-item.disabled .page-link { opacity: 0.45; background: transparent; border-color: var(--primary-color); }
.breadcrumb { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.breadcrumb a { color: var(--primary-color); }
.breadcrumb-item.active { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) { .breadcrumb { font-size: 14px; } }

/* ── features ── */
.features-page .feature-card { margin-bottom: 1.5rem; }
.features-page .col-12:last-child .feature-card { margin-bottom: 50px; }
.features-page h2 { font-size: 26px; font-weight: 700; margin: 0 0 0.5rem; display: flex; align-items: center; flex-wrap: wrap; color: var(--text-color); }
.features-page p { font-size: 18px; font-weight: 300; margin-bottom: 0; }
.features-page .button-style-link { display: inline-flex; align-items: center; font-weight: 700; color: var(--primary-color); }
.features-page .button-style-link:hover { color: var(--text-color); }
.features-page .button-style-link .material-symbols-outlined { font-size: 20px; margin-left: 5px; }
.feature-icon {
  flex: none; width: 43px; height: 43px; border-radius: 100%; align-items: center; justify-content: center; margin-right: 30px;
  background: var(--primary-color) var(--primary-gradient); border: 2px solid var(--primary-color); color: #fff;
}
.feature-icon .material-symbols-outlined { font-size: 26px; }
.imgbox { height: 230px; max-width: 230px; margin: 0 0 0 auto; border-radius: 40px; padding: 30px; }
.imgbox img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.12)); }
.imgbox .material-symbols-outlined { font-size: 130px; color: var(--primary-color); opacity: 0.55; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.12)); }
.tint-1 { background-color: #fcd5ce36; } .tint-2 { background-color: #d8e2dc38; } .tint-3 { background-color: #ffd7ba42; }
.badge-new {
  background: var(--primary-color); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-left: 10px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.mp-ex-anim .feature-card[data-reveal] { transform: translateY(48px) scale(0.97); }
.mp-ex-anim .feature-card[data-reveal].mp-ex-seen { transform: none; }
@media (max-width: 991px) { .imgbox { margin: 0 auto; } }
@media (max-width: 767px) {
  .features-page h2 { font-size: 21px; }
  .features-page p { font-size: 16px; }
  .imgbox { height: 160px; max-width: 100%; padding: 20px; border-radius: 30px; }
  .imgbox .material-symbols-outlined { font-size: 96px; }
  .features-page .col-12:last-child .feature-card { margin-bottom: 25px; }
}

/* ── prices ── */
.pricing-top p { max-width: 760px; margin: 0 auto 20px; }
.pricing-top p.ref { display: inline-block; background: #d8e2dc99; border-radius: 100px; padding: 15px 25px; font-size: 18px; font-weight: 700; }
.pricing .wrapper { padding: 50px; }
.pricing-box { border-radius: 30px; padding: 25px; background: #ffd7ba42; border: 3px solid #ffd7ba; height: 100%; }
.pricing-box2 { background: #d8e2dc38; border-color: #d8e2dc; }
.pricing-title { font-size: 1.5rem; font-weight: 700; padding: 12px 25px; margin-bottom: 10px; background: #ffd7ba75; border-radius: 20px; }
.pricing-box2 .pricing-title { background: #d8e2dc99; }
.pricing-box > p { font-size: 17px; }
.pricing-price { font-size: 2.2rem; font-weight: 800; color: var(--primary-color); margin: 20px 0 15px; padding-bottom: 10px; border-bottom: 2px dashed #0097a766; line-height: 1.2; }
.pricing-price .final-price { font-weight: 800; }
.save-info { display: block; font-size: 15px; font-weight: 600; color: var(--text-color); margin-top: 6px; }
.pricing-features { list-style: none; padding: 5px 0; margin: 0 0 20px; border-bottom: 2px dashed #0097a766; }
.pricing-features li { display: flex; align-items: center; font-size: 17px; font-weight: 500; margin-bottom: 20px; }
.pricing-features .material-symbols-outlined { color: #20a165; margin: 0 15px 0 0; }
.pricing-box .button { margin-bottom: 0; }
.pricing-arrow {
  width: 65px; height: 65px; border-radius: 50%; background: #f8f0e2; border: 2px solid #0097a7ad; align-items: center; justify-content: center;
  color: var(--primary-color); margin: 30px 0;
}
.pricing-arrow .material-symbols-outlined { font-size: 45px; }
.pricing-extras .wrapper { background: #f8f0e2; padding: 50px; }
.pricing-extras h2 { font-size: 34px; font-weight: 800; color: var(--primary-color); margin-bottom: 5px; }
.pricing-extras-intro { font-size: 19px; font-weight: 300; margin-bottom: 30px; }
.pricing-extra-tile { border-radius: 30px; padding: 30px 22px 26px; text-align: center; height: 100%; display: flex; flex-direction: column; border: 3px solid; }
.pricing-extra-tile--peach { background: #ffd7ba66; border-color: #ffd7ba; }
.pricing-extra-tile--mint { background: #d8e2dc66; border-color: #d8e2dc; }
.pricing-extra-tile--lavender { background: #fcd5ce66; border-color: #fcd5ce; }
.pricing-extra-tile--sky { background: #ece4db66; border-color: #ece4db; }
.pricing-extra-tile-icon img { width: 110px; height: auto; margin-bottom: 15px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1)); }
.pricing-extra-tile-icon .ph-icon { width: 110px; margin-bottom: 15px; background: #ffffff8c; color: #c9875a; }
.pricing-extra-tile-icon .material-symbols-outlined { font-size: 60px; }
.pricing-extra-tile h3 { font-size: 19px; font-weight: 700; }
.pricing-extra-tile-desc { font-size: 16px; color: #666; flex-grow: 1; }
.pricing-extra-tile-price { font-size: 16px; color: #999; }
.pricing-extra-tile-from { font-size: 14px; }
.pricing-extra-original { text-decoration: line-through; opacity: 0.5; font-size: 0.9em; }
.pricing-extra-tile-price strong { font-size: 19px; color: var(--primary-color); }
.pricing-extras-more { font-size: 15px; color: #666; text-align: center; margin: 25px 0 0; }
@media (max-width: 767px) {
  .pricing .wrapper { padding: 15px 0; border-radius: 28px; }
  .pricing-box .button { width: 100%; padding: 12px 20px; }
  .pricing-top p.ref { border-radius: 30px; font-size: 16px; line-height: 20px; }
  .pricing-extras .wrapper { padding: 35px 20px; border-radius: 28px; }
  .pricing-extras h2 { font-size: 26px; }
  .pricing-extras-intro { font-size: 18px; }
  .pricing-extra-tile { padding: 16px 12px 14px; border-radius: 20px; }
  .pricing-extra-tile-icon img { width: 64px; }
  .pricing-extra-tile-icon .ph-icon { width: 64px; border-radius: 18px; }
  .pricing-extra-tile-icon .material-symbols-outlined { font-size: 36px; }
  .pricing-extra-tile h3 { font-size: 14px; hyphens: auto; }
  .pricing-extra-tile-desc { font-size: 13px; }
  .pricing-extra-tile-price strong { font-size: 15px; }
}

/* ── examples ── */
.examples-empty { font-size: 19px; font-weight: 300; text-align: center; max-width: 760px; margin: 0 auto 25px; }
.book .wrapper5 { background: #f8f0e2; padding: 25px 50px; margin-bottom: 20px; }
.options2 .box { padding: 20px; border-radius: 20px; margin-bottom: 20px; background: #faf8f0; }
.options2 h4 { font-size: 24px; font-weight: 700; }
.example-cover .cover { max-width: 260px; margin: 10px auto 10px 10px; }
.options2 ul.info { list-style: none; padding: 0; margin: 0 0 20px; font-size: 17px; font-weight: 400; }
.options2 ul.info li { display: flex; margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px dashed #0097a740; }
.options2 ul.info li:last-child { border-bottom: 0; }
.options2 ul.info .first { width: 100%; max-width: 30%; min-width: 120px; flex-shrink: 0; font-weight: 700; }
.options2 .button { font-size: 15px; padding: 10px 22px; margin-right: 6px; }
.example-reader { padding: 20px; }
.example-reader .viewer { display: block; width: 100%; height: 870px; border: 0; border-radius: 20px; background: #f3efe8; }
@media (max-width: 767px) {
  .book .wrapper5 { padding: 15px; }
  .example-reader { padding: 10px; }
}

/* ── reviews ── */
.reviews-page { padding: 60px 0 20px; margin-top: 0; }
.reviews-page h1 { margin-bottom: 10px; }
.reviews-page .info { font-size: 17px; color: #555; }
.reviews-aggregate { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; color: var(--primary-color); }
.agg-stars { position: relative; display: inline-block; font-size: 1.1em; letter-spacing: 1px; }
.agg-stars-leeg { color: #dcd4c2; }
.agg-stars-vol { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--primary-color); }
.reviews-list .wrapper { padding: 30px; }
.reviews-pagination .pagination { margin: 0 auto 50px; }
@media (max-width: 767px) { .reviews-page { padding: 25px 0 10px; } .reviews-list .wrapper { padding: 15px; } }

/* ── help ── */
.help h2 { font-size: 22px; font-weight: 700; margin: 0 0 15px; }
.help .search { background: #fcf7f1; border: 2px solid var(--soft-primary-color); padding: 20px; border-radius: 30px; margin-bottom: 25px; }
.help .search .form-control { position: relative; z-index: 1001; margin: 0; }
#autocomplete-suggestions { position: absolute; left: 20px; right: 20px; width: auto !important; z-index: 1000; max-height: 260px; overflow-y: auto; }
#autocomplete-suggestions .list-group-item { border: 1px dashed var(--soft-primary-color); cursor: pointer; text-align: left; }
#autocomplete-suggestions .list-group-item:hover, #autocomplete-suggestions .list-group-item:focus { background: #f8f9fa; }
#autocomplete-suggestions .list-group-item:first-child { border-top-left-radius: 15px; border-top-right-radius: 15px; }
#autocomplete-suggestions .list-group-item:last-child { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }
.help .card { cursor: pointer; border-radius: 20px; padding: 8px; border: 2px solid; height: 100%; color: var(--text-color); }
.help #category-section > div:nth-child(9n+1) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #fdd1ad; border-color: #d6b192; }
.help #category-section > div:nth-child(9n+2) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #cde7dd; border-color: #aec3bb; }
.help #category-section > div:nth-child(9n+3) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #fed7d0; border-color: #d7b6b0; }
.help #category-section > div:nth-child(9n+4) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #ffe0c6; border-color: #d7bda7; }
.help #category-section > div:nth-child(9n+5) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #def0e9; border-color: #bccbc5; }
.help #category-section > div:nth-child(9n+6) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #ffe8e4; border-color: #d7c4c1; }
.help #category-section > div:nth-child(9n+7) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #feeee0; border-color: #d7c9be; }
.help #category-section > div:nth-child(9n+8) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #ecf8f3; border-color: #c8d2cd; }
.help #category-section > div:nth-child(9n) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #fff4f2; border-color: #d7cecd; }
.help #category-section .contact-card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #fbfaf7 !important; border-color: #d4d4d1 !important; }
.help .card h5 { margin: 0; padding: 20px 0; font-weight: 600; color: var(--text-color); }
.help .card:hover { box-shadow: rgb(56 56 56 / 36%) 0 2px 8px; border-color: var(--primary-color) !important; }
.help .card:hover h5 { color: var(--primary-color); }
.help .accordion { --bs-accordion-bg: transparent; --bs-accordion-border-width: 0; --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-bg: transparent; }
.help .accordion-item { background: #ffd7ba42; border: 2px solid #0097a73b !important; border-radius: 15px !important; padding: 20px; }
.help .accordion-item:hover { border-color: var(--primary-color) !important; }
.help .accordion-button { background: transparent; font-size: 17px; font-weight: 600; padding: 0; color: var(--text-color); box-shadow: none; }
.help .accordion-item:hover .accordion-button, .help .accordion-button:not(.collapsed) { color: var(--primary-color); }
.help .accordion-body { margin: 10px 0 0; padding: 0; font-size: 17px; }
.help .button { font-size: 15px; padding: 7px 25px; }
.help mark { background: var(--soft-primary-color); padding: 0; }
@media (max-width: 767px) {
  .help .search { border-radius: 20px; padding: 10px; }
  #autocomplete-suggestions { left: 10px; right: 10px; }
  .help .card h5 { padding: 0; font-size: 16px; }
}

/* ── contact ── */
.contact .notify { color: var(--text-color); background: #cbe8ebb8; border: 2px solid var(--soft-primary-color); padding: 20px; border-radius: 20px; margin-bottom: 10px; font-weight: 600; }
.contact .notify p { color: var(--text-color); }
.contact form .inputwrapper { margin-top: 20px; padding: 30px; }
.contact .contact-message { min-height: 145px; }
.contact .button[type="submit"] { margin: 10px 0 0; }
.contact-files { list-style: none; padding: 0; margin: 4px 0 0; font-size: 14px; color: #666; }
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-company { margin-top: 30px; }
.contact-company h2 { font-size: 22px; font-weight: 700; }
.contact .invalid-feedback { display: none; }
.contact .is-invalid ~ .invalid-feedback { display: block; }
@media (max-width: 767px) { .contact form .inputwrapper { padding: 20px 15px; } }

/* ── gifts: the occasion cards, blank books with the occasion's mark ── */
.gift-occasion-grid .card { border: 0; border-radius: 20px; padding: 28px 17px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); }
.gift-occasion-grid .col:nth-child(8n+1) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #ffd7ba; }
.gift-occasion-grid .col:nth-child(8n+2) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #d8e2dc; }
.gift-occasion-grid .col:nth-child(8n+3) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #fcd5ce; }
.gift-occasion-grid .col:nth-child(8n+4) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #fae1dd; }
.gift-occasion-grid .col:nth-child(8n+5) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #f8edeb; }
.gift-occasion-grid .col:nth-child(8n+6) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #ffe5d9; }
.gift-occasion-grid .col:nth-child(8n+7) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #ece4db; }
.gift-occasion-grid .col:nth-child(8n) .card { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #fec5bb; }
.gift-occasion-grid .cover {
  aspect-ratio: 210 / 280; margin: 0 25px 0 calc(25px + 10px); opacity: 0.93; background: var(--light-primary-color);
  box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.04); transition: transform 0.35s, box-shadow 0.35s, opacity 0.35s;
}
.gift-occasion-grid .col:nth-child(10n+2) .cover { background: #eff4f1; }
.gift-occasion-grid .col:nth-child(10n+3) .cover { background: #feefec; }
.gift-occasion-grid .col:nth-child(10n+4) .cover { background: #fdf3f1; }
.gift-occasion-grid .col:nth-child(10n+5) .cover { background: #fcf8f7; }
.gift-occasion-grid .col:nth-child(10n+6) .cover { background: var(--light-primary-color); }
.gift-occasion-grid .col:nth-child(10n+7) .cover { background: #f7f4f0; }
.gift-occasion-grid .col:nth-child(10n+8) .cover { background: #ffede9; }
.gift-occasion-grid .col:nth-child(10n+9) .cover { background: #ffefdc; }
.gift-occasion-grid .col:nth-child(10n) .cover { background: #f5f5f3; }
.gift-occasion-grid .cover::before {
  left: 0; width: 15px; z-index: 1;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.18) 0, rgba(0, 0, 0, 0.04) 3px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.08) 7px,
    rgba(0, 0, 0, 0.12) 10px, rgba(0, 0, 0, 0.12) 12px, rgba(255, 255, 255, 0.45) 12px, rgba(255, 255, 255, 0.45) 13px, transparent 13px);
}
.gift-occasion-grid .cover::after { left: 19px; top: 8px; bottom: 8px; right: 9px; width: auto; height: auto; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 3px; background: none; }
.gift-occasion-grid .border-right {
  right: -5px; width: 5px; top: 1%; bottom: 1%; background: #fdfdfb repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 3px);
  border-right: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0 4px 4px 0; box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
}
.gift-cover-title { position: absolute; top: 11%; left: 20px; right: 10px; padding: 0 6%; text-align: center; font-size: 18px; font-weight: 800; line-height: 1.25; color: #333; hyphens: auto; margin: 0; z-index: 2; transition: color 0.35s; }
.gift-occasion-grid .cover img, .gift-cover-icon {
  position: absolute; top: 30%; left: calc(13% + 7px); width: 74%; height: 60%; object-fit: contain; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
}
.gift-cover-icon .material-symbols-outlined { font-size: 84px; color: var(--primary-color); opacity: 0.75; }
@media (hover: hover) {
  .gift-occasion-grid a:hover .cover { transform: rotateY(0) translateY(-6px); box-shadow: -14px 16px 26px rgba(0, 0, 0, 0.22); opacity: 1; }
  .gift-occasion-grid a:hover .gift-cover-title { color: var(--primary-color); }
  .gift-occasion-grid a:hover .gift-cover-icon, .gift-occasion-grid a:hover .cover img { animation: mpFloat 3.5s ease-in-out infinite; }
}
@media (max-width: 767px) {
  .gift-occasion-grid .card { padding: 18px 10px; }
  .gift-occasion-grid .cover { margin: 0 10px 0 20px; }
  .gift-occasion-grid .cover::before { width: 10px; }
  .gift-occasion-grid .cover::after { left: 13px; top: 6px; bottom: 6px; right: 6px; }
  .gift-occasion-grid .border-right { width: 3px; right: -3px; }
  .gift-cover-title { font-size: 12px; top: 10%; left: 14px; right: 7px; }
  .gift-occasion-grid .cover img, .gift-cover-icon { left: calc(13% + 5px); }
  .gift-cover-icon .material-symbols-outlined { font-size: 46px; }
}

/* ── ages ── */
.age--nav-wrap { margin: 50px 0 15px; }
.age--nav-card, .names-letter-card { background: #f3ece8; border-radius: 48px; padding: 10px 20px; }
.names-letter-card { background: #f8f0e2; margin: 4px 0 18px; }
.age--nav, .names-letter-index { display: flex; gap: 10px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.age--nav::-webkit-scrollbar, .names-letter-index::-webkit-scrollbar { display: none; }
.age--nav-pill, .names-letter-pill {
  flex: 0 0 auto; white-space: nowrap; padding: 7px 18px; border-radius: 50px; color: #333; font-weight: 600; font-size: 16px; border: 1px solid #c7c7c7;
  background-image: linear-gradient(-180deg, #fff, #ffffff36);
}
.age--nav-pill:nth-child(10n+1) { background-image: linear-gradient(-180deg, #ffdfc8, #f2ccb1); border-color: #dfbca3; }
.age--nav-pill:nth-child(10n+2) { background-image: linear-gradient(-180deg, #e0e8e3, #cdd7d1); border-color: #bdc6c0; }
.age--nav-pill:nth-child(10n+3) { background-image: linear-gradient(-180deg, #fdddd8, #efcac4); border-color: #dcbab4; }
.age--nav-pill:nth-child(10n+4) { background-image: linear-gradient(-180deg, #fbe7e4, #eed6d2); border-color: #dbc5c1; }
.age--nav-pill:hover, .names-letter-pill:hover { border-color: var(--primary-color); color: #333; }
.age--nav-pill.age--nav-current, .names-letter-pill.names-letter-current { background-image: var(--primary-gradient); border-color: var(--primary-color); color: #fff; }
.age--themes-section .wrapper { padding: 32px 30px; }
.age--themes-section h2 { margin-bottom: 4px; }
@media (max-width: 767px) {
  .age--nav-wrap { margin: 25px 0 8px; }
  .age--nav-card, .names-letter-card { padding: 8px 14px; border-radius: 32px; }
  .age--nav-pill, .names-letter-pill { font-size: 14px; padding: 6px 14px; }
  .age--themes-section .wrapper { padding-left: 20px; padding-right: 20px; }
}

/* ── ideas: the category pills ── */
.ideas .wrapper { padding: 30px; }
ul.cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 5px; }
ul.cats li { margin-bottom: 5px; }
ul.cats a { display: inline-block; padding: 6px 15px; border-radius: 50px; font-weight: 600; font-size: 15px; color: #333 !important; border: 1px solid #c7c7c7; background-image: linear-gradient(-180deg, #fff, #ffffff36); }
ul.cats li:nth-child(10n+2) a { background-image: linear-gradient(-180deg, #ffdfc8, #f2ccb1); border-color: #dfbca3; }
ul.cats li:nth-child(10n+3) a { background-image: linear-gradient(-180deg, #e0e8e3, #cdd7d1); border-color: #bdc6c0; }
ul.cats li:nth-child(10n+4) a { background-image: linear-gradient(-180deg, #fdddd8, #efcac4); border-color: #dcbab4; }
ul.cats li:nth-child(10n+5) a { background-image: linear-gradient(-180deg, #fbe7e4, #eed6d2); border-color: #dbc5c1; }
ul.cats li:nth-child(10n+6) a { background-image: linear-gradient(-180deg, #f9f1ef, #ece1df); border-color: #d9cfcd; }
ul.cats li:nth-child(10n+7) a { background-image: linear-gradient(-180deg, #ffeae1, #f2dace); border-color: #dfc9be; }
ul.cats li:nth-child(10n+8) a { background-image: linear-gradient(-180deg, #f0e9e2, #e0d9d0); border-color: #cec8bf; }
ul.cats li:nth-child(10n+9) a { background-image: linear-gradient(-180deg, #fed1c9, #f1bbb2); border-color: #deaca4; }
ul.cats li:nth-child(10n) a { background-image: linear-gradient(-180deg, #fed3ae, #f1be92); border-color: #deaf86; }
ul.cats a:hover, ul.cats a[aria-current] { border-color: var(--primary-color); }
.cats-rule { margin: 25px 0 40px; border: 0; border-top: 1px dashed var(--primary-color); opacity: 1; }
@media (max-width: 767px) {
  .ideas .wrapper { padding: 15px; }
  ul.cats a { font-size: 14px; }
  .cats-rule { margin: 15px 0 20px; }
}

/* ── the name and idea pages' hero ── */
.idea h1 { margin-bottom: 25px; }
.h1-emoji { margin-left: 0.25em; }
.idea .wrapper { padding: 50px; }
.idea .wrapper h2 { font-size: 34px; font-weight: 800; color: var(--primary-color); }
.idea p { font-size: 17px; line-height: 30px; }
.box-story { border: 2px dashed #dcdcdc; padding: 20px 35px; border-radius: 20px; margin: 30px 0; }
.box-story h3 { font-size: 20px; font-weight: 800; }
.box-story p { font-style: italic; font-weight: 300; margin: 0; }
.book-list { background: #faf8f0; border-radius: 20px; padding: 30px; margin: 30px 0 20px; }
.idea .book-list h2 { font-size: 20px; color: #333; margin-bottom: 20px; }
.book-list ul { list-style: none; padding: 0; margin: 0; }
.book-list li { position: relative; padding-left: 35px; font-size: 17px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed #0097a766; }
.book-list li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.book-list li::before {
  content: "auto_awesome"; font-family: "Material Symbols Outlined"; position: absolute; left: 0; top: 1px; font-size: 18px; color: var(--primary-color); font-feature-settings: "liga";
}
.idea .box-img { background: #e8eeea; padding: 35px; border-radius: 20px; }
.idea .box-img > .cover { margin-left: max(4px, 3.06%); }
.cover-hero { flex-direction: column; justify-content: flex-start; gap: 14%; padding: 12% 8% 0; text-align: center; background: linear-gradient(180deg, var(--light-primary-color), var(--primary-tint)); }
.idea .wrapper .cover-hero h2 { font-size: 32px; font-weight: 700; line-height: 1.2; color: #5a4a3a; margin: 0; text-wrap: balance; }
.cover-hero .material-symbols-outlined { font-size: 110px; color: var(--primary-color); opacity: 0.35; }
.idea .box-img .arrow { display: block; float: right; margin: -73px 180px 0 0; color: #0097a7db; transform: rotateZ(320deg); position: relative; z-index: 2; text-shadow: #00000080 0 0 15px; }
.idea .box-img .arrow .material-symbols-outlined { font-size: 70px; }
.gender-image { width: 160px; max-width: 160px; float: right; margin: -175px 15px 0 0; position: relative; z-index: 1; }
.ph-photo { border-radius: 20px; border: 4px solid #0097a7db; box-shadow: #00000080 0 0 20px; background: #f3ece8; flex-direction: column; gap: 2px; color: #a48d74; }
.ph-photo small { font-size: 13px; font-weight: 600; }
.box-img::after { content: ""; display: table; clear: both; }
.box-buttons { background: #ffd7ba75; padding: 15px 35px 7px; border-radius: 20px; margin-top: 20px; }
.box-buttons h5 { font-size: 20px; font-weight: 300; }
.box-buttons h5 b { font-weight: 800; }
.idea .box-buttons .button { font-size: 16px; font-weight: 600; padding: 10px 22px; width: 100%; margin-right: 5px; box-shadow: none; }
.box-usp { border: 1px solid #dcdcdc; padding: 13px 35px; border-radius: 20px; margin-top: 20px; }
.box-usp ul { list-style: none; padding: 0; margin: 0; }
.box-usp li { display: flex; align-items: center; font-weight: 500; margin-bottom: 9px; padding-bottom: 9px; border-bottom: 1px dashed #dcdcdc; }
.box-usp li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.box-usp .material-symbols-outlined { margin-right: 13px; color: var(--primary-color); }
h2.others { font-size: 34px; margin-bottom: 30px; }
.idea .all-link .material-symbols-outlined { margin-left: 2px; }
@media (max-width: 991px) { .idea .col-lg-5 { margin-top: 30px; } }
@media (max-width: 767px) {
  .idea h1 { font-size: 26px; margin-bottom: 15px; }
  .idea .wrapper { padding: 25px 20px; }
  .idea .wrapper h2 { font-size: 26px; }
  .box-story, .book-list { padding: 20px; }
  .idea .box-img { padding: 25px; }
  .idea .wrapper .cover-hero h2 { font-size: 25px; }
  .cover-hero .material-symbols-outlined { font-size: 72px; }
  .idea .box-img .arrow { margin-right: 135px; }
  .gender-image { width: 115px; max-width: 115px; margin-top: -130px; }
  .box-buttons { padding: 15px 15px 7px; }
  .box-usp { padding: 12px 15px; }
  h2.others { font-size: 26px; margin-bottom: 15px; }
}

/* ── theme page ── */
.theme-age .wrapper { background: #f8f0e2; min-height: 380px; overflow: hidden; }
.theme-age .form-section-title-spaced { padding-top: 0; margin-bottom: 0; color: var(--text-color); }
.theme-content-block h3 { font-size: 24px; font-weight: 800; }
.theme-content-body p { font-size: 17px; line-height: 30px; }
.theme-content-body a { text-decoration: underline; }
.theme-story-snippet { background: var(--light-primary-color); border-left: 4px solid var(--primary-color); border-radius: 8px; padding: 1.5rem; margin-top: 2.5rem; }
.theme-story-snippet-heading { color: var(--primary-color); font-weight: 800; font-size: 24px; margin-bottom: 14px; }
.theme-story-snippet-text { position: relative; }
.theme-story-snippet-text p { font-style: italic; font-size: 17px; line-height: 30px; color: #3a2614; margin: 0; }
.theme-story-snippet-text.is-collapsed { max-height: 60px; overflow: hidden; }
.theme-story-snippet-text.is-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: linear-gradient(rgba(242, 250, 251, 0), var(--light-primary-color)); }
.theme-story-snippet-toggle { background: none; border: 0; padding: 8px 0 0; color: var(--primary-color); font-weight: 700; font-size: 15px; cursor: pointer; }
.theme-story-snippet-toggle .toggle-arrow { display: inline-block; transition: transform 0.25s; }
.theme-story-snippet-toggle[aria-expanded="true"] .toggle-arrow { transform: rotate(180deg); }
@media (max-width: 767px) { .theme-age .wrapper { padding: 35px 20px; border-radius: 30px; } }

/* ── blog ── */
.blog { margin: 50px auto; }
.blog .card { border: 0; border-radius: 28px; padding-bottom: 15px; overflow: hidden; }
.blog .card > a { display: block; height: 100%; }
.blog .card-img-top { overflow: hidden; }
.blog .card-img-top .ph-icon, .more-posts .card-img-top .ph-icon { aspect-ratio: auto; height: 300px; border-radius: 0; transition: transform 0.7s; }
.blog .card:hover .ph-icon { transform: scale(1.05); }
.blog .card-title { font-weight: 800; font-size: 24px; margin: 10px 0; }
.blog .card:hover .card-title { color: var(--primary-color); }
.blog .card-text { font-size: 17px; line-height: 30px; }
.blog .read-more { font-weight: 700; color: var(--primary-color); display: flex; align-items: center; }
.blog .read-more .material-symbols-outlined { margin-left: 5px; }
.blog-item h1 { font-size: 38px; font-weight: 800; margin-bottom: 25px; }
.blog-item .featured { border-radius: 28px; overflow: hidden; }
.blog-item .featured .ph-icon { aspect-ratio: 3 / 2; max-height: 500px; border-radius: 28px; }
.blog-item .featured .material-symbols-outlined { font-size: 120px; }
.post-body p, .post-body li { font-size: 17px; line-height: 30px; }
.post-body p a:not(.button) { color: var(--primary-color); }
.post-body .post-lead { font-size: 19px; font-weight: 300; }
.post-body h2 { font-weight: 800; font-size: 28px; color: var(--primary-color); margin: 50px 0 15px; scroll-margin-top: 100px; }
.post-body h2:first-of-type { margin-top: 30px; }
.post-cta { margin: 40px 0 0; }
.post-date-title { font-weight: 700; font-size: 18px; }
.blog-item .date { font-size: 16px; margin-bottom: 30px; }
.toc-sticky { top: 80px; margin-bottom: 50px; z-index: 1; }
.table-of-contents h5 { font-weight: 700; font-size: 18px; }
.table-of-contents ul { list-style: none; padding: 0; margin: 0; }
.table-of-contents li { font-size: 15px; }
.table-of-contents .toc-level-2 { margin-top: 15px; }
.table-of-contents a { color: var(--text-color); }
.table-of-contents a:hover { color: var(--primary-color); }
.more-posts { margin-top: 30px; }
.more-posts h4 { font-weight: 800; font-size: 34px; color: var(--primary-color); margin-bottom: 30px; }
@media (max-width: 767px) {
  .blog { margin: 15px auto 0; }
  .blog .card-title { font-size: 22px; }
  .blog-item h1 { font-size: 26px; margin-bottom: 15px; }
  .blog-item .featured .ph-icon { max-height: 250px; }
  .blog-item .button.toc-toggle { width: 100%; font-size: 16px; padding: 6px; display: flex; justify-content: center; align-items: center; }
  .toc-mobile { padding: 15px 20px; }
  .toc-mobile a { color: var(--primary-color); font-weight: 700; }
  .post-body h2 { font-size: 25px; }
  .blog-item .date { font-size: 14px; }
  .more-posts h4 { font-size: 26px; margin-bottom: 15px; }
}

/* ── legal pages ── */
.legal-page .wrapper { padding: 30px 50px; }
.legal-page .wrapper p, .legal-page .wrapper li { font-size: 17px; line-height: 28px; }
.legal-page h2 { font-size: 22px; font-weight: 700; margin: 40px 0 10px; }
.legal-page h2:first-of-type { margin-top: 30px; }
.legal-page h3 { font-size: 18px; font-weight: 600; margin: 20px 0 6px; }
.legal-page .note { background: var(--light-primary-color); border: 1px solid rgba(var(--primary-color-rgb), 0.14); border-radius: 16px; padding: 10px 16px; }
.legal-page .updated { color: #6b6257; margin: 40px 0 0; }
@media (max-width: 767px) { .legal-page .wrapper { padding: 25px; } }

/* ── the promo's buttons, fitted by site.js when they overflow ── */
.seasonal-promo-actions .button.fit-1 { padding-left: 20px; padding-right: 20px; }
.seasonal-promo-actions .button.fit-2 { padding-left: 16px; padding-right: 16px; }
.seasonal-promo-actions .button.fit-3 { padding-left: 16px; padding-right: 16px; font-size: 13px; }
.seasonal-promo-actions .button.fit-4 { padding-left: 16px; padding-right: 16px; font-size: 13px; white-space: normal; }