/* 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: var(--fs-3xl); font-weight: 800; color: var(--primary-deep); margin-bottom: 5px; }
.wrapper > p, .wrapper > p.top, .wrapper > p.info { font-size: var(--fs-lg); 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: var(--radius); padding: 35px 20px; }
  .wrapper > h2, .homepage-reviews h2 { font-size: var(--fs-xl); }
  .wrapper > p, .wrapper > p.info { font-size: var(--fs-md); 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: var(--fs-6xl); 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: var(--fs-lg); 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: var(--radius-pill); background: #fff; box-shadow: 0 2px 8px rgb(var(--shade) / 8%); font-size: var(--fs-base); 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: var(--fs-base); text-align: center; text-wrap: balance; }
/* The season's own clay picture, not an interface glyph, beside its day. */
.season-deadline img { width: 28px; height: 28px; object-fit: contain; vertical-align: -8px; margin-right: 5px; filter: drop-shadow(0 1px 1px rgb(var(--shade) / 20%)); }

/* 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: var(--fs-sm); 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(var(--shade) / 25%); transform: perspective(1000px) rotateY(-5deg);
  border-radius: 0 3px 3px 0; transition: transform 0.3s, box-shadow 0.3s;
  background: var(--placeholder-color);
}
.homepage-top .examples:hover { transform: none; box-shadow: -7px 7px 15px rgb(var(--shade) / 40%); }
/* A cover drawn without its title carries the site's words over it (.cover-title, as an idea's cover does). */
.homepage-top .examples.titled { container-type: inline-size; }
/* The shelf's sizes (render.ShelfTitleFit): as large as the painted titles, in two lines at most. */
.homepage-top .examples .cover-title { top: 5%; padding: 0 6%; }
.homepage-top .examples .cover-title > span { font-size: 12.1cqw; line-height: 1.05; }
.homepage-top .examples .cover-title.fit-m > span { font-size: 10.08cqw; }
.homepage-top .examples .cover-title.fit-s > span { font-size: 8.4cqw; }
.homepage-top .examples .cover-title.fit-xs > span { font-size: 6.72cqw; }
.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, rgb(var(--shade) / 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 rgb(var(--shade) / 26%); 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: var(--fs-5xl); }
  .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: var(--fs-4xl); 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: var(--fs-md); 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: var(--fs-base); }
  .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: var(--fs-3xl); } }

/* ── 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: 48px; height: 48px; flex: none; border-radius: 50%; background-color: var(--primary-ink); 
  border: 2px solid var(--primary-ink); color: #fff; font-size: var(--fs-xl); font-weight: 800; display: flex; align-items: center; justify-content: center; margin-right: 20px;
  background: var(--primary-color);
  font-family: var(--heading-font);
  line-height: 1;
  padding-top: 2px;
  box-shadow: 0 0 0 5px var(--light-primary-color);
}
.homepage-howitworks .step-title { font-size: var(--fs-2xl); font-weight: 700; color: var(--text-color); display: flex; margin: 4px 0 0.5rem; }
.homepage-howitworks p { font-size: var(--fs-lg); font-weight: 300; max-width: 30em; }
.homepage-howitworks p b { font-weight: 700; }
.homepage-howitworks img.step { max-width: 340px; }
@media (max-width: 1199px) { .homepage-howitworks img.step { max-width: 250px; margin: 35px 0; } }
@media (max-width: 767px) {
  .homepage-howitworks { background: none; }
  .homepage-howitworks .d-flex > span { width: 38px; height: 38px; font-size: var(--fs-lg); margin-right: 15px; box-shadow: 0 0 0 4px var(--light-primary-color); }
  .homepage-howitworks .step-title { font-size: var(--fs-xl); margin-top: 2px; }
.homepage-howitworks p { font-size: var(--fs-md); }
  .homepage-howitworks img.step { max-width: 220px; margin: 0 0 30px; }
  .homepage-howitworks hr { max-width: 150px; margin: 36px auto; opacity: 1; height: 52px; border: 0; background: url("img/trail-swoop.svg") no-repeat center / contain; }
}

/* ── 3 seasonal promo ── */
/* A band from edge to edge, not a card: a wash of turquoise on the page,
   so the paper's grain runs on through it and it comes up out of the
   cream and sinks back into it over its first and last 88 px, with no
   edge to cross. The section is the page's width and the card's height,
   so the wash is drawn on it and stands still while the card's words
   rise in. The starry trail stands in the card's corner as on a story page. */
