/* Genuine desktop and mobile product views with native detail cards. */
.pw-feature-showcase-section { padding-top: 0; padding-bottom: clamp(3rem, 6vw, 6rem); }
.pw-feature-showcase { position: relative; isolation: isolate; max-width: 1200px; margin: 0 auto; padding: 2% 3% 0; }
.pw-feature-showcase::before { content: ''; position: absolute; z-index: -1; inset: -5% -4% 2%; background: url('/assets/img/landing/transparent/homepage-composite-wash.webp') center / 100% 100% no-repeat; opacity: .55; }
.pw-feature-stage { position: relative; padding-bottom: 21%; }
.pw-feature-screen { display: block; width: 88%; overflow: hidden; border-radius: 20px; box-shadow: 0 20px 55px -18px #3c2f1d45, 0 2px 8px #3c2f1d10; background: white; }
.pw-feature-cards { position: absolute; left: -1%; bottom: 0; width: 57%; display: flex; align-items: flex-end; }
.pw-feature-expenses, .pw-feature-sightings { flex: 0 0 56%; overflow: hidden; border-radius: 14px; box-shadow: 0 3px 8px #302b2430, 0 14px 28px -4px #302b2438, 0 30px 60px -12px #302b244d; }
.pw-feature-expenses { position: relative; z-index: 1; transform: rotate(-2deg); }
.pw-feature-sightings { margin-left: -9%; margin-bottom: 8%; transform: rotate(2deg); }
.pw-feature-mobile { position: absolute; width: 24%; right: -1%; bottom: 0; overflow: hidden; padding: 20px 0 16px; border: 6px solid #45423e; border-radius: 32px; background: #f5f4f1; box-shadow: 0 3px 8px #302b2430, 0 18px 40px -8px #302b2455; }
.pw-feature-mobile::before, .pw-feature-mobile::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); height: 4px; border-radius: 4px; background: #45423e; }
.pw-feature-mobile::before { top: 7px; width: 18%; }
.pw-feature-mobile::after { bottom: 5px; width: 30%; }
.pw-feature-mobile img { border-radius: 18px; }
.pw-feature-stage img { display: block; width: 100%; height: auto; }
.pw-feature-showcase figcaption { margin-top: 2rem; max-width: 75%; color: var(--text-muted); font-size: .95rem; line-height: 1.5; }
@media (max-width: 700px) {
    .pw-feature-showcase { padding: 0; }
    .pw-feature-stage { padding-bottom: 42%; }
    .pw-feature-screen { width: 100%; border-radius: 10px; }
    .pw-feature-cards { left: 0; bottom: 6%; width: 72%; align-items: flex-start; }
    .pw-feature-expenses, .pw-feature-sightings { flex: 0 0 56%; border-radius: 8px; box-shadow: 0 2px 5px #302b2426, 0 10px 20px -5px #302b2440; }
    .pw-feature-sightings { margin: 14% 0 0 -14%; }
    .pw-feature-mobile { z-index: 2; width: 28%; right: 0; bottom: 0; padding: 8px 0 7px; border-width: 3px; border-radius: 15px; box-shadow: 0 3px 8px #302b2426, 0 12px 24px -6px #302b2440; }
    .pw-feature-mobile::before { top: 3px; height: 2px; }
    .pw-feature-mobile::after { bottom: 3px; height: 2px; }
    .pw-feature-mobile img { border-radius: 8px; }
    .pw-feature-showcase figcaption { max-width: 100%; font-size: .78rem; margin-top: 1.5rem; }
}

/* Taller native feeding-history and settings panels. */
.pw-feature-showcase--feedings .pw-feature-month { flex-basis: 48%; }
.pw-feature-showcase--feedings .pw-feature-rounds { position: relative; z-index: 2; flex-basis: 30%; margin-left: -2%; margin-bottom: 5%; }
@media (max-width: 700px) {
    .pw-feature-showcase--feedings .pw-feature-month { flex-basis: 47%; }
    .pw-feature-showcase--feedings .pw-feature-rounds { flex-basis: 30%; margin: 18% 0 0 -2%; }
}

/* Give the native medication list breathing room within its cutout card. */
.pw-feature-medication-card { position: relative; z-index: 2; margin-left: -3%; padding: 12px; background: white; }
@media (max-width: 700px) {
    .pw-feature-medication-card { margin-left: -3%; padding: 5px; }
}

/* Keep both contact widget headings visible within the shared composition. */
.pw-feature-showcase--contacts .pw-feature-expenses { margin-bottom: 4%; }
.pw-feature-showcase--contacts .pw-feature-sightings { position: relative; z-index: 2; }
@media (max-width: 700px) {
    .pw-feature-showcase--contacts .pw-feature-expenses { flex-basis: 50%; margin-bottom: 0; }
    .pw-feature-showcase--contacts .pw-feature-sightings { flex-basis: 58%; margin: 16% 0 0 -2%; }
}

/* Native transaction popups tuck into the lower edge of the ledger. */
.pw-feature-showcase--finances .pw-feature-expenses { margin-bottom: 6%; }
.pw-feature-showcase--finances .pw-feature-sightings { position: relative; z-index: 2; margin-left: -5%; margin-bottom: 14%; }
@media (max-width: 700px) {
    .pw-feature-showcase--finances .pw-feature-expenses { flex-basis: 52%; margin-bottom: 0; }
    .pw-feature-showcase--finances .pw-feature-sightings { flex-basis: 54%; margin: 20% 0 0 -4%; }
}

/* A wide native log entry highlights the recorded change below the open filters. */
.pw-feature-showcase--activity .pw-feature-cards { width: 66%; bottom: 12%; }
.pw-feature-showcase--activity .pw-feature-expenses { flex-basis: 100%; padding: 14px; background: white; }
@media (max-width: 700px) {
    .pw-feature-showcase--activity .pw-feature-stage { padding-bottom: 32%; }
    .pw-feature-showcase--activity .pw-feature-cards { width: 69%; bottom: 16%; }
    .pw-feature-showcase--activity .pw-feature-expenses { padding: 6px; }
}

/* Native location charts overlap the map dashboard without hiding their headings. */
.pw-feature-showcase--locations .pw-feature-stage { padding-bottom: 15%; }
.pw-feature-showcase--locations .pw-feature-cards { width: 65%; bottom: 4%; }
.pw-feature-showcase--locations .pw-feature-expenses { flex-basis: 48%; margin-bottom: 7%; }
.pw-feature-showcase--locations .pw-feature-sightings { position: relative; z-index: 2; flex-basis: 51%; margin-left: 1%; margin-bottom: 0; }
@media (max-width: 700px) {
    .pw-feature-showcase--locations .pw-feature-stage { padding-bottom: 32%; }
    .pw-feature-showcase--locations .pw-feature-cards { width: 67%; bottom: 8%; }
    .pw-feature-showcase--locations .pw-feature-expenses { flex-basis: 49%; margin-bottom: 0; }
    .pw-feature-showcase--locations .pw-feature-sightings { flex-basis: 50%; margin: 17% 0 0 1%; }
}

/* A full lists overview uses the same desktop/phone framing as the other features. */
.pw-feature-showcase--lists .pw-feature-stage { padding-bottom: 11%; }
.pw-feature-showcase--lists .pw-feature-screen { transform: none; }
.pw-feature-list-photo { position: absolute; padding: .7%; background: white; border-radius: 7%; box-shadow: 0 3px 7px #302b2420, 0 14px 25px -7px #302b2440; }
.pw-feature-list-photo img { border-radius: 4%; }
.pw-feature-list-photo--gray { z-index: 2; width: 22%; left: -1%; bottom: 12%; transform: rotate(-9deg); }
.pw-feature-list-photo--dog { z-index: 3; width: 19%; left: 13%; bottom: 1%; transform: rotate(7deg); }
.pw-feature-showcase--lists .pw-feature-list-rules { position: absolute; z-index: 4; width: 43%; left: 29%; bottom: 3%; overflow: hidden; border-radius: 2.27% / 4.92%; transform: rotate(-2deg); box-shadow: 0 3px 8px #302b2420, 0 18px 35px -10px #302b2445; }
.pw-feature-showcase--lists .pw-feature-mobile { z-index: 5; right: 7%; }
@media (max-width: 700px) {
    .pw-feature-showcase--lists .pw-feature-stage { padding-bottom: 25%; }
    .pw-feature-showcase--lists .pw-feature-screen { width: 88%; }
    .pw-feature-list-photo--gray { width: 25%; left: 0; bottom: 33%; }
    .pw-feature-list-photo--dog { width: 20%; left: 16%; bottom: 29%; }
    .pw-feature-showcase--lists .pw-feature-list-rules { width: 54%; left: 4%; bottom: 0; }
    .pw-feature-showcase--lists .pw-feature-mobile { right: 3%; }
}

/* The permissions panel sits beside the phone over the desktop team list. */
.pw-feature-showcase--users .pw-feature-stage { padding-bottom: 18%; }
.pw-feature-user-permissions { position: absolute; z-index: 2; width: 37.5%; right: 24%; bottom: 5%; overflow: hidden; border-radius: 2.5%; transform: rotate(-2deg); box-shadow: 0 3px 8px #302b2420, 0 18px 35px -10px #302b2445; }
.pw-feature-showcase--users .pw-feature-mobile { z-index: 3; bottom: 5%; }
@media (max-width: 700px) {
    .pw-feature-showcase--users .pw-feature-stage { padding-bottom: 29%; }
    .pw-feature-showcase--users .pw-feature-screen { width: 88%; }
    .pw-feature-user-permissions { width: 43.5%; right: 29%; bottom: 8%; }
    .pw-feature-showcase--users .pw-feature-mobile { bottom: 8%; }
}

/* Leave the desktop period calendar visible beside the mobile history. */
.pw-feature-showcase--intake .pw-feature-stage { padding-bottom: 16%; }
@media (max-width: 700px) {
    .pw-feature-showcase--intake .pw-feature-stage { padding-bottom: 26%; }
    .pw-feature-showcase--intake .pw-feature-screen { width: 88%; }
}

/* Full placement dashboard with the foster overview on the phone. */
.pw-feature-showcase--foster .pw-feature-stage { padding-bottom: 16%; }
@media (max-width: 700px) {
    .pw-feature-showcase--foster .pw-feature-stage { padding-bottom: 26%; }
    .pw-feature-showcase--foster .pw-feature-screen { width: 88%; }
}

/* The native dashboard stays straight; its calendar and colour settings sit in front. */
.pw-feature-showcase--analytics .pw-feature-stage { padding-bottom: 15%; }
.pw-feature-showcase--analytics .pw-feature-mobile { z-index: 4; right: 3%; bottom: 2%; }
.pw-analytics-calendar, .pw-analytics-settings { position: absolute; overflow: hidden; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-radius: 18px; box-shadow: 0 3px 8px #302b2420, 0 18px 40px -8px #302b2448; }
.pw-analytics-calendar { z-index: 2; width: 29%; left: 1%; bottom: 1%; transform: rotate(-3deg); }
.pw-analytics-settings { z-index: 3; width: 37%; left: 29%; bottom: 5%; transform: rotate(2deg); }
@media (max-width: 700px) {
    .pw-feature-showcase--analytics .pw-feature-stage { padding-bottom: 31%; }
    .pw-feature-showcase--analytics .pw-feature-screen { width: 94%; }
    .pw-feature-showcase--analytics .pw-feature-mobile { width: 28%; right: 0; bottom: 13%; }
    .pw-analytics-calendar, .pw-analytics-settings { border-radius: 7px; }
    .pw-analytics-calendar { width: 35%; left: 0; bottom: 6%; }
    .pw-analytics-settings { width: 43%; left: 31%; bottom: 0; }
}

@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
    .pw-analytics-calendar, .pw-analytics-settings { background: white; }
}