/* ==========================================================
   Product pages – additions on top of ai-school-lab.css (scoped to .prd)
   ========================================================== */
.prd .asl-hero-photo img { object-position: center 25%; }

/* ---------- gallery ---------- */
.prd-gallery {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 32px;
}
.prd-gallery-lg { grid-template-columns: repeat(2, 1fr); gap: 56px 48px; }
.prd-tile figure { margin: 0; }
.prd-tile-img { overflow: hidden; background: var(--asl-cream); }
.prd-tile-img img {
    display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.prd-tile:hover .prd-tile-img img { transform: scale(1.04); }
.prd-tile figcaption {
    display: grid; grid-template-columns: 44px 1fr; align-items: start;
    padding: 18px 0 0; margin-top: 18px; border-top: 1px solid var(--asl-line);
}
.prd-tile figcaption > .asl-mono { font-size: 12px; padding-top: 3px; }
.prd-tile .asl-small { font-size: 10px; margin-bottom: 6px; }
.prd-tile strong { display: block; font-family: var(--asl-display); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--asl-ink); }
.prd-tile-text { display: block; margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--asl-muted); }
.prd-gallery-lg .prd-tile strong { font-size: 30px; }

@media (max-width: 991px) {
    .prd-gallery { grid-template-columns: repeat(2, 1fr); gap: 44px 24px; }
}
@media (max-width: 575px) {
    .prd-gallery, .prd-gallery-lg { grid-template-columns: 1fr; gap: 40px; }
    .prd-tile strong, .prd-gallery-lg .prd-tile strong { font-size: 22px; }
}

/* long hero titles (e.g. "Engagement") */
.prd .asl-hero-title { word-break: normal; overflow-wrap: normal; }
.prd .prd-title-long { font-size: 84px; }
@media (max-width: 1199px) { .prd .prd-title-long { font-size: 68px; } }
@media (max-width: 767px)  { .prd .prd-title-long { font-size: 50px; } }

/* ==========================================================
   Optional product-page blocks (AI Photobooth). .prd-rich = page-level refinements.
   ========================================================== */

/* ---------- hero: booking button + trust row ---------- */
@media (min-width: 992px) { .prd-rich .asl-hero-copy { padding-right: 40px; } }
.prd-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.prd-hero-actions .asl-hero-cta { width: auto; margin-top: 0; }
.prd-trust { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 30px 0 0; font-size: 11.5px; text-transform: uppercase; color: rgba(45, 44, 43, .62); }
.prd-trust i { font-style: normal; color: var(--asl-red); }