.seasonal-promo {
  margin-bottom: 50px;
  background: var(--paper), linear-gradient(180deg, var(--background-color) 0, var(--light-primary-color) 88px,
    var(--primary-tint) calc(100% - 88px), var(--background-color) 100%);
}
.seasonal-promo-card { position: relative; padding: 44px 40px; }
.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 rgb(var(--shade) / 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: var(--fs-sm); font-weight: 600; color: var(--primary-ink); border: 1px solid var(--primary-ink); background: #0097a70a;
  padding: 4px 12px; border-radius: var(--radius-pill); margin-bottom: 15px; letter-spacing: 0.3px;
}
.seasonal-promo h2 { font-size: var(--fs-3xl); font-weight: 800; color: var(--primary-deep); line-height: 1.2; margin-bottom: 5px; }
.seasonal-promo p { font-size: var(--fs-lg); font-weight: 300; color: var(--ink-soft); 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: var(--radius-sm); padding: 8px 12px; font-size: var(--fs-base); color: var(--text-color); }
.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: var(--fs-base); 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: var(--fs-base); 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: var(--fs-xl); }
  .seasonal-promo p { font-size: var(--fs-md); }
  .seasonal-promo-actions { flex-direction: column; align-items: center; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .seasonal-promo-icon { animation: none; } }

/* ── 4 picture tiles: the age pages' ages and themes, the topic and message tiles ── */
.homepage-form .wrapper { background: var(--surface-warm); min-height: 380px; overflow: hidden; }
/* The tiles themselves, their tones and their states are components.css's. */
.radio-content img.pic, .radio-content.big img { height: auto; display: block; margin: 0 auto 10px; filter: drop-shadow(0 4px 4px rgb(var(--shade) / 0.2)); }






.radio-content img.pic { max-width: 90px; }
.radio-content.big img { max-width: 110px; margin-bottom: 15px; }

.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); }


/* 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) {
  
  
  .radio-content.big img { max-width: 85px; }
  
  .custum-padding-end { padding-right: 0.5rem; }
  .custum-padding-start { padding-left: 0.5rem; }
}

/* ── 2b topic tiles (home, under the three steps): the age picker's
   tiles, six in a row, three on a phone; no lede, so the wrapper keeps no
   height. ── */
.topic-tiles .wrapper { min-height: 0; }
.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: var(--radius-lg); padding: 38px 0; margin-bottom: 38px; }
.box-wrapper1 { background: color-mix(in srgb, var(--tone-peach) 26%, transparent); } .box-wrapper2 { background: color-mix(in srgb, var(--tone-sage) 26%, transparent); } .box-wrapper3 { background: color-mix(in srgb, var(--tone-rose) 24%, transparent); }
.example .box { border-radius: var(--radius); padding: 12px; margin-bottom: 12px; }
.box.box1 { background: color-mix(in srgb, var(--tone-peach) 46%, transparent); } .box.box2 { background: color-mix(in srgb, var(--tone-sage) 60%, transparent); } .box.box3 { background: color-mix(in srgb, var(--tone-rose) 45%, transparent); }
.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); 
  box-shadow: -10px 10px 18px rgb(40 25 10 / 30%); border-radius: 0 5px 5px 0; transition: transform 0.3s, box-shadow 0.3s;
  background: var(--placeholder-color);
}
.example a.cover:hover { transform: none; 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%, var(--book-paper) 86.8%, var(--book-paper) 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: var(--tone-peach-edge); } .box-photos.box2 img { border-color: var(--tone-sage-edge); } .box-photos.box3 img { border-color: var(--tone-rose-edge); }
/* The arrow from the photos down to the cover is drawn in the starry
   trail's dotted line (img/arrow-drawn.svg), its head at the cover's spine. */
.example .arrow { display: block; width: 104px; height: 84px; margin: 34px -46px 0 auto; background: url("img/arrow-drawn.svg") no-repeat center / contain; }

@media (max-width: 1350px) {  }
@media (max-width: 1199px) {  }
.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: var(--radius); padding: 15px; margin-bottom: 25px; }
  .example .box { padding: 6px; margin-bottom: 10px; border-radius: var(--radius-sm); }
  .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: var(--radius-sm); }
.example .arrow { width: 44px; height: 36px; margin: 14px -14px 0 auto; }
  
  .box-link { font-size: var(--fs-sm); 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: var(--fs-3xl); font-weight: 800; color: var(--primary-deep); margin-bottom: 35px; }
