/* Home, playful Arcade look. Root font size is 10px (ACSS), so 1.6rem = 16px. */
.pch { --pch-ink: #111; --pch-blue: #2764f0; --pch-red: #e8352e; --pch-yellow: #ffde3b; --pch-sand: #f4f1ea; --pch-pale-blue: #e9effe; --pch-pale-red: #fdeceb; color: var(--pch-ink); }
.pch-display { font-family: "Titan One", sans-serif; font-weight: 400; letter-spacing: 0; text-transform: uppercase; line-height: .95; color: var(--pch-ink); margin: 0; }
.pch-h2 { font-size: clamp(3.2rem, 2rem + 2.6vw, 5.6rem); }
.pch-label { font: 600 1.6rem/1.2 var(--text-font-family, Inter), sans-serif; color: var(--pch-ink); }
.pch-row { flex-direction: row; width: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; }
.pch-btn { flex-direction: row; width: auto; display: inline-flex; align-items: center; gap: .8em; padding: .95em 1.5em; border: 2px solid var(--pch-ink); border-radius: 12px; font: 700 1.7rem/1 var(--text-font-family, Inter), sans-serif; text-transform: none; text-decoration: none; }
.pch-btn .pc-icon, .pch-textlink .pc-icon { font-size: 1em; line-height: 1; width: 1em; height: 1em; }
.pch-btn-red { background: var(--pch-red); border-color: var(--pch-red); color: #fff; }
.pch-btn-yellow { background: var(--pch-yellow); border-color: var(--pch-yellow); color: var(--pch-ink); }
.pch-btn-ghost-light { background: transparent; border-color: #fff; color: #fff; }
.pch-play { flex-direction: row; width: auto; display: inline-flex; align-items: center; gap: 1rem; font: 700 1.7rem/1 var(--text-font-family, Inter), sans-serif; color: var(--pch-ink); text-decoration: none; }
.pch-play__icon { width: 4.4rem; height: 4.4rem; border: 2px solid var(--pch-ink); border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; }
.pch-play__icon .pc-icon { font-size: 1.3rem; width: 1em; height: 1em; transform: translateX(1px); }
.pch-textlink { flex-direction: row; width: auto; display: inline-flex; align-items: center; gap: .5em; font: 700 1.6rem/1.2 var(--text-font-family, Inter), sans-serif; color: var(--pch-blue); text-decoration: none; }
.pch-btn:focus-visible, .pch-play:focus-visible, .pch-textlink:focus-visible, .pch-card:focus-visible { outline: 3px solid var(--pch-blue); outline-offset: 3px; }
.pch-burst { width: 3.2rem; height: auto; }

.pch :is(.pch-display, .pch-slide__title) { text-transform: uppercase !important; }
/* Hero */
.pch-hero { padding-block: clamp(3.2rem, 2rem + 3vw, 6.4rem) clamp(3.2rem, 2rem + 2vw, 4.8rem); overflow-x: clip; }
.pch-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2.4rem, 1rem + 3vw, 6.4rem); align-items: center; }
.pch-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 2.4rem; }
.pch-kicker { flex-direction: row; width: auto; display: flex; align-items: center; gap: 1rem; }
.pch-kicker .pch-burst { transform: scaleX(-1); }
.pch-titlewrap { position: relative; width: fit-content; padding-bottom: 1.2rem; }
.pch-title { font-size: clamp(4.2rem, 1.2rem + 3.7vw, 7.2rem); }
@media (min-width: 992px) { .pch-title { white-space: nowrap; } }
.pch-underline { position: absolute; right: 2%; bottom: -.4rem; width: 52%; height: auto; transform: rotate(-2deg); }
.pch-lede { font-size: clamp(1.7rem, 1.4rem + .5vw, 2.1rem); line-height: 1.5; max-width: 30em; }
.pch-lede b { font-weight: 700; }
.pch-stage { position: relative; aspect-ratio: 1.12; width: 100%; }
.pch-blob { position: absolute; inset: 2% -14% 4% 4%; background: var(--pch-red);  /* red behind the blue 3D PlayCase */ border-radius: 46% 54% 40% 60% / 52% 44% 56% 48%; }
.pch-phone-front { position: absolute; left: 6%; top: 4%; width: 45%; height: auto; z-index: 3; transform: rotate(-6deg); filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .3)); }
.pch-phone-back { position: absolute; left: 47%; top: 1%; width: 40%; height: auto; z-index: 2; transform: rotate(6deg); filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .25)); }
.pch-star { position: absolute; right: -2%; top: 4%; width: 11%; height: auto; z-index: 4; }

