/* Third pass (October 2026), loaded after site.css: the details. Every
   animation sits behind prefers-reduced-motion: no-preference ("Motion"). */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --teal-deep: #3a536c;
  --mat: #f5f2ea;
  --glass: #fffefae8;
  --ring: 0 0 0 2px var(--paper), 0 0 0 5px var(--focus);
}
html {
  scroll-padding-top: 104px;
}

/* -- Header: stays with you */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  max-width: none;
  height: 96px;
  padding: 0 max(52px, calc((100% - 1216px) / 2));
  background: var(--glass);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
  view-transition-name: site-header;
}
.logo {
  display: block;
  border-radius: 12px;
}
.logo img {
  width: 178px;
  height: 83px;
  transform-origin: left center;
}
.navigation a {
  position: relative;
  white-space: nowrap;
}
/* A marker stroke that draws in under the link, instead of an underline. */
.navigation a:not(.nav-shop)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 3px;
  border-radius: 3px;
  background: var(--yellow);
  scale: 0 1;
  transform-origin: left center;
}
.navigation a:not(.nav-shop):hover,
.navigation a[aria-current='page'] {
  text-decoration: none;
}
.navigation a:not(.nav-shop):hover::after,
.navigation a:not(.nav-shop)[aria-current='page']::after {
  scale: 1 1;
}

/* -- Buttons, links and the moment you press them */
.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* a soft sheen that crosses the button on hover */
.button::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, #ffffff38 50%, transparent 65%);
  translate: -110% 0;
}
.button:hover::after {
  translate: 110% 0;
}
.button:active,
.ts-buy-button[href]:active,
.ts-newsletter-submit:active {
  scale: 0.97;
}
.button.ghost {
  background: transparent;
  color: var(--teal);
  border: 1.5px solid var(--teal);
  box-shadow: none;
}
.button.ghost:hover {
  background: var(--teal);
  color: #fff;
}
.text-link {
  text-decoration: none;
  background: linear-gradient(var(--yellow), var(--yellow)) 0 calc(50% + 0.85em) / 0% 3px no-repeat;
}
.text-link:hover {
  text-decoration: none;
  background-size: 100% 3px;
}
:is(a, button, input, summary):focus-visible {
  outline-offset: 4px;
}

/* -- Hero: the drawing plays along */
.hero-copy > .button {
  padding: 18px 28px;
  font-size: 15px;
}
/* Each layer of the picture drifts with the pointer at its own depth
   (craft.js sets --mx and --my between -1 and 1; without it nothing moves). */
