/* The home page's sections, in page order. Every section is a rounded
   card (.wrapper, components.css) in a 1340 px container. The content
   pages reuse several of them: the rating line, the theme cloud, the
   reviews masonry, the USP band, the promo card, the age tiles and the
   SEO card. */

.wrapper > h2, .homepage-reviews h2 { font-size: 34px; font-weight: 800; color: var(--primary-deep); margin-bottom: 5px; }
.wrapper > p, .wrapper > p.top, .wrapper > p.info { font-size: 19px; font-weight: 300; color: var(--text-color); margin-bottom: 35px; }
@media (max-width: 767px) {
  .homepage-howitworks .wrapper, .homepage-form .wrapper, .homepage-examples .wrapper, .homepage-reviews .wrapper,
  .homepage-faq .wrapper, .usp .wrapper, .theme-overview .wrapper { border-radius: 20px; padding: 35px 20px; }
  .wrapper > h2, .homepage-reviews h2 { font-size: 26px; }
  .wrapper > p, .wrapper > p.info { font-size: 18px; margin-bottom: 30px; }
}

@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
/* The hero's lead and button rise into place, but stand from the first
   paint: no text in the first view waits on a fade. */
@keyframes riseIn { from { transform: translateY(20px); } to { transform: none; } }
@keyframes topslider1 { from { transform: translateY(300px); } to { transform: none; } }
@keyframes topslider2 { from { transform: translateY(200px); } to { transform: none; } }
@keyframes topslider3 { from { transform: translateY(100px); } to { transform: none; } }
@keyframes moveGradient { to { background-position: -300% center; } }
@keyframes mpExFloatSoft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ── 1 hero ── */
.homepage-top { min-height: 500px; padding-top: 75px; background: linear-gradient(0deg, rgba(var(--primary-color-rgb), 0.07) 0%, rgba(250, 248, 240, 0) 24%); }
/* The heading stands from the first paint: it is the largest text in the
   first view, and a fade there only delays the page's largest paint.
   Alegreya runs narrower than Reddit Sans: at 62 px the heading keeps its
   two lines and its weight beside the covers. */
.homepage-top h1 { position: relative; font-size: 62px; font-weight: 800; line-height: 1.1; max-width: 655px; }
/* The starry trail from a story page's outer top corner (render/deco/sky.svg). */
.homepage-top h1::before {
  content: ""; position: absolute; left: -18px; top: -74px; width: 120px; height: 80px; pointer-events: none;
  background: url("/render/sky.svg") no-repeat center / contain;
}
/* An occasion's badge stands where the trail would: one ornament is enough. */
.homepage-top .hero-occasion + h1::before { content: none; }
.homepage-top .col-md-7 > p { font-size: 22px; font-weight: 300; max-width: 570px; margin-bottom: 20px; animation: riseIn 0.5s ease-out 0.3s both; }
.homepage-top .col-md-7 > .button { display: block; width: 100%; max-width: 330px; padding: 12px 15px; animation: riseIn 0.6s ease-out 0.4s both; }
.cta-block-link { display: block; max-width: 330px; margin-bottom: 35px; color: inherit; }
/* An occasion page's name over its headline, with its picture: the page
   is the home page's under the occasion's words. */
.hero-occasion { display: flex; align-items: center; gap: 8px; width: fit-content; margin-bottom: 14px; padding: 3px 16px 3px 3px; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / 8%); font-size: 16px; font-weight: 700; }
.hero-occasion img { width: 44px; height: 44px; object-fit: contain; }
.hero-occasion .material-symbols-outlined { font-size: 28px; padding: 8px; color: var(--primary-color); }
/* The badge and an occasion's longer headline fill the hero to its foot,
   where the next card starts: room under the button's line, as the home
   page's shorter text leaves. On a phone the covers stand between. */