.subject-links-wrapper ul a {
  display: inline-block; padding: 7px 18px; border-radius: var(--radius-pill); font-size: var(--fs-base); font-weight: 600; margin-bottom: 12px; color: var(--text-color);
  background-image: linear-gradient(-180deg, #fff, #ffffff36); border: 1px solid var(--border-strong);
}
/* 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, rgb(var(--shade) / 2%)); }
/* 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: var(--fs-md); font-weight: 700; color: var(--muted-color); 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: var(--fs-xl); max-width: 300px; margin-left: auto; margin-right: auto; }
  .subject-links-wrapper ul a { padding: 5px 10px; font-size: var(--fs-sm); 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: var(--radius); padding: 10px; }
.grid-item:nth-child(4n+1) .card3 { --tone: var(--tone-peach); }
.grid-item:nth-child(4n+2) .card3 { --tone: var(--tone-sage); }
.grid-item:nth-child(4n+3) .card3 { --tone: var(--tone-rose); }
.grid-item:nth-child(4n) .card3 { --tone: var(--tone-sand); }
.card3 { background: linear-gradient(180deg, rgb(255 255 255 / 58%) 55%, #ffffff70 120%), var(--tone, var(--tone-sand)); }










.review-stars { color: var(--primary-color); letter-spacing: 1px; margin-bottom: 8px; }
.card3 .card-text { font-size: var(--fs-md); font-weight: 400; font-style: italic; line-height: 28px; }
.card3 hr { max-width: 25px; border-top: 1px solid rgb(var(--shade) / 12%); opacity: 1; margin: 14px 0; }
.card3 .card-title { font-size: var(--fs-base); 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: var(--fs-sm); line-height: 20px; hyphens: auto; }
  .card3 hr { max-width: 20px; margin: 10px 0; }
  .card3 .card-title { font-size: var(--fs-sm); }
}
/* 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, with the cream list on it: deep
   ink printed on the same paper. The section is the page's width and its
   card's height (the card's margin falls outside it), so the band is the
   section's own background; the paper's grain shows through the ink as
   light flecks (the grain inverted, under the words), and the list is a
   window onto the cream paper, grain and all. */
section.usp { position: relative; isolation: isolate; background: var(--primary-deep); }
section.usp::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--paper); filter: invert(1);
}
.usp .wrapper { background: none; padding: 50px 30px; border-radius: 0; box-shadow: none; }
.usp h2 { font-size: var(--fs-3xl); font-weight: 800; color: #fff; margin-bottom: 35px; }
.usp .usp-lead { color: #fff; }
.usp-box { background: var(--paper), var(--background-color); border-radius: var(--radius-lg); padding: 35px 30px 10px; }
.usp-box p { font-size: var(--fs-md); display: flex; line-height: 24px; margin-bottom: 25px; }
.usp-box .material-symbols-outlined { color: var(--success-color); 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: var(--background-color); color: var(--primary-deep); border-color: var(--background-color); box-shadow: 0 3px 0 rgb(0 30 35 / 35%); }
.usp .button:hover { background: transparent; color: #fff; border-color: #fff; box-shadow: none; transform: 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: var(--fs-xl); }
  .usp-box { padding: 35px 20px 10px; border-radius: var(--radius); }
  .usp-box p { font-size: var(--fs-base); 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: var(--fs-3xl); font-weight: 800; color: var(--primary-deep); margin-bottom: 10px; }
.card2 { background: var(--background-color); border: 0; border-radius: var(--radius); padding: 10px; }
.card2 p, .card2 li { font-size: var(--fs-md); line-height: 28px; }
.card2 h3 { font-size: var(--fs-xl); 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: var(--fs-xl); } .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: var(--radius-sm); background: var(--placeholder-color); }
.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: var(--radius-pill); background: #f5e9d3; color: var(--ink-soft); font-weight: 600; font-size: var(--fs-base); 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; }

@media (min-width: 768px) {
.homepage-howitworks .wrapper > .row { position: relative; }
.homepage-howitworks hr + .row::before {
    content: ""; position: absolute; left: 50%; top: -58px; width: 300px; height: 90px; margin-left: -150px; pointer-events: none;
    background: url("img/trail-swoop.svg") no-repeat center / contain;
  }
.homepage-howitworks hr + .row + hr + .row::before { transform: scaleX(-1); }
}

@media (prefers-reduced-motion: no-preference) {
.radio-content img.pic, .radio-content.big img { transition: transform 300ms cubic-bezier(0.2, 0.6, 0.6, 1); }
}

@media (max-width: 1350px) {
.example .arrow { width: 84px; height: 68px; margin: 28px -36px 0 auto; }
}

@media (max-width: 1199px) {
.example .arrow { width: 64px; height: 52px; margin: 20px -24px 0 auto; }
}