.hero-photo > * {
  translate: calc(var(--mx, 0) * var(--depth, 0) * 1px) calc(var(--my, 0) * var(--depth, 0) * 1px);
}
.hero-arch {
  --depth: 6;
}
.hero-arch-line {
  --depth: 14;
  position: absolute;
  left: 1%;
  right: 12%;
  top: 11%;
  bottom: -30%;
  margin: -16px -16px 0 16px;
  border: 2.5px solid #e0d234;
  border-radius: 45% 45% 0 0;
  pointer-events: none;
}
.hero-photo > .hero-portrait {
  --depth: 3;
}
.hero-photo > .hero-plane {
  --depth: 26;
  position: absolute;
  z-index: 0;
  width: 190px;
  height: auto;
  max-width: none;
  left: auto;
  bottom: auto;
  right: 2%;
  top: 27%;
}
.hero-photo > .hero-spark {
  --depth: 22;
}
.hero-photo > .hero-spark-b {
  --depth: 30;
}
.hero-photo > .hero-sticker {
  --depth: 18;
  display: block;
  cursor: pointer;
  filter: drop-shadow(0 10px 14px #1e263238);
}
.sticker-face {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.sticker-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.burst-bit {
  position: absolute;
  left: -5px;
  top: -3px;
  width: 10px;
  height: 6px;
  border-radius: 2px;
  background: var(--yellow);
}
.burst-bit-1 {
  background: var(--teal);
}
.burst-bit-2 {
  background: #fd6cc6;
}
.burst-bit-3 {
  background: #8dccda;
}
.burst-bit-round {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.photo-note {
  --depth: 10;
  cursor: default;
}
.photo-note:hover {
  transform: rotate(-2deg) translateY(-4px);
  box-shadow: 0 22px 36px -14px #1e263260;
}
.note-heart {
  position: absolute;
  right: -16px;
  top: -18px;
  width: 34px;
  height: 34px;
  rotate: 14deg;
}

/* -- What's on your calendar: light follows the pointer */
.category {
  isolation: isolate;
}
.category::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 0%), #ffffffa6, transparent 62%);
  opacity: 0;
}
.category:hover::before {
  opacity: 1;
}
.category:active {
  scale: 0.985;
}

/* -- Resource cards: a print on a mat that lifts toward you */
.featured-grid > .ts-product-grid,
.shop-grid > .ts-product-grid {
  gap: 40px 26px;
}
.product-card .product-cover {
  padding: 14px;
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 50% 0%, #fffdf6 0%, transparent 70%),
    var(--mat);
  box-shadow:
    0 1px 0 #ffffff inset,
    0 0 0 1px #1e26320d,
    0 14px 30px -22px #1e263270;
}
.product-card .product-cover img {
  border-radius: 6px;
  filter: drop-shadow(0 6px 10px #1e263224);
}
.product-card:hover .product-cover {
  transform: none;
  translate: 0 -6px;
  box-shadow:
    0 1px 0 #ffffff inset,
    0 0 0 1px #1e26320d,
    0 30px 46px -26px #476583a0;
}
.product-card:hover .product-cover img {
  transform: none;
  scale: 1.035;
}
.product-card:active .product-cover {
  scale: 0.985;
}
/* a round "go" mark that rises into the corner on hover */
.cover-go {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 0 8px 18px -8px #1e263280;
  opacity: 0;
  scale: 0.6;
}
.cover-go::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -0.125em;
  background: currentColor;
  -webkit-mask: url(/assets/arrow.3cbae31ec4ce.svg) center / contain no-repeat;
  mask: url(/assets/arrow.3cbae31ec4ce.svg) center / contain no-repeat;
}
.product-card:hover .cover-go {
  opacity: 1;
  scale: 1;
}
/* "Free" as a pill on the corner of the cover */
.product-card[data-price='Free'] .product-cover::before {
  top: 12px;
  left: 12px;
  padding: 7px 11px 6px;
  border-radius: 999px;
  box-shadow: 0 6px 14px -6px #1e263270;
}
.product-grades {
  margin: 18px 0 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--teal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-card .product-grades + :is(h2, h3) {
  margin-top: 0;
}
/* Her listings' "Not Specific" grades say nothing: hidden on cards and on
   the product page. */
.product-grades[data-grades='Not Specific'],
.detail-facts > [data-grades='Not Specific'] {
  display: none;
}
.product-cover + .product-grades[data-grades='Not Specific'] + :is(h2, h3) {
  margin-top: 16px;
}
.product-card :is(h2, h3) {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.product-card :is(h2, h3) a {
  display: inline;
  padding: 0;
  margin: 0;
  background: linear-gradient(var(--yellow), var(--yellow)) 0 94% / 0% 3px no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.product-card :is(h2, h3) a:hover,
.product-card:hover :is(h2, h3) a {
  text-decoration: none;
  background-size: 100% 3px;
}
.product-card .price {
  font-size: 15px;
}

/* -- The resource library: a proper front door */
.shop-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 58px 22px 46px;
}
/* a pale arch behind the heading, the shape from the home page */
.shop-intro::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 30px;
  width: min(720px, 92%);
  height: 140%;
  translate: -50% 0;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, #ffffff8c 0%, #ffffff00 70%);
}
.shop-intro :is(h1, .shop-slogan) {
  font-size: clamp(40px, 4.6vw, 62px);
  line-height: 1.04;
  margin-bottom: 12px;
}
.shop-intro .shop-lede {
  font-size: 16px;
  color: #465264;
  margin: 0 auto 28px;
  max-width: 34em;
}
.intro-spark {
  position: absolute;
  width: 44px;
  height: 44px;
  pointer-events: none;
}
.intro-spark-a {
  left: max(24px, calc(50% - 590px));
  top: 46%;
  rotate: -12deg;
}
.intro-spark-b {
  right: max(24px, calc(50% - 570px));
  top: 16%;
  width: 32px;
  height: 32px;
  rotate: 10deg;
}
.shop-intro .search-form {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}
.shop-intro .search-form label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.search-form > div {
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: #fff;
  border-radius: 999px;
  box-shadow:
    0 0 0 1px var(--edge),
    0 20px 40px -26px #1e263290;
}
.search-form > div:focus-within {
  box-shadow:
    0 0 0 2px var(--teal),
    0 0 0 6px #f8ee4e99,
    0 20px 40px -26px #1e263290;
}
.search-form input[type='search'],
.search-form input[name='q'] {
  border: 0;
  border-radius: 999px;
  background: url(/assets/icon-search.945506530d29.svg) 18px 50% / 20px 20px no-repeat;
  padding: 12px 12px 12px 48px;
  font-size: 16px;
  color: var(--ink);
}
.search-form input:focus-visible {
  outline: none;
}
.search-form .button,
.search-form .button:hover {
  border-radius: 999px;
  min-height: 48px;
  padding: 12px 24px;
  flex: none;
}
.search-try {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 13px;
  color: #465264;
}
.search-try span {
  font-weight: 600;
  margin-right: 2px;
}
.search-try a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  background: #fffefacc;
  border: 1px solid #4765832e;
  font-weight: 600;
  color: var(--ink);
}
.search-try a:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  translate: 0 -2px;
}
.shop-section {
  padding-top: 52px;
}

/* -- Browse by purpose: shelves with a drawing each */
.shop-layout {
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 52px;
}
.shop-layout aside.shelf-aside {
  position: sticky;
  top: 108px;
  align-self: start;
  padding-top: 0;
}
.shop-layout .shelf-aside .aside-title {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 12px 8px;
}
.shop-layout .shelf-nav {
  gap: 3px;
}
.shop-layout .shelf-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 6px 14px 6px 6px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
.shop-layout .shelf-nav a:hover {
  transform: none;
  background: #f2efe5;
}
.shop-layout .shelf-nav a.selected,
.shop-layout .shelf-nav a[aria-current='page'] {
  background: var(--teal);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 12px 24px -16px #476583;
}
.shelf-icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #fffefa center / 27px 27px no-repeat;
  box-shadow:
    0 0 0 1px #1e263214,
    0 5px 12px -7px #1e263260;
}
.shelf-nav a:hover .shelf-icon {
  rotate: -8deg;
  scale: 1.08;
}
.shelf-all {
  background-image: url(/assets/icon-all.312107a762c4.svg);
}
.shelf-bulletin {
  background-image: url(/assets/icon-bulletin.92838c61b894.svg);
}
.shelf-bundles {
  background-image: url(/assets/icon-bundles.5be9cf5431d5.svg);
}
.shelf-lessons {
  background-image: url(/assets/icon-lessons.59e46190b3c8.svg);
}
.shelf-college {
  background-image: url(/assets/icon-college.9c0dbeec4ebf.svg);
}
.shelf-systems {
  background-image: url(/assets/icon-systems.8a59f6f5990a.svg);
}
.shelf-free {
  background-image: url(/assets/icon-free.28b5da23b973.svg);
}
.shelf-groups {
  background-image: url(/assets/icon-groups.dbceedd2aaad.svg);
}