@media (min-width: 768px) { .homepage-top:has(.hero-occasion) .col-md-7 { padding-bottom: 32px; } }
/* The hardcover's last order day for the season, under the button. */
.season-deadline { max-width: 330px; margin: -4px 0 18px; font-size: 15px; text-align: center; text-wrap: balance; }
.season-deadline .material-symbols-outlined { font-size: 19px; vertical-align: -4px; margin-right: 4px; color: #c62828; }
/* The shimmer runs between the two dark shades of the ink, each 4.5:1 or
   more on the cream: the lighter turquoises would leave a word of the
   rating unreadable as it passes. */
.cta-text {
  display: block; text-align: center; font-size: 13px; font-weight: 300; opacity: 0;
  background-image: linear-gradient(110deg, var(--primary-hover), var(--primary-ink), var(--primary-hover)); background-size: 300% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: fadeInUp 0.6s ease-out 0.65s forwards, moveGradient 6s ease-in-out infinite;
}
.cta-stars { position: relative; display: inline-block; letter-spacing: 1px; -webkit-text-fill-color: initial; }
.cta-stars-leeg { color: #dcd4c2; }
.cta-stars-vol { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--primary-color); }
.cta-reviews-count { border-bottom: 1px dashed var(--primary-light); }
.cta-block-link:hover .cta-reviews-count { border-color: var(--primary-light); }
.cta-pijl { display: inline-block; opacity: 0; transform: translateX(-4px); transition: all 0.18s; }
.cta-pijl svg { stroke: var(--primary-hover); }
.cta-block-link:hover .cta-pijl { opacity: 1; transform: none; }
.homepage-top .col-md-5 { max-height: 425px; }
.homepage-top .examples {
  display: block; text-decoration: none; position: relative; margin-bottom: 20px; box-shadow: -5px 5px 10px rgb(0 0 0 / 25%); transform: perspective(1000px) rotateY(-5deg);
  opacity: 0.88; border-radius: 0 3px 3px 0; transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s;
}
.homepage-top .examples:hover { transform: none; opacity: 1; box-shadow: -7px 7px 15px rgb(0 0 0 / 40%); }
.homepage-top .examples img { display: block; width: 100%; height: auto; border-radius: 0 3px 3px 0; }
.homepage-top .examples::before { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 4px; background: linear-gradient(to left, rgba(0, 0, 0, 0.25), transparent); }
.homepage-top .examples::after { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 6px; background: linear-gradient(to right, rgba(255, 255, 255, 0.2), transparent); }
.homepage-top .border-right {
  position: absolute; right: -4px; top: 1%; height: 98%; width: 4px; background: #fff;
  border-right: 1px solid #00000042; border-radius: 0 3px 3px 0;
}
.slider1 { margin-top: 120px; animation: topslider1 2s ease-out; }
.slider2 { margin-top: 40px; animation: topslider2 1.5s ease-out; }
.slider3 { margin-top: -35px; animation: topslider3 1s ease-out; }
@media (max-width: 1199px) {
  .homepage-top h1 { font-size: 52px; }
  .homepage-top .examples { transform: none; }
}
@media (max-width: 767px) {
  .homepage-top { padding: 15px 0; min-height: 0; margin-bottom: -55px;
    background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0) 0%, rgba(var(--primary-color-rgb), 0.07) 50%, rgba(var(--primary-color-rgb), 0) 100%); }
  .homepage-top h1 { font-size: 40px; text-align: center; max-width: none; margin-bottom: 5px; }
  .homepage-top h1::before { left: auto; right: 0; top: -10px; width: 54px; height: 36px; }
  .homepage-top .col-md-7 > p { font-size: 18px; text-align: center; max-width: none; }
  .homepage-top .col-md-7 > .button { padding: 10px 30px; margin: 0 auto 7px; }
  .cta-block-link { margin: 5px auto 40px; }
  .season-deadline { margin: 6px auto 14px; }
  .hero-occasion { margin: 6px auto 10px; font-size: 15px; }
  .seasonal-promo-steps, .seasonal-promo .seasonal-promo-late { margin-left: auto; margin-right: auto; }
  .homepage-top .col-md-5 { max-height: none; }
  /* Only the covers' first row shows. The row is the page's width (no
     container breakpoint below 1340 px), a middle cover is 47 % of it tall,
     and 80 px is that column's 40 px drop, some air and the 40 px tucked
     under the next card, pulled up by those 40 px and the 15 px padding.
     Clipped and faded rather than hidden behind the card, so no cover's
     shadow shows beside it. */
  .homepage-top .col-md-5 > .row {
    max-height: calc(47vw + 80px); overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent); mask-image: linear-gradient(#000 calc(100% - 40px), transparent);
  }
  .slider1 { margin: 80px -7.5px 0 0; }
  .slider2 { margin: 40px -7.5px 0; }
  .slider3 { margin: 5px 0 0 -7.5px; }
  .homepage-top .border-right { width: 3px; right: -3px; }
}
@media (max-width: 359px) { .homepage-top h1 { font-size: 34px; } }

