/* 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; }
/* A page head's lead keeps the prices page's measure, about 70 characters a line. */
h1 + .info { max-width: 760px; }
.text-center > h1 + .info { margin-left: auto; margin-right: auto; }
.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-ink); }
.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; }
/* The heading stands from the first paint, as the home page's does; the
   lead and the button rise into place without first being invisible
   (riseIn, home.css). */
.theme-top h1 { font-size: 48px; font-weight: 800; line-height: 1.2; max-width: 655px; }
.theme-top .col-md-7 > p { font-size: 21px; font-weight: 300; max-width: 570px; margin-bottom: 20px; animation: riseIn 0.5s ease-out 0.3s both; }
.theme-top .col-md-7 > .button { display: block; width: 100%; max-width: 330px; text-align: center; padding: 12px 15px; animation: riseIn 0.6s ease-out 0.4s both; }
.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 .col-md-7 > p, .theme-top .col-md-7 > .button { 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-deep); margin-bottom: 5px; }
/* The lead keeps the site's 760 px measure (h1 + .info, .pricing-top p): at 1280 the
   card is 1196 px and a one-sentence lead ran 137 characters on one line. */
.booklook .wrapper > p { font-size: 19px; font-weight: 300; margin-bottom: 25px; max-width: 760px; }
.booklook h3 { font-size: 18px; font-weight: 700; color: var(--primary-ink); margin-bottom: 15px; }
.booklook .box { background: #ffffff9c; padding: 30px; border-radius: 20px; }
/* The cover with its measures. The cover (or the 3D book's host, whose model
   is as tall as it) fills the wrapper's content box exactly, and the brackets
   are drawn from that box: 29,7 cm from the cover's top to its foot, 21 cm
   from edge to edge, each 15 px clear of it. */
.coverwrapper { position: relative; max-width: 260px; padding: 0 35px 65px 0; margin: 0 auto; }
.coverwrapper .cover { left: 0; margin: 0; }
.cover-border-right { position: absolute; top: 0; right: 0; bottom: 65px; width: 20px; border: 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: absolute; left: 0; right: 35px; bottom: 30px; height: 20px; border: 2px dashed #000; border-top: 0; }
.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; }
/* The icon floats in the item's left padding, so a wrapped line starts under the first
   line's text, not under the icon; the padding is the icon (24 px) plus its gap. */
.booklook ul.usp li { display: block; font-style: italic; font-weight: 300; margin: 0 0 12px; padding: 0 0 12px 27px; border-bottom: 1px dashed #0097a740; }
.booklook ul.usp li strong { font-style: normal; font-weight: 500; }
.booklook ul.usp .material-symbols-outlined { float: left; color: var(--primary-color); margin: 0 3px 0 -27px; }
@media (max-width: 767px) {
  .booklook .wrapper { padding: 35px 20px; border-radius: 20px; }
  .booklook h2 { font-size: 26px; }
  .booklook .wrapper > p { font-size: 18px; }
  .booklook .box { padding: 25px 15px 40px; }
  .booklook ul.usp li { font-size: 15px; padding-left: 29px; }
  .booklook ul.usp .material-symbols-outlined { margin: 0 5px 0 -29px; }
}

/* ── 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-deep); 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-deep); margin-bottom: 25px; }
.mp-hub-card-imgwrap { border-radius: 12px; overflow: hidden; }
.mp-hub-card-imgwrap .ph-icon, .mp-hub-card-imgwrap img { display: block; width: 100%; aspect-ratio: auto; height: 170px; object-fit: cover; border-radius: 0; transition: transform 0.45s; }
.mp-hub-card:hover .ph-icon, .mp-hub-card:hover .mp-hub-card-imgwrap img { 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-ink); }
.mp-hub-card-more { margin-top: 0.45rem; color: var(--primary-ink); 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, .mp-hub-card-imgwrap img { 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) .book-grid-label { opacity: 0; }
.image-container .box-img, .image-container .book-grid-label { transition: opacity 0.4s; }
.book-grid .cover { margin: 25px 25px 0 calc(25px + max(4px, 3.06%)); }
.book-grid-label { font-size: 16px; font-weight: 600; line-height: 22px; margin: 15px 0 10px; text-align: center; }
.book-grid a:hover .book-grid-label { color: var(--primary-ink); }
/* 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-title { 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-label { font-size: 13px; line-height: 18px; margin: 10px 0 5px; }
  .cover-titled-title { 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-deep); }
.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-ink); background-image: var(--primary-gradient); border: 2px solid var(--primary-ink); 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-ink) !important; border: 2px solid var(--primary-ink); 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-ink); border-color: var(--primary-ink); color: #fff !important; }
.page-item.disabled .page-link { opacity: 0.45; background: transparent; border-color: var(--primary-ink); }
.breadcrumb { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.breadcrumb a { color: var(--primary-ink); }
/* A zero basis lets the current page's crumb shorten into the row's last width before the
   row wraps: wrapping strands the trail's first crumb and leads the next line with "/". */
.breadcrumb-item.active { flex: 1 1 0; min-width: 0; 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-ink); }
.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-ink) var(--primary-gradient); border: 2px solid var(--primary-ink); 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-ink); 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-ink); 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-deep); margin-bottom: 5px; }
.pricing-extras-intro { font-size: 19px; font-weight: 300; margin-bottom: 30px; max-width: 760px; }
.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-ink); }
/* Two classes deep, to outrank the lead rule (.wrapper > p, 19 px) that otherwise sets this footnote. */
.pricing-extras .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: 20px; }
  .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: 20px; }
  .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 .box-title { font-family: var(--bs-body-font-family); 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-photos { list-style: none; display: flex; flex-wrap: wrap; align-items: center; column-gap: 4%; padding: 0; margin: 0; }
.example-photos li { flex: 0 0 48%; }
.example-photos img {
  display: block; width: 100%; height: auto; object-fit: cover; border-radius: 15px; border: 3px solid #fdd6b9; opacity: 0.9;
  transform: rotate(-2.4deg); transition: transform 0.25s;
}
.example-photos li:nth-child(even) img { transform: rotate(2deg); }
.example-photos img:hover { transform: none; }
.options2 .example-photos li { margin-bottom: 10px; }
.options2 .example-photos img { max-height: 175px; transform: none; }
.options2 .arrow { position: relative; left: 40px; height: 110px; }
.options2 .arrow .material-symbols-outlined { font-size: 70px; color: rgb(var(--primary-color-rgb) / 80%); transform: rotate(155deg); }
.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-ink); }
.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 .card-title { margin: 0; padding: 20px 0; font-size: 1.25rem; 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 .card-title { color: var(--primary-ink); }
.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-ink); }
/* Bootstrap's focus shadow is off above; the keyboard gets a ring of its own. */
.help .accordion-button:focus-visible { outline: 3px solid var(--primary-ink); outline-offset: 2px; }
.help .accordion-body { margin: 10px 0 0; padding: 0; font-size: 17px; }
.help .button { font-size: 15px; padding: 7px 25px; }
@media (max-width: 767px) {
  .help .search { border-radius: 20px; padding: 10px; }
  #autocomplete-suggestions { left: 10px; right: 10px; }
  .help .card .card-title { padding: 0; font-size: 16px; }
}