/* -- The results: the shelf's own name, with its drawing */
.results-heading {
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.results-heading :is(h1, h2) {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--serif);
  font-size: clamp(30px, 2.7vw, 40px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
.results-heading :is(h1, h2)::before {
  content: '';
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: var(--blue) url(/assets/icon-all.312107a762c4.svg) center / 34px 34px no-repeat;
  box-shadow: 0 0 0 1px #1e263212;
}
.shop-section:has(a[aria-current='page'][href='/collections/bulletin-boards']) .results-heading :is(h1, h2)::before {
  background-color: #fefbd8;
  background-image: url(/assets/icon-bulletin.92838c61b894.svg);
}
.shop-section:has(a[aria-current='page'][href='/collections/bundles']) .results-heading :is(h1, h2)::before {
  background-color: var(--blush);
  background-image: url(/assets/icon-bundles.5be9cf5431d5.svg);
}
.shop-section:has(a[aria-current='page'][href='/collections/classroom-lessons']) .results-heading :is(h1, h2)::before {
  background-image: url(/assets/icon-lessons.59e46190b3c8.svg);
}
.shop-section:has(a[aria-current='page'][href='/collections/college-and-career-planning']) .results-heading :is(h1, h2)::before {
  background-color: #fefbd8;
  background-image: url(/assets/icon-college.9c0dbeec4ebf.svg);
}
.shop-section:has(a[aria-current='page'][href='/collections/counselor-systems']) .results-heading :is(h1, h2)::before {
  background-color: var(--sage);
  background-image: url(/assets/icon-systems.8a59f6f5990a.svg);
}
.shop-section:has(a[aria-current='page'][href='/collections/free-resources']) .results-heading :is(h1, h2)::before {
  background-color: var(--butter);
  background-image: url(/assets/icon-free.28b5da23b973.svg);
}
.shop-section:has(a[aria-current='page'][href='/collections/small-groups']) .results-heading :is(h1, h2)::before {
  background-color: var(--blush);
  background-image: url(/assets/icon-groups.dbceedd2aaad.svg);
}
.results-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--blue);
  color: var(--teal);
  font-size: 13px;
  font-weight: 600;
}
.results-status::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}
/* No match: the platform's sentence reads as a note, with a drawn loop. */
.shop-results:not(:has(.product-card)) .results-status {
  display: block;
  max-width: none;
  border-radius: 18px;
  padding: 20px 22px;
  font-size: 15px;
  text-align: left;
  white-space: normal;
}
.shop-results:not(:has(.product-card)) .results-status::before {
  content: none;
}
.empty-results {
  padding: 34px 0 10px;
  text-align: center;
}
.empty-results::before {
  content: '';
  display: block;
  width: 120px;
  height: 80px;
  margin: 0 auto 10px;
  background: url(/assets/doodle-loop.84a46c0452b0.svg) center / contain no-repeat;
}

/* -- Sort by and Grade: pills; picked ones filled teal (grades ticked) */
.ts-sort,
.ts-grades {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -12px 0 28px;
  font-size: 13px;
  color: #465264;
}
.ts-sort + .ts-grades {
  margin-top: -18px;
}
.ts-sort-label,
.ts-grades-label {
  font-weight: 600;
  margin-right: 2px;
}
.ts-sort-option,
.ts-grade-option {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  background: #fffefacc;
  border: 1px solid #4765832e;
  font-weight: 600;
  color: var(--ink);
}
.ts-sort-option:hover,
.ts-grade-option:hover {
  background: var(--yellow);
  border-color: var(--yellow);
}
.ts-sort-current,
.ts-sort-current:hover,
.ts-grade-current,
.ts-grade-current:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.ts-grade-current::before {
  content: "✓" / "";
  margin-right: 0.35em;
}

/* -- Page by page */
.ts-pagination {
  align-items: center;
  gap: 14px;
  margin-top: 60px;
}
.ts-pagination-prev,
.ts-pagination-next {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #1e263226;
  background: #fffefa;
  box-shadow: 0 8px 18px -12px #1e263270;
}
a.ts-pagination-prev:hover,
a.ts-pagination-next:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  translate: 0 -2px;
}
.ts-pagination-status {
  height: auto;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: var(--teal);
  font-weight: 600;
}
.shop-more {
  margin-top: 56px;
}
.catalog-note {
  color: #5a6678;
}

