/* provider_reviews/_alternatives.antlers.html — moved out of the template on 2026-10-21 (owner: "move inline css and js to cached files"); edit here, the template loads it with {{ zz_asset:css }} */
.alt-sec .alt-podium{list-style:none;margin:42px 0 0; /* room for the "We recommend" tape (sits 28px above the grid: badge -14px + the middle sheet 10px taller and lifted 4px); at 18px it touched the H2 (owner 2026-10-03 "more space to the headline") */padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;align-items:stretch}
.alt-sec .alt-podium li{display:flex;flex-direction:column;min-width:0} /* every sheet fills its row: same height (owner 2026-10-04 "boxes should be same height"), the buttons on the bottom edge */
.alt-sec .alt-podium.n3 .ai-1{order:2}.alt-sec .alt-podium.n3 .ai-2{order:1}.alt-sec .alt-podium.n3 .ai-3{order:3}
.alt-sec .alt-podium.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.alt-sec .alt-podium.n1{grid-template-columns:minmax(0,1fr);max-width:360px}
.alt-sec .pd{position:relative;isolation:isolate;display:flex;flex-direction:column;flex:1 1 auto;background:#fdfbf7;border-radius:var(--r-card);padding:16px;color:#2b2620;cursor:pointer; /* the whole sheet follows its link (data-go / data-go-same, script below) */
box-shadow:0 1px 1px rgba(43,38,32,.07),0 2px 2px rgba(43,38,32,.07),0 4px 4px rgba(43,38,32,.07),0 8px 8px rgba(43,38,32,.07),0 16px 16px -6px rgba(43,38,32,.1),inset 0 -30px 36px -30px rgba(43,38,32,.16);
transition:rotate .26s cubic-bezier(.23,1,.32,1),translate .26s cubic-bezier(.23,1,.32,1),box-shadow .26s ease}
.alt-sec .pd::before{content:"";position:absolute;inset:0;border-radius:var(--r-card);z-index:-1;pointer-events:none;background:none} /* smooth light paper like the home's top 3 categories, no grain (owner 2026-10-13 screenshot of the home sheets: "make these 3 boxes on the whole pages … look in this style") */
.alt-sec .n3 .ai-2 .pd{rotate:-1.4deg}.alt-sec .n3 .ai-3 .pd{rotate:1.2deg}
.alt-sec .n3 .ai-1 .pd{padding-top:26px;margin-top:-10px;translate:0 -4px;z-index:1} /* the middle sheet: 10px taller than its neighbours (grows upwards, bottom edges 4px apart; owner 2026-10-04 "center box maybe a little bit higher") */
@media(hover:hover){.alt-sec .pd:hover{rotate:0deg;translate:0 -3px}.alt-sec .n3 .ai-1 .pd:hover{translate:0 -7px}}
.alt-sec .pd .pd-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-1.5deg);background:#a33d2e;color:#fff;font:600 17.5px 'Caveat',cursive;padding:3px 13px;white-space:nowrap;box-shadow:0 2px 4px -1px rgba(43,38,32,.3);z-index:3}
.alt-sec .pd .pd-name{display:block;text-align:center;font:800 17.5px 'Libre Franklin',sans-serif;overflow-wrap:anywhere;margin-bottom:8px}
.alt-sec .pd .pd-logo{display:flex;align-items:center;justify-content:center;height:48px;width:184px;max-width:100%;margin:2px auto 0;overflow:hidden}
.alt-sec .pd .pd-logo img{display:block;max-width:100%;max-height:100%;height:100%;width:auto;object-fit:contain}
.alt-sec .pd .pd-logo.sq{height:72px} /* square-ish logo (ratio under 2), like the category podium (2026-10-04) */
.alt-sec .pd .pd-score{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 6.5px;margin-top:8px}
.alt-sec .pd .pd-score b{font:800 21.5px/1 'Libre Franklin',sans-serif;color:#2b2620}
.alt-sec .pd .pd-score .stars{font-size:15px;letter-spacing:1px}.alt-sec .pd .pd-score .stars .on{color:#a33d2e}.alt-sec .pd .pd-score .stars .off{color:#d9c9a7}
.alt-sec .pd .pd-score i{font:600 16px 'Caveat',cursive;color:#a33d2e;font-style:normal}
.alt-sec .pd .pd-score + .pd-cta,.alt-sec .pd .pd-score + .pd-ghost{margin-top:auto} /* pushes the button row to the bottom; the 13px gap below the score comes from .pd-score */
.alt-sec .pd .pd-score{margin-bottom:13px}
.alt-sec .pd .pd-cta{display:block;text-align:center;background:#a33d2e;color:#fff;font:700 14.5px 'Libre Franklin',sans-serif;padding:11px 8.5px;border-radius:var(--r-ctl);margin-top:13px;white-space:nowrap;text-decoration:none}
.alt-sec .pd .pd-cta.named{white-space:normal} /* "Visit Zooook.org" may wrap (Clickout::sellName) */
.alt-sec .pd .pd-cta.quiz{white-space:normal}.alt-sec .pd .pd-cta.quiz .s{display:none} /* "Is right for me?" may wrap on the sheet; phones show the short label */
.alt-sec .pd .pd-rev{display:block;text-align:center;font:600 12.5px 'Libre Franklin',sans-serif;color:#a33d2e;text-decoration:underline;text-underline-offset:3px;margin-top:8px}
.alt-sec .pd .pd-ghost{display:block;text-align:center;border:1.5px solid #2b2620;color:#2b2620;font:700 14.5px 'Libre Franklin',sans-serif;padding:9.5px 8.5px;border-radius:var(--r-ctl);margin-top:13px;white-space:nowrap;text-decoration:none} /* no campaign: the category card's outlined "Read review" instead of a red button (owner 2026-10-03 "better than boxes do not /link out to service or review if no campaign, should behave exactly like dating sites one"), same window; the extra class "ghost" opts out of the layout's `li a` underline rule */
@media(max-width:639px){
.alt-sec .alt-podium,.alt-sec .alt-podium.n2{display:flex;flex-direction:column;gap:13px}
.alt-sec .alt-podium.n3 .ai-1,.alt-sec .alt-podium.n3 .ai-2,.alt-sec .alt-podium.n3 .ai-3{order:0}
.alt-sec .n3 .ai-1 .pd{translate:0 0;margin-top:0}.alt-sec .n3 .ai-2 .pd,.alt-sec .n3 .ai-3 .pd{rotate:0deg}
.alt-sec .pd{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name cta" "score cta" "rev rev";align-items:center;column-gap:12px;padding:13px 13px 13px 21px}
.alt-sec .pd .pd-rev{grid-area:rev;text-align:left;margin-top:6px}
.alt-sec .pd .pd-name{grid-area:name;text-align:left;font-size:16px;margin:0}
.alt-sec .pd .pd-logo{display:none}
.alt-sec .pd .pd-score{grid-area:score;justify-content:flex-start;margin-bottom:0}
.alt-sec .pd .pd-cta,.alt-sec .pd .pd-score + .pd-cta{grid-area:cta;margin:0;padding:11px 14px}
.alt-sec .pd .pd-cta.quiz .l{display:none}.alt-sec .pd .pd-cta.quiz .s{display:inline}
.alt-sec .pd .pd-ghost,.alt-sec .pd .pd-score + .pd-ghost{grid-area:cta;margin:0;padding:9.5px 14px}
.alt-sec .n3 .ai-1 .pd{padding-top:24px}
}