/* ── 2 how it works ── */
.homepage-howitworks { background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.07) 0%, rgba(250, 248, 240, 0) 100%); }
.homepage-howitworks .wrapper { min-height: 400px; position: relative; }
.homepage-howitworks .d-flex > span {
  width: 43px; height: 43px; flex: none; border-radius: 50%; background-color: var(--primary-ink); background-image: var(--primary-gradient);
  border: 2px solid var(--primary-ink); color: #fff; font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-right: 20px;
}
.homepage-howitworks .step-title { font-size: 26px; font-weight: 700; color: var(--text-color); display: flex; margin-bottom: 0.5rem; }
.homepage-howitworks p { font-size: 18px; font-weight: 300; }
.homepage-howitworks p b { font-weight: 700; }
.homepage-howitworks img.step { max-width: 310px; }
@media (max-width: 1199px) { .homepage-howitworks img.step { max-width: 235px; margin: 35px 0; } }
@media (max-width: 767px) {
  .homepage-howitworks { background: none; }
  .homepage-howitworks .d-flex > span { width: 35px; height: 35px; font-size: 21px; margin-right: 15px; }
  .homepage-howitworks .step-title { font-size: 21px; }
  .homepage-howitworks img.step { max-width: 200px; margin: 0 0 30px; }
  .homepage-howitworks hr { max-width: 200px; margin: 50px auto; border-top: 1px dashed var(--primary-color); opacity: 1; }
}

/* ── 3 seasonal promo ── */
.seasonal-promo { margin-bottom: 50px; }
/* A band from edge to edge, not a card: the border image's outset paints
   the tint out to the window's sides without widening the page, and the
   starry trail stands in its corner as on a story page. */
