.seo-template-page .global-before-after{position:relative;overflow:hidden;border-bottom:var(--fg-space-px) solid var(--fg-color-background-15);background-color:var(--fg-color-text);color:var(--fg-color-background)}.seo-template-page .global-before-after__pattern{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--fg-color-background-08) var(--fg-space-px),transparent var(--fg-space-px)),linear-gradient(90deg,var(--fg-color-background-08) var(--fg-space-px),transparent var(--fg-space-px));background-size:var(--fg-grid-cell) var(--fg-grid-cell);mask-image:radial-gradient(ellipse at center,var(--fg-color-text) 30%,transparent 75%)}.seo-template-page .global-before-after__inner{position:relative;max-width:var(--fg-content-7xl);margin-inline:auto;padding:var(--fg-space-20) var(--fg-space-4)}.seo-template-page .global-before-after__header{max-width:var(--fg-content-3xl);margin-inline:auto;text-align:center}.seo-template-page .global-before-after__kicker-row{display:flex;align-items:center;justify-content:center;gap:var(--fg-space-28);margin-bottom:var(--fg-space-8)}.seo-template-page .global-before-after__kicker-row span{width:var(--fg-space-12);height:var(--fg-space-px);background-color:var(--fg-color-background-60)}.seo-template-page .global-before-after__eyebrow{display:inline-flex;align-items:center;gap:var(--fg-space-2);border:var(--fg-space-px) solid var(--fg-color-background-20);border-radius:var(--fg-radius-full);background-color:var(--fg-color-background-10);padding:var(--fg-space-1) var(--fg-space-3);color:var(--fg-color-background-80);font-size:var(--fg-text-11);font-weight:var(--fg-weight-semibold);text-transform:uppercase;letter-spacing:var(--fg-tracking-eyebrow);backdrop-filter:var(--fg-blur-sm)}.seo-template-page .global-before-after__eyebrow-icon,.seo-template-page .global-before-after__label-icon,.seo-template-page .global-before-after__active-icon,.seo-template-page .global-before-after__thumb-svg,.seo-template-page .global-before-after__button-icon{width:var(--fg-icon-sm);height:var(--fg-icon-sm);flex-shrink:0}.seo-template-page .global-before-after__title{margin:var(--fg-space-5) auto 0;max-width:var(--fg-content-4xl);color:var(--fg-color-background);font-size:var(--fg-text-5xl);line-height:var(--fg-leading-none);font-weight:var(--fg-weight-semibold);letter-spacing:var(--fg-tracking-tight)}.seo-template-page .global-before-after__intro{margin:var(--fg-space-5) auto 0}.seo-template-page .global-before-after__showcase{display:grid;gap:var(--fg-space-8);margin-top:var(--fg-space-14)}.seo-template-page .global-before-after__stage{position:relative;min-width:0;min-height:0}.seo-template-page .global-before-after__frame{position:relative;min-width:0;aspect-ratio:4 / 3;overflow:hidden;border:var(--fg-space-px) solid var(--fg-color-background-15);border-radius:var(--fg-radius-3xl);background-color:var(--fg-color-background-05);box-shadow:var(--fg-shadow-before-after);cursor:ew-resize;touch-action:none;user-select:none}.seo-template-page .global-before-after__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.seo-template-page .global-before-after__image--before{clip-path:inset(0 50% 0 0)}.seo-template-page .global-before-after__label{position:absolute;z-index:3;top:var(--fg-space-3);display:inline-flex;align-items:center;gap:var(--fg-space-1-5);border-radius:var(--fg-radius-full);padding:var(--fg-space-1) var(--fg-space-2-5);font-size:var(--fg-text-2xs);font-weight:var(--fg-weight-semibold);text-transform:uppercase;letter-spacing:var(--fg-tracking-eyebrow);backdrop-filter:var(--fg-blur-sm)}.seo-template-page .global-before-after__label--before{left:var(--fg-space-3);background-color:var(--fg-color-text);color:var(--fg-color-background)}.seo-template-page .global-before-after__label--after{right:var(--fg-space-3);background-color:var(--fg-color-background-95);color:var(--fg-color-text)}.seo-template-page .global-before-after__divider{position:absolute;z-index:4;inset-block:0;left:50%;width:var(--fg-space-px);background-color:var(--fg-color-background);transform:translateX(-50%);box-shadow:var(--fg-shadow-outline-subtle)}.seo-template-page .global-before-after__handle{position:absolute;z-index:5;top:50%;left:50%;display:flex;width:var(--fg-space-10);height:var(--fg-space-10);align-items:center;justify-content:center;border:var(--fg-space-px) solid var(--fg-color-background-60);border-radius:var(--fg-radius-full);background-color:var(--fg-color-background);color:var(--fg-color-text);transform:translate(-50%,-50%);box-shadow:var(--fg-shadow-lg)}.seo-template-page .global-before-after__handle-icon,.seo-template-page .global-before-after__hint-icon{width:var(--fg-space-4);height:var(--fg-space-4)}.seo-template-page .global-before-after__hint{position:absolute;z-index:6;left:50%;bottom:var(--fg-space-3);display:none;align-items:center;gap:var(--fg-space-2);border:var(--fg-space-px) solid var(--fg-color-background-20);border-radius:var(--fg-radius-full);background-color:var(--fg-color-text-55);padding:var(--fg-space-1-5) var(--fg-space-3);color:var(--fg-color-white);font-size:var(--fg-text-11);font-weight:var(--fg-weight-medium);transform:translateX(-50%);backdrop-filter:var(--fg-blur-sm);transition:opacity var(--fg-transition-fast)}.seo-template-page .global-before-after.is-comparing .global-before-after__hint{opacity:0}.seo-template-page .global-before-after__active-meta{position:absolute;z-index:7;left:var(--fg-space-4);right:var(--fg-space-4);bottom:var(--fg-space-4);display:flex;align-items:center;gap:var(--fg-space-2);max-width:calc(100% - (var(--fg-space-4) * 2));pointer-events:none}.seo-template-page .global-before-after__active-label,.seo-template-page .global-before-after__active-category{display:inline-flex;min-width:0;max-width:100%;align-items:center;gap:var(--fg-space-1-5);border-radius:var(--fg-radius-full);padding:var(--fg-space-1-5) var(--fg-space-3);backdrop-filter:var(--fg-blur-sm)}.seo-template-page .global-before-after__active-label{background-color:var(--fg-color-background-95);color:var(--fg-color-text);font-size:var(--fg-text-11);font-weight:var(--fg-weight-semibold)}.seo-template-page .global-before-after__active-category{display:none;background-color:var(--fg-color-text-85);color:var(--fg-color-background);font-size:var(--fg-text-11);font-weight:var(--fg-weight-medium)}.seo-template-page .global-before-after__thumb-panel{display:flex;min-width:0;min-height:0;flex-direction:column;gap:var(--fg-space-2);border:var(--fg-space-px) solid var(--fg-color-background-15);border-radius:var(--fg-radius-3xl);background-color:var(--fg-color-background-04);padding:var(--fg-space-3);backdrop-filter:var(--fg-blur-sm)}.seo-template-page .global-before-after__thumb-head{display:flex;justify-content:space-between;padding:var(--fg-space-1) var(--fg-space-2) var(--fg-space-2);color:var(--fg-color-background-60);font-size:var(--fg-text-2xs);font-weight:var(--fg-weight-semibold);text-transform:uppercase;letter-spacing:var(--fg-tracking-eyebrow)}.seo-template-page .global-before-after__thumbs{display:flex;flex-direction:column;gap:var(--fg-space-2)}.seo-template-page .global-before-after__thumb{display:flex;min-width:0;align-items:center;gap:var(--fg-space-3);width:100%;overflow:hidden;border:var(--fg-space-px) solid #fff0;border-radius:var(--fg-radius-2xl);background-color:#fff0;padding:var(--fg-space-2);color:var(--fg-color-background-70);text-align:left;transition:var(--fg-transition-property-interactive) var(--fg-transition-fast)}.seo-template-page .global-before-after__thumb:hover,.seo-template-page .global-before-after__thumb.is-active{border-color:var(--fg-color-background-40);background-color:var(--fg-color-background-15);color:var(--fg-color-background)}.seo-template-page .global-before-after__thumb-media{position:relative;width:var(--fg-space-16);aspect-ratio:1;flex-shrink:0;overflow:hidden;border:var(--fg-space-px) solid var(--fg-color-background-15);border-radius:var(--fg-radius-lg)}.seo-template-page .global-before-after__thumb.is-active .global-before-after__thumb-media{border-color:var(--fg-color-background-40)}.seo-template-page .global-before-after__thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.seo-template-page .global-before-after__thumb-img--preview{object-position:center center}.seo-template-page .global-before-after__thumb-copy{display:flex;min-width:0;flex:1 1 auto;flex-direction:column}.seo-template-page .global-before-after__thumb-title{overflow:hidden;font-size:var(--fg-text-sm);font-weight:var(--fg-weight-semibold);text-overflow:ellipsis;white-space:nowrap}.seo-template-page .global-before-after__thumb-meta{overflow:hidden;color:var(--fg-color-background-50);font-size:var(--fg-text-11);text-overflow:ellipsis;white-space:nowrap}.seo-template-page .global-before-after__thumb-icon{display:none;flex-shrink:0;color:var(--fg-color-background)}.seo-template-page .global-before-after__thumb.is-active .global-before-after__thumb-icon{display:inline-flex}.seo-template-page .global-before-after__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--fg-space-3);margin-top:var(--fg-space-10)}.seo-template-page .global-before-after__button{display:inline-flex;align-items:center;justify-content:center;gap:var(--fg-space-2);border-radius:var(--fg-radius-full);padding:var(--fg-space-3) var(--fg-space-6);font-size:var(--fg-text-sm);line-height:var(--fg-leading-sm);font-weight:var(--fg-weight-semibold);text-decoration:none;transition:transform var(--fg-transition-fast),background-color var(--fg-transition-fast)}.seo-template-page .global-before-after__button--primary{background-color:var(--fg-color-background);color:var(--fg-color-text)}.seo-template-page .global-before-after__button--secondary{border:var(--fg-space-px) solid var(--fg-color-background-35);color:var(--fg-color-background)}.seo-template-page .global-before-after__button:hover{transform:translateY(calc(var(--fg-space-0-5) * -1))}@media (max-width:639px){.seo-template-page .global-before-after__kicker-row{display:none}.seo-template-page .global-before-after__title{font-size:var(--fg-text-4xl);line-height:var(--fg-leading-4xl)}}@media (min-width:640px){.seo-template-page .global-before-after__inner{padding-inline:var(--fg-space-6)}.seo-template-page .global-before-after__active-category{display:inline-flex}.seo-template-page .global-before-after__hint{right:var(--fg-space-4);left:auto;display:inline-flex;transform:none}.seo-template-page .global-before-after__title{font-size:var(--fg-text-6xl)}}@media (min-width:1024px){.seo-template-page .global-before-after__inner{padding-inline:var(--fg-space-8)}.seo-template-page .global-before-after__showcase{grid-template-columns:minmax(0,2fr) minmax(var(--fg-content-side-panel),1fr);align-items:stretch}.seo-template-page .global-before-after__stage,.seo-template-page .global-before-after__thumb-panel{min-height:var(--fg-media-min-height-lg)}.seo-template-page .global-before-after__frame{height:100%;min-height:var(--fg-media-min-height-lg);aspect-ratio:auto}}