/* Benefits + emulators */
.pch-benefits { padding-block: 1.6rem clamp(2.4rem, 1.6rem + 1vw, 4rem); }
.pch-benefits__grid { position: relative; isolation: isolate; padding: clamp(3.2rem, 2rem + 1.6vw, 4.8rem) clamp(1.6rem, 1rem + 2vw, 4.8rem) clamp(2.8rem, 2rem + 1.2vw, 4rem); }
.pch-benefits__grid::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pch-sand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cpath d='M131.782,27.114c40.102-10.96,82.463-12.471,123.904-14.149c101.148-3.353,202.333-5.733,303.54-5.911 c77.292-0.113,154.583,1.032,231.848,3.612c56.613,2.312,118.735,8.028,157.709,52.49c48.129,58.289,43.845,140.661,44.776,212.456 c-0.061,127.734-44.369,204.346-179.139,215.647c-213.756,11.752-428.528,5.115-642.377-1.844 c-81.032-4.387-142.645-38.212-157.312-122.83c-7.36-37.787-7.17-77.064-7.089-115.531c0.538-42.169,1.322-84.766,14.657-124.421 c15.585-50.666,58.39-86.81,109.297-99.468L131.782,27.114z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cpath d='M131.782,27.114c40.102-10.96,82.463-12.471,123.904-14.149c101.148-3.353,202.333-5.733,303.54-5.911 c77.292-0.113,154.583,1.032,231.848,3.612c56.613,2.312,118.735,8.028,157.709,52.49c48.129,58.289,43.845,140.661,44.776,212.456 c-0.061,127.734-44.369,204.346-179.139,215.647c-213.756,11.752-428.528,5.115-642.377-1.844 c-81.032-4.387-142.645-38.212-157.312-122.83c-7.36-37.787-7.17-77.064-7.089-115.531c0.538-42.169,1.322-84.766,14.657-124.421 c15.585-50.666,58.39-86.81,109.297-99.468L131.782,27.114z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.pch-benefits__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pch-benefit { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; padding: .8rem 1.2rem; text-align: center; border-left: 1px solid rgba(0, 0, 0, .12); }
.pch-benefit:first-child { border-left: 0; }
.pch-benefit .pc-icon { font-size: 3.2rem; width: 9rem; height: 9rem; padding: 2rem; display: grid; place-items: center; line-height: 1; background: var(--pch-yellow); color: var(--pch-ink); fill: var(--pch-ink); border: 5px solid #fff; border-radius: var(--blob); box-shadow: 0 8px 0 rgba(0, 0, 0, .14); transform: rotate(var(--tilt)); }
/* Hand-drawn circles: each one a little off, like the app tiles above. */
.pch-benefit:nth-child(1) { --tilt: -6deg; --blob: 58% 42% 60% 40% / 44% 58% 42% 56%; --d: 0; }
.pch-benefit:nth-child(2) { --tilt: 5deg; --blob: 42% 58% 45% 55% / 60% 42% 58% 40%; --d: 1; }
.pch-benefit:nth-child(3) { --tilt: -3deg; --blob: 60% 40% 52% 48% / 50% 56% 44% 50%; --d: 2; }
.pch-benefit:nth-child(4) { --tilt: 7deg; --blob: 45% 55% 40% 60% / 56% 44% 60% 40%; --d: 3; }
.pch-benefit:nth-child(5) { --tilt: -5deg; --blob: 56% 44% 58% 42% / 42% 58% 44% 58%; --d: 4; }
.pch-benefit:nth-child(6) { --tilt: 4deg; --blob: 44% 56% 60% 40% / 55% 45% 56% 44%; --d: 5; }
.pch-benefit .pc-icon :is(svg, path) { fill: var(--pch-ink); }
.pch-benefit .pc-icon svg { width: 100%; height: 100%; }
.pch-benefit .pc-icon::before { font-size: 3.4rem; }
.pch-benefit__label { font: 600 1.6rem/1.25 var(--text-font-family, Inter), sans-serif; }
.pch-emus { flex-direction: row; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem 3.2rem; margin-top: 2.4rem; padding-block: 2.4rem; border-top: 1px solid rgba(0, 0, 0, .12); }
.pch-emu { flex-direction: row; width: auto; display: flex; align-items: center; gap: 1rem; font: 600 1.5rem/1 var(--text-font-family, Inter), sans-serif; }
.pch-emu img { width: 3.6rem; height: 3.6rem; border-radius: 9px; object-fit: contain; }

/* Faceplates */
.pch-faceplates { padding-block: clamp(4.8rem, 3rem + 3vw, 8rem); }
.pch-faceplates__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.4rem, 1rem + 2vw, 4.8rem); margin-top: clamp(3.2rem, 2rem + 2vw, 5.6rem); }
.pch-fp { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-align: center; color: inherit; text-decoration: none; }
.pch-fp__art { position: relative; width: 100%; aspect-ratio: 1.15; display: grid; place-items: center; margin-bottom: .8rem; }
.pch-fp__art::before { content: ""; position: absolute; inset: 6% 4%; border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; background: var(--pch-fp-bg); }
.pch-fp:nth-child(2) .pch-fp__art::before { border-radius: 44% 56% 46% 54% / 56% 44% 56% 44%; }
.pch-fp:nth-child(3) .pch-fp__art::before { border-radius: 52% 48% 60% 40% / 48% 52% 48% 52%; }
.pch-fp__img { position: relative; width: 82%; height: auto; transform: rotate(-6deg); filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .25)); }
.pch-fp__title { font-size: clamp(2.2rem, 1.8rem + .6vw, 2.8rem); }
.pch-fp__text { font-size: 1.7rem; }

/* Reviews */
.pch-reviews { background: var(--pch-sand); padding-block: 4rem; }
.pch-reviews__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr)); gap: 3.2rem; align-items: center; }
.pch-quote { display: flex; flex-direction: column; gap: 1rem; padding-left: 3.2rem; border-left: 1px solid rgba(0, 0, 0, .15); }
.pch .pch-quote { margin: 0; }
.pch .pch-quote__text { font: 400 1.9rem/1.45 var(--text-font-family, Inter), sans-serif; font-style: normal; margin: 0; padding: 0; border: 0; background: none; color: var(--pch-ink); }
.pch .pch-quote__text::before, .pch .pch-quote__text::after { content: none; }
.pch-quote__who { font-size: 1.5rem; font-weight: 600; }

/* Details mosaic */
.pch-details { padding-block: clamp(4.8rem, 3rem + 3vw, 8rem); }
.pch-details__head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 3.2rem; }
.pch-details__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.pch-tile { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 2.4rem; align-items: center; padding: 2.4rem; border-radius: 20px; background: var(--pch-tile-bg, var(--pch-sand)); overflow: hidden; }
.pch-tile__art { width: 100%; height: 26rem; object-fit: contain; }
.pch-tile__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.pch-tile__title { font: 700 2.2rem/1.2 var(--text-font-family, Inter), sans-serif; margin: 0; text-transform: none; color: var(--pch-ink); }
.pch-tile__text { font-size: 1.6rem; line-height: 1.5; }

