.before-after{gap:var(--space-5);margin:0;flex-direction:column;width:100%;max-width:26rem;margin-inline:auto;padding:0;display:flex}.before-after__card{border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);clip-path:inset(0 round var(--radius-lg));background-color:#fff;flex-direction:column;display:flex;position:relative;overflow:hidden}.before-after__card--before{filter:saturate(.45)contrast(.95);opacity:.94}.before-after__card--after{border-color:#ff5a1f47;box-shadow:0 4px 10px #ff5a1f14,0 14px 28px #00000014}.before-after__card--after:before{content:"";z-index:2;pointer-events:none;background:linear-gradient(#bf2b15 0%,#e52c1f 35%,#ff5a1f 70%,#f4a301 100%);width:4px;position:absolute;inset:0 auto 0 0}.before-after__chrome{border-bottom:1px solid var(--color-border);background:#efece6;align-items:center;gap:.4rem;padding:.55rem .75rem;display:flex}.before-after__chrome--brand{background:linear-gradient(#f7f7f5 0%,#efece6 100%)}.before-after__dot{background:#c8c8c4;border-radius:50%;flex-shrink:0;width:.5rem;height:.5rem}.before-after__dot--r{background:#ff7d4d}.before-after__dot--y{background:#f4a301}.before-after__dot--g{background:#16a34a}.before-after__url{min-width:0;font-family:var(--font-mono);color:var(--color-muted);border:1px solid var(--color-border);text-align:center;text-overflow:ellipsis;white-space:nowrap;background:#fff;border-radius:999px;flex:1;margin-left:.4rem;padding:.18rem .55rem;font-size:.65rem;line-height:1;overflow:hidden}.before-after__viewport{flex-direction:column;gap:.7rem;min-height:9.5rem;padding:.85rem 1rem 1rem;display:flex}.before-after__viewport--before{background:#f7f6f2}.before-after__viewport--after{background:radial-gradient(circle at 100% 0,#ff5a1f17,#0000 65%),#fff}.before-after__nav{border-bottom:1px solid #e5e1d8;align-items:center;gap:.45rem;padding-bottom:.55rem;display:flex}.before-after__card--after .before-after__nav{border-bottom-color:var(--color-border)}.before-after__bar{background:#c8c5be;border-radius:2px;flex-shrink:0;height:.5rem;display:inline-block}.before-after__card--after .before-after__bar{background:#d2d4d8}.before-after__bar--logo{border-radius:3px;width:1.6rem;height:.7rem;margin-right:auto}.before-after__bar--brand{background:linear-gradient(135deg,#ff5a1f 0%,#f4a301 100%)}.before-after__bar--menu{width:.85rem}.before-after__hero--before{flex-direction:column;gap:.3rem;display:flex}.before-after__hero--before .before-after__bar--title{background:#aaa69b;width:60%;height:.7rem}.before-after__hero--before .before-after__bar--lead{background:#c5c2b8;width:92%;height:.4rem}.before-after__hero--before .before-after__bar--lead.before-after__bar--short{width:60%}.before-after__hero--after{flex-direction:column;gap:.4rem;display:flex}.before-after__hero--after .before-after__bar--eyebrow{background:linear-gradient(90deg,#e52c1f,#f4a301);width:2.4rem;height:.32rem;margin-bottom:.1rem}.before-after__hero--after .before-after__bar--title-big{background:var(--color-ink);border-radius:3px;width:80%;height:.95rem}.before-after__hero--after .before-after__bar--lead{background:#cdcfd3;width:92%;height:.42rem}.before-after__hero--after .before-after__bar--lead.before-after__bar--short{width:65%}.before-after__hero--after .before-after__bar--cta{background:linear-gradient(135deg,#e52c1f 0%,#ff5a1f 60%,#f4a301 100%);border-radius:999px;width:4.6rem;height:1.05rem;margin-top:.45rem;box-shadow:0 2px 6px #ff5a1f66}.before-after__grid{grid-template-columns:repeat(3,1fr);gap:.45rem;margin-top:auto;display:grid}.before-after__block{background:#c5c2b8;border-radius:2px;height:1.6rem;display:block}.before-after__card--after .before-after__block--card{border:1px solid var(--color-border);background:#fff;border-radius:4px;height:1.95rem;position:relative;overflow:hidden;box-shadow:0 1px 3px #0000000a}.before-after__card--after .before-after__block--card:before{content:"";background:linear-gradient(#e52c1f,#f4a301);width:2px;position:absolute;inset:0 auto 0 0}.before-after__chip{top:var(--space-3);right:var(--space-3);z-index:3;font-family:var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted);border:1px solid var(--color-border);pointer-events:none;background:#fffffff0;border-radius:999px;padding:.18rem .6rem;font-size:.62rem;font-weight:700;position:absolute}.before-after__chip--brand{color:#fff;background:linear-gradient(135deg,#e52c1f 0%,#ff5a1f 65%,#f4a301 100%);border-color:#0000;box-shadow:0 2px 6px #ff5a1f59}.before-after__badge{bottom:var(--space-3);right:var(--space-3);z-index:3;font-family:var(--font-mono);letter-spacing:.02em;color:var(--color-muted);border:1px solid var(--color-border);pointer-events:none;background:#fff;border-radius:4px;padding:.22rem .55rem;font-size:.62rem;font-weight:600;position:absolute}.before-after__badge--brand{color:var(--color-brand-dark);background:#ff5a1f1a;border-color:#ff5a1f59;box-shadow:0 1px 3px #ff5a1f29}.before-after__badge--brand:before{content:"✓";color:var(--color-success);margin-right:.3rem;font-weight:700}@media (prefers-reduced-motion:no-preference){.before-after__card{transition:transform .28s cubic-bezier(.34,1.2,.64,1),box-shadow .28s,filter .28s,opacity .28s}.before-after:hover .before-after__card--before{filter:saturate(.55)contrast(.96);opacity:.97;transform:translate(-3px)}.before-after:hover .before-after__card--after{transform:translate(3px);box-shadow:0 6px 14px #ff5a1f29,0 18px 36px #0000001a}}