.seasonal-promo-card {
  position: relative; padding: 44px 40px;
  border-image: linear-gradient(180deg, var(--light-primary-color) 0%, var(--primary-tint) 100%) fill 0 / 0 / 0 100vmax;
}
.seasonal-promo-card::after {
  content: ""; position: absolute; right: 10px; top: 18px; width: 120px; height: 80px; pointer-events: none;
  background: url("/render/sky.svg") no-repeat center / contain; transform: scaleX(-1);
}
.seasonal-promo-icon { width: 100%; max-width: 200px; height: auto; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.1)); animation: mpExFloatSoft 6s ease-in-out 1.6s infinite; }
.seasonal-promo-body { padding-left: 10px; }
.seasonal-promo-badge {
  display: inline-block; font-size: 13px; font-weight: 600; color: var(--primary-ink); border: 1px solid var(--primary-ink); background: #0097a70a;
  padding: 4px 12px; border-radius: 100px; margin-bottom: 15px; letter-spacing: 0.3px;
}
.seasonal-promo h2 { font-size: 28px; font-weight: 800; color: #2c1810; line-height: 1.2; margin-bottom: 5px; }
.seasonal-promo p { font-size: 19px; font-weight: 300; color: #5a4030; margin-bottom: 18px; }
/* The hardcover's way to the door, while its last order day is ahead. */
.seasonal-promo-steps { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; max-width: 520px; }
.seasonal-promo-steps li { display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: baseline; text-align: left;
  background: rgba(255, 255, 255, 0.7); border-radius: 10px; padding: 8px 12px; font-size: 16px; color: #2c1810; }
.seasonal-promo-steps b { color: var(--primary-ink); font-weight: 700; }
.seasonal-promo .seasonal-promo-late { display: flex; gap: 8px; align-items: flex-start; text-align: left; font-size: 15px; font-weight: 400; max-width: 520px; }
.seasonal-promo-late .material-symbols-outlined { font-size: 20px; color: var(--primary-color); }
.seasonal-promo-actions { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.seasonal-promo-actions .button { font-size: 16px; padding: 10px 34px; margin-bottom: 0; white-space: nowrap; max-width: 100%; }
@media (max-width: 767px) {
  .seasonal-promo { margin-bottom: 25px; }
  .seasonal-promo-card { padding: 30px 10px; }
  .seasonal-promo-card::after { right: -6px; top: 8px; width: 72px; height: 48px; }
  .seasonal-promo-icon { max-width: 130px; }
  .seasonal-promo-mobile-badge-wrap .seasonal-promo-badge { margin-bottom: 12px; }
  .seasonal-promo-body { text-align: center; padding: 12px 10px 0; }
  .seasonal-promo h2 { font-size: 23px; }
  .seasonal-promo p { font-size: 18px; }
  .seasonal-promo-actions { flex-direction: column; align-items: center; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .seasonal-promo-icon { animation: none; } }

/* ── 4 age picker ── */
.homepage-form .wrapper { background: #f8f0e2; min-height: 380px; overflow: hidden; }
/* The step title's padding is the gap: a negative margin here would set it on the lede. */
.homepage-form p.top { margin-bottom: 0; }
.form-section-title-spaced { font-size: 26px; font-weight: 700; padding-top: 2rem; }
.custom-radio-block { cursor: pointer; margin-top: 15px; width: 100%; font-size: 16px; color: #555; }
.radio-content {
  border: 2px solid; padding: 30px 20px; border-radius: 20px; text-align: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition: transform 80ms, box-shadow 0.2s, border-color 0.2s;
}
/* the first half of an 8-tile palette; site.css colours 8n+5 to 8n */
.form-group > div:nth-child(8n+1) .radio-content { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #ffd7ba; border-color: #d6b18f; }
.form-group > div:nth-child(8n+2) .radio-content { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #d8e2dc; border-color: #b4beb8; }
.form-group > div:nth-child(8n+3) .radio-content { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #fcd5ce; border-color: #dbb0ad; }
.form-group > div:nth-child(8n+4) .radio-content { background: linear-gradient(180deg, rgb(255 255 255 / 20%) 55%, #00000014 120%), #fae1dd; border-color: #d6bfb9; }
.radio-content img.pic { max-width: 90px; height: auto; display: block; margin: 0 auto 10px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2)); transition: transform 300ms cubic-bezier(0.2, 0.6, 0.6, 1); }
.radio-content.big img { max-width: 110px; height: auto; margin-bottom: 15px; opacity: 0.9; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2)); transition: transform 300ms cubic-bezier(0.2, 0.6, 0.6, 1); }
.radio-content span { display: block; font-size: 19px; font-weight: 600; color: #000; }
.custom-radio-block:hover .radio-content {
  border-color: var(--primary-color); box-shadow: rgb(56 56 56 / 36%) 0 3px 8px;
}
.custom-radio-block:hover .radio-content span { color: var(--primary-ink); }
.custom-radio-block:hover .radio-content img { transform: scale(1.08); filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3)) sepia(10%); }
.custom-radio-block:active .radio-content { transform: scale(0.985); }
/* A tile is a link: the keyboard's ring is drawn round its card. */
.custom-radio-block:focus-visible { outline: none; }
.custom-radio-block:focus-visible .radio-content { outline: 3px solid var(--primary-ink); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.25); }
@media (max-width: 767px) {
  .homepage-form p.top { font-size: 18px; }
  .form-section-title-spaced { font-size: 22px; padding-top: 1.75rem; }
  .custom-radio-block { margin-top: 10px; }
  .radio-content { padding: 20px 10px; }
  .radio-content.big img { max-width: 85px; }
  .radio-content span { font-size: 16px; }
  .custum-padding-end { padding-right: 0.5rem; }
  .custum-padding-start { padding-left: 0.5rem; }
}

/* ── 1b topic tiles (home, under the hero): the age picker's tiles, six
   in a row, three on a phone; no lede, so the wrapper keeps no height. It
   is positioned, as the steps' card is, so the hero's covers rise behind
   it, not over it. ── */
.topic-tiles .wrapper { min-height: 0; position: relative; }
.topic-tiles .wrapper > h2 { margin-bottom: 10px; }
.topic-tiles-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin-top: 22px; font-size: 16px; }
.topic-tiles-foot > span { display: flex; align-items: center; gap: 6px; }
.topic-tiles-foot .all-link { margin-top: 0; font-weight: 600; }
@media (max-width: 767px) {
  .topic-tiles .radio-content { padding: 14px 6px; border-radius: 16px; }
  .topic-tiles .radio-content.big img { max-width: 64px; margin-bottom: 8px; }
  .topic-tiles .radio-content span { font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
  .topic-tiles-foot { flex-direction: column; align-items: flex-start; font-size: 15px; }
}

/* ── 5 examples ── */
.homepage-examples .wrapper { padding: 50px 50px 20px; }
.box-wrapper { border-radius: 30px; padding: 38px 0; margin-bottom: 38px; }
.box-wrapper1 { background: #ffd7ba42; } .box-wrapper2 { background: #d8e2dc38; } .box-wrapper3 { background: #fcd5ce36; }
.example .box { border-radius: 20px; padding: 12px; margin-bottom: 12px; }
.box.box1 { background: #ffd7ba75; } .box.box2 { background: #d8e2dc99; } .box.box3 { background: #fcd5ce73; }
.example .col-md-4 > .box:has(.cover) { padding: 20px; }
.example a.cover {
  display: block; position: relative; margin-left: max(4px, 3.06%); transform: perspective(1000px) rotateY(-5deg); opacity: 0.88;
  box-shadow: -10px 10px 18px rgb(40 25 10 / 30%); border-radius: 0 5px 5px 0; transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s;
}
.example a.cover:hover { transform: none; opacity: 1; box-shadow: -10px 10px 18px rgb(40 25 10 / 42%); }
.example a.cover img { display: block; width: 100%; height: auto; border-radius: 0 5px 5px 0; }
.example a.cover::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: max(4px, 3.06%);
  background: linear-gradient(to right, #d1c9c1 0%, #e9e1d7 4%, #f4ebe1 9.2%, #f8efe4 18.4%, #f5ece2 36.2%, #ece3d9 41.5%, #dbd3ca 46.8%, #ddd5cc 52.1%, #e7ded5 60%, #efe6dd 68.2%, #f9f0e6 76%, #f6ede3 80.6%, #f3eae0 86.8%, #f3eae0 100%);
}
.example a.cover::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: clamp(6px, 7%, 18px);
  background: linear-gradient(to right, rgb(40 25 10 / 18%), rgb(40 25 10 / 5%) 40%, rgb(40 25 10 / 0%) 60%, rgb(255 255 255 / 8%) 76%, rgb(255 255 255 / 0%));
}
.example .border-right {
  position: absolute; top: 1%; bottom: 1%; right: calc(-1 * min(2.1%, 6.5px)); width: min(2.1%, 6.5px);
  background: linear-gradient(to right, rgb(60 40 20 / 0%), rgb(60 40 20 / 6%)), repeating-linear-gradient(to right, #fff 0, #fff 1px, #f2eee8 1px, #f2eee8 2px);
  box-shadow: inset -1px 0 0 rgb(60 40 20 / 26%); border-radius: 0 2px 2px 0;
}
.box-info { padding: 25px !important; }
.box-info-title { font-size: 20px; font-weight: 700; line-height: 1.2; border-bottom: 1px dashed #00000026; padding-bottom: 10px; margin-bottom: 15px; }
.box-info ul { list-style: none; padding: 0; margin: 0; }
.box-info li { margin-bottom: 12px; line-height: 20px; }
.box-photos-title { font-size: 16px; font-weight: 600; line-height: 1.2; border-bottom: 1px dashed #00000026; padding-bottom: 5px; margin-bottom: 10px; }
.box-photos .example-photos li { margin-bottom: 8px; }
.box-photos .example-photos img { max-height: 125px; }
.box-photos.box1 img { border-color: #d6b18f; } .box-photos.box2 img { border-color: #b4beb8; } .box-photos.box3 img { border-color: #dbb0ad; }
/* The arrow curves from the photos down to the cover: rotated whole, as a
   right-aligned block, so its glyph lands at the cover's spine. */
.example .arrow .material-symbols-outlined {
  display: block; text-align: right; font-size: 55px; line-height: 1; color: rgb(var(--primary-color-rgb) / 80%);
  margin: 112px -40px 0 0; transform: rotateZ(130deg) scaleX(-1);
}
@media (max-width: 1350px) { .example .arrow .material-symbols-outlined { font-size: 40px; margin: 90px -30px 0 0; } }
@media (max-width: 1199px) { .example .arrow .material-symbols-outlined { font-size: 35px; margin: 65px -20px 0 0; } }
.box-link { padding: 15px 25px !important; margin-top: 10px; }
.box-link a { color: var(--primary-ink); font-weight: 700; display: flex; align-items: center; }
.box-link a .material-symbols-outlined { margin-left: 2px; }
.box-link a:hover { color: var(--text-color); }
@media (min-width: 1200px) { .example a.cover { left: -7px; } }
@media (max-width: 1199px) { .example a.cover { transform: none; } }
@media (max-width: 767px) {
  .homepage-examples .wrapper { padding: 35px 20px; }
  .box-wrapper { border-radius: 20px; padding: 15px; margin-bottom: 25px; }
  .example .box { padding: 6px; margin-bottom: 10px; border-radius: 10px; }
  .example .col-md-4 > .box:has(.cover) { padding: 11px; }
  .box-info { display: none; }
  .box-photos-title { font-size: 12px; }
  .box-photos .example-photos img { border-radius: 10px; }
  .example .arrow .material-symbols-outlined { font-size: 30px; margin: 48px -15px 0 0; }
  .box-link { font-size: 14px; padding: 10px 20px !important; }
  .example a.cover { left: 0; box-shadow: -6px 6px 10px rgb(40 25 10 / 30%); border-radius: 0 3px 3px 0; margin-right: clamp(3px, 2.1%, 8px); }
}
@media (max-width: 560px) { .box-photos .example-photos img { max-height: 60px; } }

/* ── 6 themes ── */
.theme-overview .wrapper { background: #e8eeea; padding: 50px 10px; }
.theme-overview h2 { font-size: 36px; font-weight: 800; color: var(--text-color); margin-bottom: 35px; }
.subject-links-wrapper ul a {
  display: inline-block; padding: 7px 18px; border-radius: 50px; font-size: 16px; font-weight: 600; margin-bottom: 12px; color: var(--text-color);
  background-image: linear-gradient(-180deg, #fff, #ffffff36); border: 1px solid #c7c7c7;
}
/* Taller than the line: the negative top and bottom keep the pill's height. */
.subject-links-wrapper ul a img { height: 28px; width: auto; margin: -5px 7px -3px -5px; vertical-align: middle; }
.subject-links-wrapper ul a:hover { border-color: var(--primary-color); background-image: linear-gradient(-180deg, #fff, #00000005); }
/* The cloud's "show all" and "show fewer" are buttons, the pill row's
   "more" a link: drawn the same, a button given the margin a pill link
   takes from its list. */
.subject-links-wrapper .show-more-trigger, .subject-links-wrapper .show-less-container {
  display: inline-block; padding: 7px 18px; border-radius: 50px; font-size: 16px; font-weight: 600; cursor: pointer;
  background-color: var(--primary-ink); background-image: var(--primary-gradient); color: #fff; border: 1px solid var(--primary-ink);
}
.subject-links-wrapper .show-more-trigger { margin-bottom: 12px; }
.subject-links-wrapper .show-more-trigger:hover, .subject-links-wrapper .show-less-container:hover { background-image: none; color: #fff; }
.subject-links-wrapper .show-less-container { margin-top: 15px; }
.category-section { margin: 30px 0 20px; }
.category-section h3 { font-size: 1.1rem; font-weight: 700; color: #33333396; text-align: center; letter-spacing: 0.5px; margin-bottom: 15px; }
.cat-rule { opacity: 0.1; width: 60%; margin: 20px auto; }
@media (max-width: 767px) {
  .theme-overview .wrapper { padding: 35px 8px 20px; }
  .theme-overview h2 { font-size: 26px; max-width: 300px; margin-left: auto; margin-right: auto; }
  .subject-links-wrapper ul a { padding: 5px 10px; font-size: 14px; margin-bottom: 9px; }
  .subject-links-wrapper ul a img { height: 22px; margin: -4px 5px -2px -3px; }
  .subject-links-wrapper .list-inline-item { margin-right: 0; }
  #initial-view li.list-inline-item:nth-last-child(-n+7):not(:last-child) { display: none; }
  #trigger-li { display: block; }
  .subject-links-wrapper .show-more-trigger { padding: 5px 15px; font-size: 14px; margin-bottom: 9px; }
}

/* ── 7 reviews ── */
.homepage-reviews .wrapper { min-height: 400px; }
.grid { column-count: 4; column-gap: 1rem; }
.grid-item { display: inline-block; width: 100%; margin-bottom: 1rem; }
.card3 { border: 0; border-radius: 20px; padding: 10px; }
.grid-item:nth-child(10n+1) .card3 { background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%), #ffd7ba; }
.grid-item:nth-child(10n+2) .card3 { background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%), #d8e2dc; }
.grid-item:nth-child(10n+3) .card3 { background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%), #fcd5ce; }
.grid-item:nth-child(10n+4) .card3 { background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%), #fae1dd; }
.grid-item:nth-child(10n+5) .card3 { background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%), #f8edeb; }
.grid-item:nth-child(10n+6) .card3 { background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%), #e2e9e5; }
.grid-item:nth-child(10n+7) .card3 { background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%), #ece4db; }
.grid-item:nth-child(10n+8) .card3 { background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%), #fec5bb; }
.grid-item:nth-child(10n+9) .card3 { background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%), #fec89a; }
.grid-item:nth-child(10n) .card3 { background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%), #e8e8e4; }
.review-stars { color: var(--primary-color); letter-spacing: 1px; margin-bottom: 8px; }
.card3 .card-text { font-size: 17px; font-weight: 400; font-style: italic; line-height: 28px; }
.card3 hr { max-width: 25px; border-top: 1px solid #0000001f; opacity: 1; margin: 14px 0; }
.card3 .card-title { font-size: 16px; font-weight: 600; color: var(--primary-ink); }
@media (max-width: 1199px) { .grid { column-count: 3; } }
@media (max-width: 767px) {
  .grid { column-count: 2; column-gap: 0.5rem; }
  .grid-item { margin-bottom: 0.5rem; }
  .card3 { padding: 0; }
  .card3 .card-body { padding: 11px 11px 14px; }
  .card3 .card-text { font-size: 13px; line-height: 20px; hyphens: auto; }
  .card3 hr { max-width: 20px; margin: 10px 0; }
  .card3 .card-title { font-size: 13px; }
}
/* Two columns would leave about 110 px of text: a Swedish compound breaks mid-word. */
@media (max-width: 359px) { .grid { column-count: 1; } }

/* ── 8 USPs ── */
/* The page's one deep band, edge to edge (the shadow paints the sides, the
   clip keeps it to the band's own height), with the cream list on it. */
.usp .wrapper { background: var(--primary-deep); padding: 50px 30px; border-radius: 0;
  box-shadow: 0 0 0 100vmax var(--primary-deep); clip-path: inset(0 -100vmax); }
.usp h2 { font-size: 36px; font-weight: 800; color: #fff; margin-bottom: 35px; }
.usp .usp-lead { color: #fff; }
.usp-box { background: #faf8f0; border-radius: 30px; padding: 35px 30px 10px; }
.usp-box p { font-size: 18px; display: flex; line-height: 24px; margin-bottom: 25px; }
.usp-box .material-symbols-outlined { color: #20a165; margin-right: 10px; }
/* On the deep band the button is cream with deep text (the turquoise pill
   stands only 2.3:1 from the band, and its hover's turquoise text would be
   as faint); hovered or focused it turns outlined in white. */
.usp .button { margin: 0; background: #faf8f0; color: var(--primary-deep); border-color: #faf8f0; }
.usp .button:hover { background: transparent; color: #fff; border-color: #fff; box-shadow: none; }
.usp .button:focus-visible { background: transparent; color: #fff; border-color: #fff; box-shadow: 0 0 0 4px rgb(255 255 255 / 45%); }
@media (max-width: 767px) {
  .usp .wrapper { padding: 35px 20px; }
  .usp h2 { font-size: 26px; }
  .usp-box { padding: 35px 20px 10px; border-radius: 20px; }
  .usp-box p { font-size: 16px; line-height: 22px; margin-bottom: 23px; }
}

/* ── 9 FAQ (the accordion is in components.css) ── */
.all-link { display: flex; align-items: center; color: var(--primary-ink); margin-top: 15px; }
.all-link .material-symbols-outlined { margin-left: 2px; }
.all-link:hover { color: var(--text-color); }

/* ── 10 SEO text ── */
.seo-text-title { font-size: 34px; font-weight: 800; color: var(--primary-deep); margin-bottom: 10px; }
.card2 { background: #faf8f0; border: 0; border-radius: 20px; padding: 10px; }
.card2 p, .card2 li { font-size: 17px; line-height: 28px; }
.card2 h3 { font-size: 24px; font-weight: 800; margin: 20px 0 10px; }
.card2 a { color: var(--primary-ink); }
.card2 ul { list-style: none; margin: 5px 0; padding: 0; }
.card2 li { position: relative; padding-left: 35px; margin-bottom: 22px; }
/* Each point carries its own symbol, set on the first line of its text. */
.card2 li > .material-symbols-outlined { position: absolute; left: 0; top: 3px; font-size: 22px; color: var(--primary-color); }
@media (max-width: 767px) { .seo-text-title { font-size: 26px; } .card2 { padding: 0; } }

/* Under reduced motion everything stands where it ends. */
@media (prefers-reduced-motion: reduce) {
  .homepage-top .col-md-7 > p, .homepage-top .col-md-7 > .button, .cta-text { opacity: 1; animation: none; }
  .slider1, .slider2, .slider3 { animation: none; }
}

/* A review's own photos and video, above its stars (reviewCard). */
.review-media { display: grid; grid-template-columns: 1fr; gap: 6px; margin: -2px 0 12px; }
.review-media.many { grid-template-columns: 1fr 1fr; }
.review-media img, .review-media video { display: block; width: 100%; border-radius: 12px; background: #ede8df; }
.review-media img { aspect-ratio: 4 / 3; object-fit: cover; }
.review-media.many img { aspect-ratio: 1; }
.review-media video { max-height: 420px; }
.review-photo { display: block; }
.review-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 24px; }
.review-filters button { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 50px; background: #f5e9d3; color: #333; font-weight: 600; font-size: 15px; padding: 9px 18px; cursor: pointer; }
.review-filters button.is-active { background: var(--primary-ink); color: #fff; }
.cta-books { font-weight: 600; }
.cta-dot { margin: 0 6px; }