/* ── form fields ── */
/* On the site a field is white on the cream or a tinted panel, its border
   3:1 against both and its placeholder 4.5:1 (the app keeps components.css's
   own); focused, its border turns to the ink beside the keyboard's ring. */
.form-control, .form-select { background-color: #fff; border-color: #7d8c8f; }
.form-control:focus, .form-select:focus { border-color: var(--primary-ink); }
.form-control::placeholder { color: #6b6257; }

/* ── 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-ink); }
  .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: 24px; 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-ink); 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-deep); }
.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: "menu_book"; content: "menu_book" / ""; 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; }
/* The picture's width and height attributes only reserve its shape: the box sets its size. */
.gender-image img { width: 100%; height: auto; }
.gender-image img, .ph-photo { border-radius: 20px; border: 4px solid #0097a7db; box-shadow: #00000080 0 0 20px; }
.ph-photo { 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 .box-buttons-title { font-size: 20px; font-weight: 300; line-height: 1.2; margin-bottom: 0.5rem; }
.box-buttons .box-buttons-title 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-ink); 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-ink); 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; }
/* A post's picture fills its card at the placeholder's height, cut to it. */
.blog .card-img-top img, .more-posts .card-img-top img { display: block; width: 100%; height: 300px; object-fit: cover; transition: transform 0.7s; }
.blog .card:hover .card-img-top img { transform: scale(1.05); }
.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-family: var(--bs-body-font-family); font-weight: 800; font-size: 24px; margin: 10px 0; }
.blog .card:hover .card-title { color: var(--primary-ink); }
.blog .card-text { font-size: 17px; line-height: 30px; }
.blog .read-more { font-weight: 700; color: var(--primary-ink); 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 img { display: block; width: 100%; height: auto; }
.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-ink); }
.post-body .post-lead { font-size: 19px; font-weight: 300; }
.post-body h2 { font-weight: 800; font-size: 28px; color: var(--primary-deep); 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; line-height: 1.2; margin-bottom: 0.5rem; }
.blog-item .date { font-size: 16px; margin-bottom: 30px; }
.toc-sticky { top: 80px; margin-bottom: 50px; z-index: 1; }
.table-of-contents .toc-title { font-family: var(--bs-body-font-family); 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-ink); }
.more-posts { margin-top: 30px; }
.more-posts .more-posts-title { font-family: var(--bs-body-font-family); font-weight: 800; font-size: 34px; color: var(--primary-ink); 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-ink); font-weight: 700; }
  .post-body h2 { font-size: 25px; }
  .blog-item .date { font-size: 14px; }
  .more-posts .more-posts-title { font-size: 26px; margin-bottom: 15px; }
}

