/* Human-selected feed comparison; scoped to this step only. */
.feed-showcase{--ds-card-bg:#fff;--ds-card-text:#222;--ds-card-text-muted:#667085}
.feed-showcase .showcase-title{font-size:clamp(15px,4.8vw,24px);font-weight:900;line-height:1.15;letter-spacing:-.025em;white-space:nowrap;margin:4px 0 23px;color:#0f172a}
.feed-showcase .comparison-label{display:flex;align-items:center;gap:7px;font-size:12px;line-height:20px;font-weight:700;color:#64748b;margin-bottom:8px}
.feed-showcase .comparison-label img{width:20px;height:20px;object-fit:contain}
.feed-showcase .facebook-post-stage{position:relative}
.feed-showcase .social-post{font-family:system-ui,-apple-system,".SFNSText-Regular",sans-serif;background:#fff;border:0;border-radius:12px;padding:12px 12px 0;overflow:visible;color:#111112;box-shadow:0 1px 2px #0003,0 0 0 1px #e0e2e4;transition:opacity .45s ease}
.feed-showcase .social-header{display:flex;align-items:center;gap:8px}
.feed-showcase .social-header>img{width:40px;height:40px;object-fit:cover;border-radius:50%}
.feed-showcase .social-header>div{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.feed-showcase .social-header strong{font-size:15px;line-height:20px;font-weight:600}
.feed-showcase .social-header svg{color:#686a6e;flex-shrink:0}
.feed-showcase .social-meta{display:flex;align-items:center;gap:4px;color:#686a6e;font-size:13px;line-height:16px}
.feed-showcase .social-body{margin:12px 0}
.feed-showcase .social-body p{font-size:15px;line-height:20px;font-weight:400}
.feed-showcase .social-actions{display:flex;align-items:center;gap:20px;height:40px;color:#686a6e}
/* Public glyph sprite and offsets read from the user's actual Facebook feed. */
.feed-showcase .facebook-action{display:block;width:20px;height:20px;background-image:url('/start/showcase/facebook-actions.webp');background-size:21px 857px;background-repeat:no-repeat;filter:invert(.39) sepia(.21) saturate(2) saturate(1.095) hue-rotate(174deg) brightness(.94) contrast(.86)}
.feed-showcase .facebook-like{background-position:0 -441px}.feed-showcase .facebook-comment{background-position:0 -231px}.feed-showcase .facebook-share{background-position:0 -567px}
.feed-showcase .rejection-cross{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;visibility:hidden}
.feed-showcase .rejection-cross path{fill:none;stroke:#ef3434;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.feed-showcase .comparison[data-emphasized=true] .social-post{opacity:.8}
.feed-showcase .comparison[data-emphasized=true] .rejection-cross{visibility:visible}
.feed-showcase .comparison[data-emphasized=true] .rejection-cross path{animation:cross-draw .42s cubic-bezier(.2,.6,.35,1) forwards}
.feed-showcase .comparison[data-emphasized=true] .rejection-cross path+path{animation-delay:.28s}
.feed-showcase .comparison[data-emphasized=true] .carousel-frame{animation:better-feed-bounce .95s cubic-bezier(.22,.61,.36,1) both;transform-origin:50% 65%}
@keyframes cross-draw{to{stroke-dashoffset:0}}
@keyframes better-feed-bounce{0%,100%{transform:translateY(0) scale(1)}25%{transform:translateY(-10px) scale(1.025)}48%{transform:translateY(2px) scale(.992)}70%{transform:translateY(-4px) scale(1.008)}}
.feed-showcase .transformation{height:36px;display:flex;align-items:center;justify-content:center;gap:12px;color:#059669}
.feed-showcase .transformation i{width:38px;height:1px;background:#c9e2d7}
.feed-showcase .transformation span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#ecfdf5}
.feed-showcase .after .comparison-label{color:#0f172a}
.feed-showcase .carousel-frame{filter:drop-shadow(0 6px 12px #0596690c)}
.feed-showcase .feed-carousel{width:100%;overflow:hidden;border-radius:28px;touch-action:pan-y}
.feed-showcase .carousel-track{display:flex;align-items:flex-start;width:100%;transition:transform .62s cubic-bezier(.22,.61,.36,1)}
.feed-showcase .carousel-slide{flex:0 0 100%;min-width:0;display:flex;flex-direction:column}
.feed-showcase .carousel-slide .genuine-post{flex:none}
.feed-showcase .carousel-slide .native-post,.feed-showcase .carousel-slide .native-post>div{height:auto}
.feed-showcase .carousel-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
.feed-showcase .glass-arrow{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid #e2e8f099;background:linear-gradient(145deg,#ffffffdf,#f1f5f98c);color:#536375;box-shadow:inset 0 1px 1px #fff,0 2px 7px #0f172a0b;backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);cursor:pointer;transition:transform .2s ease,opacity .2s ease}
.feed-showcase .glass-arrow:hover:not(:disabled){transform:translateY(-1px)}
.feed-showcase .glass-arrow:active:not(:disabled){transform:scale(.95)}
.feed-showcase .glass-arrow:disabled{opacity:.35;cursor:default}
.feed-showcase .carousel-position{display:flex;align-items:center;gap:5px}
.feed-showcase .carousel-position span{width:4px;height:4px;border-radius:50%;background:#cbd5e1}
.feed-showcase .carousel-position span.active{background:#64748b}
.feed-showcase .genuine-post{position:relative;border-radius:16px;background:white;box-shadow:0 7px 28px #05966914;--ds-card-bg:#fff}
.feed-showcase .native-post>div{margin:0!important;width:100%!important;opacity:1!important}
/* Compact the native card's whitespace for the comparison; preserve its complete
   body, type scale, profile, framing and content order. Never clamp or crop it. */
.feed-showcase .native-post>div>div.px-5{padding:20px 20px 9px}
.feed-showcase .native-post .items-center.text-center.px-5{padding:0}
.feed-showcase .native-post .shrink-0.px-5.pb-4{padding-bottom:4px}
.feed-showcase .native-post button{display:none!important}
.feed-showcase .native-post,.feed-showcase .native-post *{cursor:default!important;pointer-events:none}
.feed-showcase .genuine-post .heart{position:absolute;z-index:5;right:9px;bottom:7px;width:32px;height:32px;border:0;border-radius:0;background:transparent;display:grid;place-items:center;color:#94a3b8;cursor:pointer;transition:color .25s ease}
.feed-showcase .genuine-post .heart.is-hearted{color:#ef3434;background:transparent}
.feed-showcase .genuine-post .heart svg{transition:fill .25s ease;transform-origin:center}
.feed-showcase .genuine-post .heart.is-auto-hearted svg{animation:heart-showcase-bounce .65s .15s cubic-bezier(.22,.61,.36,1) both}
@keyframes heart-showcase-bounce{0%,100%{transform:scale(1)}32%{transform:scale(1.18)}58%{transform:scale(.96)}78%{transform:scale(1.05)}}

@media(prefers-reduced-motion:reduce){.feed-showcase .social-post,.feed-showcase .genuine-post .heart,.feed-showcase .genuine-post .heart svg,.feed-showcase .glass-arrow,.feed-showcase .carousel-track{transition:none}.feed-showcase .comparison[data-emphasized=true] .carousel-frame,.feed-showcase .comparison[data-emphasized=true] .rejection-cross path,.feed-showcase .genuine-post .heart.is-auto-hearted svg{animation:none}.feed-showcase .comparison[data-emphasized=true] .rejection-cross path{stroke-dashoffset:0}}

.feed-showcase .onb-feed-card.fact{height:100%;border-bottom-width:3.5px}
.feed-showcase .onb-feed-card-body{padding:20px 20px 0}
.feed-showcase .onb-card-text-fact{font-size:16px;line-height:1.62;letter-spacing:-.018em;font-weight:520}
.feed-showcase .onb-card-bottom{padding:14px 20px 13px}
.feed-showcase .onb-card-profile{gap:10px}
.feed-showcase .onb-card-profile-name{font-size:13px;line-height:1.12;color:#888;font-weight:600;letter-spacing:-.02em}
.feed-showcase .onb-card-profile-meta{margin-top:2px;line-height:1.12;color:#8cd2c9;letter-spacing:.025em}
.feed-showcase button:focus-visible,.feed-showcase [tabindex]:focus-visible{outline:3px solid #059669;outline-offset:3px}
.feed-showcase .onb-feed-card.fact{height:auto}
.feed-showcase .card-open{position:absolute;inset:0;width:100%;height:100%;z-index:3;border:0;border-radius:28px;background:transparent;cursor:pointer}
.feed-showcase .facebook-comment-origin{position:relative;display:block;width:20px;height:20px}
.feed-showcase .angry-reaction{position:absolute;left:-7px;bottom:-2px;width:34px;height:34px;max-width:none;pointer-events:none;opacity:0;z-index:4;transform-origin:50% 100%}
.feed-showcase .comparison[data-emphasized=true] .angry-reaction{animation:showcase-angry-float 2.3s .15s ease-out both}
@keyframes showcase-angry-float{0%{opacity:0;transform:translate(0,0) scale(.45)}12%{opacity:1;transform:translate(0,-10px) scale(.9)}65%{opacity:.9;transform:translate(15px,-92px) scale(1.08) rotate(-9deg)}100%{opacity:0;transform:translate(30px,-158px) scale(.95) rotate(8deg)}}
.showcase-expanded-dialog{padding:0;width:min(490px,calc(100% - 32px));max-height:82dvh;margin:auto;border:1px solid #ffffffc0;border-radius:24px;background:#fff;color:#0f172a;box-shadow:0 24px 80px #0f172a38;overscroll-behavior:contain;font-family:'DM Sans',sans-serif}
.showcase-expanded-dialog::backdrop{background:#0f172a50;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.showcase-expanded-content{padding:24px}
.showcase-expanded-dialog .expanded-header{display:flex;align-items:center;gap:12px;padding-bottom:20px;border-bottom:1px solid #eef2f5}
.showcase-expanded-dialog .expanded-header>div{flex:1;min-width:0}
.showcase-expanded-dialog .expanded-header h3{font-size:17px;line-height:1.25;font-weight:700;letter-spacing:-.02em}
.showcase-expanded-dialog .expanded-header p{font-size:12px;color:#64748b;margin-top:3px}
.showcase-expanded-dialog .expanded-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0}
.showcase-expanded-dialog .expanded-book-cover{width:54px;height:81px;object-fit:cover;border-radius:3px;box-shadow:0 3px 9px #0f172a20}
.showcase-expanded-dialog .expanded-close{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border:0;border-radius:50%;background:#f1f5f9;color:#64748b;cursor:pointer;align-self:flex-start}
.showcase-expanded-dialog .expanded-reading{padding-top:20px}
.showcase-expanded-dialog .expanded-reading p{font-size:16px;line-height:1.7;letter-spacing:-.012em;margin:0 0 16px}
.showcase-expanded-dialog .expanded-reading .expanded-quotation{font-style:italic;font-size:19px;line-height:1.5}
.showcase-expanded-dialog .expanded-sources{display:flex;gap:12px;flex-wrap:wrap;padding-top:6px}
.showcase-expanded-dialog .expanded-sources a{font-size:11px;color:#64748b;text-decoration:underline;text-underline-offset:3px}
.showcase-expanded-dialog button:focus-visible,.showcase-expanded-dialog a:focus-visible{outline:3px solid #059669;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.feed-showcase .feed-carousel{transition:none}.feed-showcase .comparison[data-emphasized=true] .angry-reaction{animation:none;opacity:0}}

.feed-showcase .feed-carousel[data-navigated=true]{transition:height .62s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){.feed-showcase .feed-carousel[data-navigated=true]{transition:none}}
/* Keep navigation available beside the category label on short phone viewports. */
.feed-showcase .after{position:relative}
.feed-showcase .after>.comparison-label{min-height:32px}
.feed-showcase .carousel-controls{position:absolute;right:0;top:0;margin:0;gap:6px}
.feed-showcase .glass-arrow{width:30px;height:30px;position:relative}
.feed-showcase .glass-arrow::before{content:'';position:absolute;inset:-5px}
.feed-showcase .carousel-position{gap:4px}