/* ---------- client logos ---------- */
.prd-logos { padding: 0; background: var(--base-color, #f7d2ca); }
.prd-logos-inner { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 24px; padding: 34px 0; border-top: 1px solid var(--asl-line); }
.prd-logos .asl-eyebrow { margin: 0; }
.prd-logos-track { min-width: 0; overflow: hidden; }
.prd-logos .swiper { display: block; width: 100%; }
.prd-logos img { filter: grayscale(1); opacity: .7; mix-blend-mode: multiply; transition: filter .3s ease, opacity .3s ease; }
.prd-logos img:hover { filter: none; opacity: 1; }

/* ---------- how it works: tighter cards + step visuals ---------- */
.prd-rich .asl-pillar { padding: 26px 26px 32px; }
.prd-rich .asl-pillar-top { margin-bottom: 20px; }
.prd-rich .asl-pillar h3 { margin-bottom: 6px; }
.prd-rich .asl-pillar p { margin-bottom: 0; }
/* step images are the focus: full card width */
.prd-rich .prd-step-visual { width: 100%; aspect-ratio: 4 / 5; margin-bottom: 26px; }
.prd-rich .prd-vf { --vf-in: 22px; --vf-len: 30px; --vf-w: 3px; }
.prd-rich .prd-rec { left: 44px; top: 42px; gap: 7px; font-size: 12px; }
.prd-rich .prd-rec b { width: 9px; height: 9px; }
.prd-step-visual { position: relative; width: 132px; aspect-ratio: 1 / 1; margin-bottom: 26px; overflow: hidden; background: var(--asl-night); }
.prd-step-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.is-capture img { object-position: center 30%; }
.prd-vf {
    position: absolute; inset: var(--vf-in, 12px); --c: rgba(255, 255, 255, .92);
    background:
        linear-gradient(var(--c), var(--c)) left top / var(--vf-len, 14px) var(--vf-w, 2px) no-repeat, linear-gradient(var(--c), var(--c)) left top / var(--vf-w, 2px) var(--vf-len, 14px) no-repeat,
        linear-gradient(var(--c), var(--c)) right top / var(--vf-len, 14px) var(--vf-w, 2px) no-repeat, linear-gradient(var(--c), var(--c)) right top / var(--vf-w, 2px) var(--vf-len, 14px) no-repeat,
        linear-gradient(var(--c), var(--c)) left bottom / var(--vf-len, 14px) var(--vf-w, 2px) no-repeat, linear-gradient(var(--c), var(--c)) left bottom / var(--vf-w, 2px) var(--vf-len, 14px) no-repeat,
        linear-gradient(var(--c), var(--c)) right bottom / var(--vf-len, 14px) var(--vf-w, 2px) no-repeat, linear-gradient(var(--c), var(--c)) right bottom / var(--vf-w, 2px) var(--vf-len, 14px) no-repeat;
}
.prd-rec { position: absolute; left: 20px; top: 18px; display: flex; align-items: center; gap: 5px; font-size: 9px; color: #fff; }
.prd-rec b { width: 6px; height: 6px; border-radius: 50%; background: #e5302a; animation: asl-blink 1.4s steps(1) infinite; }
/* hero: the guest's AI output fades in over the live photo, then back (10s loop) */
.asl-hero-photo .prd-hero-after { position: absolute; inset: 0; z-index: 1; overflow: hidden; opacity: 0; animation: prd-hero-fade 10s ease-in-out infinite; }
/* whole AI image shown (contain); a blurred copy of it fills the rest of the frame */
.asl-hero-photo .prd-hero-after img { position: absolute; inset: 0; width: 100%; height: 100%; }
.asl-hero-photo .prd-hero-after-fill { object-fit: cover; filter: blur(28px) brightness(.8); transform: scale(1.15); }
.asl-hero-photo .prd-hero-after-img { object-fit: contain; object-position: center; }
.prd-hero-chip { position: absolute; top: 24px; left: 24px; z-index: 2; display: grid; }
.asl-hero-photo .asl-status { z-index: 2; }
.prd-hero-chip > span {
    grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; justify-self: start; height: 36px; padding: 0 16px; border-radius: 100px;
    background: rgba(30, 29, 29, .85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    font-family: var(--asl-display); font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap;
}
.prd-hero-chip .is-live { animation: prd-hero-fade-out 10s ease-in-out infinite; }
.prd-hero-chip .is-live i { width: 8px; height: 8px; border-radius: 50%; background: #e5302a; animation: asl-blink 1.4s steps(1) infinite; }
.prd-hero-chip .is-ai { opacity: 0; animation: prd-hero-fade 10s ease-in-out infinite; }
.prd-hero-chip .is-ai i { color: var(--asl-yellow); }
@keyframes prd-hero-fade { 0%, 38% { opacity: 0; } 50%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes prd-hero-fade-out { 0%, 38% { opacity: 1; } 50%, 88% { opacity: 0; } 100% { opacity: 1; } }
.prd-note-bar { display: flex; gap: 14px; align-items: baseline; margin: 40px 0 0; padding: 18px 24px; background: var(--asl-red); color: #fff; font-size: 16px; line-height: 1.6; }
.prd-note-bar i { flex-shrink: 0; color: var(--asl-yellow); }

/* ---------- made for the crowd: 2x2 features + stats ---------- */
/* inset shows the AI output at its full (portrait) height */
/* AI output shown as a taped, tilted print */
.prd-rich .asl-case-media:has(.prd-inset-frame) { padding-bottom: 190px; }
.asl-case-media .prd-inset-frame {
    width: 46%; aspect-ratio: auto; margin: 0; padding: 12px 12px 0; border: 0; background: #fff;
    box-shadow: 0 28px 60px rgba(0, 0, 0, .5); transform: rotate(2.5deg); transform-origin: center bottom;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease;
}
.asl-case-media .prd-inset-frame:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 36px 70px rgba(0, 0, 0, .55); }
.prd-inset-frame::before {
    content: ""; position: absolute; top: -14px; left: 50%; z-index: 1; width: 96px; height: 28px; margin-left: -48px;
    background: rgba(240, 208, 56, .82); transform: rotate(-4deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.prd-inset-frame img { display: block; width: 100%; aspect-ratio: 11 / 15; object-fit: cover; }
.prd-inset-frame figcaption { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 2px 14px; }
.prd-inset-frame figcaption span { font-family: var(--asl-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--asl-muted); }
.prd-inset-frame figcaption b { padding: 4px 10px; border-radius: 100px; background: var(--asl-ink); font-family: var(--asl-display); font-size: 12px; font-weight: 600; color: var(--asl-yellow); white-space: nowrap; }
@media (max-width: 767px) {
    .prd-rich .asl-case-media:has(.prd-inset-frame) { padding-bottom: 0; }
    .asl-case-media .prd-inset-frame { width: 62%; padding: 8px 8px 0; margin: 34px 6px 0 auto; }
    .prd-inset-frame figcaption { padding: 9px 1px 10px; }
}
.prd-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; max-width: 470px; }
.prd-features li { padding: 18px 0 20px; border-top: 1px solid var(--asl-line-dark); }
.prd-features .asl-mono { display: block; color: var(--asl-yellow); font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.prd-features strong { display: block; font-family: var(--asl-display); font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.prd-features p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--asl-muted-dark); }
.prd-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 90px 0 0; border-top: 1px solid var(--asl-line-dark); }
.prd-stats div { display: flex; flex-direction: column-reverse; gap: 10px; padding: 30px 26px 0; border-left: 1px solid var(--asl-line-dark); }
.prd-stats div:first-child { border-left: 0; padding-left: 0; }
.prd-stats dd { margin: 0; font-family: var(--asl-display); font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--asl-yellow); }
.prd-stats dt { font-weight: 400; font-size: 11px; text-transform: uppercase; color: var(--asl-muted-dark); }

/* ---------- theme gallery: filters, tags, custom card ---------- */
.prd-round { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; border: 0; transition: transform .3s ease; }
button.prd-round:hover { transform: scale(1.06); }
/* 8 tag cards: title as a single tag on the image */
.prd-themes { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.prd-tagcard figure { position: relative; }
.prd-tile.prd-tagcard figcaption.prd-tagcard-tag {
    position: absolute; top: 14px; left: 14px; display: block; margin: 0; padding: 7px 13px; border: 0; border-radius: 100px;
    background: rgba(255, 255, 255, .94); box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
    font-family: var(--asl-display); font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--asl-ink);
}
/* before/after toggle (cards that have a "before" photo) */
.prd-tagcard .prd-tile-img { position: relative; }
.prd-tagcard-before { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.prd-tagcard.is-before .prd-tagcard-before { opacity: 1; }
.prd-ba-toggle {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 1;
    display: none; width: max-content; padding: 4px; border-radius: 100px; background: rgba(30, 29, 29, .72);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}
.asl-js .prd-ba-toggle { display: flex; }
.prd-ba-toggle button {
    padding: 7px 16px; border: 0; border-radius: 100px; background: transparent; white-space: nowrap;
    font-family: var(--asl-display); font-size: 13px; font-weight: 600; line-height: 1; color: rgba(255, 255, 255, .8); transition: background-color .25s ease, color .25s ease;
}
.prd-ba-toggle button:hover { color: #fff; }
.prd-ba-toggle button[aria-pressed="true"] { background: #fff; color: var(--asl-ink); }
.prd-ba-toggle button[data-ba="after"][aria-pressed="true"] { background: var(--asl-yellow); }
.prd-more { margin-top: 56px; text-align: center; }

/* ---------- in action ---------- */

/* ---------- testimonials ---------- */
.prd-quote-nav { display: none; align-items: center; gap: 12px; margin-top: 44px; }
.asl-js .prd-quote-nav { display: flex; }
.prd-quote-nav .asl-mono { margin-left: 10px; font-size: 12px; color: var(--asl-muted); }
.prd-quote { margin: 0 0 50px; }
.asl-js .prd-quote-list { display: grid; }
.asl-js .prd-quote { grid-area: 1 / 1; margin: 0; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease, visibility 0s .5s; }
.asl-js .prd-quote.is-active { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.prd-quote-mark { display: block; height: 58px; font-family: var(--asl-display); font-size: 120px; font-weight: 600; line-height: .8; }
.prd-quote blockquote { margin: 0; padding: 0; border: 0; }
.prd-quote p { margin: 0 0 30px; font-family: var(--asl-display); font-size: 34px; font-weight: 500; line-height: 1.3; letter-spacing: -0.025em; color: var(--asl-ink); }
/* long client quotes (kept word for word) use a smaller size */
.prd-quote.is-long p { font-size: 22px; line-height: 1.5; letter-spacing: -0.01em; }
.prd-quote figcaption { font-size: 12px; text-transform: uppercase; color: var(--asl-muted); }
.prd-quote figcaption b { margin-right: 12px; font-weight: 700; color: var(--asl-ink); }

/* ---------- faq ---------- */
.prd-faq-list { border-top: 1px solid var(--asl-line); }
.prd-faq-item { border-bottom: 1px solid var(--asl-line); }
.prd-faq-item summary { display: grid; grid-template-columns: 48px 1fr 24px; align-items: center; gap: 0 8px; padding: 24px 0; cursor: pointer; list-style: none; }
.prd-faq-item summary::-webkit-details-marker { display: none; }
.prd-faq-item summary:focus-visible { outline: 2px solid var(--asl-red); outline-offset: 3px; }
.prd-faq-item summary .asl-mono { font-size: 11px; }
.prd-faq-q { font-family: var(--asl-display); font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: var(--asl-ink); transition: color .25s ease; }
.prd-faq-item summary:hover .prd-faq-q { color: var(--asl-red); }
.prd-pm { position: relative; justify-self: end; width: 16px; height: 16px; }
.prd-pm::before, .prd-pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--asl-red); transition: transform .3s ease; }
.prd-pm::after { transform: rotate(90deg); }
.prd-faq-item[open] .prd-pm::after { transform: rotate(0); }
.prd-faq-item p { margin: 0; padding: 0 32px 26px 56px; font-size: 16px; line-height: 1.65; color: var(--asl-muted); }
.prd-faq-item[open] p { animation: asl-open .4s cubic-bezier(.2, .7, .2, 1); }

/* ---------- related products ---------- */
.prd-related { padding-top: 100px; padding-bottom: 100px; }
.prd-related .asl-head { margin-bottom: 44px; }
.prd-related .asl-h2 { font-size: 44px; }
.prd-related .prd-tile-img img { aspect-ratio: 4 / 3; }
.prd-tile-link { display: block; color: inherit; }
.prd-tile-link:hover strong { color: var(--asl-red); }

/* ---------- video ---------- */
.prd-video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--asl-night); }
.prd-video-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(.72); transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.prd-video-frame:hover > img { transform: scale(1.02); }
.prd-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prd-video-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; padding-left: 5px; border-radius: 50%;
    background: var(--asl-red); color: #fff; font-size: 28px; box-shadow: 0 0 0 12px rgba(160, 24, 16, .25); transition: transform .3s ease, box-shadow .3s ease;
}
a.prd-video-play:hover { color: #fff; transform: translate(-50%, -50%) scale(1.07); box-shadow: 0 0 0 18px rgba(160, 24, 16, .22); }
.prd-video-play.is-soon { background: rgba(255, 255, 255, .18); box-shadow: none; }
.prd-video-soon { position: absolute; left: 50%; top: calc(50% + 66px); transform: translateX(-50%); font-family: var(--asl-display); font-size: 15px; font-weight: 600; color: #fff; }
.prd-video-label { position: absolute; left: 24px; bottom: 22px; padding: 8px 14px; background: rgba(30, 29, 29, .85); font-size: 13px; color: #fff; }
.prd-video-frame.is-playing > img, .prd-video-frame.is-playing .prd-video-play, .prd-video-frame.is-playing .prd-video-label { display: none; }

/* ---------- what makes us different ---------- */
.prd-diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--asl-line); border-bottom: 1px solid var(--asl-line); }
.prd-diff-item { padding: 34px 32px 38px; border-left: 1px solid var(--asl-line); transition: background-color .35s ease; }
.prd-diff-item:nth-child(3n+1) { border-left: 0; }
.prd-diff-item:nth-child(n+4) { border-top: 1px solid var(--asl-line); }
.prd-diff-item:hover { background: rgba(255, 255, 255, .55); }
.prd-diff-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; font-size: 14px; }
.prd-diff-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--asl-ink); color: var(--asl-yellow); font-size: 18px; }
.prd-diff-item h3 { margin: 0 0 8px; font-family: var(--asl-display); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: var(--asl-ink); }
.prd-diff-item p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--asl-muted); }

/* ---------- mobile sticky bar ---------- */
.prd-sticky { display: none; }


@media (max-width: 991px) {
    .prd-themes { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .prd-diff-grid { grid-template-columns: repeat(2, 1fr); }
    .prd-diff-item:nth-child(3n+1) { border-left: 1px solid var(--asl-line); }
    .prd-diff-item:nth-child(2n+1) { border-left: 0; }
    .prd-diff-item:nth-child(n+3) { border-top: 1px solid var(--asl-line); }
    .prd-rich .asl-hero-divider { position: static; display: flex; flex-direction: row; gap: 14px; width: 100%; max-width: 720px; margin: 44px auto 0; padding: 0 15px; }
    .prd-rich .asl-hero-divider::before { width: 48px; height: 1px; }
    .prd-rich .asl-hero-divider span { writing-mode: horizontal-tb; transform: none; }
    .prd-rich .asl-hero-photo { margin-top: 24px; }
    .prd-rich .asl-pillar { padding: 28px 4px; }
    .prd-stats { margin-top: 60px; }
    .prd-stats dd { font-size: 44px; }
    .prd-quote p { font-size: 28px; }
    .prd-related { padding-top: 80px; padding-bottom: 80px; }
}
@media (max-width: 767px) {
    .prd-diff-grid { grid-template-columns: 1fr; }
    .prd-diff-item, .prd-diff-item:nth-child(3n+1) { padding: 26px 0; border-left: 0; }
    .prd-diff-item:nth-child(n+2) { border-top: 1px solid var(--asl-line); }
    .prd-diff-top { margin-bottom: 18px; }
    .prd-hero-chip { top: 14px; left: 14px; }
    .prd-rich .asl-hero-photo .asl-status { display: none; }
    /* square photo frame on phones so the square AI image (Chef Mode) fills it, no blurred sides */
    .prd-rich .asl-hero-photo { height: auto; aspect-ratio: 1 / 1; }
    .prd-hero-chip > span { height: 30px; padding: 0 12px; font-size: 12px; }
    .prd-rich .asl-hero-divider { max-width: 540px; }
    .prd-logos-inner { grid-template-columns: 1fr; gap: 14px; padding: 26px 0; }
    .prd-stats { grid-template-columns: 1fr 1fr; }
    .prd-stats div { padding: 24px 0 24px 20px; }
    .prd-stats div:nth-child(odd) { border-left: 0; padding-left: 0; }
    .prd-stats div:nth-child(n+3) { border-top: 1px solid var(--asl-line-dark); }
    .prd-quote-mark { font-size: 90px; height: 44px; }
    .prd-quote p { font-size: 23px; }
    .prd-quote.is-long p { font-size: 17px; }
    .prd-faq-item summary { grid-template-columns: 36px 1fr 20px; padding: 20px 0; }
    .prd-faq-q { font-size: 18px; }
    .prd-faq-item p { padding: 0 0 22px 44px; font-size: 15px; }
    .prd-related .asl-h2 { font-size: 34px; }

    .prd-sticky {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 10000;
        display: flex; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .96); border-top: 1px solid var(--asl-line); box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
    }
    .prd-sticky-book { flex: 1; display: flex; align-items: center; justify-content: center; height: 48px; background: var(--asl-red); font-family: var(--asl-display); font-size: 16px; font-weight: 600; color: #fff; }
    .prd-sticky-wa { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: #25d366; font-size: 26px; color: #fff; }
    .prd-sticky a:hover { color: #fff; }
    body:has(.prd-sticky) { padding-bottom: 68px; }
    body:has(.prd-sticky) .pt-wa { display: none; }
}
@media (max-width: 575px) {
    .prd-rich .asl-hero-divider { max-width: none; }
    .prd-features { gap: 0 18px; }
    .prd-themes { gap: 12px; }
    .prd-tile.prd-tagcard figcaption.prd-tagcard-tag { top: 8px; left: 8px; padding: 5px 9px; font-size: 11.5px; }
    .prd-ba-toggle { bottom: 8px; padding: 3px; }
    .prd-ba-toggle button { padding: 6px 10px; font-size: 11.5px; }
    .prd-video-play { width: 64px; height: 64px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .asl-hero-photo .prd-hero-after, .prd-hero-chip .is-ai { opacity: 0; }
    .prd-hero-chip .is-live { opacity: 1; }
}

/* ==========================================================
   Home page (index.php)
   ========================================================== */
/* the whole page sits in .asl (so the theme's section wrapper stays inside it);
   theme sections keep the theme's body text colour */
.asl.home { color: var(--medium-gray, #727272); }
.home-trust { display: flex; flex-wrap: wrap; gap: 6px 10px; font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: rgba(45, 44, 43, .65); }
.home-trust i { font-style: normal; color: #a01810; }
/* "Smart AI photobooths…" parallax band: darken the left side so the white text reads on a bright photo */
.home-cta-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 19, 19, .82) 0%, rgba(20, 19, 19, .55) 45%, rgba(20, 19, 19, .12) 100%); pointer-events: none; }
@media (max-width: 767px) { .home-cta-shade { background: rgba(20, 19, 19, .6); } }
.home-products { gap: 48px 28px; }
.home-products .prd-tile-img img { aspect-ratio: 4 / 3; }
@media (min-width: 576px) {
    /* AI Photobooth leads: a wide card spanning two columns */
    .home-products > li:first-child:nth-last-child(5) { grid-column: span 2; }
    .home-products > li:first-child:nth-last-child(5) .prd-tile-img img { aspect-ratio: 8 / 3; }
}

/* ---------- 4-column feature grid (.prd-diff-grid.is-4) ---------- */
.prd-diff-grid.is-4 { grid-template-columns: repeat(4, 1fr); }
.prd-diff-grid.is-4 .prd-diff-item { padding: 30px 26px 34px; border-top: 0; border-left: 1px solid var(--asl-line); }
.prd-diff-grid.is-4 .prd-diff-item:nth-child(4n+1) { border-left: 0; }
.prd-diff-grid.is-4 .prd-diff-item:nth-child(n+5) { border-top: 1px solid var(--asl-line); }
.prd-diff-grid.is-4 .prd-diff-item h3 { font-size: 22px; }
.prd-diff-item h3 { line-height: 1.25; }

/* ---------- custom themes (AI Photobooth page) ---------- */
.prd-custom-lead { margin-top: 22px; }
.prd-custom-steps { list-style: none; margin: 32px 0 36px; padding: 0; border-top: 1px solid var(--asl-line); }
.prd-custom-steps li { display: grid; grid-template-columns: 44px 1fr; padding: 16px 0; border-bottom: 1px solid var(--asl-line); }
.prd-custom-steps .asl-mono { padding-top: 4px; font-size: 12px; }
.prd-custom-steps strong { display: block; font-family: var(--asl-display); font-size: 19px; font-weight: 600; color: var(--asl-ink); }
.prd-custom-steps p { margin: 2px 0 0; font-size: 15px; line-height: 1.55; color: var(--asl-muted); }
.prd-custom-collage { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; }
.prd-custom-collage figure { position: relative; margin: 0; overflow: hidden; }
.prd-custom-collage figure:first-child { grid-row: span 2; }
.prd-custom-collage figure:not(:first-child) { aspect-ratio: 4 / 5; }
.prd-custom-collage img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.prd-custom-collage figure:hover img { transform: scale(1.04); }
.prd-custom-collage figcaption {
    position: absolute; left: 12px; bottom: 12px; padding: 6px 13px; border-radius: 100px; background: rgba(255, 255, 255, .94);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14); font-family: var(--asl-display); font-size: 13px; font-weight: 600; color: var(--asl-ink);
}

/* ---------- custom themes strip (home) ---------- */
.home-eyebrow-dark { color: rgba(255, 255, 255, .6); }
.home-custom .asl-lead { margin-top: 22px; }
.home-custom-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 36px; padding: 0; }
.home-custom-steps li { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border: 1px solid var(--asl-line-dark); border-radius: 100px; font-size: 14px; color: #fff; }
.home-custom-steps b { font-family: var(--asl-mono); font-size: 11px; color: var(--asl-yellow); }
.home-custom-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.home-custom-print { position: relative; width: 78%; margin: 0 auto; padding: 12px 12px 0; background: #fff; box-shadow: 0 28px 60px rgba(0, 0, 0, .5); transform: rotate(2.5deg); }

@media (max-width: 991px) {
    .prd-diff-grid.is-4 { grid-template-columns: repeat(2, 1fr); }
    .prd-diff-grid.is-4 .prd-diff-item:nth-child(odd) { border-left: 0; }
    .prd-diff-grid.is-4 .prd-diff-item:nth-child(even) { border-left: 1px solid var(--asl-line); }
    .prd-diff-grid.is-4 .prd-diff-item:nth-child(n+3) { border-top: 1px solid var(--asl-line); }
}
@media (max-width: 767px) {
    .prd-diff-grid.is-4 { grid-template-columns: 1fr; }
    .prd-diff-grid.is-4 .prd-diff-item, .prd-diff-grid.is-4 .prd-diff-item:nth-child(even) { padding: 24px 0; border-left: 0; }
    .prd-diff-grid.is-4 .prd-diff-item:nth-child(n+2) { border-top: 1px solid var(--asl-line); }
    .prd-custom-collage { gap: 10px; }
    .home-custom-print { width: 82%; }
}

/* three-number stats row */
.prd-stats.is-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) {
    .prd-stats.is-3 { grid-template-columns: 1fr 1fr; }
    .prd-stats.is-3 div:nth-child(3) { grid-column: 1 / -1; }
}

/* ==========================================================
   Contact page (contact.php)
   ========================================================== */
.asl.ct { color: var(--medium-gray, #727272); }
.ct-ways .prd-diff-item p { margin-bottom: 14px; }
.ct-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--asl-display); font-size: 15px; font-weight: 600; color: var(--asl-ink); border-bottom: 1px solid currentColor; }
.ct-link:hover { color: var(--asl-red); }
.ct-link i { font-size: 12px; }
.ct-phone { display: flex; flex-direction: column; margin: 0 0 12px !important; }
.ct-phone .asl-mono { font-size: 10.5px; text-transform: uppercase; color: var(--asl-muted); }
.ct-phone a { font-family: var(--asl-display); font-size: 18px; font-weight: 600; color: var(--asl-ink); }
.ct-phone a:hover { color: var(--asl-red); }
#contactForm { scroll-margin-top: 140px; }
.ct-form-card { height: 100%; padding: 48px 48px 36px; background: var(--asl-cream); }
.ct-form-card .asl-eyebrow { margin-bottom: 14px; }
.ct-form-title { font-size: 46px; margin-bottom: 26px; }
.ct-next { display: flex; flex-direction: column; height: 100%; padding: 48px 40px; background: var(--asl-night); color: var(--asl-muted-dark); }
.ct-eyebrow-dark { color: rgba(255, 255, 255, .6); margin-bottom: 14px; }
.ct-next h3 { margin: 0 0 28px; font-family: var(--asl-display); font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; color: #fff; }
.ct-steps { list-style: none; margin: 0 0 32px; padding: 0; border-top: 1px solid var(--asl-line-dark); }
.ct-steps li { display: grid; grid-template-columns: 40px 1fr; padding: 18px 0; border-bottom: 1px solid var(--asl-line-dark); }
.ct-steps .asl-mono { padding-top: 3px; font-size: 12px; font-weight: 700; color: var(--asl-yellow); }
.ct-steps strong { display: block; font-family: var(--asl-display); font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.ct-steps p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.ct-next-btn { align-self: flex-start; margin-top: auto; }
.ct-map iframe { filter: grayscale(.35); }
@media (max-width: 991px) {
    .ct-form-card { padding: 36px 28px 28px; }
    .ct-next { padding: 36px 28px; }
}
@media (max-width: 575px) {
    .ct-form-card { padding: 30px 20px 22px; }
    .ct-form-title { font-size: 36px; }
}