/* -- A resource's own page */
.detail {
  padding-top: 8px;
}
.detail-grid {
  gap: clamp(36px, 5vw, 76px);
}
.detail-art {
  position: relative;
  padding: clamp(20px, 3.2vw, 40px);
  border-radius: 28px;
  background:
    radial-gradient(90% 70% at 50% 0%, #fffdf6 0%, transparent 70%),
    var(--dots) 0 0 / 18px 18px,
    var(--mat);
  box-shadow:
    0 1px 0 #ffffff inset,
    0 0 0 1px #1e26320d,
    var(--shadow-soft);
  overflow: hidden;
}
.detail-art img {
  border-radius: 8px;
  box-shadow:
    0 2px 4px #1e26321a,
    0 26px 44px -26px #1e263290;
  view-transition-name: cover-art;
}
.detail-art.can-zoom {
  cursor: zoom-in;
}
.detail-art.can-zoom.is-zooming img {
  scale: 1.9;
  transform-origin: var(--zx, 50%) var(--zy, 50%);
  box-shadow: none;
}
.zoom-hint {
  display: none;
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fffefa url(/assets/icon-zoom.239d539c7c96.svg) center / 20px 20px no-repeat;
  box-shadow: 0 8px 18px -10px #1e263280;
  pointer-events: none;
}
.detail-art.can-zoom .zoom-hint {
  display: block;
}
.detail-art.is-zooming .zoom-hint {
  opacity: 0;
}
.detail-copy h1 {
  font-size: clamp(34px, 3.3vw, 48px);
  line-height: 1.08;
}
/* Her imported rating summary ("by past buyers"): a quiet note under the title. */
.detail-rating {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 6px 14px 6px 11px;
  border-radius: 999px;
  background: var(--mat);
  box-shadow: 0 0 0 1px #1e26320d;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.detail-rating-star {
  color: #d9a21b;
  font-size: 16px;
}
.detail-facts {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
  margin-top: 24px;
  padding: 0;
  border: 0;
}
.detail-facts > div {
  display: block;
  padding: 13px 16px 14px;
  border-radius: 16px;
  background: var(--mat);
  box-shadow: 0 0 0 1px #1e26320d;
}
.detail-facts dt {
  font-size: 11px;
  margin-bottom: 3px;
}
.detail-facts dd {
  font-size: 15px;
  font-weight: 600;
}
/* Resource types and standards, under the description (below the buy box, so
   the first screen keeps the buy button): one card a row, since a list of
   standards can run long. */
.detail-facts.detail-more {
  grid-template-columns: 1fr;
  margin-top: 28px;
}
/* A product with neither keeps no empty block (or its margin). */
.detail-facts.detail-more:not(:has(> div)) {
  display: none;
}
.buy-box {
  position: relative;
  overflow: hidden;
  margin: 24px 0 38px;
  padding: 28px;
  border-radius: 24px;
  background:
    radial-gradient(380px 200px at 100% 0%, #fefbd8cc 0%, transparent 70%),
    var(--dots) 0 0 / 18px 18px,
    var(--blue);
  box-shadow:
    0 1px 0 #ffffff inset,
    0 0 0 1px #4765831a,
    var(--shadow-soft);
}
.detail-price {
  font-family: var(--sans);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  margin-bottom: 20px;
}
.ts-buy-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 58px;
  border-radius: 999px;
  font-size: 15px;
}
.ts-buy-button[href] {
  box-shadow:
    0 1px 0 #ffffff40 inset,
    0 16px 28px -16px #476583;
}
.ts-buy-button[href]::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, #ffffff40 50%, transparent 65%);
  translate: -110% 0;
}
.ts-buy-button[href]:hover {
  background: var(--teal-deep);
  translate: 0 -2px;
  box-shadow:
    0 1px 0 #ffffff40 inset,
    0 22px 34px -16px #476583;
}
.ts-buy-button[href]:hover::before {
  translate: 110% 0;
}
.buy-note,
.buy-fine {
  gap: 10px;
}
.buy-fine {
  display: flex;
  align-items: center;
  color: #465264;
}
.buy-note::before,
.buy-fine::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  background: url(/assets/icon-download.c55b86e3159c.svg) center / contain no-repeat;
}
.buy-fine::before {
  background-image: url(/assets/icon-lock.26a57ca22c47.svg);
}
/* Only promise a checkout where there is one to start. */
.buy-box:not(:has(.ts-buy-button[href])) .buy-fine {
  display: none;
}
.buy-note {
  margin-top: 18px;
}
/* A free preview downloads with or without a buy button. */
.buy-box .preview-note {
  display: flex;
}
/* A resource's pictures, the cover first: a row of thumbnails under it. A
   thumbnail opens the picture; with the script it shows it in the frame. */
.detail-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.detail-thumb {
  display: block;
  width: 72px;
  height: 72px;
  padding: 4px;
  border-radius: 12px;
  background: #fffefa;
  box-shadow:
    0 0 0 1px #1e26321a,
    0 6px 14px -10px #1e263280;
}
.detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.detail-thumb:hover {
  box-shadow:
    0 0 0 2px var(--teal),
    0 6px 14px -10px #1e263280;
}
.detail-thumb[aria-current='true'] {
  box-shadow: 0 0 0 3px var(--teal);
}
.detail-thumb:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
@media (max-width: 760px) {
  .detail-thumbs {
    gap: 8px;
    margin-top: 10px;
  }
  .detail-thumb {
    width: 56px;
    height: 56px;
    padding: 3px;
  }
}
/* Every other bundle that holds it, after the one offered: "Also in: A, B".
   The comma is the page's text (a screen reader reads it); the first has none. */