/* ── legal pages: one document column, its text box at the 760 px measure ── */
.legal-page .container { max-width: 880px; }
/* The container's wider gutter from 1200 px (shell.css) is given back, so
   the text box keeps its measure. */
@media (min-width: 1200px) { .legal-page .container { max-width: 920px; } }
.legal-page .wrapper { padding: 30px 50px; }
/* the weight overrides home.css's `.wrapper > p` lead (300), so paragraphs and list items read as one text */
.legal-page .wrapper p, .legal-page .wrapper li { font-size: 17px; line-height: 28px; font-weight: 400; }
.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; }

/* ── birthday reminder ── */
/* The card above already ends on the section rhythm's bottom margin (.wrapper,
   .seasonal-promo), so the block sets only its own: a top margin would stack on it. */
.remind-block { margin-bottom: 50px; }
@media (max-width: 767px) { .remind-block { margin-bottom: 25px; } }
/* The reminder page's own lead and note (content.html "remind") keep the 760 px measure too. */
.remind-page .wrapper > p { max-width: 760px; }
.remind-card { background: var(--light-primary-color); border-radius: 24px; padding: 24px 28px; max-width: 760px; margin: 0 auto; }
.remind-card h2 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.remind-card > p { margin-bottom: 14px; }
/* The gap spaces the controls: the fields' own margins would drop them below the button
   in one row and space a stacked field further from its neighbour than from the button. */
