@layer theme, base, components, utilities;@layer components{.guide-page,.hv2-page,.c26-page,.w8r-page,.wcc-page{--bg: var(--color-bg);--bg-soft: var(--color-surface);--lime: var(--color-cta);--bg-lavender: var(--color-surface-brand);--grad-purple: linear-gradient(135deg, #6b43e0 0%, #4f25c8 60%, #3d1aaf 100%);--grad-lavender: linear-gradient(135deg, #eeeafb, #e2dbf6);--grad-lime: linear-gradient(135deg, #d4ff50, #a8e020);--grad-sunset: radial-gradient(120% 120% at 30% 25%, #f2a85c 0%, #e07b2e 60%, #c25e14 100%);--lavender-tint: var(--raw-lavender-pale);--danger-deep: var(--raw-danger-deep);--danger: var(--raw-danger);--danger-light: var(--raw-danger-light);--pill: var(--corner-pill);--radius-lg: var(--corner-lg);--radius-md: var(--corner-md);--s-1: var(--space-1);--s-2: var(--space-2);--s-3: var(--space-3);--s-4: var(--space-4);--s-6: var(--space-6);--s-8: var(--space-8);--s-10: var(--space-10);--s-12: var(--space-12);--s-16: var(--space-16);--lh-tight: 1.04;--lh-snug: 1.25;--lh-normal: 1.45;--lh-relaxed: 1.55}}@layer components{:root{--gba-lime-highlight: #eeffbe}.g-before-after .out-wrap{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}@media (min-width: 980px){.g-before-after .out-wrap{grid-template-columns:.8fr 1.2fr;gap:40px}}.g-before-after .out-list{display:flex;flex-direction:column;gap:12px}.g-before-after .out-plate{display:flex;gap:15px;align-items:flex-start;background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:16px 18px;box-shadow:0 6px 18px color-mix(in oklab,var(--raw-purple-deep) 5%,transparent);transition:transform .15s ease,box-shadow .15s ease}.g-before-after .out-plate:hover{transform:translate(4px);box-shadow:0 12px 28px color-mix(in oklab,var(--raw-purple-deep) 10%,transparent)}.g-before-after .out-plate .pic{width:40px;height:40px;border-radius:var(--corner-sm);background:var(--grad-lavender);color:var(--color-brand);display:flex;align-items:center;justify-content:center;flex:none}.g-before-after .out-plate .pic svg{width:21px;height:21px}.g-before-after .out-plate .pic.num{font-family:Onest;font-weight:800;font-size:var(--type-subheading);letter-spacing:-.03em;border-radius:var(--corner-md);color:var(--color-fg);background:radial-gradient(125% 125% at 30% 24%,var(--gba-lime-highlight) 0%,var(--color-cta) 52%,var(--color-cta-deep) 100%);box-shadow:0 8px 18px color-mix(in oklab,var(--raw-lime-deep) 50%,transparent),inset 0 2px 4px color-mix(in oklab,var(--raw-white) 70%,transparent),inset 0 -3px 6px color-mix(in oklab,var(--raw-lime-deep) 35%,transparent)}.g-before-after .out-plate h3{font-size:var(--type-body);font-weight:800;letter-spacing:-.01em;margin-bottom:3px;line-height:1.2}.g-before-after .out-plate p{font-size:var(--type-body-sm);color:var(--color-muted);line-height:1.4}.g-before-after .ba-cap{font-size:var(--type-caption);font-weight:700;color:var(--color-brand-soft);margin-bottom:12px;display:flex;align-items:center;gap:8px}.g-before-after .ba-cap svg{width:16px;height:16px}.g-before-after .ba{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 24px 60px color-mix(in oklab,var(--raw-ink) 18%,transparent);-moz-user-select:none;user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize;border:1px solid var(--color-border-subtle)}.g-before-after .ba-layer{padding:54px 30px 30px;background:var(--color-surface)}.g-before-after .ba-after{position:absolute;inset:0;z-index:2;clip-path:inset(0 0 0 var(--pos, 50%))}.g-before-after .ba-after .ba-layer{background:linear-gradient(160deg,var(--color-surface),var(--color-surface) 60%);height:100%}.g-before-after .ba-rh{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.g-before-after .ba-rh b{font-size:var(--type-body-lg);font-weight:800;letter-spacing:-.02em;color:var(--color-fg)}.g-before-after .ba-rh span{font-size:var(--type-body-sm);color:var(--color-muted)}.g-before-after .ba-rule{height:1px;background:var(--color-border-subtle);margin:14px 0 16px}.g-before-after .ba-sec{font-size:var(--type-eyebrow);font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}.g-before-after .ba-before .ba-sec{color:var(--color-muted-soft)}.g-before-after .ba-after .ba-sec{color:var(--color-cta-deep)}.g-before-after .ba-after .ba-sec,.g-before-after .ba-after .ba-li{margin-left:12px}.g-before-after .ba-li{position:relative;padding:0 0 9px 22px;font-size:var(--type-body-sm);line-height:1.4;min-height:22px}.g-before-after .ba-li:last-child{padding-bottom:0}.g-before-after .ba-intro{font-size:var(--type-body-sm);font-weight:700;color:var(--color-fg-soft);margin-bottom:10px}.g-before-after .ba-before .ba-li{color:var(--color-muted)}.g-before-after .ba-before .ba-li:before{content:"";position:absolute;left:2px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--color-muted-soft)}.g-before-after .ba-after .ba-li{color:var(--color-fg-soft);font-weight:500;padding-bottom:13px}.g-before-after .ba-after .ba-li:before{content:"";position:absolute;left:0;top:2px;width:15px;height:15px;border-radius:var(--corner-xs);background-color:color-mix(in oklab,var(--raw-lime-deep) 20%,transparent);background-repeat:no-repeat;background-position:center;background-size:10px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376990F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6L9 17l-5-5'/></svg>")}.g-before-after .ba-after .ba-li b{color:var(--color-brand);font-weight:800}.g-before-after .ba-after .ba-li .tool{color:var(--color-muted-soft);font-weight:600}.g-before-after .ba-badge{position:absolute;top:18px;z-index:5;font-size:var(--type-eyebrow);font-weight:800;text-transform:uppercase;letter-spacing:.07em;padding:5px 11px;border-radius:var(--pill);transition:opacity .18s ease}.g-before-after .ba-badge.hide{opacity:0;pointer-events:none}.g-before-after .ba-badge.before{left:18px;background:color-mix(in oklab,var(--raw-danger) 14%,transparent);color:var(--danger)}.g-before-after .ba-badge.after{right:18px;z-index:6;background:var(--color-cta);color:var(--color-fg)}.g-before-after .ba-divider{position:absolute;top:0;bottom:0;left:var(--pos, 50%);width:2px;background:var(--color-surface);box-shadow:0 0 0 1px color-mix(in oklab,var(--raw-purple) 12%,transparent),0 0 14px color-mix(in oklab,var(--raw-ink) 18%,transparent);z-index:7;transform:translate(-1px)}.g-before-after .ba-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:var(--color-surface);box-shadow:0 6px 18px color-mix(in oklab,var(--raw-ink) 28%,transparent);display:flex;align-items:center;justify-content:center;color:var(--color-brand);gap:1px}.g-before-after .ba-handle svg{width:13px;height:13px}.g-before-after .out-cta{text-align:center;margin-top:42px}.g-before-after .out-cta-panel{position:relative;overflow:hidden;background:var(--grad-purple);border-radius:var(--radius-lg);padding:36px 34px;display:flex;flex-direction:column;align-items:center;gap:22px;box-shadow:0 22px 50px color-mix(in oklab,var(--raw-purple-deep) 28%,transparent)}.g-before-after .out-cta-panel:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(80% 120% at 88% 0%,color-mix(in oklab,var(--raw-lime) 22%,transparent),color-mix(in oklab,var(--raw-lime) 0%,transparent) 55%);pointer-events:none}.g-before-after .out-cta-panel p{font-size:var(--type-body-lg);color:var(--color-brand-content);line-height:1.55;max-width:620px;margin:0;position:relative}.g-before-after .out-cta-panel p b{color:var(--color-cta);font-weight:800}@media (max-width: 640px){.g-before-after .ba-layer{padding:48px 22px 24px}.g-before-after .ba-rh b{font-size:var(--type-body-lg)}.g-before-after .ba-li{font-size:var(--type-body-sm)}}}