.more-bundle:first-of-type > .more-sep {
  display: none;
}
/* The bundle that holds it: a buy-box line, its title a link in the text. */
.bundle-note {
  margin: 18px 0 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.bundle-note .text-link {
  display: inline;
  min-height: 0;
  padding: 10px 0;
  text-decoration-line: underline;
  text-decoration-color: var(--teal);
  text-decoration-thickness: 2px;
}
.product-description {
  font-size: 16px;
}
/* Above the cover, on the left, where a visitor looks for the way back. */
.detail > .back-link {
  margin: 0 0 18px -2px;
}
.more-resources .section-heading {
  padding-top: 56px;
}

/* -- The platform's short pages (checkout, a buyer's files, sign-up) */
/* A card on the page, like the buy box, so paying and downloading feel like
   part of her shop. */
.ts-message {
  max-width: 680px;
  margin: 48px auto 24px;
  padding: 52px 40px 44px;
  border-radius: 28px;
  background:
    radial-gradient(420px 220px at 100% 0%, #fefbd8b3 0%, transparent 70%),
    var(--dots) 0 0 / 18px 18px,
    var(--blue);
  box-shadow:
    0 1px 0 #ffffff inset,
    0 0 0 1px #4765831a,
    var(--shadow-soft);
}
.ts-message-title {
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.ts-message-body {
  color: #465264;
  line-height: 1.65;
}
.ts-message-button {
  border-radius: 999px;
  padding: 16px 30px;
  min-height: 56px;
  font-size: 15px;
  box-shadow:
    0 1px 0 #ffffff40 inset,
    0 14px 26px -14px #476583;
}
.ts-message-button:active {
  scale: 0.97;
}
/* The email address a buyer types: the search field's rounded shape. */
.ts-message-field {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 26rem;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.ts-message-input {
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--edge);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
}
/* A review's words: the same field with gentle corners and room above the
   first line, so no line is cut at a rounded end. */
.ts-message-textarea {
  padding: 14px 20px;
  border-radius: 22px;
}
.ts-message-input:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--teal),
    0 0 0 6px #f8ee4e99;
}
/* A buyer's files: each file is a row with a download mark, and the way back
   to the shop sits under them. */
.ts-message-links:has(a[href*='/files/']) {
  justify-items: stretch;
  gap: 10px;
  max-width: 34rem;
  margin: 6px auto 0;
}
.ts-message-link[href*='/files/'] {
  display: flex;
  gap: 14px;
  min-height: 62px;
  padding: 10px 20px 10px 11px;
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 0 0 1px #1e26321a,
    0 12px 24px -18px #1e263280;
  text-align: left;
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.ts-message-link[href*='/files/']::before {
  content: '';
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--blue) url(/assets/icon-download.c55b86e3159c.svg) center / 20px 20px
    no-repeat;
}
.ts-message-link[href*='/files/']::after {
  content: none;
}
.ts-message-link[href*='/files/']:hover {
  translate: 0 -2px;
  box-shadow:
    0 0 0 1px #4765833d,
    0 18px 30px -18px #476583a0;
}
.ts-message-links:has(a[href*='/files/']) > li:last-child {
  justify-self: center;
  margin-top: 8px;
}

/* -- The rest of the home page */
.freebie-card:active {
  scale: 0.985;
}
.episode img {
  transition-property: scale, box-shadow;
}
.episode:hover img {
  scale: 1.04;
}
/* The photo fills its half however tall her words make the card (a fixed
   500px left a strip of pink under it). */
.founder-photo {
  position: relative;
  overflow: hidden;
}
@media (min-width: 761px) {
  .founder-photo {
    height: auto;
    min-height: 500px;
  }
  .founder-photo img {
    position: absolute;
    inset: 0;
  }
}

/* -- Wide screens */
@media (min-width: 761px) and (min-height: 760px) {
  .detail-media {
    position: sticky;
    top: 112px;
  }
}

/* -- Tablets: a narrower shelf column and the site's own 30px margins */
@media (min-width: 761px) and (max-width: 1050px) {
  .site-header {
    padding: 0 30px;
  }
  .logo img {
    width: 150px;
    height: 70px;
  }
  .navigation .nav-shop {
    padding: 10px 16px;
  }
  .shop-layout {
    grid-template-columns: 196px minmax(0, 1fr);
    gap: 28px;
  }
  .shop-layout .shelf-nav a {
    gap: 10px;
    font-size: 13px;
  }
  .shelf-icon {
    width: 34px;
    height: 34px;
    background-size: 24px 24px;
  }
  .shop-grid > .ts-product-grid {
    gap: 32px 18px;
  }
}
@media (min-width: 761px) and (max-width: 900px) {
  .shop-grid > .ts-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* "My purchases" lives in the footer and the menu panel (up to 1100px, and
   the open list on /_ts pages); the desktop bar has no room for it. */
@media (min-width: 1101px) {
  .nav-purchases {
    display: none;
  }
}
/* /_ts pages run no script */
body:has(.ts-message) .menu-toggle {
  display: none;
}

/* -- Phones */
@media (max-width: 760px) {
  html {
    scroll-padding-top: 84px;
  }
  .site-header {
    height: 76px;
    padding: 0 22px;
  }
  /* her one-line logo (layout.html swaps it in under 761px), wide enough
     for the "clique" script to read */
  .logo img {
    width: 224px;
    height: 34px;
  }
  .navigation {
    top: 100%;
  }
  .navigation a:not(.nav-shop)::after {
    content: none;
  }
  .navigation a[aria-current='page'] {
    text-decoration: underline;
    text-decoration-color: var(--yellow);
    text-decoration-thickness: 3px;
    text-underline-offset: 6px;
  }
  .hero-arch-line {
    left: 12%;
    right: 10%;
    top: 9%;
    margin: -10px -10px 0 10px;
  }
  .hero-photo > .hero-plane {
    width: 116px;
    right: -2%;
    top: 30%;
  }
  .note-heart {
    width: 26px;
    height: 26px;
    right: -10px;
    top: -14px;
  }
  .featured-grid > .ts-product-grid,
  .shop-grid > .ts-product-grid {
    gap: 30px 14px;
  }
  .product-card .product-cover {
    padding: 9px;
    border-radius: 14px;
  }
  .product-card :is(h2, h3) {
    font-size: 14px;
  }
  .product-grades {
    margin-top: 14px;
    font-size: 10.5px;
    letter-spacing: 0.1em;
  }
  .cover-go {
    display: none;
  }
  /* Still, her three lines stack, as before; moving, they are one ribbon
     (see Motion), not two ribbons on top of each other. */
  .mission-strip {
    padding: 0;
  }
  .mission-track {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 14px 22px;
  }
  .mission-track span::after {
    content: none;
  }
  .shop-intro {
    padding: 34px 20px 30px;
  }
  .shop-intro :is(h1, .shop-slogan) {
    font-size: 34px;
    margin-bottom: 8px;
  }
  .shop-intro > .shop-lede {
    display: none;
  }
  .intro-spark-a {
    left: 14px;
    top: 22px;
    width: 30px;
    height: 30px;
  }
  .intro-spark-b {
    right: 16px;
    top: 26%;
    width: 24px;
    height: 24px;
  }
  .search-form .button {
    padding: 12px 18px;
  }
  .search-try {
    margin-top: 14px;
  }
  .shop-section {
    padding-top: 22px;
  }
  /* the shelves become a row of chips you can swipe */
  .shop-layout {
    display: block;
  }
  .shop-layout aside.shelf-aside {
    display: block;
    position: static;
    margin: 0 -22px 22px;
  }
  .shop-layout .shelf-aside .aside-title {
    margin: 0 0 10px 22px;
  }
  .shop-layout .shelf-nav {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding: 0 22px;
    padding: 8px 22px 12px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 28px), transparent 100%);
  }
  .shop-layout .shelf-nav::-webkit-scrollbar {
    display: none;
  }
  .shop-layout .shelf-nav a:focus-visible {
    outline-offset: 2px;
  }
  .shop-layout .shelf-nav a {
    flex: none;
    scroll-snap-align: start;
    min-height: 46px;
    padding: 4px 16px 4px 4px;
    border-radius: 999px;
    background: #fffefa;
    box-shadow: 0 0 0 1px #1e263224;
    white-space: nowrap;
  }
  .shop-layout .shelf-nav .shelf-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-size: 24px 24px;
  }
  .results-heading {
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 20px;
  }
  .results-heading :is(h1, h2) {
    font-size: 28px;
    gap: 12px;
  }
  .results-heading :is(h1, h2)::before {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background-size: 27px 27px;
  }
  .results-status {
    max-width: none;
    padding: 6px 12px;
    font-size: 12px;
    text-align: left;
  }
  .shop-results:has(.product-card) .results-status {
    white-space: nowrap;
  }
  .search-try {
    gap: 6px;
    font-size: 12.5px;
  }
  .search-try a {
    min-height: 36px;
    padding: 0 12px;
  }
  .ts-sort,
  .ts-grades {
    gap: 6px;
    margin: -6px 0 20px;
    font-size: 12.5px;
  }
  .ts-sort + .ts-grades {
    margin-top: -12px;
  }
  .ts-sort-option,
  .ts-grade-option {
    min-height: 36px;
    padding: 0 12px;
  }
  /* One line from 375px (360px with two grades or fewer); narrower, it
     wraps, never hiding a chip. The nav is still "Grade" to screen readers. */
  .ts-grades-label {
    display: none;
  }
  .ts-grades {
    gap: 5px;
  }
  .ts-grade-option {
    padding: 0 8px;
  }
  .detail-facts {
    grid-template-columns: 1fr 1fr;
  }
  .ts-message {
    margin: 24px 16px 8px;
    padding: 36px 20px 30px;
    border-radius: 22px;
  }
  .buy-box {
    padding: 22px;
  }
  .detail-price {
    font-size: 36px;
  }
}