/* Arcade band */
.pch-arcade { color: #fff; padding-block: clamp(4.8rem, 3rem + 3vw, 8rem) clamp(4.8rem, 3rem + 3vw, 8rem); overflow: visible; }
.pch-arcade__bubble { position: relative; isolation: isolate; padding: clamp(3.2rem, 2rem + 3vw, 7.2rem); }
.pch-arcade__bubble::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pch-blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cpath d='M131.782,27.114c40.102-10.96,82.463-12.471,123.904-14.149c101.148-3.353,202.333-5.733,303.54-5.911 c77.292-0.113,154.583,1.032,231.848,3.612c56.613,2.312,118.735,8.028,157.709,52.49c48.129,58.289,43.845,140.661,44.776,212.456 c-0.061,127.734-44.369,204.346-179.139,215.647c-213.756,11.752-428.528,5.115-642.377-1.844 c-81.032-4.387-142.645-38.212-157.312-122.83c-7.36-37.787-7.17-77.064-7.089-115.531c0.538-42.169,1.322-84.766,14.657-124.421 c15.585-50.666,58.39-86.81,109.297-99.468L131.782,27.114z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cpath d='M131.782,27.114c40.102-10.96,82.463-12.471,123.904-14.149c101.148-3.353,202.333-5.733,303.54-5.911 c77.292-0.113,154.583,1.032,231.848,3.612c56.613,2.312,118.735,8.028,157.709,52.49c48.129,58.289,43.845,140.661,44.776,212.456 c-0.061,127.734-44.369,204.346-179.139,215.647c-213.756,11.752-428.528,5.115-642.377-1.844 c-81.032-4.387-142.645-38.212-157.312-122.83c-7.36-37.787-7.17-77.064-7.089-115.531c0.538-42.169,1.322-84.766,14.657-124.421 c15.585-50.666,58.39-86.81,109.297-99.468L131.782,27.114z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.pch-arcade__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 4rem; align-items: center; }
.pch-arcade__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.8rem; }
.pch-arcade .pch-display { color: #fff; }
.pch-arcade__sub { font: 700 2.4rem/1.2 var(--text-font-family, Inter), sans-serif; margin: 0; color: #fff; text-transform: none; }
.pch-arcade__text { font-size: 1.8rem; line-height: 1.5; max-width: 30em; color: rgba(255, 255, 255, .9); }
.pch-collage { position: relative; aspect-ratio: 1.45; width: 100%; }
.pch-card { position: absolute; background: #fff; padding: 6px; border-radius: 4px; box-shadow: 0 16px 30px rgba(0, 0, 0, .3); }
.pch-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; }
.pch-card--a { left: 0; top: 20%; width: 32%; transform: rotate(-7deg); }
.pch-card--b { right: 6%; top: 2%; width: 34%; transform: rotate(6deg); }
.pch-card--c { right: 0; top: 50%; width: 36%; transform: rotate(-4deg); }
.pch-collage__phone { position: absolute; left: 30%; top: -6%; width: 30%; height: auto; z-index: 3; transform: rotate(6deg); filter: drop-shadow(0 24px 28px rgba(0, 0, 0, .35)); }
.pch-collage__flag { position: absolute; right: -2%; top: -12%; width: 16%; height: auto; z-index: 4; filter: invert(1); }

/* About */
.pch-about { position: relative; padding-block: clamp(4.8rem, 3rem + 3vw, 8rem) 0; overflow: hidden; }
.pch-about__head { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-align: center; position: relative; z-index: 2; }
.pch-about__title { margin-inline: auto; }
.pch-about .pch-display { text-align: center; }
.pch-about__underline { left: 30%; right: auto; width: 42%; }
.pch-about__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.4rem, 1rem + 3vw, 6.4rem); align-items: end; margin-top: clamp(2.4rem, 1rem + 2vw, 4.8rem); }
.pch-about__knight { position: absolute; z-index: 3; grid-column: 1 / -1; left: 0; bottom: 0; width: clamp(15rem, 6rem + 16vw, 32rem) !important; max-width: none !important; height: auto !important; image-rendering: pixelated; }
.pch-about__copy { grid-column: 2; align-self: center; padding-bottom: clamp(18rem, 10rem + 14vw, 34rem); }
.pch .pch-about__copy p { font-size: clamp(1.7rem, 1.5rem + .3vw, 1.95rem); line-height: 1.6; margin: 0 0 1.8rem; max-width: 36em; }
.pch .pch-about__copy p:last-child { margin: 0; font-weight: 700; color: var(--pch-red); }
/* The real castle scene, faded into the page so it reads as a horizon, not a box. */
.pch-about__world { position: absolute; z-index: 1; grid-column: 1 / -1; left: 0; right: 0; bottom: 0; width: 100% !important; max-width: none !important; height: clamp(20rem, 10rem + 14vw, 34rem); object-fit: cover; object-position: 50% 34%; image-rendering: pixelated; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 55%); mask-image: linear-gradient(to bottom, transparent 0, #000 55%); }
@media (max-width: 991px) {
	.pch-about__grid { grid-template-columns: minmax(0, 1fr); }
	.pch-about__copy { grid-column: 1; padding-bottom: 30rem; }
	.pch-about__knight { width: 13rem !important; }
}

/* Stay in the loop */
.pch-loop { background: #000; color: #fff; padding-block: clamp(4rem, 3rem + 2vw, 5.6rem); }
.pch-loop__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 4rem; align-items: center; }
.pch-loop .pch-display { color: var(--pch-ink); }
.pch-loop__title { flex-direction: row; width: auto; display: flex; align-items: center; gap: 1.2rem; }
.pch-loop__title .pch-burst { filter: invert(1); }
.pch-loop__copy { display: flex; flex-direction: column; gap: 1.6rem; }
.pch-loop__text { font-size: 1.8rem; color: rgba(255, 255, 255, .9); }
.pch-loop .wsf-form button.pch-btn { width: auto !important; min-width: 16rem; height: 6.5rem !important; padding: 0 3.2rem !important; margin-top: 0 !important; color: #fff !important; text-transform: none !important; font: 700 1.7rem/1 var(--text-font-family, Inter), sans-serif !important; letter-spacing: 0 !important; box-shadow: none !important; }
.pch-loop .wsf-form input[type=email] { border-radius: 12px !important; border: 0 !important; }

/* ROMs note */
.pch-roms { background: var(--pch-sand); padding-block: 2.4rem; }
.pch-roms__row { flex-direction: row; display: flex; align-items: center; gap: 2rem; }
.pch-roms__row .pc-icon { flex: none; width: 3.6rem; height: auto; filter: invert(1); }
.pch-roms__text { font-size: 1.4rem; line-height: 1.5; color: rgba(0, 0, 0, .75); }

@media (prefers-reduced-motion: no-preference) {
	.pch-btn, .pch-fp__img, .pch-play__icon, .pch-card, .pch-collage__phone { transition: transform .25s ease, background-color .2s ease, color .2s ease; }
	.pch-btn-red:hover { background: var(--pch-ink); border-color: var(--pch-ink); }
	.pch-textlink:hover { color: var(--pch-red); }
	.pch-btn-yellow:hover { background: #fff; border-color: #fff; }
	.pch-btn-ghost-light:hover { background: #fff; color: var(--pch-blue); }
	.pch-play:hover .pch-play__icon { background: var(--pch-ink); color: #fff; }
	.pch-fp:hover .pch-fp__img { transform: rotate(-2deg) translateY(-4%); }
	.pch-collage:hover .pch-collage__phone { transform: rotate(2deg) translateY(-3%); }
}
@media (max-width: 991px) {
	.pch-hero__grid, .pch-arcade__grid, .pch-about__grid, .pch-loop__grid { grid-template-columns: minmax(0, 1fr); }
	.pch-stage { max-width: 56rem; margin-inline: auto; }
	.pch-blob { inset: 2% -6% 4% 2%; }
	.pch-benefits__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.4rem; }
	.pch-benefit:nth-child(4) { border-left: 0; }
	.pch-faceplates__grid { grid-template-columns: minmax(0, 1fr); max-width: 48rem; margin-inline: auto; }
	.pch-reviews__grid, .pch-details__grid { grid-template-columns: minmax(0, 1fr); }
	.pch-quote { padding-left: 0; border-left: 0; border-top: 1px solid rgba(0, 0, 0, .15); padding-top: 2rem; }
	.pch-emus { justify-content: flex-start; }
}
@media (max-width: 560px) {
	.pch-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pch-benefit { border-left: 0; }
	.pch-tile { grid-template-columns: minmax(0, 1fr); }
	.pch-tile__art { height: 20rem; }
}
/* Mobile hero: phones first (above the fold), compact badges */
@media (max-width: 767px) {
	.pch-hero { padding-top: 3.2rem; }
	.pch-hero__grid { gap: 3.6rem; }  /* clear space between the 3D PlayCase (which overhangs its box) and the headline (level on phones) */
	.pch-stage { order: -1; width: min(100%, 36rem); }  /* the 3D PlayCase, big; the headline follows it on the first screen */
	.pch-lede { font-size: 1.6rem; }
	/* Two lines ("Classic controls," / "Modern pocket."), sized to the screen so each fits on one line
	   (the longer line is 10em wide), and the hero copy centred. */
	.pch-title { font-size: min(8.6vw, 4.2rem); white-space: nowrap; }
	.pch-hero__copy { align-items: center; text-align: center; }
	.pch-titlewrap { transform-origin: center bottom; }
	.pch-hero .pch-row { justify-content: center; }
	.pch-hero__copy { gap: 1.6rem; }
	/* Benefits: one row of six. */
	.pch .pch-benefits__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: .3rem; padding-inline: 1rem !important; }
	.pch-benefit { padding: .2rem; gap: .6rem; }
	.pch .pch-benefit .pc-icon { width: 4.6rem; height: 4.6rem; padding: 1.1rem; font-size: 2rem; border-width: 2px; box-shadow: 0 4px 0 rgba(0, 0, 0, .14); flex: none; }
	.pch .pch-benefit .pc-icon::before { font-size: 2.1rem; }
	.pch .pch-benefit .pc-icon svg { width: 100% !important; height: 100% !important; }
	.pch-benefit__label { font-size: 1.02rem; line-height: 1.2; }
}
/* Emulators: red bubble, app icons that hop */
.pch-arcade { flex-direction: column; gap: 0 !important; row-gap: 0 !important; }
.pch-arcade > .pch-emububble { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); width: min(88%, 108rem) !important; max-width: none !important; margin: -5.6rem auto 0 !important; }
@media (max-width: 991px) { .pch-arcade > .pch-emububble { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .pch-arcade > .pch-emububble { width: 92% !important; margin-top: -3.2rem !important; } }
.pch-emububble { position: relative; z-index: 2; width: min(92%, 112rem); margin: -4.8rem auto 0; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2.4rem, 1rem + 3vw, 5.6rem); align-items: center; color: #fff; padding: clamp(3.2rem, 2rem + 3vw, 6.4rem); isolation: isolate; }
.pch-emububble::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pch-red); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cpath d='M131.782,27.114c40.102-10.96,82.463-12.471,123.904-14.149c101.148-3.353,202.333-5.733,303.54-5.911 c77.292-0.113,154.583,1.032,231.848,3.612c56.613,2.312,118.735,8.028,157.709,52.49c48.129,58.289,43.845,140.661,44.776,212.456 c-0.061,127.734-44.369,204.346-179.139,215.647c-213.756,11.752-428.528,5.115-642.377-1.844 c-81.032-4.387-142.645-38.212-157.312-122.83c-7.36-37.787-7.17-77.064-7.089-115.531c0.538-42.169,1.322-84.766,14.657-124.421 c15.585-50.666,58.39-86.81,109.297-99.468L131.782,27.114z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cpath d='M131.782,27.114c40.102-10.96,82.463-12.471,123.904-14.149c101.148-3.353,202.333-5.733,303.54-5.911 c77.292-0.113,154.583,1.032,231.848,3.612c56.613,2.312,118.735,8.028,157.709,52.49c48.129,58.289,43.845,140.661,44.776,212.456 c-0.061,127.734-44.369,204.346-179.139,215.647c-213.756,11.752-428.528,5.115-642.377-1.844 c-81.032-4.387-142.645-38.212-157.312-122.83c-7.36-37.787-7.17-77.064-7.089-115.531c0.538-42.169,1.322-84.766,14.657-124.421 c15.585-50.666,58.39-86.81,109.297-99.468L131.782,27.114z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.pch-emububble__title { color: #fff; font-size: clamp(2.6rem, 1.8rem + 1.6vw, 4rem); }
.pch-apps { flex-direction: row; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.4rem 1.6rem; }
.pch-app { width: auto; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.pch-app__tile { width: clamp(7.2rem, 4rem + 3vw, 10rem); aspect-ratio: 1; display: grid; place-items: center; background: #fff; border-radius: 28%; box-shadow: 0 10px 0 rgba(0, 0, 0, .2); transform: rotate(var(--tilt, 0deg)); }
.pch-app:nth-child(1) { --tilt: -7deg; } .pch-app:nth-child(2) { --tilt: 5deg; } .pch-app:nth-child(3) { --tilt: -3deg; } .pch-app:nth-child(4) { --tilt: 7deg; } .pch-app:nth-child(5) { --tilt: -5deg; }
.pch-app__icon { width: 70%; height: auto; border-radius: 22%; }
/* JPG icons come wrapped in <picture> with a <source>; keep it out of the tile's centring grid. */
.pch-app__tile source { display: none; }
.pch-app__name { font: 700 1.6rem/1.2 var(--text-font-family, Inter), sans-serif; color: #fff; }

/* Testimonials: a pinboard wall */
.pch-wallsec { padding-block: clamp(4.8rem, 3rem + 3vw, 8rem); }
.pch-wall__head { margin-bottom: clamp(2.4rem, 1.6rem + 2vw, 4.8rem); }
.pch .pch-wall { display: block; columns: 3 30rem; column-gap: 2.4rem; }
.pch-note { break-inside: avoid; display: flex; flex-direction: column; gap: 1.4rem; width: 100%; margin: 0 0 2.4rem; padding: 2.8rem; border-radius: 22px; background: #fff; color: var(--pch-ink); box-shadow: 0 0 0 1.5px var(--pch-ink), 0 8px 0 var(--pch-ink); transform: rotate(var(--r, 0deg)); position: relative; }
.pch-note::before { content: "“"; position: absolute; top: -1.4rem; right: 2rem; font: 400 8rem/1 "Titan One", sans-serif; color: var(--pch-red); }
.pch-note:nth-child(5n+2) { background: var(--pch-pale-blue); }
.pch-note:nth-child(5n+3) { background: var(--pch-red); color: #fff; }
.pch-note:nth-child(5n+3)::before { color: #fff; }
.pch-note:nth-child(5n+4) { background: var(--pch-pale-red); }
.pch-note:nth-child(5n+5) { background: var(--pch-blue); color: #fff; }
.pch-note:nth-child(5n+5)::before { color: #fff; }
.pch-note:nth-child(4n+1) { --r: -1.2deg; } .pch-note:nth-child(4n+2) { --r: .9deg; } .pch-note:nth-child(4n+3) { --r: -.5deg; } .pch-note:nth-child(4n+4) { --r: 1.4deg; }
.pch .pch-note__quote { font: 500 1.9rem/1.45 var(--text-font-family, Inter), sans-serif; font-style: normal; margin: 0; padding: 0; border: 0; background: none; color: inherit; }
.pch-note__who { flex-direction: row; width: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.pch-note__name { font: 700 1.6rem/1.2 var(--text-font-family, Inter), sans-serif; }
.pch-note__verified { display: inline-flex; align-items: center; gap: .5rem; font: 600 1.3rem/1 var(--text-font-family, Inter), sans-serif; opacity: .75; }
.pch-note__verified .pc-icon { font-size: 1.3rem; width: 1em; height: 1em; }
.pch-note .brxe-xstarrating { font-size: 1.6rem; color: inherit; }

/* Details: a playable PlayCase */
.pch-console { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(2.4rem, 1rem + 3vw, 5.6rem); align-items: center; }
.pch-device { display: flex; flex-direction: column; gap: 2.8rem; padding: 2.8rem 2.8rem 3.6rem; background: var(--pch-red); border-radius: 48px 48px 64px 64px; box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .18), 0 30px 50px rgba(0, 0, 0, .18); }
.pch-device__screen { display: grid; padding: 1.4rem; background: #111; border-radius: 26px; box-shadow: inset 0 0 0 4px #000; }
.pch-slide { grid-area: 1 / 1; display: none; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2.4rem; align-items: center; min-height: 34rem; padding: 2.4rem; background: var(--pch-sand); border-radius: 16px; }
.pch-slide.is-active { display: grid; }
.pch-slide__art { width: 100%; height: 26rem; object-fit: contain; }
.pch-slide__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.pch-slide__count { font: 700 1.3rem/1 ui-monospace, Menlo, monospace; letter-spacing: .1em; color: var(--pch-red); }
.pch .pch-slide__title { font: 400 clamp(2.2rem, 1.8rem + .8vw, 3rem)/1.05 "Titan One", sans-serif; text-transform: none; margin: 0; color: var(--pch-ink); }
.pch-slide__text { font-size: 1.6rem; line-height: 1.5; }
.pch-pad { width: 100%; align-self: stretch; display: flex; align-items: center; justify-content: space-between; padding-inline: 1.6rem; position: relative; }
.pch-dpad { display: grid; grid-template-columns: repeat(3, 4.6rem); grid-template-rows: repeat(3, 4.6rem); }
.pch .pch-dpad__b { all: unset; box-sizing: border-box; background: #111; cursor: pointer; display: grid; place-items: center; }
.pch .pch-dpad__b::after { content: ""; border: 7px solid transparent; }
.pch .pch-dpad__up { grid-area: 1 / 2; border-radius: 8px 8px 0 0; } .pch-dpad__up::after { border-bottom-color: #555 !important; margin-top: -7px; }
.pch .pch-dpad__left { grid-area: 2 / 1; border-radius: 8px 0 0 8px; } .pch-dpad__left::after { border-right-color: #555 !important; margin-left: -7px; }
.pch-dpad__c { grid-area: 2 / 2; background: #111; }
.pch .pch-dpad__right { grid-area: 2 / 3; border-radius: 0 8px 8px 0; } .pch-dpad__right::after { border-left-color: #555 !important; margin-right: -7px; }
.pch .pch-dpad__down { grid-area: 3 / 2; border-radius: 0 0 8px 8px; } .pch-dpad__down::after { border-top-color: #555 !important; margin-bottom: -7px; }
.pch-ab { display: flex; gap: 2rem; align-items: flex-start; padding-top: 2.4rem; }
.pch .pch-ab__b--a { margin-top: -2.4rem; }
.pch .pch-ab__b { all: unset; box-sizing: border-box; width: 6.4rem; height: 6.4rem; border-radius: 50%; background: #111; color: #777; display: grid; place-items: center; font: 400 2rem/1 "Titan One", sans-serif; cursor: pointer; box-shadow: 0 5px 0 rgba(0, 0, 0, .35); }
.pch-ab__b--a { margin-top: -2.4rem; }
.pch-ss { position: absolute; left: 50%; bottom: -2.8rem; transform: translateX(-50%); display: flex; gap: 1.4rem; }
.pch-ss span { width: 4.4rem; height: 1.2rem; border-radius: 999px; background: #111; transform: rotate(-25deg); }
.pch-dpad__b:focus-visible, .pch-ab__b:focus-visible, .pch .pch-cart:focus-visible { outline: 3px solid var(--pch-blue); outline-offset: 3px; }
.pch-carts { display: flex; flex-direction: column; gap: 1.4rem; }
.pch .pch-cart { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 1.6rem; padding: 1.8rem 2rem; background: #fff; color: var(--pch-ink); border: 2px solid var(--pch-ink); border-radius: 16px 16px 6px 6px; box-shadow: 0 6px 0 var(--pch-ink); font: 700 1.7rem/1.25 var(--text-font-family, Inter), sans-serif; cursor: pointer; }
.pch-cart__n { font: 400 2.4rem/1 "Titan One", sans-serif; color: var(--pch-red); }
.pch .pch-cart[aria-selected="true"] { background: var(--pch-ink); color: #fff; }

@media (prefers-reduced-motion: no-preference) {
	.pch-app__tile { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); animation: pch-bob 3.2s ease-in-out infinite; animation-delay: calc(var(--d, 0) * .4s); }
	.pch-app:nth-child(2) .pch-app__tile { --d: 1; } .pch-app:nth-child(3) .pch-app__tile { --d: 2; } .pch-app:nth-child(4) .pch-app__tile { --d: 3; } .pch-app:nth-child(5) .pch-app__tile { --d: 4; }
	.pch-benefit .pc-icon { animation: pch-bob-badge 3.4s ease-in-out infinite; animation-delay: calc(var(--d) * .35s); }
	.pch-note { transition: transform .25s ease; }
	.pch-note:hover { transform: rotate(0deg) scale(1.02); }
	.pch-slide.is-active { animation: pch-boot .35s ease; }
	.pch .pch-cart, .pch .pch-dpad__b, .pch .pch-ab__b, .pch-textlink { transition: background-color .15s ease, color .15s ease; }
	.pch .pch-cart:hover { background: var(--pch-pale-red); }
	.pch .pch-cart[aria-selected="true"]:hover { background: var(--pch-ink); }
	.pch .pch-dpad__b:hover, .pch .pch-ab__b:hover { background: #2a2a2a; color: #fff; }
	.pch .pch-dpad__b:active, .pch .pch-ab__b:active { background: var(--pch-blue); color: #fff; }
}
/* The tile rises; its shadow grows by the same amount so it stays planted. */
@keyframes pch-bob { 0%, 100% { transform: rotate(var(--tilt)) translateY(0); box-shadow: 0 10px 0 rgba(0, 0, 0, .2); } 50% { transform: rotate(var(--tilt)) translateY(-.6rem); box-shadow: 0 calc(10px + .6rem) 0 rgba(0, 0, 0, .2); } }
@keyframes pch-bob-badge { 0%, 100% { transform: rotate(var(--tilt)) translateY(0); box-shadow: 0 8px 0 rgba(0, 0, 0, .14); } 50% { transform: rotate(var(--tilt)) translateY(-.5rem); box-shadow: 0 calc(8px + .5rem) 0 rgba(0, 0, 0, .14); } }
@keyframes pch-boot { from { opacity: 0; filter: brightness(2); } to { opacity: 1; filter: none; } }
@media (max-width: 991px) {
	.pch-emububble, .pch-console { grid-template-columns: minmax(0, 1fr); }
	.pch-apps { justify-content: flex-start; }
	.pch-carts { flex-direction: row; flex-wrap: wrap; }
	.pch .pch-cart { flex: 1 1 22rem; }
}
@media (max-width: 560px) {
	.pch-apps { justify-content: center; }
	.pch-slide { grid-template-columns: minmax(0, 1fr); }
	.pch-slide__art { height: 18rem; }
	.pch-device { padding: 1.6rem 1.6rem 3.6rem; border-radius: 32px 32px 44px 44px; }
	.pch-dpad { grid-template-columns: repeat(3, 3.8rem); grid-template-rows: repeat(3, 3.8rem); }
	.pch .pch-ab__b { width: 5.2rem; height: 5.2rem; }
}
/* Buttons: hand-drawn SVG path (fill for solid, stroke for outline), same family as the panel shape. */
.pch .pch-btn { position: relative; isolation: isolate; border: 0 !important; background: transparent !important; border-radius: 0; padding: 1.05em 1.6em; }
.pch .pch-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-bg, var(--pch-red)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M14 5C50 2 150 1 186 4C196 5 199 12 199 22C200 30 200 38 198 46C197 54 192 57 184 57C150 59 50 59 16 57C7 56 2 51 1 42C0 34 0 26 2 17C3 10 7 6 14 5Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M14 5C50 2 150 1 186 4C196 5 199 12 199 22C200 30 200 38 198 46C197 54 192 57 184 57C150 59 50 59 16 57C7 56 2 51 1 42C0 34 0 26 2 17C3 10 7 6 14 5Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transition: background-color .3s ease; }
.pch .pch-btn-red { --btn-bg: var(--pch-red); color: #fff; }
.pch .pch-btn-ghost-light { --btn-bg: #fff; color: #fff; }
.pch .pch-btn-ghost-light::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M14 5C50 2 150 1 186 4C196 5 199 12 199 22C200 30 200 38 198 46C197 54 192 57 184 57C150 59 50 59 16 57C7 56 2 51 1 42C0 34 0 26 2 17C3 10 7 6 14 5Z' fill='none' stroke='black' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M14 5C50 2 150 1 186 4C196 5 199 12 199 22C200 30 200 38 198 46C197 54 192 57 184 57C150 59 50 59 16 57C7 56 2 51 1 42C0 34 0 26 2 17C3 10 7 6 14 5Z' fill='none' stroke='black' stroke-width='2.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.pch .pch-btn-red:hover { --btn-bg: var(--pch-ink); }
.pch .pch-btn-ghost-light:hover { color: var(--pch-blue); }
.pch .pch-btn-ghost-light:hover::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M14 5C50 2 150 1 186 4C196 5 199 12 199 22C200 30 200 38 198 46C197 54 192 57 184 57C150 59 50 59 16 57C7 56 2 51 1 42C0 34 0 26 2 17C3 10 7 6 14 5Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M14 5C50 2 150 1 186 4C196 5 199 12 199 22C200 30 200 38 198 46C197 54 192 57 184 57C150 59 50 59 16 57C7 56 2 51 1 42C0 34 0 26 2 17C3 10 7 6 14 5Z'/%3E%3C/svg%3E"); }
/* With JS, each button gets an inline SVG shape that morphs on hover (see "Button shapes" script). */
.pch .pch-btn.has-shape::before { display: none; }
.pch-btn__shape { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pch-btn__shape path { fill: var(--btn-bg); transition: fill .3s ease; }
.pch-btn-ghost-light .pch-btn__shape path { fill: transparent; stroke: #fff; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.pch .pch-btn-ghost-light:hover .pch-btn__shape path { fill: #fff; }
/* Underlined Titan headings tilt up a little, like the Arcade page title. */
.pch-titlewrap { transform: rotate(-3deg); transform-origin: left bottom; }
@media (max-width: 767px) { .pch-titlewrap { transform: none; } }   /* phones: the title sits level, so it takes less height */
.pch-about__title { transform-origin: center bottom; }
.pch .pch-titlewrap .pch-underline { bottom: -1.6rem; }
.pch .pch-about__title .pch-underline { bottom: -1.8rem; }
/* The underline belongs to one word, so it always fits that word. */
.pch-u { position: relative; display: inline-block; }
.pch-u::after { content: ""; position: absolute; left: -3%; right: -3%; bottom: -.22em; height: .26em; background: url("http://localhost:8892/wp-content/uploads/playcase-arcade-underline.svg?v=2") center / 100% 100% no-repeat; }
.pch-about__title { transform: none !important; }
/* Contained sections in the house shape: About (sand, clips the pixel world), Loop (black), ROMs note (sand). */
.pch-about { padding-block: clamp(3.2rem, 2rem + 2vw, 5.6rem); overflow: visible; }
.pch-about__panel { position: relative; overflow: hidden; background: var(--pch-sand); padding: clamp(4rem, 3rem + 2vw, 6.4rem) clamp(2.4rem, 1rem + 3vw, 6.4rem) 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cpath d='M131.782,27.114c40.102-10.96,82.463-12.471,123.904-14.149c101.148-3.353,202.333-5.733,303.54-5.911 c77.292-0.113,154.583,1.032,231.848,3.612c56.613,2.312,118.735,8.028,157.709,52.49c48.129,58.289,43.845,140.661,44.776,212.456 c-0.061,127.734-44.369,204.346-179.139,215.647c-213.756,11.752-428.528,5.115-642.377-1.844 c-81.032-4.387-142.645-38.212-157.312-122.83c-7.36-37.787-7.17-77.064-7.089-115.531c0.538-42.169,1.322-84.766,14.657-124.421 c15.585-50.666,58.39-86.81,109.297-99.468L131.782,27.114z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cpath d='M131.782,27.114c40.102-10.96,82.463-12.471,123.904-14.149c101.148-3.353,202.333-5.733,303.54-5.911 c77.292-0.113,154.583,1.032,231.848,3.612c56.613,2.312,118.735,8.028,157.709,52.49c48.129,58.289,43.845,140.661,44.776,212.456 c-0.061,127.734-44.369,204.346-179.139,215.647c-213.756,11.752-428.528,5.115-642.377-1.844 c-81.032-4.387-142.645-38.212-157.312-122.83c-7.36-37.787-7.17-77.064-7.089-115.531c0.538-42.169,1.322-84.766,14.657-124.421 c15.585-50.666,58.39-86.81,109.297-99.468L131.782,27.114z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.pch-about__panel .pch-about__grid { margin-inline: 0; }
.pch-about__panel .pch-about__world { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 55%); mask-image: linear-gradient(to bottom, transparent 0, #000 55%); }
.pch.pch-loop { background: transparent !important; padding-block: 0 clamp(2.4rem, 1.6rem + 1vw, 4rem); }
.pch-loop__grid { position: relative; isolation: isolate; padding: clamp(3.6rem, 2.4rem + 2vw, 5.6rem) clamp(2.4rem, 1rem + 3vw, 6.4rem); }
.pch-loop__grid::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #000; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cpath d='M131.782,27.114c40.102-10.96,82.463-12.471,123.904-14.149c101.148-3.353,202.333-5.733,303.54-5.911 c77.292-0.113,154.583,1.032,231.848,3.612c56.613,2.312,118.735,8.028,157.709,52.49c48.129,58.289,43.845,140.661,44.776,212.456 c-0.061,127.734-44.369,204.346-179.139,215.647c-213.756,11.752-428.528,5.115-642.377-1.844 c-81.032-4.387-142.645-38.212-157.312-122.83c-7.36-37.787-7.17-77.064-7.089-115.531c0.538-42.169,1.322-84.766,14.657-124.421 c15.585-50.666,58.39-86.81,109.297-99.468L131.782,27.114z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cpath d='M131.782,27.114c40.102-10.96,82.463-12.471,123.904-14.149c101.148-3.353,202.333-5.733,303.54-5.911 c77.292-0.113,154.583,1.032,231.848,3.612c56.613,2.312,118.735,8.028,157.709,52.49c48.129,58.289,43.845,140.661,44.776,212.456 c-0.061,127.734-44.369,204.346-179.139,215.647c-213.756,11.752-428.528,5.115-642.377-1.844 c-81.032-4.387-142.645-38.212-157.312-122.83c-7.36-37.787-7.17-77.064-7.089-115.531c0.538-42.169,1.322-84.766,14.657-124.421 c15.585-50.666,58.39-86.81,109.297-99.468L131.782,27.114z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.pch.pch-roms { background: transparent !important; padding-block: 0 clamp(3.2rem, 2rem + 2vw, 5.6rem); }
.pch-roms__row { position: relative; isolation: isolate; padding: 2.8rem clamp(2.4rem, 1rem + 3vw, 5.6rem); }
.pch-roms__row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pch-sand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cpath d='M131.782,27.114c40.102-10.96,82.463-12.471,123.904-14.149c101.148-3.353,202.333-5.733,303.54-5.911 c77.292-0.113,154.583,1.032,231.848,3.612c56.613,2.312,118.735,8.028,157.709,52.49c48.129,58.289,43.845,140.661,44.776,212.456 c-0.061,127.734-44.369,204.346-179.139,215.647c-213.756,11.752-428.528,5.115-642.377-1.844 c-81.032-4.387-142.645-38.212-157.312-122.83c-7.36-37.787-7.17-77.064-7.089-115.531c0.538-42.169,1.322-84.766,14.657-124.421 c15.585-50.666,58.39-86.81,109.297-99.468L131.782,27.114z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' preserveAspectRatio='none'%3E%3Cpath d='M131.782,27.114c40.102-10.96,82.463-12.471,123.904-14.149c101.148-3.353,202.333-5.733,303.54-5.911 c77.292-0.113,154.583,1.032,231.848,3.612c56.613,2.312,118.735,8.028,157.709,52.49c48.129,58.289,43.845,140.661,44.776,212.456 c-0.061,127.734-44.369,204.346-179.139,215.647c-213.756,11.752-428.528,5.115-642.377-1.844 c-81.032-4.387-142.645-38.212-157.312-122.83c-7.36-37.787-7.17-77.064-7.089-115.531c0.538-42.169,1.322-84.766,14.657-124.421 c15.585-50.666,58.39-86.81,109.297-99.468L131.782,27.114z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
/* Stay in the Loop sits on the page white, no panel. */
.pch-loop__grid::before { display: none; }
.pch.pch-loop { color: var(--pch-ink); padding-block: clamp(3.2rem, 2rem + 2vw, 5.6rem) 0; }
.pch-loop .pch-loop__text { color: var(--pch-ink); }
.pch-loop .wsf-form input[type=email] { border: 2px solid var(--pch-ink) !important; background: #fff !important; }
/* Benefits: no column rules, one size more breathing room top and bottom. */
.pch .pch-benefit { border-left: 0 !important; }
.pch .pch-benefits__grid { padding-top: clamp(4.8rem, 3.2rem + 2vw, 6.4rem) !important; padding-bottom: clamp(4rem, 2.8rem + 1.6vw, 5.6rem) !important; }
/* Arcade on phones: a rotating gallery of seven games (js/arcade-gallery.js) replaces the collage. Cards are
   placed by --d (offset from the centre card, -3..3) and --a (its absolute value), both set by the script. */
.pch-gal { display: none; }
@media (max-width: 767px) {
	.pch-arcade .pch-collage { display: none; }
	/* Spans the bubble's full width (out past its padding) and clips the side cards at its edges. */
	.pch-gal { display: block; position: relative; width: auto; margin: .8rem -2.2rem 0; padding-bottom: .4rem; overflow: hidden; }
	.pch-gal__track { position: relative; width: 100%; aspect-ratio: 1 / .82; margin-bottom: 8.4rem; touch-action: pan-y; }
	.pch-gal__card { --d: 0; --a: 0; position: absolute; left: 50%; top: 0; width: 56%; cursor: pointer; transform: translateX(calc(-50% + var(--d) * 58%)) scale(calc(1 - var(--a) * .17)) rotate(calc(var(--d) * 5deg)); transform-origin: 50% 70%; transition: transform .6s cubic-bezier(.3, .9, .3, 1), opacity .45s; }
	.pch-gal__card.no-anim { transition: none; }
	.pch-gal__img { display: block; width: 100% !important; height: auto; aspect-ratio: 720 / 934; object-fit: cover; border: 5px solid #fff; border-radius: 18px; box-shadow: 0 14px 28px rgba(0, 0, 0, .3); }
	.pch-gal__meta { position: absolute; left: 50%; top: calc(100% + 1.4rem); width: 130%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; opacity: 0; transition: opacity .35s; pointer-events: none; }
	.pch-gal__card.is-on .pch-gal__meta { opacity: 1; transition-delay: .15s; }
	.pch .pch-gal__title { font: 400 2.2rem/1.1 "Titan One", sans-serif; text-transform: uppercase; color: #fff; }
	.pch .pch-gal__sum { font-size: 1.4rem; line-height: 1.4; color: rgba(255, 255, 255, .85); }
	.pch .pch-gal__dots { display: flex; flex-direction: row; gap: .8rem; justify-content: center; }
	.pch-gal__dots button { width: .9rem; height: .9rem; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .4); cursor: pointer; transition: background-color .2s, transform .2s; }
	.pch-gal__dots button.is-on { background: #fff; transform: scale(1.3); }
}
/* Mobile spacing pass (2026-10-18): one vertical rhythm, centred headings like the hero, content kept clear of
   the bubbles' curved edges, smaller emulator tiles and faceplate art, and a shorter testimonial wall. */
@media (max-width: 767px) {
	.pch.pch-arcade, .pch.pch-faceplates, .pch.pch-wallsec, .pch.pch-details { padding-block: 4rem; }
	.pch.pch-benefits { padding-block: 1.6rem 2.4rem; }
	.pch .pch-h2 { font-size: min(8vw, 3.2rem); }
	.pch-faceplates .pch-h2, .pch-wall__head, .pch-details__head, .pch-loop__copy { text-align: center; align-items: center; }
	.pch-details__head { margin-bottom: 2.4rem; }
	.pch-wall__head { margin-bottom: 2.4rem; }
	/* Arcade bubble: centred, with room inside its curved edge. */
	.pch .pch-arcade__bubble { gap: 2.4rem; }
	.pch-arcade__copy { align-items: center; text-align: center; }
	.pch-arcade .pch-row { justify-content: center; }
	.pch-arcade__sub { font-size: 2rem; }
	.pch-arcade__text { font-size: 1.6rem; }
	/* Full bubble width, centred: Bricks blocks are width:100%, so widen by the bubble's side padding on both
	   sides. The side cards fade out at the edges instead of being cut by a hard line. */
	.pch .pch-gal { width: calc(100% + 3.6rem) !important; max-width: none; margin-inline: -1.8rem; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
	/* Emulators: smaller tiles, three then two. */
	.pch .pch-emububble { padding: 5.6rem 2rem 4rem; gap: 2.4rem; }
	.pch .pch-emububble__title { text-align: center; font-size: min(7vw, 2.8rem); }
	/* Emulators: one row of five. */
	.pch .pch-apps { flex-wrap: nowrap; justify-content: space-between; gap: 0; }
	.pch .pch-app { width: 20%; gap: .7rem; }
	.pch .pch-app__tile { width: 5.4rem; box-shadow: 0 5px 0 rgba(0, 0, 0, .2); }
	.pch .pch-app__name { font-size: 1.1rem; white-space: nowrap; }
	/* Arcade: a plain blue band instead of the bubble shape, with the red emulators panel sitting inside it. */
	.pch.pch-arcade { background: var(--pch-blue); padding-block: 4.8rem 4rem; }
	.pch .pch-arcade__bubble { padding: 0; }
	.pch .pch-arcade__bubble::before { display: none; }
	.pch-arcade > .pch-emububble { width: 100% !important; margin-top: 3.2rem !important; }
	/* Faceplates: smaller art, tighter list. */
	.pch .pch-faceplates__grid { gap: 3.2rem; margin-top: 2.4rem; max-width: 32rem; }
	.pch .pch-fp__art { aspect-ratio: 1.35; }
	/* Testimonials: the first six on phones (the full wall stays on wider screens). */
	.pch-wall > .pch-note:nth-child(n+7) { display: none; }
	/* Newsletter: the form spans the column, with the button centred under the email field. */
	.pch .pch-loop__grid { padding-inline: 0; }
	.pch-loop .pc-wsf { width: 100%; margin: 0; }
	.pch-loop .wsf-field-wrapper:has(button) { display: flex; justify-content: center; margin-top: 1.2rem; }
}
/* Benefit badges: flat yellow, no white rim and no drop shadow (overrides the bob animation's shadow too). */
.pch .pch-benefit .pc-icon { border: 0 !important; box-shadow: none !important; }
/* Benefits: no panel, and pulled up close under the hero. */
.pch .pch-benefits__grid::before { display: none; }
.pch.pch-benefits { padding-top: 0 !important; }
.pch .pch-benefits__grid { padding-top: 0 !important; padding-bottom: clamp(2.4rem, 1.6rem + 1vw, 3.2rem) !important; }
.pch.pch-hero { padding-bottom: clamp(1.6rem, 1rem + 1vw, 2.4rem) !important; }
/* Emulators: no red panel. On phones it sits in the Arcade's blue band (white text); on wider screens it sits on
   the page under the blue bubble, so its text turns ink. */
.pch .pch-emububble::before { display: none; }
@media (min-width: 768px) {
	.pch-arcade > .pch-emububble { margin-top: 2.4rem !important; }
	.pch .pch-emububble__title, .pch .pch-app__name { color: var(--pch-ink); }
}
@media (max-width: 767px) {
	.pch .pch-emububble { padding: 1.6rem 0 0; }
}
/* Benefits row (2026-10-19): a random testimonial on the left, three badges on the right. */
.pch .pch-benefits__grid { display: grid !important; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important; gap: 4.8rem; align-items: center; }
.pch .pch-benefits__badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.pch-says { margin: 0; }
.pch-says__item { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.pch-says__item[hidden] { display: none; }
.pch-says__stars { display: inline-flex; gap: 3px; color: var(--pch-red); }
.pch-says__stars svg { width: 2.2rem; height: 2.2rem; }
.pch-says blockquote { margin: 1.4rem 0 0; padding: 0; border: 0; font: 800 clamp(2.4rem, 1.6rem + 1.4vw, 3.4rem)/1.18 var(--text-font-family, Inter), sans-serif; letter-spacing: -.025em; color: var(--pch-ink); text-wrap: balance; }
.pch-says figcaption { margin-top: 1.4rem; text-align: left; font: 600 1.6rem/1.3 var(--text-font-family, Inter), sans-serif; color: #5d584f; }
@media (max-width: 767px) {
	.pch .pch-benefits__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 2.8rem; }
	.pch .pch-benefits__badges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pch-says__item:not([hidden]) { display: flex; flex-direction: column; align-items: center; text-align: center; }
	.pch .pch-says figcaption { text-align: center; }
	.pch-says blockquote { font-size: 2.4rem; }
	.pch-says { padding-top: 2.4rem; }
	.pch .pch-benefit .pc-icon { width: 6.4rem !important; height: 6.4rem !important; padding: 1.5rem !important; }
	.pch-benefit__label { font-size: 1.3rem !important; }
}
/* Newsletter (2026-10-19): the email field and a square send button share one line at every width. */
.pch-loop .wsf-fields { display: flex !important; flex-wrap: nowrap !important; align-items: flex-start; gap: 1rem; margin: 0 !important; }
.pch-loop .wsf-fields > .wsf-field-wrapper { flex: 1 1 0 !important; min-width: 0; max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
.pch-loop .wsf-form input[type=email] { width: 100% !important; min-width: 0 !important; }
.pch-loop .pc-wsf, .pch-loop .wsf-form, .pch-loop .wsf-sections, .pch-loop .wsf-section { min-width: 0; max-width: 100%; }
.pch-loop .wsf-fields > .wsf-field-wrapper:has(button) { flex: 0 0 6.5rem !important; width: 6.5rem !important; max-width: 6.5rem !important; display: block !important; margin: 0 !important; }
.pch-loop .wsf-form input[type=email] { height: 6.5rem !important; }
.pch-loop .wsf-form button.pch-btn { width: 6.5rem !important; min-width: 0 !important; height: 6.5rem !important; padding: 0 !important; font-size: 0 !important; color: transparent !important; justify-content: center; }
.pch-loop .wsf-form button.pch-btn::after { content: ""; position: absolute; inset: 0; margin: auto; width: 2.6rem; height: 2.6rem; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.5 21 3l-6.5 18-3.2-7.3z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M11.3 13.7 21 3' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11.5 21 3l-6.5 18-3.2-7.3z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M11.3 13.7 21 3' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; }
/* Stay in the Loop sits with equal space above and below (2026-10-19): the manual above adds none of its own. */
.pch.pcm.pc-section { padding-bottom: 0 !important; }
.pch.pch-loop { padding-block: 0 !important; }
.pch .pch-loop__grid { padding-block: clamp(6.4rem, 4.8rem + 2vw, 9.6rem) !important; }
/* Theme: the Font Awesome glyph badges are a box (.pc-icon--glyph) around the SVG icon, at the size the icon font drew them. */
.pch .pch-benefit .pc-icon--glyph .pc-glyph { display: block; width: 3.4rem; height: 3.4rem; fill: currentColor; }
.pch .pch-benefit .pc-icon--glyph .pc-glyph path { fill: var(--pch-ink); }
@media (max-width: 767px) { .pch .pch-benefit .pc-icon--glyph .pc-glyph { width: 2.1rem; height: 2.1rem; } }