.fb-comparison{margin:64px 0 80px;scroll-margin-top:110px}.fbn-page .compare-heading{max-width:760px;margin-bottom:30px}.fbn-page .compare-heading h3{font-size:2rem;margin:0 0 16px;line-height:1.25}.compare-heading>p:last-child{font-size:1rem;line-height:1.7;color:#aabdaf;margin:0}.compare-grid{display:grid;grid-template-columns:minmax(0,.78fr) 34px minmax(0,1.22fr);gap:22px;align-items:start}.compare-card{--compare-accent:#a1dfb5;min-width:0;padding:28px;border:1px solid #a1dfb53a;border-radius:20px;background:radial-gradient(ellipse at 80% 0,#497e5230,transparent 70%),#192c20}.compare-card.is-before{--compare-accent:#f0a096;background:linear-gradient(135deg,#2d2225,#1d191d);border-color:#bc787835}.compare-tag{display:inline-block;color:var(--compare-accent);font-size:0.75rem;letter-spacing:.12em;line-height:1.5;border:1px solid currentColor;border-radius:100px;padding:6px 11px;margin-bottom:18px}.fbn-page .compare-card h4{font-size:1.5rem;font-weight:500;letter-spacing:-.025em;line-height:1.25;color:#e9f1eb;margin:0 0 12px}.fbn-page .compare-card header>p{font-size:0.875rem;line-height:1.6;color:#a8bcae;margin:0;min-height:68px}.fbn-page .compare-card.is-before h4{color:#e2d8d9}.fbn-page .compare-card.is-before header>p{color:#b29a9d}.compare-art{display:flex;justify-content:center;align-items:center;min-height:490px;padding-top:24px}.compare-art .zoom-target{display:block;width:auto;max-width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}.compare-art img{display:block;width:auto;max-width:100%;height:auto;max-height:490px;border-radius:9px;box-shadow:0 12px 30px #0003}.is-before .compare-art{min-height:400px}.is-before .compare-art img{max-height:400px}.compare-arrow{margin-top:245px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid #9cbba438;color:#a1dfb5;font-size:1.5rem;background:#1b2a21}.compare-card details{margin-top:24px;border-top:1px solid #ffffff16;padding-top:16px;color:#bfa7aa;font-size:0.75rem;line-height:1.6}.compare-card summary{cursor:pointer}.compare-card details .zoom-target{display:block;padding:0;border:0;background:transparent;max-width:100%;margin:20px auto 0;cursor:zoom-in}.compare-card details img{max-height:360px;max-width:100%;height:auto;width:auto;border-radius:8px;display:block}.compare-switch{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:24px;padding-top:20px;border-top:1px solid #a1dfb51a}.compare-switch button{padding:9px 13px;border-radius:100px;border:1px solid #8dba9a33;background:transparent;color:#92ae9b;font-size:0.75rem;cursor:pointer}.compare-switch button[aria-pressed=true]{background:#a1dfb5;color:#193122;border-color:#a1dfb5}.community-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}.community-steps{display:grid;gap:12px}.community-steps button{padding:28px;text-align:left;background:#18271e;border:1px solid #88b29526;border-radius:16px;cursor:pointer;color:#a4baac;transition:background .4s,border-color .4s,transform .4s}.community-steps button[aria-selected=true]{background:linear-gradient(135deg,#304b38,#203627);border-color:#a1dfb56b;transform:translateX(4px);box-shadow:-5px 5px #1b2a21}.community-steps button>span{font-size:0.75rem;letter-spacing:.1em;display:block;color:#98c4a6;margin-bottom:18px}.community-steps button>strong{font-size:1.5rem;font-weight:450;color:#e7f1ea;line-height:1.25;letter-spacing:-.03em}.community-steps button>p{font-size:1rem;line-height:1.7;margin:16px 0 0}.community-connector{font-size:1.5rem;color:#63896e;padding-left:28px}.community-layout .compare-card header>p{min-height:0}.fb-comparison button:focus-visible,.fb-comparison summary:focus-visible{outline:2px solid #bcebc9;outline-offset:4px}
@media(max-width:760px){.compare-grid{grid-template-columns:1fr;gap:20px}.compare-arrow{margin:0 auto;transform:rotate(45deg)}.compare-card{padding:24px}.compare-art{min-height:0}.is-before .compare-art{min-height:0}.compare-art img{max-height:450px}.is-before .compare-art img{max-height:330px}.fbn-page .compare-card header>p{min-height:0}.community-layout{grid-template-columns:1fr;gap:28px}.community-steps button[aria-selected=true]{transform:none}.fbn-page .compare-heading h3{font-size:1.75rem}.fb-comparison{margin:48px 0}.community-steps button{padding:24px}.community-steps button>strong{font-size:1.25rem}}
@media(prefers-reduced-motion:reduce){.community-steps button{transition:none}}html.no-motion .community-steps button{transition:none}
/* Keep portrait sources contained within the comparison, overriding legacy media rules. */
.fbn-page .compare-art .zoom-target{width:auto!important;max-width:100%!important;min-width:0;margin:0 auto}
.fbn-page .compare-art .zoom-target img{width:auto!important;max-width:100%!important;height:auto!important;max-height:490px!important;object-fit:contain}
.fbn-page .is-before .compare-art .zoom-target img{max-height:400px!important}
@media(max-width:760px){.fbn-page .compare-art .zoom-target img{max-height:450px!important}.fbn-page .is-before .compare-art .zoom-target img{max-height:330px!important}}
/* Before and after share an equal comparison canvas and source scale. */
.compare-grid{grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);align-items:stretch}
.compare-grid .compare-card{display:flex;flex-direction:column}
.compare-grid .compare-card header{min-height:160px}
.compare-grid .compare-art,.compare-grid .is-before .compare-art{height:514px;min-height:514px;align-items:flex-start}
.fbn-page .compare-grid .compare-art .zoom-target{width:226px!important}
.fbn-page .compare-grid .compare-art .zoom-target img{width:226px!important;max-height:490px!important;object-fit:contain;object-position:top}
.compare-grid .compare-card details,.compare-grid .compare-switch{margin-top:24px}
@media(max-width:760px){.compare-grid{grid-template-columns:1fr}.compare-grid .compare-card header{min-height:0}.compare-grid .compare-art,.compare-grid .is-before .compare-art{height:474px;min-height:474px}.fbn-page .compare-grid .compare-art .zoom-target,.fbn-page .compare-grid .compare-art .zoom-target img{width:207px!important;max-height:450px!important}}
.fbn-page .compare-grid .compare-art .zoom-target{height:490px!important;background:#fff;border-radius:9px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;box-shadow:0 12px 30px #0003}
.fbn-page .compare-grid .compare-art .zoom-target img{flex-shrink:0;box-shadow:none;border-radius:0}
@media(max-width:760px){.fbn-page .compare-grid .compare-art .zoom-target{height:450px!important}}

/* Transparent device artwork keeps its original silhouette on the shared canvas. */
.fbn-page #mobile-comparison .is-after .compare-art .zoom-target{background:transparent;border-radius:0;overflow:visible;box-shadow:none}