/* Motion: only for people who have not asked for less of it. */
@media (prefers-reduced-motion: no-preference) {
  /* Pages cross-fade into each other, and a cover grows into its page. */
  @view-transition {
    navigation: auto;
  }
  ::view-transition-old(root) {
    animation: clique-page-out 0.2s ease both;
  }
  ::view-transition-new(root) {
    animation: clique-page-in 0.42s var(--ease-out) both;
  }
  ::view-transition-group(cover-art) {
    animation-duration: 0.5s;
    animation-timing-function: var(--ease-out);
  }
  /* Between shelves, the teal pill slides to the shelf you chose. */
  .shelf-nav a[aria-current='page'] {
    view-transition-name: shelf-current;
  }
  ::view-transition-group(shelf-current) {
    animation-duration: 0.45s;
    animation-timing-function: var(--ease-out);
  }
  /* a cover with nothing to grow into simply fades with the page */
  ::view-transition-old(cover-art):only-child,
  ::view-transition-old(shelf-current):only-child {
    animation: clique-page-out 0.2s ease both;
  }
  ::view-transition-new(cover-art):only-child,
  ::view-transition-new(shelf-current):only-child {
    animation: clique-page-in 0.42s var(--ease-out) both;
  }

  /* Things that answer a hover or a press. */
  .navigation a::after {
    transition: scale 0.35s var(--ease-out);
  }
  .button,
  .ts-buy-button,
  .ts-newsletter-submit,
  .category,
  .search-try a {
    transition:
      background 0.25s,
      color 0.25s,
      border-color 0.25s,
      box-shadow 0.35s var(--ease-out),
      transform 0.35s var(--ease-out),
      translate 0.35s var(--ease-out),
      scale 0.18s var(--ease-out);
  }
  .button::after,
  .ts-buy-button[href]::before {
    transition: translate 0.8s var(--ease-out);
  }
  .text-link {
    transition: background-size 0.4s var(--ease-out);
  }
  .category::before {
    transition: opacity 0.35s;
  }
  .product-card .product-cover {
    transition:
      translate 0.5s var(--ease-out),
      box-shadow 0.5s var(--ease-out),
      scale 0.18s var(--ease-out);
  }
  .product-card .product-cover img {
    transition: scale 0.7s var(--ease-out);
  }
  .cover-go {
    transition:
      opacity 0.3s,
      scale 0.45s var(--ease-spring);
  }
  .product-card :is(h2, h3) a {
    transition: background-size 0.45s var(--ease-out);
  }
  .shop-layout .shelf-nav a {
    transition:
      background 0.25s,
      color 0.25s,
      box-shadow 0.35s var(--ease-out);
  }
  .shelf-icon {
    transition:
      rotate 0.45s var(--ease-spring),
      scale 0.45s var(--ease-spring);
  }
  a.ts-pagination-prev,
  a.ts-pagination-next {
    transition:
      background 0.25s,
      color 0.25s,
      translate 0.3s var(--ease-out);
  }
  .search-form > div {
    transition: box-shadow 0.3s var(--ease-out);
  }
  .photo-note {
    transition:
      transform 0.5s var(--ease-spring),
      box-shadow 0.5s var(--ease-out);
  }
  .photo-note:hover .note-heart {
    animation: clique-beat 0.9s ease-in-out 2;
  }
  .hero-photo > .hero-sticker {
    transition: scale 0.4s var(--ease-spring);
  }
  .hero-photo > .hero-sticker:hover {
    scale: 1.08;
  }
  .detail-art img {
    transition:
      scale 0.45s var(--ease-out),
      box-shadow 0.45s;
  }
  .zoom-hint {
    transition: opacity 0.25s;
  }
  .ts-message-link[href*='/files/'],
  .ts-message-button {
    transition:
      translate 0.35s var(--ease-out),
      box-shadow 0.35s var(--ease-out),
      background 0.25s,
      scale 0.18s var(--ease-out);
  }
  .freebie-card {
    transition:
      transform 0.35s var(--ease-out),
      box-shadow 0.35s var(--ease-out),
      scale 0.18s;
  }
  /* The free cards fade up, about 100ms apart, once (craft.js sets
     is-waiting on a band still below the fold, then is-rising). */
  [data-rise].is-waiting > * {
    opacity: 0;
  }
  [data-rise].is-rising > * {
    animation: clique-fade-up 0.6s var(--ease-out) backwards;
  }
  [data-rise].is-rising > :nth-child(2) {
    animation-delay: 0.1s;
  }
  [data-rise].is-rising > :nth-child(3) {
    animation-delay: 0.2s;
  }
  .episode img {
    transition:
      scale 0.6s var(--ease-out),
      box-shadow 0.3s;
  }

  /* The hero arrives: words first, then the picture, then the doodles. */
  .hero-copy > * {
    animation: clique-arrive 0.8s var(--ease-out) backwards;
  }
  .hero-copy > :nth-child(2) {
    animation-delay: 0.08s;
  }
  .hero-copy > :nth-child(3) {
    animation-delay: 0.2s;
  }
  .hero-copy > :nth-child(4) {
    animation-delay: 0.3s;
  }
  .hero-copy > :nth-child(5) {
    animation-delay: 0.38s;
  }
  .hero h1 em {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: clique-marker 0.9s var(--ease-out) 0.55s backwards;
  }
  .hero-arch {
    transform-origin: 50% 100%;
    animation: clique-arch 1s var(--ease-out) backwards;
  }
  .hero-arch-line {
    animation: clique-draw-up 1.5s var(--ease-out) 0.35s backwards;
  }
  .hero-photo > .hero-portrait {
    animation: clique-arrive 0.9s var(--ease-out) 0.1s backwards;
  }
  .hero-photo > .hero-plane {
    animation:
      clique-draw-across 1.6s var(--ease-out) 0.7s backwards,
      clique-float 6s ease-in-out 2.4s 5;
  }
  .hero-photo > .hero-sticker {
    animation: clique-pop 0.7s var(--ease-spring) 0.75s backwards;
  }
  .hero-photo > .hero-sticker .sticker-face {
    animation: clique-sway 7s ease-in-out 1.6s 6;
  }
  .hero-photo > .hero-spark-a {
    animation:
      clique-pop 0.6s var(--ease-spring) 0.95s backwards,
      clique-twinkle 3.6s ease-in-out 1.6s infinite;
  }
  .hero-photo > .hero-spark-b {
    animation:
      clique-pop 0.6s var(--ease-spring) 1.1s backwards,
      clique-twinkle 4.4s ease-in-out 1.8s infinite;
  }
  .photo-note {
    animation: clique-arrive 0.8s var(--ease-out) 0.9s backwards;
  }
  .intro-spark-a {
    animation: clique-float 7s ease-in-out 4;
  }
  .intro-spark-b {
    animation: clique-float 6s ease-in-out 1.4s 4;
  }
  .shop-intro > :is(.eyebrow, h1, .shop-slogan, .shop-lede, .search-form, .search-try) {
    animation: clique-arrive 0.7s var(--ease-out) backwards;
  }
  .shop-intro > :is(h1, .shop-slogan) {
    animation-delay: 0.06s;
  }
  .shop-intro > .shop-lede {
    animation-delay: 0.14s;
  }
  .shop-intro > .search-form {
    animation-delay: 0.2s;
  }
  .shop-intro > .search-try {
    animation-delay: 0.28s;
  }
  .ts-buy-button-unavailable::before {
    animation: clique-breathe 2.4s ease-in-out 5;
  }
  @media (max-width: 760px) {
    .mission-strip {
      flex-direction: row;
      align-items: center;
      gap: 0;
    }
    .mission-track {
      flex-direction: row;
      align-items: center;
      gap: 30px;
      padding: 15px 18px;
    }
    .mission-strip .mission-track span::before {
      content: none;
    }
    .mission-track span::after {
      content: '';
    }
  }

  /* As you scroll: marker strokes draw under the words she leans on, and
     the header settles into a slimmer bar. */
  @supports (animation-timeline: view()) {
    h2 em,
    .shop-slogan em {
      background-repeat: no-repeat;
      background-size: 0% 100%;
      animation: clique-marker-in linear both;
      animation-timeline: view();
      animation-range: entry 60% cover 40%;
    }
    .shop-intro .shop-slogan em {
      animation: clique-marker 0.9s var(--ease-out) 0.4s both;
      background-size: 100% 100%;
    }
    .founder-photo img {
      animation: clique-drift linear both;
      animation-timeline: view();
    }
    .band-spark-a {
      animation:
        clique-twinkle 3.6s ease-in-out infinite,
        clique-rise-slow linear both;
      animation-timeline: auto, view();
    }
    .band-spark-b {
      animation:
        clique-twinkle 4.4s ease-in-out 1.2s infinite,
        clique-rise-slow linear both;
      animation-timeline: auto, view();
    }
  }
  @supports (animation-timeline: scroll()) {
    .site-header {
      animation: clique-header linear both;
      animation-timeline: scroll(root);
      animation-range: 0 140px;
    }
    .logo img {
      animation: clique-logo linear both;
      animation-timeline: scroll(root);
      animation-range: 0 140px;
    }
  }
}