.remind-form { display: flex; flex-wrap: wrap; gap: 12px 8px; align-items: center; }
.remind-form .form-control, .remind-form .form-select { margin: 0; }
.remind-form .remind-email { flex: 1 1 220px; min-width: 0; }
.remind-form .remind-day { flex: 0 0 84px; }
.remind-form .remind-month { flex: 0 1 150px; }
.remind-form .remind-button { margin: 0; padding: 11px 28px; font-size: 16px; white-space: nowrap; }
/* Two classes deep, to outrank the lead rules of both hosts (.remind-card > p, .wrapper > p). */
.remind-form + .remind-note { font-size: 13px; font-weight: 400; color: #666; margin: 8px 0 0; }
@media (max-width: 575px) {
  .remind-card { padding: 20px; }
  .remind-form .remind-day, .remind-form .remind-month { flex: 1 1 40%; }
  .remind-form .remind-button { flex: 1 1 100%; }
}

/* ── colouring pages ── */
.coloring-cards { margin-top: 4px; }
.coloring-card { display: block; height: 100%; padding: 12px; text-align: center; color: var(--text-color); text-decoration: none; background: #fff; border-radius: 18px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); transition: box-shadow 0.2s, transform 0.2s; }
.coloring-card:hover { box-shadow: 0 6px 18px rgba(var(--primary-color-rgb), 0.18); transform: translateY(-2px); }
.coloring-card img { width: 100%; height: auto; border: 1px solid #eee; border-radius: 10px; }
.coloring-card span { display: block; margin-top: 10px; font-weight: 700; }
/* A column whose print button takes the free height above it, so the buttons in a row share one line when a caption wraps. */
.coloring-picture { display: flex; flex-direction: column; height: 100%; margin: 0; padding: 14px; text-align: center; background: #fff; border-radius: 18px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
.coloring-picture img { width: 100%; height: auto; border: 1px solid #eee; border-radius: 10px; }
.coloring-picture figcaption { margin: 12px 0; font-size: 15px; }
.coloring-picture .coloring-print { margin: auto auto 0; padding: 8px 24px; font-size: 16px; }
/* Two classes deep, to outrank the lead rule (.wrapper > p, 19 px) that otherwise sets this note. */
.wrapper .coloring-note { margin: 18px 0 0; font-size: 14px; color: #666; }
.coloring-more h2 { margin-bottom: 18px; font-size: 24px; font-weight: 700; }
.theme-coloring-link { margin: 0 0 18px; }
.theme-coloring-link a { font-weight: 700; }
.theme-coloring-link .material-symbols-outlined { margin-right: 6px; vertical-align: -5px; }

/* drawing guides: the finished drawing and its sheet, then the steps */
.draw-top { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-bottom: 8px; }
.draw-final { width: 260px; max-width: 60vw; height: auto; padding: 10px; background: #fff; border-radius: 18px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
.draw-top .coloring-print { padding: 8px 24px; font-size: 16px; }
.wrapper .draw-steps-title, .wrapper .story-printables-title { margin: 28px 0 16px; font-size: 24px; }
.draw-steps { margin: 0; }
.draw-step figcaption { margin: 12px 0 0; text-align: left; }
.draw-step-n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 700; background: var(--primary-ink); }

/* the story page: a roll of the dice, then the printables */
.story-roll { padding: 22px; text-align: center; background: #fff; border-radius: 18px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
.story-roll h2 { margin: 0 0 16px; font-size: 24px; }
.story-dice { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 16px; }
.story-dice li { display: flex; flex-direction: column; justify-content: center; width: 150px; min-height: 110px; padding: 12px; border: 2px solid rgba(var(--primary-color-rgb), 0.35); border-radius: 16px; }
.story-die-name { font-size: 13px; color: #666; }
.story-die-face { margin-top: 4px; font-size: 18px; font-weight: 700; }
.story-sentence { font-size: 20px; font-weight: 700; }
.story-printable p { margin: 0 0 14px; }

/* the free stories: cards, a story set to be read aloud, and the book block */
.tale-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; color: var(--text-color); text-decoration: none; background: #fff; border-radius: 18px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); transition: box-shadow 0.2s, transform 0.2s; }
.tale-card:hover { box-shadow: 0 6px 18px rgba(var(--primary-color-rgb), 0.18); transform: translateY(-2px); }
.tale-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 10%; }
.tale-card-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 18px; }
.tale-card-body strong { font-size: 19px; }
.tale-card-meta { font-size: 14px; color: #666; }
.tale-card-lead { font-size: 15px; color: var(--text-color); }
.tale h1 { margin-bottom: 8px; }
.tale-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 18px; font-size: 15px; color: #555; }
.tale-meta .material-symbols-outlined { margin-right: 6px; font-size: 20px; vertical-align: -4px; color: var(--primary-color); }
.tale-picture { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); }
.tale-text p { font-size: 19px; line-height: 1.75; }
.tale-text p.tale-line { padding-left: 1.2em; text-indent: -1.2em; }
.tale-talk, .tale-continue { margin-top: 18px; }
.tale-talk h2, .tale-continue h2 { margin: 0 0 10px; font-size: 22px; }
.tale-talk li { margin-bottom: 6px; }
.book-block { margin: 28px 0; padding: 26px 22px; background: rgba(var(--primary-color-rgb), 0.07); border-radius: 22px; }
.book-block h2 { margin: 0 0 8px; font-size: 26px; }
.book-block-text { margin: 0 0 18px; }
.book-block-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin: 0 0 22px; }
.book-block-steps li { display: flex; gap: 12px; }
.book-block-steps h3 { margin: 2px 0 4px; font-size: 17px; font-weight: 700; }
.book-block-steps p { margin: 0; font-size: 15px; }
.book-block-n { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 700; background: var(--primary-ink); }