.dims-before-after{box-sizing:border-box;padding:clamp(96px,11vw,168px) max(24px,calc((100vw - 1280px)/2));background:#fff;color:#101114;overflow:hidden}.dims-before-after *,.dims-before-after *:before,.dims-before-after *:after{box-sizing:border-box}.dims-before-after__heading{max-width:760px;margin:0 auto clamp(48px,6vw,76px);text-align:center}.dims-before-after__heading .dims-section-tag{margin:0 0 18px}.dims-before-after__heading h2{margin:0;font-size:clamp(42px,5.2vw,76px);line-height:.98;letter-spacing:-.055em;font-weight:590}.dims-before-after__heading>p:last-child{max-width:630px;margin:24px auto 0;color:#6b6d73;font-size:clamp(17px,1.5vw,21px);line-height:1.45}.dims-before-after__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.dims-before-after__card{position:relative;min-height:650px;border-radius:28px;overflow:hidden}.dims-before-after__card-copy{position:relative;z-index:4;padding:38px 40px}.dims-before-after__card-copy p{margin:0 0 8px;font-size:14px;font-weight:650;letter-spacing:.02em}.dims-before-after__card-copy h3{margin:0;font-size:clamp(24px,2.3vw,36px);letter-spacing:-.035em;line-height:1.08}.dims-before-after__card--before{border:1px solid #dedfe3;background:linear-gradient(180deg,#fff 0%,#fafafa 100%)}.dims-before-after__card--before .dims-before-after__card-copy p{color:#85878e}.dims-before-after__drop-zone{position:absolute;inset:142px 22px 20px}.dims-before-after__tool,.dims-before-after__message{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid #dedfe3;border-radius:14px;background:rgba(255,255,255,.96);box-shadow:0 13px 32px rgba(18,20,27,.08);color:#4b4d54;font-size:15px;font-weight:550;opacity:0;transform:translate3d(var(--drop-x,0),-430px,0) rotate(var(--drop-r,0deg))}.dims-before-after.is-visible .dims-before-after__tool,.dims-before-after.is-visible .dims-before-after__message{animation:dims-drop-in .8s cubic-bezier(.2,.8,.2,1.12) calc(var(--drop-i)*90ms) forwards}.dims-before-after__tool-mark{display:grid;place-items:center;width:29px;height:29px;flex:0 0 auto;border-radius:9px;background:#f0f0f2;color:#1a1b1f;font-size:10px;font-weight:800}.dims-before-after__tool:nth-child(1){--drop-x:-3%;--drop-r:-8deg;left:5%;bottom:10%}.dims-before-after__tool:nth-child(2){--drop-x:5%;--drop-r:7deg;left:35%;bottom:20%}.dims-before-after__tool:nth-child(3){--drop-x:-2%;--drop-r:-4deg;right:6%;bottom:8%}.dims-before-after__tool:nth-child(4){--drop-x:4%;--drop-r:5deg;left:11%;bottom:30%}.dims-before-after__tool:nth-child(5){--drop-x:-4%;--drop-r:-7deg;right:17%;bottom:34%}.dims-before-after__tool:nth-child(6){--drop-x:3%;--drop-r:6deg;left:28%;bottom:3%}.dims-before-after__tool:nth-child(7){--drop-x:-2%;--drop-r:-3deg;right:2%;bottom:23%}.dims-before-after__tool:nth-child(8){--drop-x:2%;--drop-r:4deg;left:2%;bottom:20%}.dims-before-after__message{align-items:flex-start;max-width:290px;padding:13px 16px;font-size:13px;line-height:1.3}.dims-before-after__message span:last-child{display:grid;gap:2px}.dims-before-after__message:nth-of-type(9){--drop-x:-4%;--drop-r:-5deg;left:9%;bottom:43%}.dims-before-after__message:nth-of-type(10){--drop-x:3%;--drop-r:6deg;right:5%;bottom:48%}.dims-before-after__avatar{display:grid;place-items:center;width:28px;height:28px;flex:0 0 auto;border-radius:50%;color:#fff;background:#2c2d31;font-size:11px;font-weight:700}.dims-before-after__card--after{background:#08090b;color:#fff}.dims-before-after__card--after:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 62%,rgba(109,87,255,.2),transparent 42%)}.dims-before-after__card--after .dims-before-after__card-copy p{color:#999ba4}.dims-before-after__system{position:absolute;inset:130px 0 0;display:grid;place-items:center}.dims-before-after__orbit{position:relative;width:min(72%,430px);aspect-ratio:1;border:1px solid rgba(255,255,255,.25);border-radius:50%;animation:dims-orbit 30s linear infinite}.dims-before-after__orbit:before{content:"";position:absolute;inset:18%;border:1px solid rgba(255,255,255,.1);border-radius:inherit}.dims-before-after__orbit-item{position:absolute;inset:50% auto auto 50%;transform:rotate(calc(var(--orbit-i)*60deg)) translateX(min(36vw,215px)) rotate(calc(var(--orbit-i)*-60deg));transform-origin:0 0}.dims-before-after__orbit-item>span{display:block;transform:translate(-50%,-50%);padding:10px 15px;white-space:nowrap;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:#1c1e23;color:#e4e4e7;font-size:13px;font-weight:600;animation:dims-counter-orbit 30s linear infinite}.dims-before-after__core{position:absolute;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:18px;font-weight:600;letter-spacing:-.03em}.dims-before-after__core img{width:72px;height:72px;border-radius:50%;box-shadow:0 0 0 12px rgba(255,255,255,.04),0 0 70px rgba(114,94,255,.45)}@keyframes dims-drop-in{0%{opacity:0;transform:translate3d(var(--drop-x),-430px,0) rotate(var(--drop-r))}70%{opacity:1}100%{opacity:1;transform:translate3d(0,0,0) rotate(var(--drop-r))}}@keyframes dims-orbit{to{transform:rotate(360deg)}}@keyframes dims-counter-orbit{to{transform:translate(-50%,-50%) rotate(-360deg)}}@media(max-width:820px){.dims-before-after__grid{grid-template-columns:1fr}.dims-before-after__card{min-height:570px}.dims-before-after__orbit{width:min(74vw,390px)}.dims-before-after__orbit-item{transform:rotate(calc(var(--orbit-i)*60deg)) translateX(min(37vw,195px)) rotate(calc(var(--orbit-i)*-60deg))}}@media(max-width:520px){.dims-before-after{padding-inline:14px}.dims-before-after__heading{padding-inline:10px}.dims-before-after__card{min-height:520px;border-radius:28px}.dims-before-after__card-copy{padding:28px 25px}.dims-before-after__tool,.dims-before-after__message{scale:.84}.dims-before-after__drop-zone{inset-inline:8px}.dims-before-after__orbit-item>span{padding:8px 11px;font-size:11px}}@media(prefers-reduced-motion:reduce){.dims-before-after__tool,.dims-before-after__message{opacity:1;transform:rotate(var(--drop-r));animation:none!important}.dims-before-after__orbit,.dims-before-after__orbit-item>span{animation:none!important}}
/* Keep orbit labels comfortably inside the dark card at every breakpoint. */
.dims-before-after .dims-before-after__orbit-item{transform:rotate(calc(var(--orbit-i)*60deg)) translateX(min(31vw,185px)) rotate(calc(var(--orbit-i)*-60deg))}
@media(max-width:820px){.dims-before-after .dims-before-after__orbit-item{transform:rotate(calc(var(--orbit-i)*60deg)) translateX(min(31vw,170px)) rotate(calc(var(--orbit-i)*-60deg))}}
/* Section-specific sizing aligned with the marketing page's standard headlines/cards. */
#before-after .dims-before-after__heading h2{font-size:47px;line-height:1.04;letter-spacing:-.045em}
#before-after .dims-before-after__card{min-height:520px}
#before-after .dims-before-after__drop-zone{inset:118px 22px 16px}
#before-after .dims-before-after__system{inset:104px 0 0}
#before-after .dims-before-after__orbit{width:min(64%,350px)}
#before-after .dims-before-after__orbit-item{transform:rotate(calc(var(--orbit-i)*60deg)) translateX(min(27vw,155px)) rotate(calc(var(--orbit-i)*-60deg))}
@media(max-width:820px){#before-after .dims-before-after__heading h2{font-size:47px}#before-after .dims-before-after__card{min-height:500px}#before-after .dims-before-after__system{inset:102px 0 0}#before-after .dims-before-after__orbit{width:min(68vw,330px)}#before-after .dims-before-after__orbit-item{transform:rotate(calc(var(--orbit-i)*60deg)) translateX(min(28vw,145px)) rotate(calc(var(--orbit-i)*-60deg))}}
@media(max-width:520px){#before-after .dims-before-after__heading h2{font-size:40px}#before-after .dims-before-after__card{min-height:430px}}
/* Real app marks replace the temporary letter monograms. */
.dims-before-after__tool-mark img{display:block;width:100%;height:100%;border-radius:8px;object-fit:cover}.dims-before-after__tool-mark>span{font-size:10px;letter-spacing:1px}
/* Dimensions center mark presented as an iOS-style app tile. */
#before-after .dims-before-after__core img{box-sizing:border-box;width:76px;height:76px;padding:9px;border:1px solid rgba(255,255,255,.82);border-radius:19px;background:#fff;object-fit:contain;box-shadow:0 0 0 10px rgba(255,255,255,.04),0 16px 38px rgba(0,0,0,.28),0 0 68px rgba(114,94,255,.42)}
/* Typography and status treatment for a clearer before/after hierarchy. */
section#before-after .dims-before-after__heading h2{font-weight:650;letter-spacing:-.025em}
section#before-after .dims-before-after__card-copy h3{line-height:1.12;letter-spacing:-.015em}
section#before-after .dims-before-after__card-copy p{display:inline-flex;align-items:center;width:max-content;margin-bottom:12px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1;letter-spacing:.01em}
section#before-after .dims-before-after__card--before .dims-before-after__card-copy p{color:#b42318;background:#fee4e2}
section#before-after .dims-before-after__card--after .dims-before-after__card-copy p{color:#14532d;background:#bbf7d0}
@media(max-width:520px){section#before-after .dims-before-after__core{gap:7px;font-size:14px}section#before-after .dims-before-after__core img{width:60px;height:60px;padding:7px;border-radius:15px}}
@media(max-width:520px){section#before-after .dims-before-after__system .dims-before-after__orbit-item{transform:rotate(calc(var(--orbit-i)*60deg)) translateX(min(34vw,165px)) rotate(calc(var(--orbit-i)*-60deg))}}
@media(max-width:520px){section#before-after .dims-before-after__heading h2{font-size:32px;line-height:1.08}section#before-after .dims-before-after__heading>p:last-child{font-size:16px;line-height:1.45}section#before-after .dims-before-after__drop-zone{bottom:44px}}
@media(max-width:520px){section#before-after .dims-before-after__card-copy{display:flex;flex-direction:column;align-items:center;text-align:center}section#before-after .dims-before-after__system{inset:102px 0 24px}}
@media(max-width:520px){section#before-after .dims-before-after__system{inset:118px 0 24px}section#before-after .dims-before-after__tool:nth-child(1){left:3%;bottom:5%}section#before-after .dims-before-after__tool:nth-child(2){left:38%;bottom:24%}section#before-after .dims-before-after__tool:nth-child(3){right:3%;bottom:2%}section#before-after .dims-before-after__tool:nth-child(4){left:5%;bottom:38%}section#before-after .dims-before-after__tool:nth-child(5){right:9%;bottom:34%}section#before-after .dims-before-after__tool:nth-child(6){left:31%;bottom:0}section#before-after .dims-before-after__tool:nth-child(7){right:0;bottom:20%}section#before-after .dims-before-after__tool:nth-child(8){left:0;bottom:17%}section#before-after .dims-before-after__message:nth-of-type(9){left:5%;bottom:49%}section#before-after .dims-before-after__message:nth-of-type(10){right:2%;bottom:62%}}

/* Message indices follow the seven currently visible tool cards. */
#before-after .dims-before-after__message:nth-of-type(8){--drop-x:-4%;--drop-r:-5deg;left:9%;bottom:43%}
#before-after .dims-before-after__message:nth-of-type(9){--drop-x:3%;--drop-r:6deg;left:auto;right:5%;bottom:48%}

@media(max-width:520px){#before-after .dims-before-after__message:nth-of-type(8){left:5%;bottom:49%}#before-after .dims-before-after__message:nth-of-type(9){left:auto;right:2%;bottom:62%}}
html section#before-after .dims-before-after__heading h2{font-family:"SF Pro Display Medium","SF Pro Display Medium Placeholder",system-ui,sans-serif;font-weight:500;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
html section#before-after .dims-before-after__heading h2{max-width:20ch;margin-left:auto;margin-right:auto}
section#before-after .dims-before-after__card-copy{display:flex;flex-direction:column;align-items:center;text-align:center}