@keyframes clique-page-out {
  to {
    opacity: 0;
  }
}
@keyframes clique-page-in {
  from {
    opacity: 0;
    translate: 0 12px;
  }
}
@keyframes clique-arrive {
  from {
    opacity: 0;
    translate: 0 22px;
  }
}
@keyframes clique-fade-up {
  from {
    opacity: 0;
    translate: 0 14px;
  }
}
@keyframes clique-marker {
  from {
    background-size: 0% 100%;
  }
}
@keyframes clique-marker-in {
  to {
    background-size: 100% 100%;
  }
}
@keyframes clique-arch {
  from {
    opacity: 0;
    scale: 0.92 0.88;
  }
}
@keyframes clique-draw-up {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes clique-draw-across {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes clique-pop {
  from {
    opacity: 0;
    scale: 0.3;
  }
  70% {
    opacity: 1;
    scale: 1.12;
  }
}
@keyframes clique-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}
@keyframes clique-sway {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-7px) rotate(5deg);
  }
}
@keyframes clique-beat {
  0%,
  100% {
    scale: 1;
  }
  30% {
    scale: 1.22;
  }
  55% {
    scale: 0.96;
  }
}
@keyframes clique-breathe {
  0%,
  100% {
    scale: 1;
    opacity: 1;
  }
  50% {
    scale: 0.7;
    opacity: 0.55;
  }
}
@keyframes clique-drift {
  from {
    transform: scale(1.08) translateY(-3%);
  }
  to {
    transform: scale(1.08) translateY(3%);
  }
}
@keyframes clique-rise-slow {
  from {
    translate: 0 30px;
  }
  to {
    translate: 0 -30px;
  }
}
@keyframes clique-header {
  to {
    translate: 0 -10px;
    box-shadow:
      0 1px 0 #1e263214,
      0 14px 30px -26px #1e263270;
  }
}
@keyframes clique-logo {
  to {
    scale: 0.8;
    translate: 0 5px;
  }
}

/* Reviews (contract 1.11) */
.ts-review-list {
  display: grid;
  gap: 22px;
  max-width: 68ch;
  padding: 0;
  list-style: none;
}
.ts-review p {
  margin: 0 0 4px;
}
.ts-review-stars {
  color: var(--teal);
}
.ts-review-text {
  white-space: pre-line;
}

/* The free cards lift as a whole (site.css), so their pictures stay put
   inside them; with less motion nothing moves at all. */
.freebie-card:hover .product-cover,
.freebie-card:hover .product-cover img {
  translate: none;
  scale: none;
}
@media (prefers-reduced-motion: reduce) {
  .freebie-card:active {
    scale: none;
  }
}