.pallet-page { color: #193e4b; }
.pallet-hero { background: linear-gradient(118deg, #0d2e40, #165768); }
.pallet-hero-art { width: 100%; max-height: 280px; display: block; }
.pallet-page h2 { margin: 0 0 .65em; }
.pallet-intro, .pallet-materials { display: grid; gap: 20px; }
.pallet-intro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pallet-intro section { padding: 28px; background: #edf5f5; border-radius: 14px; }
.pallet-intro p, .pallet-process p, .pallet-materials p, .pallet-example p, .pallet-export p { margin: 0; }
.pallet-section { padding: 40px 0; }
/* Leave the destination heading visible below the two-row sticky navigation. */
.pallet-page #watch, .pallet-page #steps { scroll-margin-top: 15rem; }
.pallet-section + .pallet-section { padding-top: 8px; }
.pallet-section h2, .pallet-example h2 { font-size: clamp(24px, 3vw, 33px); }
.pallet-pause, .pallet-pause + label { vertical-align: middle; }
.pallet-pause + label { font-size: 14px; cursor: pointer; }
.pallet-process { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 18px 0 0; padding: 0; list-style: none; }
.pallet-process li { display: grid; grid-template-columns: minmax(80px, 30%) 1fr; align-items: start; padding: 20px; background: #fff; border: 1px solid #d8e7e8; border-radius: 16px; }
.pallet-stage { display: block; width: 100%; margin-top: 12px; }
.pallet-step-copy { padding-left: 16px; }
.pallet-step-copy > span { display: inline-block; padding: 3px 8px; border-radius: 5px; background: #fff0d6; color: #714619; font-size: 12px; font-weight: 700; }
.pallet-step-copy h3, .pallet-materials h3 { margin: 10px 0 8px; font-size: 20px; }
.pallet-process p, .pallet-materials p { color: #355765; font-size: 15px; }
.pallet-materials { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pallet-materials article { padding: 20px 24px 26px; border-radius: 16px; background: #f5f8f9; border-top: 3px solid #c1935c; }
.pallet-materials article:last-child { border-color: #257f85; }
.pallet-materials strong { font-size: 14px; color: #17646a; }
.pallet-materials p { margin-top: 10px; }
.pallet-sample { width: 100%; height: 106px; }
.pallet-example { display: grid; grid-template-columns: 1fr minmax(140px, 23%); gap: 28px; align-items: center; padding: 30px; border-radius: 18px; background: #113e4f; color: #fff; }
.pallet-example .vw-eyebrow { color: #a7dfd5; }
.pallet-example h2 { margin-top: 12px; }
.pallet-example dl { display: grid; gap: 12px; margin: 0; }
.pallet-example dl > div { border-left: 3px solid #f6be72; padding-left: 14px; }
.pallet-example dt { color: #c6e4e6; font-size: 13px; }
.pallet-example dd { margin: 4px 0 0; font-size: 32px; font-weight: 750; }
.pallet-example dd small { font-size: 16px; font-weight: 500; }
.pallet-export a { display: inline-block; margin-top: 14px; }
.pallet-page .vw-next { margin-top: 28px; }
.pl-stack-motion { animation: pl-settle 4s ease-in-out infinite; }
.pl-wrap-motion, .pl-band-motion { animation: pl-secure 4s ease-in-out infinite; }
.pl-forks-motion { animation: pl-approach 4s ease-in-out infinite; }
.pallet-pause:checked ~ .pallet-process * { animation-play-state: paused; }
@keyframes pl-settle { 0%, 20% { transform: translateY(-14px); } 52%, 100% { transform: translateY(0); } }
@keyframes pl-secure { 0%, 15% { opacity: .25; } 65%, 100% { opacity: 1; } }
@keyframes pl-approach { 0%, 20% { transform: translate(-12px, 6px); } 65%, 100% { transform: translate(0, 0); } }
@media (max-width: 850px) {
  .pallet-process li { grid-template-columns: 1fr; }
  .pallet-stage { height: 120px; }
  .pallet-step-copy { padding: 0; }
  .pallet-materials { grid-template-columns: 1fr; }
  .pallet-sample { float: right; width: 115px; height: 70px; margin-left: 14px; }
  .pallet-materials p { clear: both; padding-top: 2px; }
}
@media (max-width: 600px) {
  .pallet-hero-art { height: 150px; }
  .pallet-process, .pallet-intro, .pallet-example { grid-template-columns: 1fr; }
  .pallet-example dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pallet-example dd { font-size: 24px; }
  .pallet-stage { height: 108px; }
  .pallet-section { padding: 30px 0; }
  .pallet-intro section, .pallet-example { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .pallet-process * { animation: none; }
  .pallet-pause, .pallet-pause + label { display: none; }
}